[refactor] change editor input as uncontrolled component & try composition input for UX .

src/main/frontend/components/editor.cljs

@@ -676,7 +676,7 @@
                                 (not (string/blank? value))
                                 (not= (string/trim value) (string/trim content)))
                            (let [old-page-name (db/get-file-page path false)]
-                             (page-handler/rename-when-alter-title-propertiy! old-page-name path format content value)
+                             (page-handler/rename-when-alter-title-property! old-page-name path format content value)
                              (file/alter-file (state/get-current-repo) path (string/trim value)
                                               {:re-render-root? true}))))
                        (when-not (contains? #{:insert :indent-outdent} (state/get-editor-op))
@@ -685,24 +685,22 @@
   [state {:keys [on-hide dummy? node format block block-parent-id]
           :or {dummy? false}
           :as option} id config]
-  (let [content (state/sub [:editor/content id])]
-    [:div.editor {:style {:position "relative"
-                          :display "flex"
-                          :flex "1 1 0%"}
-                  :class (if block "block-editor" "non-block-editor")}
+  (let [content (state/get-edit-content)]
+    [:div.editor-inner {:class (if block "block-editor" "non-block-editor")}
      (when config/mobile? (mobile-bar state id))
-     (ui/textarea
+     (ui/ls-textarea
       {:id id
-       :value (or content "")
+       :cacheMeasurements true
+       :default-value (or content "")
        :minRows (if (state/enable-grammarly?) 2 1)
        :on-click (fn [_e]
                    (let [input (gdom/getElement id)
                          current-pos (:pos (util/get-caret-pos input))]
                      (state/set-edit-pos! current-pos)
                      (editor-handler/close-autocomplete-if-outside input)))
-       :on-key-down (fn [_e]
-                      (let [current-pos (:pos (util/get-caret-pos (gdom/getElement id)))]
-                        (state/set-edit-pos! current-pos)))
+       ;:on-key-down (fn [_e]
+       ;               (let [current-pos (:pos (util/get-caret-pos (gdom/getElement id)))]
+       ;                 (state/set-edit-pos! current-pos)))
        :on-change (fn [e]
                     (let [value (util/evalue e)
                           current-pos (:pos (util/get-caret-pos (gdom/getElement id)))]
@@ -716,8 +714,8 @@
                           ;; TODO: is it cross-browser compatible?
                           (when (not= (gobj/get native-e "inputType") "insertFromPaste")
                             (when-let [matched-commands (seq (editor-handler/get-matched-commands input))]
-                             (reset! *slash-caret-pos (util/get-caret-pos input))
-                             (reset! *show-commands true)))
+                              (reset! *slash-caret-pos (util/get-caret-pos input))
+                              (reset! *show-commands true)))
                           "<"
                           (when-let [matched-commands (seq (editor-handler/get-matched-block-commands input))]
                             (reset! *angle-bracket-caret-pos (util/get-caret-pos input))

src/main/frontend/handler.cljs

@@ -86,7 +86,7 @@
 (defn set-save-before-unload! []
   (.addEventListener js/window "beforeunload"
                      (fn [e]
-                       (when (state/repos-need-to-be-stored?)
+                       (when (and (not config/dev?) (state/repos-need-to-be-stored?))
                          (let [notification-id (atom nil)]
                            (let [id (notification/show!
                                      [:div

src/main/frontend/handler/page.cljs

@@ -357,7 +357,7 @@
 
           (ui-handler/re-render-root!))))))
 
-(defn rename-when-alter-title-propertiy!
+(defn rename-when-alter-title-property!
   [page path format original-content content]
   (when (and page (contains? config/mldoc-support-formats format))
     (let [old-name page

src/main/frontend/ui.cljs

@@ -17,6 +17,22 @@
 (defonce transition-group (r/adapt-class TransitionGroup))
 (defonce css-transition (r/adapt-class CSSTransition))
 (defonce textarea (r/adapt-class (gobj/get TextareaAutosize "default")))
+
+(rum/defc ls-textarea [{:keys [on-change] :as -props}]
+  (let [composition? (atom false)
+        set-composition? #(reset! composition? %)
+        on-composition (fn [e]
+                         (case e.type
+                           "compositionend" (do (set-composition? false))
+                           (set-composition? true)))
+        props (assoc -props
+                     :on-change (fn [e] (when (not @composition?)
+                                          (on-change e)))
+                     :on-composition-start on-composition
+                     :on-composition-update on-composition
+                     :on-composition-end on-composition)]
+    (textarea props)))
+
 (rum/defc dropdown-content-wrapper [state content class]
   (let [class (or class
                   (util/hiccup->class "origin-top-right.absolute.right-0.mt-2.rounded-md.shadow-lg"))]
@@ -292,7 +308,7 @@
                 :else
                 nil)
               (when-let [element (gdom/getElement (str "ac-" @current-idx))]
-                (let [ac-inner (gdom/getElement "ac-inner")
+                (let [ac-inner (gdom/getElement "ui__ac-inner")
                       element-top (gobj/get element "offsetTop")
                       scroll-top (- (gobj/get element "offsetTop") 360)]
                   (set! (.-scrollTop ac-inner) scroll-top)))))
@@ -306,7 +322,7 @@
                   (reset! current-idx 0)
                   (swap! current-idx inc)))
               (when-let [element (gdom/getElement (str "ac-" @current-idx))]
-                (let [ac-inner (gdom/getElement "ac-inner")
+                (let [ac-inner (gdom/getElement "ui__ac-inner")
                       element-top (gobj/get element "offsetTop")
                       scroll-top (- (gobj/get element "offsetTop") 360)]
                   (set! (.-scrollTop ac-inner) scroll-top)))))
@@ -329,24 +345,16 @@
                          item-render
                          class]}]
   (let [current-idx (get state ::current-idx)]
-    [:div.py-1.rounded-md.shadow-xs.bg-base-3 {:class class}
+    [:div#ui__ac {:class class}
      (if (seq matched)
-       [:div#ac-inner
-        {:style {:max-height 400
-                 :overflow "hidden"
-                 :overflow-x "hidden"
-                 :overflow-y "auto"
-                 :position "relative"
-                 "-webkit-overflow-scrolling" "touch"}}
+       [:div#ui__ac-inner
         (for [[idx item] (medley/indexed matched)]
           (rum/with-key
             (menu-link
-             {:id (str "ac-" idx)
-              :style {:padding-top 6
-                      :padding-bottom 6}
-              :class (when (= @current-idx idx)
-                       "chosen")
-              ;; :tab-index -1
+             {:id       (str "ac-" idx)
+              :class    (when (= @current-idx idx)
+                          "chosen")
+                ;; :tab-index -1
               :on-click (fn [e]
                           (util/stop e)
                           (if (and (gobj/get e "shiftKey") on-shift-chosen)