Created
April 19, 2018 13:20
-
-
Save nrfm/0c33d297e8ae5cf36c98ef640003a118 to your computer and use it in GitHub Desktop.
This file contains 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
(def draft-js js/Draft) | |
;; or any other mode of import | |
(def Editor (.-Editor draft-js)) | |
(def EditorState (.-EditorState draft-js)) | |
(def convertToRaw (.-convertToRaw draft-js)) | |
(def convertFromRaw (.-convertFromRaw draft-js)) | |
(defn raw-json | |
[state] | |
(let [content-state (.getCurrentContent @state) | |
plain-text (.getPlainText content-state)] | |
[:div | |
[:pre | |
{:style {:height 500}} | |
(with-out-str (pprint/pprint | |
(js->clj (convertToRaw content-state))))] | |
[:div (str plain-text)]])) | |
(defn on-change | |
[new-editor-state state] | |
(reset! state new-editor-state)) | |
(defn core | |
[state] | |
(let [] | |
(r/create-class | |
{:display-name "core" | |
:reagent-render (fn [] | |
[:> Editor | |
{:editorState @state | |
:onChange (fn [new-editor-state] (on-change new-editor-state state)) | |
}])}))) | |
(defn composite-editor | |
[] | |
(let [state (r/atom (.createEmpty EditorState))] | |
(fn [] | |
[:div | |
[core state] | |
[raw-json state]]))) | |
(defn create-with-raw-content | |
[content] | |
(let [json (.parse js/JSON content) | |
content-state (convertFromRaw json) | |
state (.createWithContent EditorState content-state)] | |
state)) | |
(defn create-from-empty-state | |
[] | |
(.createEmpty EditorState)) | |
(def content | |
"{\n \"entityMap\": {},\n \"blocks\": [\n {\n \"key\": \"5h45l\",\n \"text\": \"the quick brown fox jumps over the lazy dog \",\n \"type\": \"unstyled\",\n \"depth\": 0,\n \"inlineStyleRanges\": [\n {\n \"offset\": 4,\n \"length\": 5,\n \"style\": \"ITALIC\"\n },\n \n {\n \"offset\": 10,\n \"length\": 5,\n \"style\": \"UNDERLINE\"\n },\n {\n \"offset\": 16,\n \"length\": 3,\n \"style\": \"BOLD\"\n }\n ],\n \"entityRanges\": [],\n \"data\": {}\n }\n ]\n}") | |
(defn composite-editor-raw-content | |
[] | |
(let [state (r/atom (create-with-raw-content content)) | |
] | |
(fn [] | |
[:div | |
[core state] | |
[raw-json state]]))) | |
#_[:div ;; <------------- use | |
[composite-editor] | |
[composite-editor-raw-content]] | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment