ClojureScript: как сменить CodeMirror на реагент с Reagent

Question

Я пытаюсь внедрить CodeMirror на свою веб-страницу, чтобы редактировать несколько фрагментов кода по одному за раз.

Для этого I:

• Have один атом Реагент node-defs-atom, содержащий карту фрагментов кода.
• Have a another atom node-history-atom который содержит отображаемые ключи от фрагментов кода.
• Задайте значение CodeMirror значению кодовой карты на ключ.

Вот что не работает:

(defn editor [node-defs-atom node-history-atom] 
    (reagent/create-class 
    {:reagent-render (fn [] (do [:textarea 
        { :value (@node-defs-atom (last @node-history-atom)) 
         :auto-complete "off"}])) 
    :component-did-mount (editor-did-mount node-defs-atom node-history-atom) 
    })) 

(defn editor-did-mount [node-defs-atom node-history-atom] 
    (fn [this] 
    (let [codemirror (.fromTextArea js/CodeMirror 
            (reagent/dom-node this) 
            #js {:mode "clojure" 
              :lineNumbers true})] 

          ......))) 

Изменение node-history-atom с reset! ничего к тексту в CodeMirror не делать. Я действительно не уверен, что происходит не так.

Если бы кто-нибудь мог мне сказать, где я должен указать ссылку на (@node-defs-atom (last @node-history-atom)) Буду очень признателен.

Заранее благодарен!

Answer 1

Вы можете попробовать другой способ борьбы с редактором CodeMirror

• Создать экземпляр CM на пустой узел

  (def cm (atom nil)) 
  
  (reset! cm (js/CodeMirror. 
        (.createElement js/document "div") 
        (clj->js {...}))) 
  

• Тогда ваш взгляд будет класс реагента и wrapper-id просто идентификатор родителя

  (reagent/create-class 
      {:reagent-render   (fn [] @cm [:div {:id wrapper-id}]) 
      :component-did-update update-comp 
      :component-did-mount update-comp}) 
  

• Создать fu nction который присоединяет CM узел йота

  (defn update-comp [this] 
      (when @cm 
      (when-let [node (or (js/document.getElementById wrapper-id) 
           (reagent/dom-node this))] 
       (.appendChild node (.getWrapperElement @cm))))