Modify the GH DOM a bit to match what OverType expects so that it uses the existing elements instead of creating new ones.

Author: WebsByTodd

browser-extension/src/entrypoints/content.ts

@@ -1,41 +1,20 @@
-import { CONFIG } from './content/config'
-import { logger } from './content/logger'
-import { injectStyles } from './content/styles'
-import OverType from 'overtype'
+import OverType from "../overtype/overtype";
 
 export default defineContentScript({
   main() {
-    const textAreasOnPageLoad = document.querySelectorAll<HTMLTextAreaElement>(`textarea`)
-    for (const textarea of textAreasOnPageLoad) {
-      initializeTextArea(textarea)
-    }
-    const observer = new MutationObserver(handleMutations)
-    observer.observe(document.body, {
-      childList: true,
-      subtree: true,
-    })
-    logger.debug('Extension loaded')
+    const ghCommentBox = document.getElementById("new_comment_field")!;
+    ghCommentBox.classList.add("overtype-input");
+    const previewDiv = document.createElement("div");
+    previewDiv.classList.add("overtype-preview");
+    ghCommentBox.insertAdjacentElement("afterend", previewDiv);
+    const ghCommentWrapper = ghCommentBox.parentElement!.closest("div")!;
+    ghCommentWrapper.classList.add("overtype-wrapper");
+    const ghCommentContainer = ghCommentWrapper.parentElement!.closest("div")!;
+    ghCommentContainer.classList.add("overtype-container");
+    new OverType(ghCommentContainer.parentElement!.closest("div")!, {
+      placeholder: "Add your comment here...",
+    });
   },
-  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') {
-          initializeTextArea(element as HTMLTextAreaElement)
-        }
-      }
-    }
-  }
-}
-
-function initializeTextArea(textarea: HTMLTextAreaElement) {
-  logger.debug('activating textarea {}', textarea)
-  const overtype = new OverType(textarea)[0]
-  logger.debug('overtype initialized {}', overtype)
-  overtype.setValue('Testing 1, 2, 3')
-}
+  matches: ["<all_urls>"],
+  runAt: "document_end",
+});