Skip to content

Instantly share code, notes, and snippets.

@saralilyb
Last active May 29, 2017 17:25
Show Gist options
  • Save saralilyb/e56fcd46a61edda8c8b0509b9f4d00cf to your computer and use it in GitHub Desktop.
Save saralilyb/e56fcd46a61edda8c8b0509b9f4d00cf to your computer and use it in GitHub Desktop.
Reactive SimpleMDE component with reagent
(defn editor [text]
(let [dom-node (r/atom nil)]
(r/create-class
{:component-did-update
;; this is the draw code plus the update code
(fn [this old-argv]
(let [editor (js/SimpleMDE.
(clj->js
{:autofocus true
:spellChecker true
:placeholder ""
:forceSync true
:element @dom-node
:initialValue @text
:value @text
}))]
(-> editor
.-codemirror
(.on "change" (fn [] (reset! text (.value editor)))))
;(set! (.-value editor) @text)
))
:component-did-mount
;; this is where we set the dom node once the component actually mounts
(fn [this]
(let [node (r/dom-node this)]
(reset! dom-node node)))
:display-name "mjn-note-editor"
:reagent-render
;; we must deref the atoms to make the thing update...
(fn []
@dom-node
[:textarea {:defaultValue @text}])})))
@saralilyb
Copy link
Author

I've only tested this for displaying, not editing

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment