diff --git a/src/lib/enhancers/github/GitHubEditEnhancer.tsx b/src/lib/enhancers/github/GitHubEditEnhancer.tsx index 931dccd..17bb08b 100644 --- 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 { ): 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 index a169067..fe1c368 100644 --- 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 index 684aad5..a9ee917 100644 --- 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 index 4d4360d..434ee3d 100644 --- 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 index 7ffb02e..9b2c48a 100644 --- 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 index 0573d6e..796f70c 100644 --- 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/modifyDOM.ts b/src/lib/enhancers/overtype-misc.ts similarity index 71% rename from src/lib/enhancers/modifyDOM.ts rename to src/lib/enhancers/overtype-misc.ts index 0d16822..2a4e31e 100644 --- a/src/lib/enhancers/modifyDOM.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 index 3757d06..9edfa00 100644 --- 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(enhancer: CommentEnhancer): void {