Adapt the overtype POC branch to the new playground layout

.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

@@ -10,7 +10,7 @@
   },
   "files": {
     "ignoreUnknown": false,
-    "includes": [".*", "src/**", "tests/**"]
+    "includes": [".*", "src/**", "tests/**", "!src/overtype", "!src/playgrounds"]
   },
   "formatter": {
     "enabled": true,
@@ -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

@@ -6,7 +6,7 @@
     "overtype": "^1.2.3",
     "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",
@@ -43,5 +43,5 @@
     "zip:firefox": "wxt zip -b firefox"
   },
   "type": "module",
-  "version": "1.0.0"
+  "version": "0.0.1"
 }

browser-extension/src/entrypoints/content.ts

@@ -1,53 +1,103 @@
-import hljs from "highlight.js";
-import OverType from "../overtype/overtype";
+import { CONFIG } from '../lib/config'
+import { logger } from '../lib/logger'
+import { EnhancerRegistry, TextareaRegistry } from '../lib/registries'
+import { githubPrNewCommentContentScript } from '../playgrounds/github-playground'
+
+const enhancers = new EnhancerRegistry()
+const enhancedTextareas = new TextareaRegistry()
 
 export default defineContentScript({
   main() {
-    if (window.location.hostname !== "github.com") {
-      return;
+    if (CONFIG.MODE === 'PLAYGROUNDS_PR') {
+      githubPrNewCommentContentScript()
+      return
     }
-    OverType.setCodeHighlighter(hljsHighlighter);
-    const ghCommentBox = document.getElementById(
-      "new_comment_field"
-    ) as HTMLTextAreaElement | null;
-    if (ghCommentBox) {
-      const overtypeContainer = modifyDOM(ghCommentBox);
-      new OverType(overtypeContainer, {
-        placeholder: "Add your comment here...",
-        autoResize: true,
-        minHeight: "102px",
-        padding: "var(--base-size-8)",
-      });
+    const textAreasOnPageLoad = document.querySelectorAll<HTMLTextAreaElement>(`textarea`)
+    for (const textarea of textAreasOnPageLoad) {
+      enhanceMaybe(textarea)
     }
+    const observer = new MutationObserver(handleMutations)
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+    })
+    logger.debug('Extension loaded with', enhancers.getEnhancerCount, 'handlers')
   },
-  matches: ["<all_urls>"],
-  runAt: "document_end",
-});
-
-function modifyDOM(overtypeInput: HTMLTextAreaElement): HTMLElement {
-  overtypeInput.classList.add("overtype-input");
-  const overtypePreview = document.createElement("div");
-  overtypePreview.classList.add("overtype-preview");
-  overtypeInput.insertAdjacentElement("afterend", overtypePreview);
-  const overtypeWrapper = overtypeInput.parentElement!.closest("div")!;
-  overtypeWrapper.classList.add("overtype-wrapper");
-  overtypeInput.placeholder = "Add your comment here...";
-  const overtypeContainer = overtypeWrapper.parentElement!.closest("div")!;
-  overtypeContainer.classList.add("overtype-container");
-  return overtypeContainer.parentElement!.closest("div")!;
-}
+  matches: ['<all_urls>'],
+  runAt: 'document_end',
+})
+
+function handleMutations(mutations: MutationRecord[]): void {
+  for (const mutation of mutations) {
+    for (const node of mutation.addedNodes) {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        const element = node as Element
+        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)
+            }
+          }
+        }
+      }
+    }
 
-function hljsHighlighter(code: string, language: string) {
-  try {
-    if (language && hljs.getLanguage(language)) {
-      const result = hljs.highlight(code, { language });
-      return result.value;
-    } else {
-      const result = hljs.highlightAuto(code);
-      return result.value;
+    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)
+            }
+          }
+        }
+      }
     }
-  } catch (error) {
-    console.warn("highlight.js highlighting failed:", error);
-    return code;
+  }
+}
+
+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('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/popup/index.html

@@ -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/lib/config.ts

@@ -0,0 +1,10 @@
+const MODES = ['PROD', 'PLAYGROUNDS_PR'] as const
+
+export type ModeType = (typeof MODES)[number]
+
+export const CONFIG = {
+  ADDED_OVERTYPE_CLASS: 'gitcasso-overtype',
+  DEBUG: true, // enabled debug logging
+  EXTENSION_NAME: 'gitcasso', // decorates logs
+  MODE: 'PLAYGROUNDS_PR' satisfies ModeType,
+} as const

browser-extension/src/lib/enhancer.ts

@@ -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
+}