Fixup overtype modification sync errors (#102)

nedtwigg · web-flow · commit d9eb425a6235 · 2025-10-02T09:07:43.000-07:00
diff --git a/src/lib/enhancers/github/GitHubEditEnhancer.tsx b/src/lib/enhancers/github/GitHubEditEnhancer.tsx
@@ -6,7 +6,7 @@ import type {
   StrippedLocation,
 } from "@/lib/enhancer"
 import { logger } from "@/lib/logger"
-import { modifyDOM } from "../modifyDOM"
+import { fixupOvertype, modifyDOM } from "../overtype-misc"
 import { commonGitHubOptions, prepareGitHubHighlighter } from "./github-common"
 
 const GH_EDIT = "GH_EDIT" as const
@@ -71,13 +71,12 @@ export class GitHubEditEnhancer implements CommentEnhancer<GitHubEditSpot> {
   ): OverTypeInstance {
     prepareGitHubHighlighter()
     const overtypeContainer = modifyDOM(textArea)
-    const overtype = new OverType(overtypeContainer, {
-      ...commonGitHubOptions,
-      padding: spot.isIssue ? "var(--base-size-16)" : "var(--base-size-8)",
-    })[0]!
-    if (!spot.isIssue) {
-      // TODO: autoheight not working
-    }
+    const overtype = fixupOvertype(
+      new OverType(overtypeContainer, {
+        ...commonGitHubOptions,
+        padding: spot.isIssue ? "var(--base-size-16)" : "var(--base-size-8)",
+      })
+    )
     return overtype
   }
 
diff --git a/src/lib/enhancers/github/GitHubIssueAppendEnhancer.tsx b/src/lib/enhancers/github/GitHubIssueAppendEnhancer.tsx
@@ -8,7 +8,7 @@ import type {
   StrippedLocation,
 } from "@/lib/enhancer"
 import { logger } from "@/lib/logger"
-import { modifyDOM } from "../modifyDOM"
+import { fixupOvertype, modifyDOM } from "../overtype-misc"
 import { commonGitHubOptions, prepareGitHubHighlighter } from "./github-common"
 
 const GH_ISSUE_APPEND = "GH_ISSUE_APPEND" as const
@@ -78,11 +78,13 @@ export class GitHubIssueAppendEnhancer
   ): OverTypeInstance {
     prepareGitHubHighlighter()
     const overtypeContainer = modifyDOM(textArea)
-    return new OverType(overtypeContainer, {
-      ...commonGitHubOptions,
-      minHeight: "100px",
-      placeholder: "Use Markdown to format your comment",
-    })[0]!
+    return fixupOvertype(
+      new OverType(overtypeContainer, {
+        ...commonGitHubOptions,
+        minHeight: "100px",
+        placeholder: "Use Markdown to format your comment",
+      })
+    )
   }
 
   tableUpperDecoration(spot: GitHubIssueAppendSpot): React.ReactNode {
diff --git a/src/lib/enhancers/github/GitHubIssueCreateEnhancer.tsx b/src/lib/enhancers/github/GitHubIssueCreateEnhancer.tsx
@@ -7,7 +7,7 @@ import type {
   StrippedLocation,
 } from "../../enhancer"
 import { logger } from "../../logger"
-import { modifyDOM } from "../modifyDOM"
+import { fixupOvertype, modifyDOM } from "../overtype-misc"
 import { commonGitHubOptions, prepareGitHubHighlighter } from "./github-common"
 
 const GH_ISSUE_CREATE = "GH_ISSUE_CREATE" as const
@@ -68,11 +68,13 @@ export class GitHubIssueCreateEnhancer
   ): OverTypeInstance {
     prepareGitHubHighlighter()
     const overtypeContainer = modifyDOM(textArea)
-    return new OverType(overtypeContainer, {
-      ...commonGitHubOptions,
-      minHeight: "400px",
-      placeholder: "Type your description here...",
-    })[0]!
+    return fixupOvertype(
+      new OverType(overtypeContainer, {
+        ...commonGitHubOptions,
+        minHeight: "400px",
+        placeholder: "Type your description here...",
+      })
+    )
   }
 
   tableUpperDecoration(spot: GitHubIssueCreateSpot): React.ReactNode {
diff --git a/src/lib/enhancers/github/GitHubPrAppendEnhancer.tsx b/src/lib/enhancers/github/GitHubPrAppendEnhancer.tsx
@@ -8,7 +8,7 @@ import type {
   StrippedLocation,
 } from "@/lib/enhancer"
 import { logger } from "@/lib/logger"
-import { modifyDOM } from "../modifyDOM"
+import { fixupOvertype, modifyDOM } from "../overtype-misc"
 import { commonGitHubOptions, prepareGitHubHighlighter } from "./github-common"
 
 const GH_PR_APPEND = "GH_PR_APPEND" as const
@@ -69,18 +69,14 @@ export class GitHubPrAppendEnhancer
   ): OverTypeInstance {
     prepareGitHubHighlighter()
     const overtypeContainer = modifyDOM(textArea)
-    const overtype = new OverType(overtypeContainer, {
-      ...commonGitHubOptions,
-      minHeight: "102px",
-      padding: "var(--base-size-8)",
-      placeholder: "Add your comment here...",
-    })[0]!
-    const listenForEmpty = new MutationObserver(() => {
-      if (textArea.value === "") {
-        overtype.updatePreview()
-      }
-    })
-    listenForEmpty.observe(textArea, { attributes: true, characterData: true })
+    const overtype = fixupOvertype(
+      new OverType(overtypeContainer, {
+        ...commonGitHubOptions,
+        minHeight: "102px",
+        padding: "var(--base-size-8)",
+        placeholder: "Add your comment here...",
+      })
+    )
     return overtype
   }
 
