simpleDraftJsReagent.cljs

(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]]