Add example to README of rich content in rank_list

It took me a little while to understand enough to build a (silly) example, so I think it would be worthwhile showing how to build rich content inside of a rank_list! (Probably with a more interesting example)

library(shiny)
library(sortable)

ui <- fluidPage(

    titlePanel("Old Faithful Geyser Data"),

    fluidRow(
        bucket_list(
            header = "Hello",
            add_rank_list(
                text = "List 1",
                input_id = "list_1",
                labels = c(
                    list(tags$div(tags$b("Hi"), tags$br(), tags$b("Two"))), 
                    "Hello"
                    )
            ),
            add_rank_list(
                text = "List 2",
                input_id = "list_2",
                labels = NULL
            ),
            add_rank_list(
                text = "List 3",
                input_id = "list_3",
                labels = c("two")
            ),
            add_rank_list(
                text = "List 4",
                input_id = "list_4",
                labels = c("three")
            )
        )
    ),
    fluidRow(textOutput("presentation"))
)

server <- function(input, output) {
  output$presentation <- renderText(
      capture.output(str(input$list_1))
  )
}

shinyApp(ui = ui, server = server)

However, I will say that the Shiny input does not seem to be initialized properly at the start (requires moving something to get the inputs working), and it would be nice to have some hooks into what is returned. I.e. if I could define my own ID for each label and have that returned.

After moving something:

chr [1:2] "Hi \nTwo\n" "Hello"

(I believe this is because of the following, which does not fire until sorted:) https://github.com/rstudio/sortable/blob/ef56c4c0ae2a7eef4063132c83f3a0f257abe568/R/rank_list.R#L81

However, if you want a "hidden" ID or something, you can use font-size: 0 as a trick 😄

add_rank_list(
                text = "List 1",
                input_id = "list_1",
                labels = c(
                    list(tags$div(tags$span(id = "test", "test", style = "font-size: 0"), tags$b("Hi"), tags$br(), tags$b("Two"))), 
                    "Hello"
                    )
            )

# results in:
chr [1:2] "test Hi \nTwo\n" "Hello"

rstudio / sortable

Add example to README of rich content in rank_list #31