I was using rich-text editor (slate.js https://docs.slatejs.org/walkthroughs/02-adding-event-handlers) in fulcro and want to implement a nested structure of rich text textarea using Slate react component. I tried to follow the fulcro book to use react-interop to use Slate react components. The problem I encountered is how I can make different textarea pulling data from the same place of client database in sync. (you can see that at the end of my video, the task 5 textarea is not updated) I have two questions: 1. Is it reasonable to use (ui-editor {:content content :id id :this this}) like I did in my code to pass this object around. Or there's a better way? 2. How could I fix the problem of different textareas with same data not syncing together. The code I wrote look like this:

(ns com.example.ui
  (:require
   ["react" :as react]
   ["react-dom" :as react-dom]
   ["slate" :refer (createEditor)]
   ["slate-react" :refer (Slate Editable withReact)]
   [com.fulcrologic.fulcro.algorithms.react-interop :as interop]
   [com.example.mutations :as mut]
   [com.fulcrologic.fulcro.algorithms.merge :as merge]
   [com.fulcrologic.fulcro.algorithms.tempid :as tempid]
   [com.fulcrologic.fulcro.algorithms.data-targeting :as targeting]
   [com.fulcrologic.fulcro.algorithms.normalized-state :as norm]
   [com.fulcrologic.fulcro.components :as comp :refer [defsc transact!]]
   [com.fulcrologic.fulcro.raw.components :as rc]
   [com.fulcrologic.fulcro.data-fetch :as df]
   [com.fulcrologic.fulcro.mutations :refer [defmutation]]
   [com.fulcrologic.fulcro.dom :as dom :refer [button div form h1 h2 h3 input label li ol p ul]]))

(declare ui-todo)
(declare ui-editor)

(defmutation change-context [{id :id data :new-data}]
  (action [{:keys [state]}]       
          (swap! state assoc-in [:todo/id id :todo/content] data)))

(defn get-text [data props]
  (let [this (goog.object/get props "this")
        id (goog.object/get props "id")
        children (.-children (first data))
        all-data (apply str (map #(.-text %) children))]
    all-data
    (comp/transact! this [(change-context {:id id :new-data all-data})])))

(defn Editor [props]
  (let [[editor] (react/useState #(-> (createEditor)
                                      (withReact))) ;; bind this?
        init-val (clj->js [{"type" "paragraph"
                            "children" [{"text" (.-content props)}]}])
        editable-comp (react/createElement Editable #js {} nil)
        slate-comp (react/createElement Slate
                                        #js {"editor" editor
                                             "value" init-val
                                             "onChange" #(js/console.log (get-text % props))}
                                        editable-comp)]
    slate-comp))


(def ui-editor (interop/react-factory Editor))

(defsc Todo [this {:todo/keys [id content child]}]
  {:query (fn [] [:todo/id :todo/content {:todo/child '...}])
   :ident :todo/id}
  (div (p {:style {:background-color "red"}} content)
       (ui-editor {:content content :id id :this this})
       (when (seq child)
         (dom/ul
          (dom/div
           ;; (js/console.log "this ->" content id)
           ;; (js/console.log child)
           (map (fn [p] (ui-todo p)) child))))))

(def ui-todo (comp/factory Todo {:keyfn :todo/id}))


(defsc Root [this {all-todo :all-todo :as props}]
  {:query [{:all-todo (comp/get-query Todo)}]}
  (div
   (div "todos: "
        (map ui-todo all-todo))))