Search code examples
reactjsclojurescriptom

Render unstanitized HTML with ClojureScript+Sablono

I have a dataset saved in a global atom (as per the typical design pattern in ClojureScript SPA's), and I know that the data is safe (I manually typed it in - its just a list of quotes that I'm rendering randomly one per pageload).

However, the quotes contain basic HTML tags like <i> and characters such as &mdash. I'm using sablono to render the data in HTML like so:

(defcomponentk quote
  [[:data quotes]]
  (render [_]
      (let [quote (rand-nth quotes)]
        (html
         [:section
          [:blockquote {:id "quote"}
           [:header (om/build citation quote)]
           (map #(vector :p %) (:quote quote))]]))))

(:quote quote) is a vector of strings, each string is a paragraph of the quote (thus I map the :p tag over it).

How do I tell Sablono to render the strings as HTML and not as raw text?

The only thing I can think of is mapping sablono.core/html over each string, but I can't get that to work.

Solution

  • React offers dangerouslySetInnerHTML as an option for its components. If you are using Sablono with Om you can do something like this:

    (om.dom/div #js {:dangerouslySetInnerHTML #js {:__html "<b>Bold!</b>"}})

    More information here:

    https://groups.google.com/forum/#!topic/clojurescript/DXzHx3vkszo https://github.com/r0man/sablono/issues/36