Better block creation

src/ts/background/index.ts

@@ -20,3 +20,12 @@ browser.commands.onCommand.addListener((command) => {
     }).then((tabs) =>
         tabs.forEach((tab) => browser.tabs.sendMessage(tab?.id!, command)));
 });
+
+browser.runtime.onMessage.addListener((command) => {
+    browser.tabs.query({
+        currentWindow: true,
+        active: true
+    }).then((tabs) =>
+        tabs.forEach((tab) => browser.tabs.sendMessage(tab?.id!, command)));
+    return Promise.resolve('received message: ' + command)
+});

src/ts/contentScripts/create-block-demo/index.tsx

@@ -1,34 +1,21 @@
-import { getFirstTopLevelBlock } from '../../utils/dom';
+import { DOM } from '../../utils/dom';
 import { Roam} from '../../utils/roam';
 
 export const createDemo = async () => {
-    await Roam.createBlockAtBottom();
-    Roam.writeText('bottom-block');
+    await Roam.createBlockAtBottom(false, 'bottom-block');
 
-    await Roam.createBlockAtTop();
-    Roam.writeText('top-block');
-
-    await Roam.createFirstChild();
-    Roam.writeText('first child');
-
-    await Roam.createFirstChild();
-    Roam.writeText('grandchild');
-
-    await Roam.activateBlock(getFirstTopLevelBlock());
-    await Roam.createLastChild();
-    Roam.writeText('second child');
-
-    await Roam.createFirstChild();
-    Roam.writeText('grandchild');
-
-    await Roam.activateBlock(getFirstTopLevelBlock());
-    await Roam.createDeepestLastDescendant()
-    Roam.writeText('deepest descendant*');
+    await Roam.createBlockAtTop(false, 'top-block');
+    await Roam.createFirstChild('first child');
+    await Roam.createFirstChild('grandchild');
+
+    await Roam.activateBlock(DOM.getFirstTopLevelBlock());
+    await Roam.createLastChild('second child');
+    await Roam.createFirstChild('grandchild');
 
-    await Roam.activateBlock(getFirstTopLevelBlock());
-    await Roam.createSiblingBelow()
-    Roam.writeText('3rd top block');
+    await Roam.activateBlock(DOM.getFirstTopLevelBlock());
+    await Roam.createDeepestLastDescendant('deepest descendant*');
 
-    await Roam.createSiblingAbove()
-    Roam.writeText('2nd top block');
+    await Roam.activateBlock(DOM.getFirstTopLevelBlock());
+    await Roam.createSiblingBelow('3rd top block');
+    await Roam.createSiblingAbove('2nd top block');
 };

src/ts/contentScripts/inc-dec-value/index.tsx

@@ -1,5 +1,5 @@
 import {browser} from 'webextension-polyfill-ts';
