feat(features): mouse click with opt/alt on page ref

Author: stdword

src/app.ts

@@ -22,7 +22,7 @@ import {
     lowerCase, upperCase, titleCaseWords, titleCaseSentences,
 } from './commands'
 import { MARKUP, magicQuotes, magicWrap } from './commands/magic_markup'
-import { improveCursorMovementFeature, improveSearchFeature, spareBlocksFeature } from './features'
+import { improveCursorMovementFeature, improveMouseRefClick, improveSearchFeature, spareBlocksFeature } from './features'
 import { borderView, columnsView, galleryView, hideDotRefs, tabularView } from './views'
 import { getChosenBlocks, p, scrollToBlock } from './utils'
 
@@ -97,6 +97,17 @@ const settingsSchema: SettingSchemaDesc[] = [
         enumChoices: ['Yes', 'No'],
         default: 'Yes',
     },
+    {
+        key: 'enableMouseRefClick',
+        title: 'Enable block editing on mouse click to [[reference]]?',
+        description: `
+            With <code>⌥</code> (or <code>Alt</code> for Windows) pressed.
+        `.trim(),
+        type: 'enum',
+        enumPicker: 'radio',
+        enumChoices: ['Yes', 'No'],
+        default: 'Yes',
+    },
     {
         key: 'spareBlocksSpace',
         title: 'Spare space between 1-level blocks',
@@ -242,6 +253,12 @@ async function onAppSettingsChanged(current, old) {
             improveSearchFeature(true)
     }
 
+    if (!old || current.enableMouseRefClick !== old.enableMouseRefClick) {
+        improveMouseRefClick(false)
+        if (current.enableMouseRefClick === 'Yes')
+            improveMouseRefClick(true)
+    }
+
     if (!old || current.spareBlocksSpace !== old.spareBlocksSpace)
         spareBlocksFeature(current.spareBlocksSpace)
 

src/features.ts

@@ -1,4 +1,4 @@
-import { provideStyle, setNativeValue } from './utils'
+import { PropertiesUtils, escapeForRegExp, provideStyle, setNativeValue } from './utils'
 
 import spareBlocksStyle from './css/spare_blocks.css?inline'
 
@@ -109,6 +109,88 @@ export function improveSearchFeature(toggle: boolean) {
         parent.document.removeEventListener('keydown', improveSearch_KeyDownListener, true)
 }
 
+/**
+ * Edit block on mouse click to reference with ALT/OPT pressed
+ */
+async function improveMouseRefClick_MouseUpListener(e: MouseEvent) {
+    if (!e.target)
+        return
+
+    if (! (e.altKey && !e.shiftKey && !e.metaKey && !e.ctrlKey))
+        return
+
+    const target = e.target as HTMLElement
+    if (target.tagName !== 'A')
+        return
+
+    const isTag = target.classList.contains('tag')
+    if (!target.classList.contains('page-ref') && !isTag)
+        return
+
+    const block = target.closest('.block-content') as HTMLElement
+    // @ts-expect-error
+    const uuid = block.attributes.blockid.value
+    if (!uuid)
+        return
+
+    e.stopPropagation()
+
+    let content = (await logseq.Editor.getBlock(uuid))!.content
+    content = PropertiesUtils.deletePropertyFromString(content, 'id')
+
+    // get ref text
+    const walker = document.createTreeWalker(target, NodeFilter.SHOW_TEXT, null)!
+    let text = ''
+    let node: Node | null
+    while (true) {
+        node = walker.nextNode()
+        if (!node)
+            break
+        text = node.textContent!
+    }
+
+    if (isTag)
+        text = text.slice(1)
+
+    // find ref position in block
+    const escapedText = escapeForRegExp(text)
+    const refText = `\\[\\[${escapedText}\\]\\]`
+
+    let startRefPos = -1
+    if (isTag) {
+        startRefPos = content.search(new RegExp(`#${escapedText}`, 'u'))
+        if (startRefPos !== -1)
+            startRefPos += 1  // for #
+
+        if (startRefPos === -1) {
+            startRefPos = content.search(new RegExp(`#${refText}`, 'u'))
+            if (startRefPos !== -1)
+                startRefPos += 3  // for #[[
+        }
+    } else {
+        startRefPos = content.search(new RegExp(refText, 'u'))
+        if (startRefPos !== -1)
+            startRefPos += 2  // for [[
+    }
+
+    if (startRefPos === -1)
+        startRefPos = 0
+
+    // find relative click position
+    const textSize = (target.textContent ?? '').length || 1
+    const rect = target.getBoundingClientRect()
+    const relativePos = e.x - rect.left
+    const charPos = Math.round(textSize * relativePos / rect.width)
+
+    await logseq.Editor.editBlock(uuid, {pos: startRefPos + charPos})
+}
+export function improveMouseRefClick(toggle: boolean) {
+    if (toggle)
+        parent.document.addEventListener('mouseup', improveMouseRefClick_MouseUpListener, true)
+    else
+        parent.document.removeEventListener('mouseup', improveMouseRefClick_MouseUpListener, true)
+}
+
 /**
  * CSS: Make spare space between 1-level blocks
  */

src/utils/other.ts

@@ -76,17 +76,13 @@ export function reduceTextWithLength(text: string, length: number, suffix = '...
 
 export function escapeForRegExp(str: string) {
     const specials = [
-        // '-', '^', '$',
+        '-', '^', '$',
         '/', '.', '*', '+', '?', '|',
         '(', ')', '[', ']', '{', '}', '\\',
     ]
 
     const replacer = new RegExp('(\\' + specials.join('|\\') + ')', 'g')
     return str.replaceAll(replacer, '\\$1')
-
-    // alternative from MDN
-    // return str.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&')
-    // $& means the whole matched string
 }