diff --git a/browser-extension/src/lib/enhancers/github/githubIssueAddComment.ts b/browser-extension/src/lib/enhancers/github/githubIssueAddComment.ts new file mode 100644 index 0000000..8a81b66 --- /dev/null +++ b/browser-extension/src/lib/enhancers/github/githubIssueAddComment.ts @@ -0,0 +1,69 @@ +import OverType, { type OverTypeInstance } from '../../../overtype/overtype' +import type { CommentEnhancer, CommentSpot } from '../../enhancer' +import { logger } from '../../logger' +import { modifyDOM } from '../modifyDOM' +import { githubHighlighter } from './githubHighlighter' + +interface GitHubIssueAddCommentSpot extends CommentSpot { + type: 'GH_ISSUE_ADD_COMMENT' + domain: string + slug: string // owner/repo + number: number // issue number, undefined for new issues +} + +export class GitHubIssueAddCommentEnhancer implements CommentEnhancer { + forSpotTypes(): string[] { + return ['GH_ISSUE_ADD_COMMENT'] + } + + tryToEnhance(_textarea: HTMLTextAreaElement): GitHubIssueAddCommentSpot | null { + if (window.location.hostname !== 'github.com' || _textarea.id !== ':r2v:') { + return null + } + + // Parse GitHub URL structure: /owner/repo/issues/123 or /owner/repo/pull/456 + logger.debug(`${this.constructor.name} examing url`, window.location.pathname) + + const match = window.location.pathname.match(/^\/([^/]+)\/([^/]+)(?:\/issues\/(\d+))/) + logger.debug(`${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}` + return { + domain: 'github.com', + number, + slug, + type: 'GH_ISSUE_ADD_COMMENT', + unique_key, + } + } + + prepareForFirstEnhancement(): void { + OverType.setCodeHighlighter(githubHighlighter) + } + + enhance(textArea: HTMLTextAreaElement, _spot: GitHubIssueAddCommentSpot): OverTypeInstance { + const overtypeContainer = modifyDOM(textArea) + return new OverType(overtypeContainer, { + autoResize: true, + minHeight: '100px', + padding: 'var(--base-size-16)', + placeholder: 'Use Markdown to format your comment', + })[0]! + } + + tableTitle(spot: GitHubIssueAddCommentSpot): string { + const { slug, number } = spot + return `${slug} Issue #${number}` + } + + tableIcon(_: GitHubIssueAddCommentSpot): string { + return '🔄' // PR icon TODO: icon urls in /public + } + + buildUrl(spot: GitHubIssueAddCommentSpot): string { + return `https://${spot.domain}/${spot.slug}/issue/${spot.number}` + } +} diff --git a/browser-extension/src/lib/enhancers/github/githubPRAddComment.ts b/browser-extension/src/lib/enhancers/github/githubPRAddComment.ts index 13aa81d..cf67ce8 100644 --- a/browser-extension/src/lib/enhancers/github/githubPRAddComment.ts +++ b/browser-extension/src/lib/enhancers/github/githubPRAddComment.ts @@ -1,11 +1,11 @@ import OverType, { type OverTypeInstance } from '../../../overtype/overtype' import type { CommentEnhancer, CommentSpot } from '../../enhancer' import { logger } from '../../logger' +import { modifyDOM } from '../modifyDOM' import { githubHighlighter } from './githubHighlighter' -import { GITHUB_SPOT_TYPES, type GitHubSpotType } from './githubSpotTypes' interface GitHubPRAddCommentSpot extends CommentSpot { - type: GitHubSpotType // Override to narrow from string to specific union + type: 'GH_PR_ADD_COMMENT' // Override to narrow from string to specific union domain: string slug: string // owner/repo number: number // issue/PR number, undefined for new issues and PRs @@ -13,12 +13,12 @@ interface GitHubPRAddCommentSpot extends CommentSpot { export class GitHubPRAddCommentEnhancer implements CommentEnhancer { forSpotTypes(): string[] { - return [...GITHUB_SPOT_TYPES] + return ['GH_PR_ADD_COMMENT'] } tryToEnhance(_textarea: HTMLTextAreaElement): GitHubPRAddCommentSpot | null { // Only handle github.com domains TODO: identify GitHub Enterprise somehow - if (window.location.hostname !== 'github.com') { + if (window.location.hostname !== 'github.com' || _textarea.id !== 'new_comment_field') { return null } @@ -46,7 +46,7 @@ export class GitHubPRAddCommentEnhancer implements CommentEnhancer { @@ -15,6 +16,7 @@ export class EnhancerRegistry { constructor() { // Register all available handlers + this.register(new GitHubIssueAddCommentEnhancer()) this.register(new GitHubPRAddCommentEnhancer()) } diff --git a/browser-extension/src/overtype/styles.js b/browser-extension/src/overtype/styles.js index a3d0ebb..fcdb976 100644 --- a/browser-extension/src/overtype/styles.js +++ b/browser-extension/src/overtype/styles.js @@ -54,7 +54,9 @@ export function generateStyles(options = {}) { } /* Middle-ground CSS Reset - Prevent parent styles from leaking in */ - .overtype-container * { + .overtype-container .overtype-wrapper, + .overtype-container .overtype-input, + .overtype-container .overtype-preview { /* Box model - these commonly leak */ /* margin: 0 !important; */ padding: 0 !important;