Last active
May 29, 2017 17:25
-
-
Save saralilyb/e56fcd46a61edda8c8b0509b9f4d00cf to your computer and use it in GitHub Desktop.
Reactive SimpleMDE component with reagent
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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}])}))) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I've only tested this for displaying, not editing