diff --git a/src/lib/enhancers/github/GitHubPrCreateEnhancer.tsx b/src/lib/enhancers/github/GitHubPrCreateEnhancer.tsx
@@ -7,7 +7,7 @@ import type {
   StrippedLocation,
 } from "../../enhancer"
 import { logger } from "../../logger"
-import { modifyDOM } from "../modifyDOM"
+import { fixupOvertype, modifyDOM } from "../overtype-misc"
 import { commonGitHubOptions, prepareGitHubHighlighter } from "./github-common"
 
 const GH_PR_CREATE = "GH_PR_CREATE" as const
@@ -83,11 +83,13 @@ export class GitHubPrCreateEnhancer
   ): OverTypeInstance {
     prepareGitHubHighlighter()
     const overtypeContainer = modifyDOM(textArea)
-    return new OverType(overtypeContainer, {
-      ...commonGitHubOptions,
-      minHeight: "250px",
-      placeholder: "Type your description here...",
-    })[0]!
+    return fixupOvertype(
+      new OverType(overtypeContainer, {
+        ...commonGitHubOptions,
+        minHeight: "250px",
+        placeholder: "Type your description here...",
+      })
+    )
   }
 
   tableUpperDecoration(spot: GitHubPrCreateSpot): React.ReactNode {
diff --git a/src/lib/enhancers/github/github-common.ts b/src/lib/enhancers/github/github-common.ts
@@ -11,6 +11,27 @@ export const commonGitHubOptions: Options = {
 
 export function prepareGitHubHighlighter() {
   oncePerRefresh("github-highlighter", () => {
+    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: "#000000",
+        em: "rgb(126, 123, 255)",
+        h1: headingColor,
+        h2: headingColor,
+        h3: headingColor,
+        hr: "#5a7a9b",
+        link: "rgb(9, 105, 218)",
+        selection: "rgba(0, 123, 255, 0.3)",
+        strong: "rgb(45, 1, 142)",
+        syntaxMarker: textColor,
+        text: textColor,
+      },
+      name: "custom-github",
+    })
     OverType.setCodeHighlighter(githubHighlighter)
   })
 }
diff --git a/src/lib/enhancers/overtype-misc.ts b/src/lib/enhancers/overtype-misc.ts
@@ -1,3 +1,26 @@
+import type { OverTypeInstance } from "overtype"
+
+// Assert that OverType returned exactly one instance and return it
+export function fixupOvertype(instances: OverTypeInstance[]): OverTypeInstance {
+  if (instances.length !== 1) {
+    throw new Error(
+      `Expected OverType to return exactly 1 instance, got ${instances.length}`
+    )
+  }
+  const overtype = instances[0]!
+  // this works, but we're now updating twice as often as we need to, because
+  // overtype has a built-in update which usually works but not always (#101)
+  // and we're doing this which does always work
+  const updateOnChange = new MutationObserver(() => {
+    overtype.updatePreview()
+  })
+  updateOnChange.observe(overtype.textarea, {
+    attributes: true,
+    characterData: true,
+  })
+  return overtype
+}
+
 // Modify the DOM to trick overtype into adopting it instead of recreating it
 export function modifyDOM(overtypeInput: HTMLTextAreaElement): HTMLElement {
   overtypeInput.classList.add("overtype-input")
diff --git a/src/lib/registries.ts b/src/lib/registries.ts
@@ -32,27 +32,6 @@ export class EnhancerRegistry {
     this.register(new GitHubIssueCreateEnhancer())
     this.register(new GitHubPrAppendEnhancer())
     this.register(new GitHubPrCreateEnhancer())
-    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: "#000000",
-        em: "rgb(126, 123, 255)",
-        h1: headingColor,
-        h2: headingColor,
-        h3: headingColor,
-        hr: "#5a7a9b",
-        link: "rgb(9, 105, 218)",
-        selection: "rgba(0, 123, 255, 0.3)",
-        strong: "rgb(45, 1, 142)",
-        syntaxMarker: textColor,
-        text: textColor,
-      },
-      name: "custom-github",
-    })
   }
 
   private register<T extends CommentSpot>(enhancer: CommentEnhancer<T>): void {
