Batch editing for Search & Replace

README.md

@@ -20,19 +20,21 @@ It's available in their respective extension stores for both [Chrome](https://ch
 
   ![](./media/fuzzy_date.gif)
 1. Date increment/decrement
+    - Shortcuts for ±1 day and ±7 days
     - If there is only 1 date in the block - place the cursor anywhere withing it and press `Ctrl-Alt-Up/Down`, if there is more then 1 date - you need to place the cursor within the name of the date.
 1. Spaced repetition
    * Anki SRS algorithm & Shortcuts
    * Leitner System automation shortcuts 
-1. Block actions: Delete, Duplicate
+1. Single-block actions: Duplicate, Delete, Copy Block Reference, and Copy Block Embed
+1. Batch-block actions: Batch Link a word or phrase, and add/remove "end" tags
 1. Task estimates
 1. Custom CSS
-
+1. Navigation Hotkeys: Go to Today, Go to Tomorrow, and Go to Yesterday
 
 ## Running the development version
 
 1. Checkout the repository
-2. Revert the https://github.com/roam-unofficial/roam-toolkit/commit/20ad9560b7cfaf71adf65dbc3645b3554c2ab598 change locally to allow Toolkit to properly run in the development mode
+2. Revert the https://github.com/roam-unofficial/roam-toolkit/commit/20ad9560b7cfaf71adf65dbc3645b3554c2ab598 change locally to allow Toolkit to properly run in the development mode. **← Do not commit the resulting change as it will break the release build!**
 
 ### In terminal or command prompt
 

src/ts/features/batch-editing.ts

@@ -0,0 +1,115 @@
+import {Feature, Shortcut} from '../utils/settings'
+import {Roam} from '../roam/roam'
+import {getHighlightedBlocks} from '../utils/dom'
+import {forEachAsync, delay} from '../utils/async'
+
+export const config: Feature = {
+    id: 'editing',
+    name: 'Batch Editing',
+    settings: [
+        {
+            type: 'shortcut',
+            id: 'batchLinking',
+            label: 'Apply [[link]] brackets to a word in every highlighted block\n\n(whole-words only)',
+            initValue: 'Meta+shift+l',
+            onPress: () => batchLinking(),
+        } as Shortcut,
+        {
+            type: 'shortcut',
+            id: 'batchAppendTag',
+            label: 'Append #yourtag to every highlighted block',
+            initValue: 'Ctrl+shift+t',
+            onPress: () => appendTag(),
+        } as Shortcut,
+        {
+            type: 'shortcut',
+            id: 'removeLastEndTag',
+            label: 'Remove the last #tag at the end of each highlighted block',
+            initValue: 'Ctrl+shift+meta+t',
+            onPress: () => removeLastTag(),
+        } as Shortcut,
+        {
+            type: 'shortcut',
+            id: 'regexSearchAndReplace',
+            label:
+                'Roll your own complex search and replace by providing a search string or regex plus a replacement string',
+            initValue: 'Ctrl+shift+f',
+            onPress: () => regexSearchAndReplace(),
+        } as Shortcut,
+    ],
+}
+
+const batchLinking = () => {
+    const text = prompt('What (whole) word do you want to convert into bracketed links?')
+    if (!text || text === '') return
+
+    const warning = `Replace all visible occurrences of "${text}" in the highlighted blocks with "[[${text}]]"?
+
+        🛑 This operation CANNOT BE UNDONE!`
+
+    if (!confirm(warning)) return
+
+    withHighlightedBlocks(originalString => {
+        // Replace whole words only, ignoring already-[[linked]] matches.
+        // http://www.rexegg.com/regex-best-trick.html#javascriptcode
+        const regex = new RegExp(`\\[\\[${text}]]|(\\b${text}\\b)`, 'g')
+        return originalString.replace(regex, function (m, group1) {
+            if (!group1) return m
+            else return `[[${m}]]`
+        })
+    })
+}
+
+const appendTag = () => {
+    const text = prompt('What "string" do you want to append as "#string"?')
+    if (!text || text === '') return
+
+    withHighlightedBlocks(originalString => {
+        if (text.includes(' ')) {
+            return `${originalString} #[[${text}]]`
+        } else {
+            return `${originalString} #${text}`
+        }
+    })
+}
+
+const removeLastTag = () => {
+    if (!confirm('Remove the end tag from every highlighted block?'))
+        return
+
+    withHighlightedBlocks(originalString => {
+        const regex = new RegExp(`(.*) (#.*)`)
+        return originalString.replace(regex, '$1')
+    })
+}
+
+const regexSearchAndReplace = () => {
+    const userRegex = prompt('Enter a search string or regex to find in each selected block')
+    if (!userRegex || userRegex === '') return
+
+    const replacement = prompt('Enter a replacement string (can include $&, $1, and other group matchers)')
+    if (!replacement || replacement === '') return
+
+    withHighlightedBlocks(originalString => {
+        const regex = new RegExp(userRegex, 'g')
+        return originalString.replace(regex, replacement)
+    })
+}
+
+const withHighlightedBlocks = (mod: { (orig: string): string }) => {
+    const highlighted = getHighlightedBlocks()
+
+    const contentBlocks = Array.from(highlighted.contentBlocks)
+    forEachAsync(contentBlocks, async element => {
+        await Roam.replace(element, mod)
+    })
+
+    // Preserve selection
+    const parentBlocks = Array.from(highlighted.parentBlocks)
+    forEachAsync(parentBlocks, async element => {
+        // Wait for dom to settle before re-applying highlight style
+        await delay(100)
+        await element.classList.add('block-highlight-blue')
+    })
+}
+

