Introduce Common Selectors

src/ts/core/common/dom.ts

@@ -1,3 +1,5 @@
+import {Selectors} from '../roam/selectors';
+
 export type ValueElement = HTMLTextAreaElement | HTMLInputElement | HTMLSelectElement
 
 export function getActiveEditElement(): ValueElement {
@@ -25,12 +27,12 @@ export function getTopLevelBlocks() {
 
 export function getLastTopLevelBlock() {
     const lastChild = getTopLevelBlocks().lastChild as HTMLElement
-    return lastChild.querySelector('.roam-block, textarea') as HTMLElement
+    return lastChild.querySelector(`${Selectors.block}, textarea`) as HTMLElement
 }
 
 export function getFirstTopLevelBlock() {
     const firstChild = getTopLevelBlocks().firstChild as HTMLElement
-    return firstChild.querySelector('.roam-block, textarea') as HTMLElement
+    return firstChild.querySelector(`${Selectors.block}, textarea`) as HTMLElement
 }
 
 export function getInputEvent() {

src/ts/core/features/estimates.ts

@@ -2,6 +2,7 @@ import {Feature, Settings, Shortcut, String} from '../settings'
 import {getActiveEditElement} from '../common/dom'
 import {RoamNode} from '../roam/roam-node'
 import {Roam} from '../roam/roam'
+import {Selectors} from '../roam/selectors';
 
 const estimateProperty: String = {
     type: 'string',
@@ -27,7 +28,7 @@ export const config: Feature = {
 }
 
 function getParentElement() {
-    return getActiveEditElement()?.closest('.roam-block-container')?.parentElement
+    return getActiveEditElement()?.closest(Selectors.blockContainer)?.parentElement
 }
 
 /** I'm still figuring out UX on this one.

src/ts/core/features/livePreview.tsx

@@ -3,6 +3,7 @@ import {Navigation} from '../roam/navigation'
 import {browser} from 'webextension-polyfill-ts'
 import {createPopper, Instance} from '@popperjs/core'
 import {delay} from '../common/async';
+import {Selectors} from '../roam/selectors';
 
 export const config: Feature = {
     id: 'live_preview',
@@ -236,7 +237,7 @@ class PreviewIframe {
         .roam-topbar {
             display: none !important;
         }
-        .roam-body-main {
+        ${Selectors.mainPanel} {
             top: 0px !important;
         }
         #buffer {

src/ts/core/roam/selectors.ts

@@ -0,0 +1,16 @@
+export const Selectors = {
+    link: '.rm-page-ref',
+    block: '.roam-block',
+    blockContainer: '.roam-block-container',
+    blockReference: '.rm-block-ref',
+    title: '.rm-title-display',
+
+    mainContent: '.roam-article',
+    mainPanel: '.roam-body-main',
+
+    sidebarContent: '#roam-right-sidebar-content',
+
+    highlight: '.block-highlight-blue',
+    button: '.bp3-button',
+    closeButton: '.bp3-icon-cross',
+}