medfreeman / remark-generic-extensions

!Extension[Content](Argument){Properties} -> :tada: — commonmark generic directive extension for remark

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

"div" custom element causes silent failures

dustingetz opened this issue · comments

Changing both occurences of "div1" to "div" (and also the third occurence in the test markdown) causes markdown rendering to silently fail (nothing is emitted).

Working remark scaffolding (clojurescript):

(def whitelist
  {"span" (fn [props] [:span (dissoc props :children :value) (:value props)])
   "div1" (fn [props] [:div (dissoc props :children :value) (:value props)])})

(defn markdown [value change! & [props]]
  (let [children
        (->
          (js/remark)
          (.use
            js/remarkGenericExtensions
            (clj->js
              {"elements"
               {"span" {"html" {"properties" {"value" "::content::"}}}
                "div1" {"html" {"properties" {"value" "::content::"}}}}}))
          (.use
            js/remarkReact
            (clj->js
              {"sanitize" false
               "remarkReactComponents" (util/map-values r/reactify-component whitelist)}))
          (.processSync value {"commonmark" true})
          .-contents)]
    [:div.markdown {:class (:class props)} children]))

Test markdown

# Test
!span[Hello World]{style="color: red;"}

div1: 
::: Hello World :::
{style="color: yellow; font-size: 3em; "}

By the way, thank you for this plugin, very flexible and powerful, exactly what I was looking for, nice work!

I now see that the "div" custom component isn't even needed, you can just do this and the right stuff happens:

div: 
::: Hello World :::
{style="color: yellow; font-size: 3em; "}