Plausible this could work.

Author: nedtwigg

browser-extension/src/lib/enhancer.ts

@@ -1,4 +1,4 @@
-import type { OverType } from '../overtype/mock-overtype'
+import type { OverTypeInstance } from '../overtype/overtype'
 
 /**
  * stores enough info about the location of a draft to:
@@ -18,7 +18,7 @@ export interface CommentEnhancer<Spot extends CommentSpot = CommentSpot> {
    * 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
+  tryToEnhance(textarea: HTMLTextAreaElement): [OverTypeInstance, Spot] | null
 
   tableIcon(spot: Spot): string
   tableTitle(spot: Spot): string

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

@@ -1,4 +1,5 @@
-import { OverType } from '../../overtype/mock-overtype'
+import hljs from 'highlight.js'
+import OverType, { type OverTypeInstance } from '../../overtype/overtype'
 import type { CommentEnhancer, CommentSpot } from '../enhancer'
 
 const GITHUB_SPOT_TYPES = [
@@ -27,7 +28,7 @@ export class GitHubAddCommentEnhancer implements CommentEnhancer<GitHubAddCommen
     return [...GITHUB_SPOT_TYPES]
   }
 
-  tryToEnhance(textarea: HTMLTextAreaElement): [OverType, GitHubAddCommentSpot] | null {
+  tryToEnhance(textarea: HTMLTextAreaElement): [OverTypeInstance, GitHubAddCommentSpot] | null {
     // Only handle github.com domains TODO: identify GitHub Enterprise somehow
     if (window.location.hostname !== 'github.com') {
       return null
@@ -49,8 +50,31 @@ export class GitHubAddCommentEnhancer implements CommentEnhancer<GitHubAddCommen
       type: 'GH_PR_ADD_COMMENT',
       unique_key,
     }
-    const overtype = new OverType(textarea)
-    return [overtype, spot]
+    return [this.createOvertypeFor(textarea), spot]
+  }
+
+  private createOvertypeFor(ghCommentBox: HTMLTextAreaElement): OverTypeInstance {
+    OverType.setCodeHighlighter(hljsHighlighter)
+    const overtypeContainer = this.modifyDOM(ghCommentBox)
+    return new OverType(overtypeContainer, {
+      autoResize: true,
+      minHeight: '102px',
+      padding: 'var(--base-size-8)',
+      placeholder: 'Add your comment here...',
+    })[0]!
+  }
+
+  private 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')!
   }
 
   tableTitle(spot: GitHubAddCommentSpot): string {
@@ -66,3 +90,18 @@ export class GitHubAddCommentEnhancer implements CommentEnhancer<GitHubAddCommen
     return `https://${spot.domain}/${spot.slug}/pull/${spot.number}`
   }
 }
+
+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
+    }
+  } catch (error) {
+    console.warn('highlight.js highlighting failed:', error)
+    return code
+  }
+}

browser-extension/src/lib/registries.ts

@@ -1,12 +1,12 @@
-import type { OverType } from '../overtype/mock-overtype'
+import type { OverTypeInstance } from '../overtype/overtype'
 import type { CommentEnhancer, CommentSpot } from './enhancer'
 import { GitHubAddCommentEnhancer } from './enhancers/github'
 
 export interface EnhancedTextarea<T extends CommentSpot = CommentSpot> {
   textarea: HTMLTextAreaElement
   spot: T
-  handler: CommentEnhancer<T>
-  overtype: OverType
+  enhancer: CommentEnhancer<T>
+  overtype: OverTypeInstance
 }
 
 export class EnhancerRegistry {
@@ -22,12 +22,12 @@ export class EnhancerRegistry {
   }
 
   tryToEnhance(textarea: HTMLTextAreaElement): EnhancedTextarea<any> | null {
-    for (const handler of this.enhancers) {
+    for (const enhancer of this.enhancers) {
       try {
-        const result = handler.tryToEnhance(textarea)
+        const result = enhancer.tryToEnhance(textarea)
         if (result) {
           const [overtype, spot] = result
-          return { handler, overtype, spot, textarea }
+          return { enhancer, overtype, spot, textarea }
         }
       } catch (error) {
         console.warn('Handler failed to identify textarea:', error)