Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- (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]]
Add Comment
Please, Sign In to add comment