Enhance editing comments in issues and PRs.

Author: WebsByTodd

browser-extension/src/lib/enhancers/github/githubEditComment.tsx

@@ -0,0 +1,78 @@
+import OverType, { type OverTypeInstance } from 'overtype'
+import type React from 'react'
+import type { CommentEnhancer, CommentSpot } from '@/lib/enhancer'
+import { logger } from '@/lib/logger'
+import { modifyDOM } from '../modifyDOM'
+import { commonGithubOptions } from './ghOptions'
+import { githubHighlighter } from './githubHighlighter'
+
+export interface GitHubEditCommentSpot extends CommentSpot {
+  type: 'GH_EDIT_COMMENT'
+  title: string
+  domain: string
+  slug: string
+  number: number
+}
+
+export class GitHubEditCommentEnhancer implements CommentEnhancer<GitHubEditCommentSpot> {
+  forSpotTypes(): string[] {
+    return ['GH_EDIT_COMMENT']
+  }
+
+  tryToEnhance(_textarea: HTMLTextAreaElement): GitHubEditCommentSpot | null {
+    if (
+      document.querySelector('meta[name="hostname"]')?.getAttribute('content') !== 'github.com' ||
+      !_textarea.matches('.TimelineItem textarea')
+    ) {
+      return null
+    }
+
+    // Parse GitHub URL structure: /owner/repo/issues/123 or /owner/repo/pull/456
+    logger.info(`${this.constructor.name} examing url`, window.location.pathname)
+
+    const match = window.location.pathname.match(/^\/([^/]+)\/([^/]+)(?:\/(pull|issues)\/(\d+))/)
+    logger.info(`${this.constructor.name} found match`, window.location.pathname)
+    if (!match) return null
+    const [, owner, repo, numberStr] = match
+    const slug = `${owner}/${repo}`
+    const number = parseInt(numberStr!, 10)
+    const unique_key = `github.com:${slug}:${number}`
+    const title = 'TODO_TITLE'
+    return {
+      domain: 'github.com',
+      number,
+      slug,
+      title,
+      type: 'GH_EDIT_COMMENT',
+      unique_key,
+    }
+  }
+
+  prepareForFirstEnhancement(): void {
+    OverType.setCodeHighlighter(githubHighlighter)
+  }
+
+  enhance(textArea: HTMLTextAreaElement, _spot: GitHubEditCommentSpot): OverTypeInstance {
+    const overtypeContainer = modifyDOM(textArea)
+    return new OverType(overtypeContainer, {
+      ...commonGithubOptions,
+      minHeight: '102px',
+      padding: 'var(--base-size-8)',
+      placeholder: 'Add your comment here...',
+    })[0]!
+  }
+
+  tableUpperDecoration(spot: GitHubEditCommentSpot): React.ReactNode {
+    const { slug, number } = spot
+    return (
+      <>
+        <span className='font-mono text-muted-foreground text-sm'>{slug}</span>
+        <span className='ml-2 font-medium'>PR #{number}</span>
+      </>
+    )
+  }
+
+  tableTitle(_spot: GitHubEditCommentSpot): string {
+    return 'TITLE_TODO'
+  }
+}

browser-extension/src/lib/enhancers/github/githubPRNewComment.tsx

@@ -23,12 +23,12 @@ export class GitHubPRNewCommentEnhancer implements CommentEnhancer<GitHubPRNewCo
 
     // /owner/repo/compare/feature/more-enhancers?expand=1
     // or /owner/repo/compare/feat/issue-static-and-dynamic...feature/more-enhancers?expand=1
-    logger.info(`${this.constructor.name} examing url`, window.location.pathname)
+    logger.debug(`${this.constructor.name} examing url`, window.location.pathname)
 
     const match = window.location.pathname.match(
       /^\/([^/]+)\/([^/]+)\/compare\/(?:([^.?]+)\.\.\.)?([^?]+)/,
     )
-    logger.info(`${this.constructor.name} found match`, window.location.pathname, match)
+    logger.debug(`${this.constructor.name} found match`, window.location.pathname, match)
 
     if (!match) return null
     const [, owner, repo, baseBranch, compareBranch] = match

browser-extension/src/lib/registries.ts

@@ -2,6 +2,7 @@ import type { OverTypeInstance } from 'overtype'
 import OverType from 'overtype'
 import type { CommentEnhancer, CommentSpot } from './enhancer'
 import { CommentEnhancerMissing } from './enhancers/CommentEnhancerMissing'
+import { GitHubEditCommentEnhancer } from './enhancers/github/githubEditComment'
 import { GitHubIssueAddCommentEnhancer } from './enhancers/github/githubIssueAddComment'
 import { GitHubIssueNewCommentEnhancer } from './enhancers/github/githubIssueNewComment'
 import { GitHubPRAddCommentEnhancer } from './enhancers/github/githubPRAddComment'
@@ -21,6 +22,7 @@ export class EnhancerRegistry {
 
   constructor() {
     // Register all available handlers
+    this.register(new GitHubEditCommentEnhancer())
     this.register(new GitHubIssueAddCommentEnhancer())
     this.register(new GitHubIssueNewCommentEnhancer())
     this.register(new GitHubPRAddCommentEnhancer())