Better handling of text editing

web/package.json

@@ -18,6 +18,7 @@
         "clean": "/usr/bin/rm -rf target; /usr/bin/rm -rf ../resources/static/js/compiled; /usr/bin/rm -rf ../resources/static/js/cljs-runtime;"
     },
     "dependencies": {
+        "caret-pos": "^1.2.2",
         "diff": "^4.0.2",
         "react": "^16.12.0",
         "react-dom": "^16.12.0",

web/src/main/frontend/caret_pos.js

@@ -1,4 +1,3 @@
-// copy from
 export var getCaretRange = function (element) {
   var caretRange = "";
   var doc = element.ownerDocument || element.document;
@@ -22,33 +21,3 @@ export var getCaretRange = function (element) {
   }
   return caretRange;
 };
-
-export var getCaretPos = function (input) {
-  if ("selectionStart" in input && document.activeElement == input) {
-    return {
-      start: input.selectionStart,
-      end: input.selectionEnd
-    };
-  }
-  else if (input.createTextRange) {
-    var sel = document.selection.createRange();
-    if (sel.parentElement() === input) {
-      var rng = input.createTextRange();
-      rng.moveToBookmark(sel.getBookmark());
-      for (var len = 0;
-           rng.compareEndPoints("EndToStart", rng) > 0;
-           rng.moveEnd("character", -1)) {
-        len++;
-      }
-      rng.setEndPoint("StartToStart", input.createTextRange());
-      for (var pos = { start: 0, end: len };
-           rng.compareEndPoints("EndToStart", rng) > 0;
-           rng.moveEnd("character", -1)) {
-        pos.start++;
-        pos.end++;
-      }
-      return pos;
-    }
-  }
-  return -1;
-};

web/src/main/frontend/components/editor.cljs

@@ -25,11 +25,16 @@
      :value value
      :pos pos}))
 
+
 (defn on-up-down
   [state e up?]
   (let [{:keys [id dummy? on-hide value pos]} (get-state state)
-        heading? (string/starts-with? id "edit-heading-")]
-    (when heading?
+        heading? (string/starts-with? id "edit-heading-")
+        element (gdom/getElement id)
+        line-height (util/get-textarea-line-height element)]
+    (when (and heading?
+               (or (and up? (util/textarea-cursor-first-row? element line-height))
+                   (and (not up?) (util/textarea-cursor-end-row? element line-height))))
       (util/stop e)
       (let [f (if up? gdom/getPreviousElementSibling gdom/getNextElementSibling)
             heading-id (string/replace id "edit-heading-" "")
@@ -86,10 +91,7 @@
 
        ;; backspace
        8 (fn [state e] (on-backspace state e))
-       })
-
-
-     ))
+       })))
   {:init (fn [state _props]
            (let [[content {:keys [dummy?]}] (:rum/args state)]
              (state/set-edit-content!

web/src/main/frontend/util.cljs

@@ -7,8 +7,10 @@
             [cljs-bean.core :as bean]
             [clojure.string :as string]
             ["/frontend/caret_pos" :as caret-pos]
+            ["caret-pos" :as caret]
             [goog.string :as gstring]
-            [goog.string.format]))
+            [goog.string.format]
+            [dommy.core :as d]))
 
 (defn format
   [fmt & args]
@@ -258,16 +260,14 @@
 
 (def caret-range caret-pos/getCaretRange)
 
-(defn caret-pos
-  [input]
-  (-> (caret-pos/getCaretPos input)
-      (bean/->clj)
-      :end))
-
 (defn set-caret-pos!
   [input pos]
   (.setSelectionRange input pos pos))
 
+(defn get-caret-pos
+  [input]
+  (bean/->clj ((gobj/get caret "position") input)))
+
 (defn minimize-html
   [s]
   (->> s
@@ -351,3 +351,33 @@
 (defn get-git-owner-and-repo
   [repo-url]
   (take-last 2 (string/split repo-url #"/")))
+
+(defn get-textarea-height
+  [input]
+  (some-> input
+          (d/style)
+          (gobj/get "height")
+          (string/split #"\.")
+          first
+          (parse-int)))
+
+(defn get-textarea-line-height
+  [input]
+  (try
+    (some-> input
+           (d/style)
+           (gobj/get "lineHeight")
+           ;; TODO: is this cross-platform?
+           (string/replace "px" "")
+           (parse-int))
+    (catch js/Error _e
+      24)))
+
+(defn textarea-cursor-first-row?
+  [input line-height]
+  (< (:top (get-caret-pos input)) line-height))
+
+(defn textarea-cursor-end-row?
+  [input line-height]
+  (> (+ (:top (get-caret-pos input)) line-height)
+     (get-textarea-height input)))

web/yarn.lock

@@ -253,6 +253,11 @@ caniuse-lite@^1.0.30001020, caniuse-lite@^1.0.30001030:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001031.tgz#76f1bdd39e19567b855302f65102d9a8aaad5930"
   integrity sha512-DpAP5a1NGRLgYfaNCaXIRyGARi+3tJA2quZXNNA1Du26VyVkqvy2tznNu5ANyN1Y5aX44QDotZSVSUSi2uMGjg==
 
+caret-pos@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/caret-pos/-/caret-pos-1.2.2.tgz#b2bac513eaf3680201df38d0de22e8a0d5d0eace"
+  integrity sha512-C+z3AZU3a/V+YxK+ZvM+fSLs9rRGPAg9ZbuchTfAz572BiT76GOm6H4padNnSf5qKAKLjt0vlm1zJLEN/ftApg==
+
 chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"