feat(features): home-End processings for edit mode & Tab-trigger + access to page name on Search

stdword · stdword · commit eb9476b139ad · 2023-12-30T03:56:27.000+03:00
diff --git a/src/app.ts b/src/app.ts
@@ -19,67 +19,46 @@ import {
 
     splitByLines, splitBySentences, splitByWords,
 } from './commands'
+import { improveCursorMovement_KeyDownListener, improveSearch_KeyDownListener } from './features'
 import { getChosenBlocks, p, scrollToBlock } from './utils'
 
 
 const DEV = process.env.NODE_ENV === 'development'
 
 const settingsSchema: SettingSchemaDesc[] = [
     {
-        key: 'splittingHeading',
-        title: '⛓️ Split & Join',
-        description: '',
-        type: 'heading',
-        default: null
+        key: 'enableHomeEnd',
+        title: 'Enable improved «Home» / «End» keys processing?',
+        description: `
+            Double-press the <code>Home</code> / <code>End</code> key (in edit mode) to go to the block start / end. <br/>
+            MacOS's <code>⌘ ←</code> / <code>⌘ →</code> and Windows's <code>fn ←</code> / <code>fn →</code> are also supported. <br/>
+            <p><img width="200px" src="https://github.com/stdword/logseq13-missing-commands/assets/1984175/4773523a-5900-4b48-b196-f6cb39799548"/></p>
+            <i>Restriction</i>: This feature only works for natural lines of block, which have a «new line» character («\\n»). It does not work with lines created due to the size of the layout. In such cases, the only way to proceed is to press <code>Esc</code> to exit edit mode and then use the <code>←</code> or <code>→</code> arrow key to re-enter it. <br/>
+        `.trim(),
+        type: 'enum',
+        enumPicker: 'radio',
+        enumChoices: ['Yes', 'No'],
+        default: 'Yes',
     },
     {
-        key: 'storeChildBlocksIn',
-        title: 'Where to store nested blocks when splitting the block?',
+        key: 'enableSearchImprovements',
+        title: 'Enable improved keys processing on Search?',
         description: `
-            <span style="display: flex; gap: 1rem; align-items: center;">
-                <div>
-                    <ul>
-                        <li>First Last</li>
-                        <ul>
-                            <li>nested</li>
-                        </ul>
-                    </ul>
-                    <p style="margin: 0px"> </p>
-                </div>
-                <div>→</div>
-                <div>
-                    <ul>
-                        <li>First</li>
-                        <ul>
-                            <li>nested</li>
-                        </ul>
-                        <li>Last</li>
-                    </ul>
-                </div>
-                <div>OR</div>
-                <div>
-                    <ul>
-                        <li>First</li>
-                        <li>Last</li>
-                        <ul>
-                            <li>nested</li>
-                        </ul>
-                    </ul>
-                </div>
-            </span>
+            1) Press <code>Tab</code> to fill the input with selected search item.<br/>
+            <p><img width="600px" src="https://github.com/stdword/logseq13-missing-commands/assets/1984175/bf27f3a6-8464-4e1f-b967-e5e9efe46e21"/></p>
+            `.trim() + '\n' + `
+            2) Press <code>←</code> arrow (with empty input) to fill the input with the current page name.<br/>
+            <p><img width="600px" src="https://github.com/stdword/logseq13-missing-commands/assets/1984175/a083c0c1-604a-4514-8732-41b6a8c7b1ba"/></p>
         `.trim(),
         type: 'enum',
         enumPicker: 'radio',
-        enumChoices: ['In the First block', 'In the Last block'],
-        default: 'In the Last block',
+        enumChoices: ['Yes', 'No'],
+        default: 'Yes',
     },
 ]
 const settings_: any = settingsSchema.reduce((r, v) => ({ ...r, [v.key]: v}), {})
 
 
