Fixup conflicts between editing and adding on issues and PRs (#63 fixes 21)

Author: nedtwigg

src/lib/enhancers/github/githubEditComment.tsx

@@ -1,48 +1,49 @@
 import OverType, { type OverTypeInstance } from 'overtype'
 import type React from 'react'
-import type { CommentEnhancer, CommentSpot } from '@/lib/enhancer'
+import type { CommentEnhancer, CommentSpot, StrippedLocation } from '@/lib/enhancer'
 import { logger } from '@/lib/logger'
 import { modifyDOM } from '../modifyDOM'
 import { commonGithubOptions } from './ghOptions'
 import { prepareGitHubHighlighter } 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')
-    ) {
+  tryToEnhance(
+    textarea: HTMLTextAreaElement,
+    location: StrippedLocation,
+  ): GitHubEditCommentSpot | null {
+    if (location.host !== 'github.com') {
+      return null
+    }
+
+    // Only enhance textareas that are for editing issue/PR body
+    const isIssueBodyEdit = textarea.closest('.react-issue-body')
+    const isPRBodyEdit =
+      textarea.id?.match(/^issue-\d+-body$/) || textarea.name === 'pull_request[body]'
+
+    if (!isIssueBodyEdit && !isPRBodyEdit) {
       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 = location.pathname.match(/^\/([^/]+)\/([^/]+)\/(?:issues|pull)\/(\d+)/)
+    if (!match) {
+      return null
+    }
 
-    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'
+    const unique_key = `github.com:${owner}/${repo}:${number}:edit-body`
+
+    logger.debug(`${this.constructor.name} enhanced issue/PR body textarea`, unique_key)
     return {
-      domain: 'github.com',
-      number,
-      slug,
-      title,
       type: 'GH_EDIT_COMMENT',
       unique_key,
     }
@@ -59,17 +60,11 @@ export class GitHubEditCommentEnhancer implements CommentEnhancer<GitHubEditComm
     })[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>
-      </>
-    )
+  tableUpperDecoration(_spot: GitHubEditCommentSpot): React.ReactNode {
+    return <span>N/A</span>
   }
 
   tableTitle(_spot: GitHubEditCommentSpot): string {
-    return 'TITLE_TODO'
+    return 'N/A'
   }
 }

src/lib/enhancers/github/githubIssueAddComment.tsx

@@ -31,6 +31,12 @@ export class GitHubIssueAddCommentEnhancer implements CommentEnhancer<GitHubIssu
       return null
     }
 
+    // Don't enhance textareas that are within the issue/PR body editing container
+    const bodyContainer = textarea.closest('.react-issue-body')
+    if (bodyContainer) {
+      return null
+    }
+
     // Parse GitHub URL structure: /owner/repo/issues/123 or /owner/repo/pull/456
     logger.debug(`${this.constructor.name} examing url`, location.pathname)
 

tests/lib/enhancers/github.test.ts

@@ -197,31 +197,13 @@ describe('github', () => {
         {
           "for": "id=:rc3: name=null className=prc-Textarea-TextArea-13q4j focus-visible overtype-input",
           "spot": {
-            "domain": "github.com",
-            "number": 56,
-            "slug": "diffplug/gitcasso",
-            "title": "what about the draft?",
-            "type": "GH_ISSUE_ADD_COMMENT",
-            "unique_key": "github.com:diffplug/gitcasso:56",
+            "type": "GH_EDIT_COMMENT",
+            "unique_key": "github.com:diffplug/gitcasso:56:edit-body",
           },
-          "title": "what about the draft?",
-          "upperDecoration": <React.Fragment>
-            <span
-              className="flex h-4 w-4 flex-shrink-0 items-center justify-center"
-            >
-              <IssueOpenedIcon
-                size={16}
-              />
-            </span>
-            #
-            56
-            <a
-              className="truncate hover:underline"
-              href="https://github.com/diffplug/gitcasso"
-            >
-              diffplug/gitcasso
-            </a>
-          </React.Fragment>,
+          "title": "N/A",
+          "upperDecoration": <span>
+            N/A
+          </span>,
         },
         {
           "for": "id=:ra7: name=null className=prc-Textarea-TextArea-13q4j overtype-input",
@@ -261,27 +243,13 @@ describe('github', () => {
         {
           "for": "id=issue-3429313834-body name=pull_request[body] className=js-comment-field js-paste-markdown js-task-list-field js-quick-submit js-size-to-fit size-to-fit js-session-resumable CommentBox-input FormControl-textarea js-saved-reply-shortcut-comment-field focus-visible overtype-input",
           "spot": {
-            "domain": "github.com",
-            "number": NaN,
-            "slug": "diffplug/gitcasso",
-            "title": "TODO_TITLE",
             "type": "GH_EDIT_COMMENT",
-            "unique_key": "github.com:diffplug/gitcasso:NaN",
+            "unique_key": "github.com:diffplug/gitcasso:58:edit-body",
           },
-          "title": "TITLE_TODO",
-          "upperDecoration": <React.Fragment>
-            <span
-              className="font-mono text-muted-foreground text-sm"
-            >
-              diffplug/gitcasso
-            </span>
-            <span
-              className="ml-2 font-medium"
-            >
-              PR #
-              NaN
-            </span>
-          </React.Fragment>,
+          "title": "N/A",
+          "upperDecoration": <span>
+            N/A
+          </span>,
         },
         {
           "for": "id=new_comment_field name=comment[body] className=js-comment-field js-paste-markdown js-task-list-field js-quick-submit FormControl-textarea CommentBox-input js-size-to-fit size-to-fit js-session-resumable js-saved-reply-shortcut-comment-field overtype-input",