Don't let GitHub clobber the class name.

Author: WebsByTodd

browser-extension/playwright.config.ts

@@ -1,13 +1,12 @@
 // playwright.config.ts
-import { defineConfig } from '@playwright/test'
+import { defineConfig } from "@playwright/test";
 
 export default defineConfig({
-  testDir: 'tests/e2e',
+  testDir: "tests/e2e",
   use: {
-    screenshot: 'only-on-failure',
-    video: 'retain-on-failure',
-    trace: 'retain-on-failure',
+    screenshot: "only-on-failure",
+    video: "retain-on-failure",
+    trace: "retain-on-failure",
   },
-  reporter: [['html', { open: 'never' }]],
-})
-
+  reporter: [["html", { open: "never" }]],
+});

browser-extension/src/lib/enhancers/modifyDOM.ts

@@ -9,5 +9,22 @@ export function modifyDOM(overtypeInput: HTMLTextAreaElement): HTMLElement {
   overtypeInput.placeholder = 'Add your comment here...'
   const overtypeContainer = overtypeWrapper.parentElement!.closest('div')!
   overtypeContainer.classList.add('overtype-container')
+
+  // Watch for class changes and restore if removed
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+        if (!overtypeContainer.classList.contains('overtype-container')) {
+          overtypeContainer.classList.add('overtype-container')
+        }
+      }
+    })
+  })
+
+  observer.observe(overtypeContainer, {
+    attributeFilter: ['class'],
+    attributes: true,
+  })
+
   return overtypeContainer.parentElement!.closest('div')!
 }

browser-extension/src/lib/registries.ts

@@ -21,16 +21,17 @@ export class EnhancerRegistry {
     this.register(new GitHubIssueAddCommentEnhancer())
     this.register(new GitHubPRAddCommentEnhancer())
     const textColor = 'rgb(31, 35, 40)'
+    const headingColor = 'rgb(174, 52, 151)'
     OverType.setTheme({
       colors: {
         blockquote: 'rgb(89, 99, 110)',
         code: '#59636e',
         codeBg: '#f6f8fa',
         cursor: '#f95738',
         em: 'rgb(126, 123, 255)',
-        h1: textColor,
-        h2: textColor,
-        h3: textColor,
+        h1: headingColor,
+        h2: headingColor,
+        h3: headingColor,
         hr: '#5a7a9b',
         link: 'rgb(9, 105, 218)',
         selection: 'rgba(244, 211, 94, 0.4)',

browser-extension/src/playgrounds/github-playground.ts

@@ -1,47 +1,49 @@
-import hljs from 'highlight.js'
-import OverType from 'overtype'
+import hljs from "highlight.js";
+import OverType from "overtype";
 
 export function githubPrNewCommentContentScript() {
-  if (window.location.hostname !== 'github.com') {
-    return
+  if (window.location.hostname !== "github.com") {
+    return;
   }
-  OverType.setCodeHighlighter(hljsHighlighter)
-  const ghCommentBox = document.getElementById('new_comment_field') as HTMLTextAreaElement | null
+  OverType.setCodeHighlighter(hljsHighlighter);
+  const ghCommentBox = document.getElementById(
+    "new_comment_field",
+  ) as HTMLTextAreaElement | null;
   if (ghCommentBox) {
-    const overtypeContainer = modifyDOM(ghCommentBox)
+    const overtypeContainer = modifyDOM(ghCommentBox);
     new OverType(overtypeContainer, {
       autoResize: true,
-      minHeight: '102px',
-      padding: 'var(--base-size-8)',
-      placeholder: 'Add your comment here...',
-    })
+      minHeight: "102px",
+      padding: "var(--base-size-8)",
+      placeholder: "Add your comment here...",
+    });
   }
 }
 
 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')!
+  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")!;
 }
 
 function hljsHighlighter(code: string, language?: string) {
   try {
     if (language && hljs.getLanguage(language)) {
-      const result = hljs.highlight(code, { language })
-      return result.value
+      const result = hljs.highlight(code, { language });
+      return result.value;
     } else {
-      const result = hljs.highlightAuto(code)
-      return result.value
+      const result = hljs.highlightAuto(code);
+      return result.value;
     }
   } catch (error) {
-    console.warn('highlight.js highlighting failed:', error)
-    return code
+    console.warn("highlight.js highlighting failed:", error);
+    return code;
   }
 }

browser-extension/vitest.config.ts

@@ -1,11 +1,11 @@
-import { defineConfig } from 'vitest/config'
-import { WxtVitest } from 'wxt/testing'
+import { defineConfig } from "vitest/config";
+import { WxtVitest } from "wxt/testing";
 
 export default defineConfig({
   plugins: [WxtVitest()],
   test: {
-    environment: 'node',
-    pool: 'threads',
+    environment: "node",
+    pool: "threads",
     globals: true,
   },
-})
+});

browser-extension/wxt.config.ts

@@ -1,22 +1,22 @@
-import { defineConfig } from 'wxt'
+import { defineConfig } from "wxt";
 
 export default defineConfig({
   manifest: {
     description:
-      'Syntax highlighting and autosave for comments on GitHub (and other other markdown-friendly websites).',
-    host_permissions: ['https://*/*', 'http://*/*'],
+      "Syntax highlighting and autosave for comments on GitHub (and other other markdown-friendly websites).",
+    host_permissions: ["https://*/*", "http://*/*"],
     icons: {
-      16: '/icons/icon-16.png',
-      48: '/icons/icon-48.png',
-      128: '/icons/icon-128.png',
+      16: "/icons/icon-16.png",
+      48: "/icons/icon-48.png",
+      128: "/icons/icon-128.png",
     },
-    name: 'Gitcasso',
-    permissions: ['activeTab', 'tabs'],
-    version: '1.0.0',
+    name: "Gitcasso",
+    permissions: ["activeTab", "tabs"],
+    version: "1.0.0",
   },
-  modules: ['@wxt-dev/webextension-polyfill'],
-  srcDir: 'src',
+  modules: ["@wxt-dev/webextension-polyfill"],
+  srcDir: "src",
   webExt: {
     disabled: true,
   },
-})
+});