Move cursor up and down inside textarea

list-editor/cursor.js

@@ -1,5 +1,6 @@
 function createCursor(start) {
     let cursor = start;
+    let lastMovement = 0;
 
     return {
         get() {
@@ -35,9 +36,11 @@ function createCursor(start) {
         },
         moveUp(store) {
             cursor = store.prevCursorPosition(cursor)
+            lastMovement = -1
         },
         moveDown(store) {
             cursor = store.nextCursorPosition(cursor, true)
+            lastMovement = 1
         },
         remove(store) {
             let id = store.currentID(cursor)
@@ -65,6 +68,12 @@ function createCursor(start) {
         forwardToNextVisible(store) {
             cursor = store.nextCursorPosition(cursor, false)
         },
+        lastDir() {
+            return lastMovement
+        },
+        resetLastMove() {
+            lastMovement = 0
+        }
     };
 }
 

list-editor/index.js

@@ -6,9 +6,26 @@ import textareaAutosizeInit from "./textarea.autosize"
 import createCursor from './cursor'
 import createSelection from './selection'
 import Store from './store'
+import getCaretCoordinates from "../editor/src/caret-position";
 
 textareaAutosizeInit($)
 
+function textareaCursorInfo(target, dir) {
+    const minLine = 0;
+    let pos = getCaretCoordinates(target, target.selectionEnd, {})
+    let line = (pos.top - 3) / pos.height;
+    let maxLine = Math.round(target.clientHeight / pos.height)
+    let nextLine = line
+    nextLine += dir
+    return {
+        leaving: !(nextLine >= minLine && nextLine < maxLine),
+        min: minLine,
+        max: maxLine,
+        current: line,
+        next: nextLine
+    };
+}
+
 function editor(root, inputData, options) {
     let cursor = createCursor()
     let selection = createSelection()
@@ -72,7 +89,6 @@ function editor(root, inputData, options) {
         });
     }
 
-
     function on(evt, handler) {
         events[evt].push(handler)
     }
@@ -342,10 +358,12 @@ function editor(root, inputData, options) {
     function startEditing(rootElement, store, cursor) {
         if (editing) return
         editing = true
-
         let elements = $(rootElement).children('div.list-item');
         let $textarea = $('<textarea rows=1 class="input-line" spellcheck="false">');
-        $textarea.val(cursor.getCurrent(store).text).trigger('input')
+        $textarea.val(cursor.getCurrent(store).text);
+        if (cursor.lastDir() > 0) {
+            $textarea[0].selectionStart = $textarea[0].selectionEnd = 0
+        }
         let currentElement = cursor.getCurrentElement(elements);
         currentElement.find('.content').replaceWith($textarea)
         currentElement.addClass('editor');
@@ -400,12 +418,20 @@ function editor(root, inputData, options) {
     });
 
     $(root).on('keydown', function (event) {
-        let tag = event.target.tagName.toLowerCase();
+        console.log('keydown')
-        if (tag === 'textarea' && currentEditor[0].value.substring(0, 3) === '```') {
+        let target = event.target;
+
+        let dir = 0;
+        if (event.key === 'ArrowUp') dir = -1
+        if (event.key === 'ArrowDown') dir = 1
+        let cursorInfo = textareaCursorInfo(target, dir);
+        if (!cursorInfo.leaving) {
             return true
         }
+
         let next = true
-        let prevSelected = cursor.save();
+        let prevSelected = cursor.save()
+
         if (event.key === 'ArrowUp') {
             cursor.moveUp(store);
             if (event.shiftKey) {
@@ -477,6 +503,7 @@ function editor(root, inputData, options) {
             } else if (selection.hasSelection()) {
                 stopEditing(root, store, currentEditor);
             }
+            cursor.resetLastMove()
         }
 
         if (event.key === 'Enter') {