Desc

Author: Explosion-Scratch

src/components/Item.svelte

@@ -291,6 +291,8 @@
             on:change={handleDescriptionChange}
             on:delete={handleExitDescription}
             on:exitdescription={handleExitDescription}
+            on:selectup={handleExitDescription}
+            on:selectdown={handleSelectDown}
             on:togglecomplete={handleToggleComplete}
             on:hashtagclick={handleHashtagClick}
             on:itemrefclick={handleItemRefClick}

src/components/List.svelte

@@ -351,6 +351,8 @@
               on:change={handleDescriptionChange}
               on:delete={handleExitDescription}
               on:exitdescription={handleExitDescription}
+              on:selectup={focusZoomedTitle}
+              on:selectdown={handleTitleSelectDown}
               on:blur={handleDescriptionBlur}
             />
           </div>

src/components/RichEditor.svelte

@@ -252,12 +252,31 @@
         .run()
     }
   }
+
+  function handleKeydown(event) {
+    if (isDescription) {
+      // Basic stop propagation for everything. 
+      // KeyboardExtension will handle Enter, Shift-Enter, Arrows etc.
+      // Since it's inside the container, it will see the event before this handler (bubbling phase).
+      // Or rather, if we use a regular Svelte on:keydown, it's a bubbling listener on the div.
+      event.stopPropagation()
+    }
+  }
+
+  function handleMousedown(event) {
+    if (isDescription) {
+      event.stopPropagation()
+    }
+  }
 </script>
 
 <div class="rich-editor-wrapper" class:description={isDescription} class:zoomed-root={isZoomedRoot}>
   <div
     bind:this={editorElement}
     class="editor-container"
+    on:keydown={handleKeydown}
+    on:mousedown={handleMousedown}
+    role="presentation"
   ></div>
 
   <div bind:this={bubbleMenuElement} class="bubble-menu">

src/extensions/KeyboardExtension.js

@@ -102,15 +102,38 @@ export const KeyboardExtension = Extension.create({
         return false
       },
 
-      'ArrowUp': () => {
+      'ArrowUp': ({ editor }) => {
+        if (this.options.isDescription) {
+          const { state } = editor
+          const { selection } = state
+          if (selection.from === 1) {
+            if (this.options.onArrowUp) {
+              this.options.onArrowUp()
+              return true
+            }
+          }
+          return false
+        }
         if (this.options.onArrowUp) {
           this.options.onArrowUp()
           return true
         }
         return false
       },
 
-      'ArrowDown': () => {
+      'ArrowDown': ({ editor }) => {
+        if (this.options.isDescription) {
+          const { state } = editor
+          const { selection, doc } = state
+          // doc.content.size - 1 is the end of the last node's content
+          if (selection.to >= doc.content.size - 1) {
+            if (this.options.onArrowDown) {
+              this.options.onArrowDown()
+              return true
+            }
+          }
+          return false
+        }
         if (this.options.onArrowDown) {
           this.options.onArrowDown()
           return true