src/ts/features/features.ts

@@ -4,6 +4,7 @@ import {config as incDec} from './inc-dec-value'
 import {config as customCss} from './custom-css'
 import {config as srs} from '../srs/srs'
 import {config as blockManipulation} from './block-manipulation'
+import {config as batchEditing} from './batch-editing'
 import {config as estimate} from './estimates'
 import {config as navigation} from './navigation'
 import {filterAsync, mapAsync} from '../utils/async'
@@ -13,6 +14,7 @@ export const Features = {
         incDec, // prettier
         srs,
         blockManipulation,
+        batchEditing,
         estimate,
         customCss,
         navigation,

src/ts/roam/roam.ts

@@ -2,6 +2,7 @@ import {RoamNode, Selection} from './roam-node'
 import {getActiveEditElement, getFirstTopLevelBlock, getInputEvent, getLastTopLevelBlock} from '../utils/dom'
 import {Keyboard} from '../utils/keyboard'
 import {Mouse} from '../utils/mouse'
+import {delay} from '../utils/async'
 
 export const Roam = {
     save(roamNode: RoamNode) {
@@ -49,6 +50,12 @@ export const Roam = {
     async activateBlock(element: HTMLElement) {
         if (element.classList.contains('roam-block')) {
             await Mouse.leftClick(element)
+
+            // Prevent race condition when attempting to use the
+            // resulting block before Roam has had a chance to
+            // replace the <span> with a <textarea>. Without this,
+            // Batch operations often skip some blocks.
+            await delay(100)
         }
         return this.getRoamBlockInput()
     },
@@ -77,6 +84,20 @@ export const Roam = {
         this.applyToCurrent(node => node.withCursorAtTheEnd())
     },
 
+    async replace(element: HTMLElement, mod: { (orig: string): string }) {
+        const textarea = await Roam.activateBlock(element) as HTMLTextAreaElement
+        if (!textarea) {
+            console.log("🚨 NO TEXTAREA returned from ", element)
+            return
+        }
+
+        const newText = mod(textarea.value)
+
+        Roam.save(new RoamNode(newText))
+        Keyboard.pressEsc()
+        Keyboard.pressEsc()
+    },
+
     writeText(text: string) {
         this.applyToCurrent(node => new RoamNode(text, node.selection))
         return this.getActiveRoamNode()?.text === text

src/ts/utils/async.ts

@@ -16,3 +16,13 @@ export async function filterAsync<T>(
     const filterMap = await mapAsync(array, callbackfn)
     return array.filter((_value, index) => filterMap[index])
 }
+
+export async function forEachAsync<T>(
+    array: T[],
+    callbackfn: (value: T, ...args: any[]) => void
+) {
+    for await (const element of array) {
+        await callbackfn(element, arguments)
+    }
+}
+

src/ts/utils/dom.ts

@@ -33,6 +33,18 @@ export function getFirstTopLevelBlock() {
     return firstChild.querySelector('.roam-block, textarea') as HTMLElement
 }
 
+export function getHighlightedBlocks(): { parentBlocks: NodeListOf<HTMLElement>, contentBlocks: NodeListOf<HTMLElement> } {
+
+    const highlightedParentBlocks = document.querySelectorAll('.block-highlight-blue') as NodeListOf<HTMLElement>
+
+    const highlightedContentBlocks = document.querySelectorAll('.block-highlight-blue .roam-block') as NodeListOf<HTMLElement>
+
+    return {
+        parentBlocks: highlightedParentBlocks,
+        contentBlocks: highlightedContentBlocks
+    }
+}
+
 export function getInputEvent() {
     return new Event('input', {
         bubbles: true,