-async function onAppSettingsChanged() {
-}
-
 async function init() {
     if (DEV) {
         logseq.UI.showMsg(
@@ -89,29 +68,50 @@ async function init() {
         )
     }
 
-    // logseq.useSettingsSchema(settingsSchema)
+    logseq.useSettingsSchema(settingsSchema)
 
     console.info(p`Loaded`)
 }
+async function postInit(settings) {
+    await onAppSettingsChanged(settings, undefined)
+}
+async function onAppSettingsChanged(current, old) {
+    if (!old || current.enableHomeEnd !== old.enableHomeEnd) {
+        parent.document.removeEventListener('keydown', improveCursorMovement_KeyDownListener)
+        if (current.enableHomeEnd === 'Yes')
+            parent.document.addEventListener('keydown', improveCursorMovement_KeyDownListener)
+    }
+
+    if (!old || current.enableSearchImprovements !== old.enableSearchImprovements) {
+        parent.document.removeEventListener('keydown', improveSearch_KeyDownListener, true)
+        if (current.enableSearchImprovements === 'Yes')
+            parent.document.addEventListener('keydown', improveSearch_KeyDownListener, true)
+    }
+}
 
-async function postInit() {
-    await onAppSettingsChanged()
+const _emptyStyle = '/**/'
+function provideStyle(key: string, style: string = _emptyStyle) {
+    logseq.provideStyle({key, style})
+    return () => {logseq.provideStyle({key, style: _emptyStyle})}
 }
 
+
 async function main() {
     await init()
 
     const settings = logseq.settings!
+    const settingsOff = logseq.onSettingsChanged(onAppSettingsChanged)
 
-    logseq.onSettingsChanged(async (old, new_) => {
-        await onAppSettingsChanged()
+    logseq.beforeunload(async () => {
+        settingsOff()
     })
 
+
     function setting_storeChildBlocksIn() {
-        return false
-        // return settings.storeChildBlocksIn === settings_.storeChildBlocksIn.enumChoices[0]
+        return false  // the last one
     }
 
+
     // Decoration
     logseq.App.registerCommandPalette({
         label: ICON + ' Toggle auto heading', key: 'mc-1-auto-heading',
@@ -300,7 +300,7 @@ async function main() {
     }, (e) => shuffleBlocksCommand() )
 
 
-    await postInit()
+    await postInit(settings)
 }
 
 
diff --git a/src/features.ts b/src/features.ts
@@ -0,0 +1,97 @@
+import { setNativeValue } from './utils'
+
+
+/**
+ * Sublime Text-like double ⌘→ or ⌘← to move cursor to the end / start of the text area
+ */
+export function improveCursorMovement_KeyDownListener(e: KeyboardEvent) {
+    if (!e.target)
+        return
+
+    const target = e.target as HTMLInputElement
+    if (target.tagName !== 'TEXTAREA')
+        return
+
+    if (!['ArrowRight', 'ArrowLeft', 'Home', 'End'].includes(e.key))
+        return
+
+
+    const homeEvent = (
+        (e.key === 'ArrowLeft' && e.metaKey && !e.altKey && !e.ctrlKey) ||
+        (e.key === 'Home')
+    )
+    const endEvent = (
+        (e.key === 'ArrowRight' && e.metaKey && !e.altKey && !e.ctrlKey) ||
+        (e.key === 'End')
+    )
+
+    if (target.selectionEnd === 0 || target.selectionStart === target.value.length)
+        return
+
+    if (endEvent && target.value[target.selectionEnd as number] === '\n') {
+        if (e.shiftKey)
+            target.selectionEnd = -1
+        else
+            target.selectionStart = -1
+    } else if (homeEvent && target.value[(target.selectionStart as number) - 1] === '\n')
+        target.selectionStart = 0
+
+    // @ts-expect-error
+    target.scrollIntoViewIfNeeded()
+}
+
+
+/**
+ * TAB-trigger and access current page name on Search
+ */
+export async function improveSearch_KeyDownListener(e: KeyboardEvent) {
+    if (!e.target)
+        return
+
+    const target = e.target as HTMLInputElement
+    if (target.tagName !== 'INPUT' || target.id !== 'search')
+        return
+
+    if (!['ArrowLeft', 'Tab'].includes(e.key))
+        return
+
+    if ( !(
+        !e.altKey && !e.shiftKey && !e.metaKey && !e.ctrlKey
+    ))
+        return
+
+    if (e.key === 'ArrowLeft') {
+        if (!target.value) {
+            e.preventDefault()
+            const page = await logseq.Editor.getCurrentPage()
+            if (page)
+                setNativeValue(target, page.originalName, true)
+        }
+        return
+    }
+
+    e.preventDefault()
+
+    const panel = target.closest('.cp__cmdk')!
+    const active = panel.querySelector('.\\!opacity-100')
+    if (!active)
+        return
+
+    // skip blocks results
+    if (!active.parentElement!.classList.contains('search-results'))
+        return
+
+    const label = active!.querySelector('.text-sm.font-medium')!.childNodes[0] as HTMLElement
+
+    let text
+    if (label.tagName === 'DIV') {  // page with alias
+        const walker = document.createTreeWalker(label, NodeFilter.SHOW_TEXT, null)!
+        text = walker.nextNode()!.textContent
+    } else if (label.tagName === 'SPAN') {  // normal page, command, create command
+        text = label.textContent
+    }
+
+    if (e.key === 'Tab')
+        if (target.value.toLowerCase() !== text.toLowerCase())
+            setNativeValue(target, text, true)
+}
diff --git a/src/utils/logseq.ts b/src/utils/logseq.ts
@@ -492,3 +492,17 @@ export async function insertBatchBlockBefore(
 
     return inserted
 }
+
+export function setNativeValue(element, value, needToDispatch) {
+    const valueSetter = Object.getOwnPropertyDescriptor(element, 'value')!.set!
+    const prototype = Object.getPrototypeOf(element)
+    const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value')!.set!
+
+    if (valueSetter && valueSetter !== prototypeValueSetter)
+        prototypeValueSetter.call(element, value)
+    else
+        valueSetter.call(element, value)
+
+    if (needToDispatch)
+        element.dispatchEvent(new Event('input', {bubbles: true}))
+}
