Description edit

Author: Explosion-Scratch

src/App.svelte

@@ -340,6 +340,58 @@
         tick().then(() => focusItem(focusedItemId))
       }
     }
+
+    if (event.key === 'Tab' && !event.target.closest('[contenteditable]') && !event.target.closest('.search-input')) {
+      if ($selection.size > 0) {
+        event.preventDefault()
+        if (event.shiftKey) {
+          itemStore.outdentSelected()
+        } else {
+          itemStore.indentSelected()
+        }
+      }
+    }
+
+    if ((event.metaKey || event.ctrlKey) && event.altKey && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
+      event.preventDefault()
+      
+      const activeEditor = document.activeElement?.closest('[contenteditable]')
+      
+      if ($selection.size > 0) {
+        if (activeEditor) {
+          activeEditor.blur()
+        }
+        if (event.key === 'ArrowUp') {
+          itemStore.moveSelectedUp()
+        } else {
+          itemStore.moveSelectedDown()
+        }
+      } else if (activeEditor) {
+        const itemElement = activeEditor.closest('.item') || activeEditor.closest('[id^="item_"]')
+        if (itemElement) {
+          const itemId = itemElement.id.replace('item_', '')
+          if (itemId) {
+            const selection = window.getSelection()
+            const range = selection?.rangeCount > 0 ? selection.getRangeAt(0).cloneRange() : null
+            
+            if (event.key === 'ArrowUp') {
+              itemStore.moveItemUp(itemId)
+            } else {
+              itemStore.moveItemDown(itemId)
+            }
+            
+            tick().then(() => {
+              activeEditor.focus()
+              if (range) {
+                const newSelection = window.getSelection()
+                newSelection.removeAllRanges()
+                newSelection.addRange(range)
+              }
+            })
+          }
+        }
+      }
+    }
   }
 
   function getItemIdFromElement(element) {

src/components/List.svelte

@@ -153,6 +153,14 @@
     }
     if (item.children?.length) {
       focusItem(item.children[0].id)
+    } else {
+      const newId = generateId()
+      itemStore.updateItem(item.id, {
+        children: [
+          { id: newId, text: '', description: '', completed: false, open: true, children: [] }
+        ]
+      })
+      tick().then(() => focusItem(newId))
     }
   }
 
@@ -162,6 +170,22 @@
     }
   }
 
