Merge branch 'main' into feature/more-enhancers

Author: nedtwigg

browser-extension/src/entrypoints/content.ts

@@ -1,8 +1,7 @@
-import { CONFIG, type ModeType } from '../lib/config'
+import { CONFIG } from '../lib/config'
 import type { CommentEvent, CommentSpot } from '../lib/enhancer'
 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()
@@ -24,10 +23,6 @@ enhancedTextareas.setEventHandlers(
 
 export default defineContentScript({
   main() {
-    if ((CONFIG.MODE as ModeType) === 'PLAYGROUNDS_PR') {
-      githubPrNewCommentContentScript()
-      return
-    }
     const textAreasOnPageLoad = document.querySelectorAll<HTMLTextAreaElement>(`textarea`)
     for (const textarea of textAreasOnPageLoad) {
       enhanceMaybe(textarea)

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

@@ -9,5 +9,40 @@ 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,
+  })
+
+  // Find the button that contains the text "Preview"
+  const writePreviewTabs = Array.from(
+    (overtypeContainer.firstElementChild as HTMLElement).querySelectorAll('button'),
+  )
+  const writeTab = writePreviewTabs.find((button) => button.textContent.includes('Write'))
+  const previewTab = writePreviewTabs.find((button) => button.textContent.includes('Preview'))
+
+  if (writeTab && previewTab) {
+    // Hide the textarea when the user is on the "Preview" tab
+    writeTab.addEventListener('click', () => {
+      overtypeWrapper.style.display = 'inline-block'
+    })
+
+    previewTab.addEventListener('click', () => {
+      overtypeWrapper.style.display = 'none'
+    })
+  }
+
   return overtypeContainer.parentElement!.closest('div')!
 }

browser-extension/src/lib/registries.ts

@@ -1,4 +1,5 @@
 import type { OverTypeInstance } from 'overtype'
+import OverType from 'overtype'
 import type { CommentEnhancer, CommentSpot } from './enhancer'
 import { GitHubIssueAddCommentEnhancer } from './enhancers/github/githubIssueAddComment'
 import { GitHubIssueNewCommentEnhancer } from './enhancers/github/githubIssueNewComment'
@@ -23,6 +24,27 @@ export class EnhancerRegistry {
     this.register(new GitHubIssueNewCommentEnhancer())
     this.register(new GitHubPRAddCommentEnhancer())
     this.register(new GitHubPRNewCommentEnhancer())
+    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: headingColor,
+        h2: headingColor,
+        h3: headingColor,
+        hr: '#5a7a9b',
+        link: 'rgb(9, 105, 218)',
+        selection: 'rgba(244, 211, 94, 0.4)',
+        strong: 'rgb(45, 1, 142)',
+        syntaxMarker: textColor,
+        text: textColor,
+      },
+      name: 'custom-github',
+    })
   }
 
   private register<T extends CommentSpot>(enhancer: CommentEnhancer<T>): void {

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

@@ -1,5 +1,12 @@
 import { vi } from 'vitest'
 
+// Mock MutationObserver for tests
+global.MutationObserver = vi.fn().mockImplementation(() => ({
+  disconnect: vi.fn(),
+  observe: vi.fn(),
+  takeRecords: vi.fn(() => []),
+}))
+
 // Mock the OverType editor component
 vi.mock('overtype', () => {
   const mockConstructor = vi.fn().mockImplementation(() => [
@@ -15,6 +22,7 @@ vi.mock('overtype', () => {
     },
   ])
   ;(mockConstructor as any).setCodeHighlighter = vi.fn()
+  ;(mockConstructor as any).setTheme = vi.fn()
   return {
     default: mockConstructor,
   }