HTML widgets support

[durraniu]

I just tried rolldown and it is great! Thank you for your hardwork.

If I replace the plots in the sidebar example with a leaflet map, the map on the sidebar works fine. But the main map (in the right pane) has a weird behavior. If I click on the zoom buttons '+' or '-', the page moves to the top.

Also, is there a way to render everything (map/plot) in a way that it takes up the complete space in the right pane (just like the table in the first section takes up the complete width)?

Reproducible example

---
title: "Scrollama Document (Sidebar Layout)"
author: "Anonymous Llama"
date: "`r Sys.Date()`"
output: rolldown::scrollama_sidebar
---

```{css, echo=FALSE}
.level1 {
  min-height: 400px;
  border: 1px solid;
  margin-bottom: 4em;
  padding: 1em 2em 2em;
  opacity: .5;
}
.is-active {
  opacity: 1;
  background-color: lightyellow;
}
body {
  margin-bottom: 80vh;
}
```



# Introduction

## Level-two heading

Level-two and below headings...

### Level-three

...are all contained in the same section.

### A table

```{r, echo=FALSE}
knitr::kable(head(mtcars), caption = 'A boring table.')
```

And no chairs.

# Text

Example text.

No figures or tables in this section. Nothing to display in the main area.

# Plots

You may include any number of plots in a section.

```{r, fig.cap=c('A boring scatterplot.')}
library(leaflet)
leaflet() %>% 
  addProviderTiles(providers$Esri.WorldImagery) %>%
  setView(-83, 46, zoom = 6) 

```

# Images

Local news [reported](https://www.desmoinesregister.com/story/news/2018/04/27/rubber-duck-des-moines-yess-duck-derby/558852002/) a giant inflatable rubber duck rolling down the street of Des Moines, where this package is conceived.

![The Rolling Duck](https://user-images.githubusercontent.com/163582/60457872-c164ff00-9c02-11e9-8d0f-cdae566b75ed.jpeg)


# Videos

You can also embed videos here.

<iframe width="100%" height="100%" src="https://www.youtube.com/embed/7gYIs7uYbMo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

# Technical details

The current implementation of this sidebar layout is kind of cumbersome. The HTML template is `rolldown:::pkg_resource('html', 'scrollama-side.html')`. We have hard-coded some CSS and JavaScript code in this template, which means, for example, you cannot easily customize the initialization of Scrollama (if you really want to, you must provide your own HTML template). You should be free to customize CSS, though (like we did in the beginning of this example document).

Activating sections doesn't work well (especially in RStudio Viewer). We don't know why at the moment.   

[yihui]

It is technically tricky to support HTML widgets, but we will definitely add support in the future! Thanks for the feedback!

[iqis]

@durraniu I was not able to reproduce the issue mentioned in your post right off the bat; But I will look deeper into it ASAP. On your second question, it should be possible to implement a helper function to inject custom CSS on all types of content.

[ccamara]

I do not know if this package is still maintained, but I would definitely love to see support for HTML widgets

[yihui]

It's not actively maintained. Sorry! I can probably come back to it at the end of this year. If anyone wants to contribute a PR, please feel free to. Thanks!