First cut at a data model (#6)

Author: nedtwigg

.github/workflows/browser-extension.yml

@@ -0,0 +1,26 @@
+on:
+  pull_request:
+  push:
+    branches: [main, release]
+  workflow_dispatch:
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+jobs:
+  lint-test-and-build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v5
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'npm'
+          cache-dependency-path: browser-extension/package-lock.json
+      - run: npm ci
+        working-directory: browser-extension
+      - run: npm run biome
+        working-directory: browser-extension
+      - run: npm test
+        working-directory: browser-extension
+      - run: npm run compile
+        working-directory: browser-extension

README.md

@@ -1,6 +1,6 @@
 # <img align="left" src="browser-extension/public/icons/icon-48.png"> Gitcasso
 
-*Syntax highlighting and autosave for comments on GitHub (and other other markdown-friendly places).*
+*Syntax highlighting and autosave for comments on GitHub (and other other markdown-friendly websites).*
 
 - "Syntax highlighting is the lie that enables us to see the truth."
 - "The meaning of life is to find your lost comment drafts. The purpose of life is to post them."
@@ -12,6 +12,6 @@ TODO: screenshot of comment draft storage and restoration
 If there's something you'd like to add or fix, see [CONTRIBUTING.md](CONTRIBUTING.md).
 
 Special thanks to:
-- [overtype](https://github.com/panphora/overtype) for the trick which makes syntax highlighting possible
-- [shiki](https://github.com/shikijs/shiki) for the broad library of syntax highlighters
+- [overtype](https://overtype.dev/) for doing `textarea` syntax highlighting of `md`
+- [highlight.js](https://highlightjs.org/) for the broad library of syntax highlighters
 - [Yukai Huang](https://github.com/Yukaii) for [the PRs](https://github.com/panphora/overtype/issues?q=is%3Apr+author%3AYukaii) which made the two work together

browser-extension/README.md

@@ -17,7 +17,7 @@
 - `npm run biome` - runs `biome check` (lint & formatting)
 - `npm run biome:fix` - fixes most of what `biome check` finds
 - `npm run compile` - typechecking
-- `npm run test` - vitest
+- `npm test` - vitest
 
 ### Deployment
 - `npm run build` - build for mv3 for most browsers
@@ -27,10 +27,18 @@
 
 This is a [WXT](https://wxt.dev/)-based browser extension that
 
-- finds `textarea` components and decorates them with [overtype](https://overtype.dev/) and [shiki](https://github.com/shikijs/shiki). 
+- finds `textarea` components and decorates them with [overtype](https://overtype.dev/) and [highlight.js](https://highlightjs.org/)
 - stores unposted comment drafts, and makes them easy to find via the extension popup
 
 ### Entry points
 
-- src/entrypoints/content.ts - injected into every webpage
-- src/entrypoints/popup - html/css/ts which opens when the extension's button gets clicked
+- `src/entrypoints/content.ts` - injected into every webpage
+- `src/entrypoints/popup` - html/css/ts which opens when the extension's button gets clicked
+
+### Architecture
+
+Every time a `textarea` shows up on a page, on initial load or later on, it gets passed to a list of `CommentEnhancer`s. Each one gets a turn to say "I can enhance this box!". They show that they can enhance it by returning a [`CommentSpot`, `Overtype`].
+
+Those values get bundled up with the `HTMLTextAreaElement` itself into an `EnhancedTextarea`, which gets added to the `TextareaRegistry`. At some interval, draft edits will get saved by the browser extension (TODO).
+
+When the `textarea` gets removed from the page, the `TextareaRegistry` is notified so that the `CommentSpot` can be marked as abandoned or submitted as appropriate (TODO).

browser-extension/biome.json

@@ -41,7 +41,7 @@
   "linter": {
     "rules": {
       "complexity": {
-        "noExcessiveCognitiveComplexity": "warn"
+        "noExcessiveCognitiveComplexity": "off"
       },
       "correctness": {
         "noUnusedVariables": "error",
@@ -65,7 +65,7 @@
             "allow": ["assert", "error", "info", "warn"]
           }
         },
-        "noExplicitAny": "error",
+        "noExplicitAny": "off",
         "noVar": "error"
       }
     }

browser-extension/package.json

@@ -4,7 +4,7 @@
     "@wxt-dev/webextension-polyfill": "^1.0.0",
     "webextension-polyfill": "^0.12.0"
   },
-  "description": "Syntax highlighting and autosave for comments on GitHub (and other other markdown-friendly places).",
+  "description": "Syntax highlighting and autosave for comments on GitHub (and other other markdown-friendly websites).",
   "devDependencies": {
     "@biomejs/biome": "^2.1.2",
     "@testing-library/jest-dom": "^6.6.4",
@@ -41,5 +41,5 @@
     "zip:firefox": "wxt zip -b firefox"
   },
   "type": "module",
-  "version": "1.0.0"
+  "version": "0.0.1"
 }

browser-extension/src/entrypoints/content.ts

@@ -1,19 +1,22 @@
-import { CONFIG } from './content/config'
-import { logger } from './content/logger'
-import { injectStyles } from './content/styles'
+import { CONFIG } from '../lib/config'
+import { logger } from '../lib/logger'
+import { EnhancerRegistry, TextareaRegistry } from '../lib/registries'
+
+const enhancers = new EnhancerRegistry()
+const enhancedTextareas = new TextareaRegistry()
 
 export default defineContentScript({
   main() {
     const textAreasOnPageLoad = document.querySelectorAll<HTMLTextAreaElement>(`textarea`)
     for (const textarea of textAreasOnPageLoad) {
-      initializeMaybe(textarea)
+      enhanceMaybe(textarea)
     }
     const observer = new MutationObserver(handleMutations)
     observer.observe(document.body, {
       childList: true,
       subtree: true,
     })
-    logger.debug('Extension loaded')
+    logger.debug('Extension loaded with', enhancers.getEnhancerCount, 'handlers')
   },
   matches: ['<all_urls>'],
   runAt: 'document_end',
@@ -24,20 +27,72 @@ function handleMutations(mutations: MutationRecord[]): void {
     for (const node of mutation.addedNodes) {
       if (node.nodeType === Node.ELEMENT_NODE) {
         const element = node as Element
-        if (element.tagName === 'textarea') {
-          initializeMaybe(element as HTMLTextAreaElement)
+        if (element.tagName === 'TEXTAREA') {
+          enhanceMaybe(element as HTMLTextAreaElement)
+        } else {
+          // Also check for textareas within added subtrees
+          const textareas = element.querySelectorAll?.('textarea')
+          if (textareas) {
+            for (const textarea of textareas) {
+              enhanceMaybe(textarea)
+            }
+          }
+        }
+      }
+    }
+
+    for (const node of mutation.removedNodes) {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        const element = node as Element
+        if (element.tagName === 'TEXTAREA') {
+          enhancedTextareas.unregisterDueToModification(element as HTMLTextAreaElement)
+        } else {
+          // Also check for textareas within removed subtrees
+          const textareas = element.querySelectorAll?.('textarea')
+          if (textareas) {
+            for (const textarea of textareas) {
+              enhancedTextareas.unregisterDueToModification(textarea)
+            }
+          }
         }
       }
     }
   }
 }
 
-function initializeMaybe(textarea: HTMLTextAreaElement) {
-  if (!textarea.classList.contains(CONFIG.ADDED_OVERTYPE_CLASS)) {
-    logger.debug('activating textarea {}', textarea)
-    injectStyles()
-    textarea.classList.add(CONFIG.ADDED_OVERTYPE_CLASS)
+function enhanceMaybe(textarea: HTMLTextAreaElement) {
+  if (enhancedTextareas.get(textarea)) {
+    logger.debug('textarea already registered {}', textarea)
+    return
+  }
+
+  logger.debug('activating textarea {}', textarea)
+  injectStyles()
+
+  const enhancedTextarea = enhancers.tryToEnhance(textarea)
+  if (enhancedTextarea) {
+    logger.debug(
+      'Identified textarea:',
+      enhancedTextarea.spot.type,
+      enhancedTextarea.spot.unique_key,
+    )
+    enhancedTextareas.register(enhancedTextarea)
   } else {
-    logger.debug('already activated textarea {}', textarea)
+    logger.debug('No handler found for textarea')
+  }
+}
+
+const STYLES = `
+.${CONFIG.ADDED_OVERTYPE_CLASS} {
+  background: cyan !important;
+}
+`
+
+function injectStyles(): void {
+  if (!document.getElementById('gitcasso-styles')) {
+    const style = document.createElement('style')
+    style.textContent = STYLES
+    style.id = 'gitcasso-styles'
+    document.head.appendChild(style)
   }
 }

browser-extension/src/entrypoints/content/styles.ts

@@ -9,7 +9,7 @@
   <div id="app">
     <div class="header">
       <div class="logo">Gitcasso Markdown Assistant</div>
-      <div class="subtitle">Syntax highlighting and autosave for comments on GitHub (and other other markdown-friendly places).</div>
+      <div class="subtitle">Syntax highlighting and autosave for comments on GitHub (and other other markdown-friendly websites).</div>
     </div>
     <div id="scan-results">
       <p>Loading drafts from local storage...</p>

browser-extension/src/entrypoints/popup/index.html

@@ -0,0 +1,26 @@
+import type { OverType } from '../overtype/mock-overtype'
+
+/**
+ * stores enough info about the location of a draft to:
+ * - display it in a table
+ * - reopen the draft in-context
+ */
+export interface CommentSpot {
+  unique_key: string
+  type: string
+}
+
+/** wraps the textareas of a given platform with Gitcasso's enhancements */
+export interface CommentEnhancer<Spot extends CommentSpot = CommentSpot> {
+  /** guarantees to only return a type within this list */
+  forSpotTypes(): string[]
+  /**
+   * whenever a new `textarea` is added to any webpage, this method is called.
+   * if we return non-null, then we become the handler for that text area.
+   */
+  tryToEnhance(textarea: HTMLTextAreaElement): [OverType, Spot] | null
+
+  tableIcon(spot: Spot): string
+  tableTitle(spot: Spot): string
+  buildUrl(spot: Spot): string
+}