Same result with less code by doing cleanup on *every* overtype that gets destroyed (probably a good idea).

Author: nedtwigg

src/lib/enhancer.ts

@@ -40,15 +40,9 @@ export interface CommentEnhancer<Spot extends CommentSpot = CommentSpot> {
   /**
    * If `tryToEnhance` returns non-null, then this gets called.
    */
-  enhance(textarea: HTMLTextAreaElement, spot: Spot): OvertypeWithCleanup
+  enhance(textarea: HTMLTextAreaElement, spot: Spot): OverTypeInstance
   /** Returns a ReactNode which will be displayed in the table row. */
   tableUpperDecoration(spot: Spot): ReactNode
   /** The default title of a row */
   tableTitle(spot: Spot): string
 }
-
-/** Allows enhancers to attach an optional cleanup field to the return value of `enhance()`. */
-export interface OvertypeWithCleanup {
-  instance: OverTypeInstance
-  cleanup?: () => void
-}

src/lib/enhancers/CommentEnhancerMissing.tsx

@@ -1,10 +1,6 @@
+import type { OverTypeInstance } from 'overtype'
 import type { ReactNode } from 'react'
-import type {
-  CommentEnhancer,
-  CommentSpot,
-  OvertypeWithCleanup,
-  StrippedLocation,
-} from '../enhancer'
+import type { CommentEnhancer, CommentSpot, StrippedLocation } from '../enhancer'
 
 /** Used when an entry is in the table which we don't recognize. */
 export class CommentEnhancerMissing implements CommentEnhancer {
@@ -47,7 +43,7 @@ export class CommentEnhancerMissing implements CommentEnhancer {
   tryToEnhance(_textarea: HTMLTextAreaElement, _location: StrippedLocation): CommentSpot | null {
     throw new Error('Method not implemented.')
   }
-  enhance(_textarea: HTMLTextAreaElement, _spot: CommentSpot): OvertypeWithCleanup {
+  enhance(_textarea: HTMLTextAreaElement, _spot: CommentSpot): OverTypeInstance {
     throw new Error('Method not implemented.')
   }
 }

src/lib/enhancers/github/GitHubEditEnhancer.tsx

@@ -1,11 +1,6 @@
-import OverType from 'overtype'
+import OverType, { type OverTypeInstance } from 'overtype'
 import type React from 'react'
-import type {
-  CommentEnhancer,
-  CommentSpot,
-  OvertypeWithCleanup,
-  StrippedLocation,
-} from '@/lib/enhancer'
+import type { CommentEnhancer, CommentSpot, StrippedLocation } from '@/lib/enhancer'
 import { logger } from '@/lib/logger'
 import { modifyDOM } from '../modifyDOM'
 import { commonGitHubOptions, prepareGitHubHighlighter } from './github-common'
@@ -55,7 +50,7 @@ export class GitHubEditEnhancer implements CommentEnhancer<GitHubEditSpot> {
     }
   }
 
-  enhance(textArea: HTMLTextAreaElement, spot: GitHubEditSpot): OvertypeWithCleanup {
+  enhance(textArea: HTMLTextAreaElement, spot: GitHubEditSpot): OverTypeInstance {
     prepareGitHubHighlighter()
     const overtypeContainer = modifyDOM(textArea)
     const overtype = new OverType(overtypeContainer, {
@@ -65,7 +60,7 @@ export class GitHubEditEnhancer implements CommentEnhancer<GitHubEditSpot> {
     if (!spot.isIssue) {
       // TODO: autoheight not working
     }
-    return { instance: overtype }
+    return overtype
   }
 
   tableUpperDecoration(_spot: GitHubEditSpot): React.ReactNode {

src/lib/enhancers/github/GitHubIssueAppendEnhancer.tsx

@@ -1,12 +1,7 @@
 import { IssueOpenedIcon } from '@primer/octicons-react'
-import OverType from 'overtype'
+import OverType, { type OverTypeInstance } from 'overtype'
 import type React from 'react'
-import type {
-  CommentEnhancer,
-  CommentSpot,
-  OvertypeWithCleanup,
-  StrippedLocation,
-} from '@/lib/enhancer'
+import type { CommentEnhancer, CommentSpot, StrippedLocation } from '@/lib/enhancer'
 import { logger } from '@/lib/logger'
 import { modifyDOM } from '../modifyDOM'
 import { commonGitHubOptions, prepareGitHubHighlighter } from './github-common'
@@ -68,22 +63,14 @@ export class GitHubIssueAppendEnhancer implements CommentEnhancer<GitHubIssueApp
     }
   }
 
-  enhance(textArea: HTMLTextAreaElement, _spot: GitHubIssueAppendSpot): OvertypeWithCleanup {
+  enhance(textArea: HTMLTextAreaElement, _spot: GitHubIssueAppendSpot): OverTypeInstance {
     prepareGitHubHighlighter()
     const overtypeContainer = modifyDOM(textArea)
-    const instance = new OverType(overtypeContainer, {
+    return new OverType(overtypeContainer, {
       ...commonGitHubOptions,
       minHeight: '100px',
       placeholder: 'Use Markdown to format your comment',
     })[0]!
-    const cleanup = () => {
-      OverType.instances.delete(overtypeContainer)
-      ;(overtypeContainer as any).overTypeInstance = undefined
-    }
-    return {
-      cleanup,
-      instance,
-    }
   }
 
   tableUpperDecoration(spot: GitHubIssueAppendSpot): React.ReactNode {

src/lib/enhancers/github/GitHubIssueCreateEnhancer.tsx

@@ -1,10 +1,5 @@
-import OverType from 'overtype'
-import type {
-  CommentEnhancer,
-  CommentSpot,
-  OvertypeWithCleanup,
-  StrippedLocation,
-} from '../../enhancer'
+import OverType, { type OverTypeInstance } from 'overtype'
+import type { CommentEnhancer, CommentSpot, StrippedLocation } from '../../enhancer'
 import { logger } from '../../logger'
 import { modifyDOM } from '../modifyDOM'
 import { commonGitHubOptions, prepareGitHubHighlighter } from './github-common'
@@ -55,16 +50,14 @@ export class GitHubIssueCreateEnhancer implements CommentEnhancer<GitHubIssueCre
     }
   }
 
-  enhance(textArea: HTMLTextAreaElement, _spot: GitHubIssueCreateSpot): OvertypeWithCleanup {
+  enhance(textArea: HTMLTextAreaElement, _spot: GitHubIssueCreateSpot): OverTypeInstance {
     prepareGitHubHighlighter()
     const overtypeContainer = modifyDOM(textArea)
-    return {
-      instance: new OverType(overtypeContainer, {
-        ...commonGitHubOptions,
-        minHeight: '400px',
-        placeholder: 'Type your description here...',
-      })[0]!,
-    }
+    return new OverType(overtypeContainer, {
+      ...commonGitHubOptions,
+      minHeight: '400px',
+      placeholder: 'Type your description here...',
+    })[0]!
   }
 
   tableUpperDecoration(spot: GitHubIssueCreateSpot): React.ReactNode {

src/lib/enhancers/github/GitHubPrAppendEnhancer.tsx

@@ -1,11 +1,6 @@
-import OverType from 'overtype'
+import OverType, { type OverTypeInstance } from 'overtype'
 import type React from 'react'
-import type {
-  CommentEnhancer,
-  CommentSpot,
-  OvertypeWithCleanup,
-  StrippedLocation,
-} from '@/lib/enhancer'
+import type { CommentEnhancer, CommentSpot, StrippedLocation } from '@/lib/enhancer'
 import { logger } from '@/lib/logger'
 import { modifyDOM } from '../modifyDOM'
 import { commonGitHubOptions, prepareGitHubHighlighter } from './github-common'
@@ -58,24 +53,22 @@ export class GitHubPrAppendEnhancer implements CommentEnhancer<GitHubPrAppendSpo
     }
   }
 
-  enhance(textArea: HTMLTextAreaElement, _spot: GitHubPrAppendSpot): OvertypeWithCleanup {
+  enhance(textArea: HTMLTextAreaElement, _spot: GitHubPrAppendSpot): OverTypeInstance {
     prepareGitHubHighlighter()
     const overtypeContainer = modifyDOM(textArea)
-    const instance = new OverType(overtypeContainer, {
+    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 === '') {
-        instance.updatePreview()
+        overtype.updatePreview()
       }
     })
     listenForEmpty.observe(textArea, { attributes: true, characterData: true })
-    return {
-      instance,
-    }
+    return overtype
   }
 
   tableUpperDecoration(spot: GitHubPrAppendSpot): React.ReactNode {

src/lib/enhancers/github/GitHubPrCreateEnhancer.tsx

@@ -1,10 +1,5 @@
-import OverType from 'overtype'
-import type {
-  CommentEnhancer,
-  CommentSpot,
-  OvertypeWithCleanup,
-  StrippedLocation,
-} from '../../enhancer'
+import OverType, { type OverTypeInstance } from 'overtype'
+import type { CommentEnhancer, CommentSpot, StrippedLocation } from '../../enhancer'
 import { logger } from '../../logger'
 import { modifyDOM } from '../modifyDOM'
 import { commonGitHubOptions, prepareGitHubHighlighter } from './github-common'
@@ -65,16 +60,14 @@ export class GitHubPrCreateEnhancer implements CommentEnhancer<GitHubPrCreateSpo
     }
   }
 
-  enhance(textArea: HTMLTextAreaElement, _spot: GitHubPrCreateSpot): OvertypeWithCleanup {
+  enhance(textArea: HTMLTextAreaElement, _spot: GitHubPrCreateSpot): OverTypeInstance {
     prepareGitHubHighlighter()
     const overtypeContainer = modifyDOM(textArea)
-    return {
-      instance: new OverType(overtypeContainer, {
-        ...commonGitHubOptions,
-        minHeight: '250px',
-        placeholder: 'Type your description here...',
-      })[0]!,
-    }
+    return new OverType(overtypeContainer, {
+      ...commonGitHubOptions,
+      minHeight: '250px',
+      placeholder: 'Type your description here...',
+    })[0]!
   }
 
   tableUpperDecoration(spot: GitHubPrCreateSpot): React.ReactNode {

src/lib/registries.ts

@@ -19,7 +19,6 @@ export interface EnhancedTextarea<T extends CommentSpot = CommentSpot> {
   spot: T
   enhancer: CommentEnhancer<T>
   overtype: OverTypeInstance
-  cleanup?: () => void
 }
 
 export class EnhancerRegistry {
@@ -72,9 +71,9 @@ export class EnhancerRegistry {
       try {
         const spot = enhancer.tryToEnhance(textarea, location)
         if (spot) {
-          const { instance: overtype, cleanup } = enhancer.enhance(textarea, spot)
+          const overtype = enhancer.enhance(textarea, spot)
           this.handleDelayedValueInjection(overtype)
-          return { enhancer, overtype, spot, textarea, ...(cleanup && { cleanup }) }
+          return { enhancer, overtype, spot, textarea }
         }
       } catch (error) {
         console.warn('Handler failed to identify textarea:', error)
@@ -130,12 +129,15 @@ export class TextareaRegistry {
     this.sendEvent('ENHANCED', enhanced)
   }
 
+  private cleanupOvertype(overtype: OverTypeInstance) {
+    const container = overtype.element
+    OverType.instances.delete(container)
+    ;(container as any).overTypeInstance = undefined
+  }
   unregisterDueToModification(textarea: HTMLTextAreaElement): void {
     const enhanced = this.textareas.get(textarea)
     if (enhanced) {
-      if (enhanced.cleanup) {
-        enhanced.cleanup()
-      }
+      this.cleanupOvertype(enhanced.overtype)
       this.sendEvent('DESTROYED', enhanced)
       this.textareas.delete(textarea)
     }