-import {getActiveEditElement} from '../../utils/dom';
+import {DOM} from '../../utils/dom';
 
 
 const inputEvent = new Event('input', {
@@ -98,7 +98,7 @@ const dateModified = (date: Date, modType: string): Date => {
 }
 
 const modify = (modType: string) => {
-    const element = getActiveEditElement() as HTMLTextAreaElement;
+    const element = DOM.getActiveEditElement() as HTMLTextAreaElement;
 
     if (element.nodeName === 'TEXTAREA') {
         const itemContent = element.value;

src/ts/utils/dom.ts

@@ -1,41 +1,116 @@
 export type ValueElement = HTMLTextAreaElement | HTMLInputElement | HTMLSelectElement;
 
-export function getActiveEditElement(): ValueElement {
-    // stolen from Surfingkeys. Needs work.
-
-    let element = document.activeElement;
-    // on some pages like chrome://history/, input is in shadowRoot of several other recursive shadowRoots.
-    while (element?.shadowRoot) {
-        if (element.shadowRoot.activeElement) {
-            element = element.shadowRoot.activeElement;
-        } else {
-            const subElement = element.shadowRoot.querySelector('input, textarea, select');
-            if (subElement) {
-                element = subElement;
+export const DOM = {
+    getActiveEditElement(): ValueElement {
+        // stolen from Surfingkeys. Needs work.
+
+        let element = document.activeElement;
+        // on some pages like chrome://history/, input is in shadowRoot of several other recursive shadowRoots.
+        while (element?.shadowRoot) {
+            if (element.shadowRoot.activeElement) {
+                element = element.shadowRoot.activeElement;
+            } else {
+                const subElement = element.shadowRoot.querySelector('input, textarea, select');
+                if (subElement) {
+                    element = subElement;
+                }
+                break;
             }
-            break;
         }
-    }
-    return element as ValueElement;
-}
-
-export function getTopLevelBlocks() {
-    return document.querySelector('.roam-article div .flex-v-box') as HTMLElement;
-}
-
-export function getLastTopLevelBlock() {
-  const lastChild = getTopLevelBlocks().lastChild as HTMLElement;
-  return lastChild.querySelector('.roam-block, textarea') as HTMLElement; 
-}
-
-export function getFirstTopLevelBlock() {
-  const firstChild = getTopLevelBlocks().firstChild as HTMLElement;
-  return firstChild.querySelector('.roam-block, textarea') as HTMLElement; 
+        return element as ValueElement;
+    },
+
+    getTopLevelBlocks() {
+        return document.querySelector('.roam-article div .flex-v-box') as HTMLElement;
+    },
+
+    getLastTopLevelBlock() {
+      const lastChild = this.getTopLevelBlocks().lastChild as HTMLElement;
+      return lastChild.querySelector('.roam-block, textarea') as HTMLElement; 
+    },
+
+    getFirstTopLevelBlock() {
+      const firstChild = this.getTopLevelBlocks().firstChild as HTMLElement;
+      return firstChild.querySelector('.roam-block, textarea') as HTMLElement; 
+    },
+
+
+    getInputEvent() {
+        return new Event('input', {
+            bubbles: true,
+            cancelable: true,
+        });
+    },
+
+    async detectChange(fn: () => void, el?: HTMLElement){
+        const targetNode = el || document.querySelector('.roam-body-main') as HTMLElement;
+        const config = { attributes: true, childList: true, subtree: true };
+        return new Promise(async resolve => {
+            //@ts-ignore unused arg
+            const callback = function(mutationsList:MutationRecord[], observer: MutationObserver) {
+                resolve('mutated')
+                observer.disconnect();
+            };
+            const observer = new MutationObserver(callback);
+            observer.observe(targetNode, config);
+            await fn();
+        })
+    },
+
+    getBlockContainer(element?: HTMLElement) {
+        let parent = null; 
+        let el = element || document.querySelector('textarea') as HTMLElement
+        while(el && !parent){
+            if (el.parentElement?.className?.includes('flex-v-box roam-block-container')) {
+                parent = el?.parentElement;
+            }
+            el = el?.parentElement as HTMLElement;
+        }
+        return parent as HTMLElement
+    },
+
+    getBlockParent(element: HTMLElement){
+        return this.getBlockContainer(this.getBlockContainer(element));
+    },
+
+    isTopLevelBlock(element: HTMLElement){
+        return !this.getBlockParent(element);
+    },
+
+    hasChildren(element: HTMLElement){
+        return !!this.getBlockChildren(element)?.length;
+    },
+
+    getBlockChildren(element: HTMLElement) : HTMLCollection{
+        const childrenDiv = this.getBlockContainer(element)?.lastChild as HTMLElement;
+        return childrenDiv?.children;
+    },
+    getNthChild(element: HTMLElement, n:number){
+        return this.getBlockChildren(element)?.[n].querySelector('.roam-block') as HTMLElement;
+    },
+    getFirstChild(element: HTMLElement){
+        return this.getNthChild(element, 0);
+    },
+    getLastChild(element: HTMLElement){
+        return this.getNthChild(element,this.getBlockChildren(element).length-1);
+    },
+    hasSiblings(element: HTMLElement) {
+        return !!this.getSiblings(element)
+    },
+    getSiblings(element: HTMLElement):  HTMLCollection {
+        if (this.isTopLevelBlock(element)) {
+            return this.getBlockContainer(element)?.parentElement?.children as HTMLCollection
+        } else {
+            return this.getBlockChildren(this.getBlockParent(element))
+        }
+    },
+    getNthSibling(element:HTMLElement, n:number) {
+        return this.getSiblings(element)?.[n].querySelector('.roam-block');
+    },
+    getFirstSibling(element: HTMLElement){
+        return this.getNthSibling(element, 0);
+    },
+    getLastSibling(element: HTMLElement){
+        return this.getNthSibling(element,this.getSiblings(element).length-1);
+    },
 }
-
-export function getInputEvent() {
-    return new Event('input', {
-        bubbles: true,
-        cancelable: true,
-    });
-}

src/ts/utils/keyboard.ts

@@ -6,18 +6,18 @@ export const Keyboard = {
     UP_ARROW: 38,
     RIGHT_ARROW: 39,
     DOWN_ARROW: 40,
-    BASE_DELAY: 20,
+    BASE_DELAY: 50,
 
     async simulateKey(code: number, delayOverride: number = 0, opts?: KeyboardEventInit) {
         const event = new KeyboardEvent('keydown', {
             bubbles: true,
             cancelable: true,
-            // @ts-ignore
+            // @ts-ignore 
             keyCode: code,
             ...opts
         });
-        document?.activeElement?.dispatchEvent(event);
-        return delay(delayOverride ||this.BASE_DELAY);
+                document?.activeElement?.dispatchEvent(event)
+        return delay(delayOverride || this.BASE_DELAY);
     },
     async pressEnter(delayOverride: number = 0) {
         return this.simulateKey(13, delayOverride)