+  function handleTitleDescription() {
+    showDescriptionEditor = true
+    tick().then(() => {
+      requestAnimationFrame(() => {
+        if (containerElement) {
+          const el = containerElement.querySelector('.zoomed_description [contenteditable]')
+          if (el) {
+            el.focus()
+            return
+          }
+        }
+        focusDescription(item.id)
+      })
+    })
+  }
+
   function handleTitleNewBullet() {
     if (!item.children?.length) {
       const newId = generateId()
@@ -251,6 +275,7 @@
           itemId={item.id}
           on:selectdown={handleTitleSelectDown}
           on:newbullet={handleTitleNewBullet}
+          on:description={handleTitleDescription}
           on:change={() => itemStore.updateItem(item.id, { text: item.text })}
           on:hashtagclick={handleHashtagClick}
           on:itemrefclick={handleItemRefClick}
@@ -262,6 +287,7 @@
           <RichEditor
             bind:value={item.description}
             isDescription={true}
+            isZoomedRoot={true}
             showPlaceholder={false}
             {highlightPhrase}
             editorClass="editable description"

src/components/RichEditor.svelte

@@ -21,6 +21,7 @@
   export let value = ''
   export let placeholder = ''
   export let isDescription = false
+  export let isZoomedRoot = false
   export let highlightPhrase = null
   export let editorClass = 'editable'
   export let showPlaceholder = true
@@ -124,6 +125,7 @@
       }),
       KeyboardExtension.configure({
         isDescription,
+        isZoomedRootDescription: isZoomedRoot && isDescription,
         onEnter: () => {
           if (isDescription) {
             dispatch('exitdescription')

src/components/SearchBar.svelte

@@ -19,7 +19,25 @@
   function handleKeyDown(event) {
     if (event.key === 'Escape') {
       handleClear()
+      return
     }
+    
+    if (event.metaKey || event.ctrlKey || event.altKey) {
+      event.stopPropagation()
+      return
+    }
+    
+    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Enter', 'Tab', 'Delete', 'Backspace'].includes(event.key)) {
+      event.stopPropagation()
+    }
+  }
+
+  function handleKeyUp(event) {
+    event.stopPropagation()
+  }
+
+  function handleKeyPress(event) {
+    event.stopPropagation()
   }
 
   function handleGlobalKeyDown(event) {
@@ -49,13 +67,15 @@
     value={searchValue}
     on:input={handleInput}
     on:keydown={handleKeyDown}
+    on:keyup={handleKeyUp}
+    on:keypress={handleKeyPress}
     type="text"
     placeholder="Search... (⌘F)"
     class="search-input"
   />
 
   {#if searchValue}
-    <button class="clear-button" on:click={handleClear} type="button">
+    <button class="clear-button" on:click={handleClear} type="button" aria-label="Clear search">
       <svg width="14" height="14" viewBox="0 0 256 256">
         <path
           fill="currentColor"

src/extensions/KeyboardExtension.js

@@ -16,13 +16,17 @@ export const KeyboardExtension = Extension.create({
       onArrowDown: null,
       onShiftArrowUp: null,
       onShiftArrowDown: null,
-      isDescription: false
+      isDescription: false,
+      isZoomedRootDescription: false
     }
   },
 
   addKeyboardShortcuts() {
     return {
       'Enter': ({ editor }) => {
+        if (this.options.isZoomedRootDescription) {
+          return false
+        }
         if (this.options.onEnter) {
           this.options.onEnter()
           return true
@@ -31,6 +35,10 @@ export const KeyboardExtension = Extension.create({
       },
 
       'Shift-Enter': ({ editor }) => {
+        if (this.options.isZoomedRootDescription && this.options.onEnter) {
+          this.options.onEnter()
+          return true
+        }
         if (this.options.onShiftEnter) {
           this.options.onShiftEnter()
           return true

src/stores/itemStore.js

@@ -325,6 +325,98 @@ function createItemStore() {
     })
   }
 
+  function indentSelected() {
+    const sel = get(selection)
+    if (sel.size === 0) return
+    
+    const rootItems = get(items)
+    const zoomId = get(zoomedItemId)
+    const root = zoomId ? findItem(rootItems, zoomId) || rootItems : rootItems
+    const flat = flattenVisibleTree(root)
+    
+    const idsInOrder = flat.filter(item => sel.has(item.id)).map(item => item.id)
+    
+    for (const id of idsInOrder) {
+      indentItem(id)
+    }
+  }
+
+  function outdentSelected() {
+    const sel = get(selection)
+    if (sel.size === 0) return
+    
+    const rootItems = get(items)
+    const zoomId = get(zoomedItemId)
+    const root = zoomId ? findItem(rootItems, zoomId) || rootItems : rootItems
+    const flat = flattenVisibleTree(root)
+    
+    const idsInOrder = flat.filter(item => sel.has(item.id)).map(item => item.id)
+    
+    for (const id of [...idsInOrder].reverse()) {
+      outdentItem(id)
+    }
+  }
+
+  function moveItemUp(id) {
+    updateItems(root => {
+      const parent = findParent(root, id)
+      if (!parent?.children) return
+      
+      const idx = findItemIndex(parent, id)
+      if (idx <= 0) return
+      
+      const temp = parent.children[idx]
+      parent.children[idx] = parent.children[idx - 1]
+      parent.children[idx - 1] = temp
+    })
+  }
+
+  function moveItemDown(id) {
+    updateItems(root => {
+      const parent = findParent(root, id)
+      if (!parent?.children) return
+      
+      const idx = findItemIndex(parent, id)
+      if (idx < 0 || idx >= parent.children.length - 1) return
+      
+      const temp = parent.children[idx]
+      parent.children[idx] = parent.children[idx + 1]
+      parent.children[idx + 1] = temp
+    })
+  }
+
+  function moveSelectedUp() {
+    const sel = get(selection)
+    if (sel.size === 0) return
+    
+    const rootItems = get(items)
+    const zoomId = get(zoomedItemId)
+    const root = zoomId ? findItem(rootItems, zoomId) || rootItems : rootItems
+    const flat = flattenVisibleTree(root)
+    
+    const idsInOrder = flat.filter(item => sel.has(item.id)).map(item => item.id)
+    
+    for (const id of idsInOrder) {
+      moveItemUp(id)
+    }
+  }
+
+  function moveSelectedDown() {
+    const sel = get(selection)
+    if (sel.size === 0) return
+    
+    const rootItems = get(items)
+    const zoomId = get(zoomedItemId)
+    const root = zoomId ? findItem(rootItems, zoomId) || rootItems : rootItems
+    const flat = flattenVisibleTree(root)
+    
+    const idsInOrder = flat.filter(item => sel.has(item.id)).map(item => item.id)
+    
+    for (const id of [...idsInOrder].reverse()) {
+      moveItemDown(id)
+    }
+  }
+
   function setSearch(query) {
     searchQuery.set(query)
   }
@@ -594,6 +686,12 @@ function createItemStore() {
     toggleOpen,
     indentItem,
     outdentItem,
+    indentSelected,
+    outdentSelected,
+    moveItemUp,
+    moveItemDown,
+    moveSelectedUp,
+    moveSelectedDown,
     setSearch,
     clearSearch,
     select,