diff --git a/browser-extension/src/lib/enhancers/github/githubHighlighter.ts b/browser-extension/src/lib/enhancers/github/githubHighlighter.ts new file mode 100644 index 0000000..4328191 --- /dev/null +++ b/browser-extension/src/lib/enhancers/github/githubHighlighter.ts @@ -0,0 +1,16 @@ +import hljs from 'highlight.js' + +export function githubHighlighter(code: string, language: string) { + try { + if (language && hljs.getLanguage(language)) { + const result = hljs.highlight(code, { language }) + return result.value + } else { + const result = hljs.highlightAuto(code) + return result.value + } + } catch (error) { + console.warn('highlight.js highlighting failed:', error) + return code + } +} diff --git a/browser-extension/src/lib/enhancers/github.ts b/browser-extension/src/lib/enhancers/github/githubPRAddComment.ts similarity index 62% rename from browser-extension/src/lib/enhancers/github.ts rename to browser-extension/src/lib/enhancers/github/githubPRAddComment.ts index 0c22980..13aa81d 100644 --- a/browser-extension/src/lib/enhancers/github.ts +++ b/browser-extension/src/lib/enhancers/github/githubPRAddComment.ts @@ -1,35 +1,22 @@ -import hljs from 'highlight.js' -import { logger } from '../../lib/logger' -import OverType, { type OverTypeInstance } from '../../overtype/overtype' -import type { CommentEnhancer, CommentSpot } from '../enhancer' +import OverType, { type OverTypeInstance } from '../../../overtype/overtype' +import type { CommentEnhancer, CommentSpot } from '../../enhancer' +import { logger } from '../../logger' +import { githubHighlighter } from './githubHighlighter' +import { GITHUB_SPOT_TYPES, type GitHubSpotType } from './githubSpotTypes' -const GITHUB_SPOT_TYPES = [ - 'GH_PR_ADD_COMMENT', - /* TODO - 'GH_ISSUE_NEW', - 'GH_PR_NEW', - 'GH_ISSUE_ADD_COMMENT', - 'GH_ISSUE_EDIT_COMMENT', - 'GH_PR_EDIT_COMMENT', - 'GH_PR_CODE_COMMENT', - */ -] as const - -export type GitHubSpotType = (typeof GITHUB_SPOT_TYPES)[number] - -export interface GitHubAddCommentSpot extends CommentSpot { +interface GitHubPRAddCommentSpot extends CommentSpot { type: GitHubSpotType // 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 } -export class GitHubAddCommentEnhancer implements CommentEnhancer { +export class GitHubPRAddCommentEnhancer implements CommentEnhancer { forSpotTypes(): string[] { return [...GITHUB_SPOT_TYPES] } - tryToEnhance(_textarea: HTMLTextAreaElement): GitHubAddCommentSpot | null { + tryToEnhance(_textarea: HTMLTextAreaElement): GitHubPRAddCommentSpot | null { // Only handle github.com domains TODO: identify GitHub Enterprise somehow if (window.location.hostname !== 'github.com') { return null @@ -55,10 +42,10 @@ export class GitHubAddCommentEnhancer implements CommentEnhancer { textarea: HTMLTextAreaElement @@ -15,7 +15,7 @@ export class EnhancerRegistry { constructor() { // Register all available handlers - this.register(new GitHubAddCommentEnhancer()) + this.register(new GitHubPRAddCommentEnhancer()) } private register(handler: CommentEnhancer): void { diff --git a/browser-extension/src/playgrounds/github-playground.ts b/browser-extension/src/playgrounds/github-playground.ts index dae988f..3b728ef 100644 --- a/browser-extension/src/playgrounds/github-playground.ts +++ b/browser-extension/src/playgrounds/github-playground.ts @@ -1,49 +1,47 @@ -import hljs from "highlight.js"; -import OverType from "../overtype/overtype"; +import hljs from 'highlight.js' +import OverType from '../overtype/overtype' export function githubPrNewCommentContentScript() { - if (window.location.hostname !== "github.com") { - return; - } - OverType.setCodeHighlighter(hljsHighlighter); - const ghCommentBox = document.getElementById( - "new_comment_field" - ) as HTMLTextAreaElement | null; - if (ghCommentBox) { - const overtypeContainer = modifyDOM(ghCommentBox); - new OverType(overtypeContainer, { - placeholder: "Add your comment here...", - autoResize: true, - minHeight: "102px", - padding: "var(--base-size-8)", - }); - } + if (window.location.hostname !== 'github.com') { + return + } + OverType.setCodeHighlighter(hljsHighlighter) + const ghCommentBox = document.getElementById('new_comment_field') as HTMLTextAreaElement | null + if (ghCommentBox) { + const overtypeContainer = modifyDOM(ghCommentBox) + new OverType(overtypeContainer, { + autoResize: true, + minHeight: '102px', + padding: 'var(--base-size-8)', + placeholder: 'Add your comment here...', + }) + } } function modifyDOM(overtypeInput: HTMLTextAreaElement): HTMLElement { - overtypeInput.classList.add("overtype-input"); - const overtypePreview = document.createElement("div"); - overtypePreview.classList.add("overtype-preview"); - overtypeInput.insertAdjacentElement("afterend", overtypePreview); - const overtypeWrapper = overtypeInput.parentElement!.closest("div")!; - overtypeWrapper.classList.add("overtype-wrapper"); - overtypeInput.placeholder = "Add your comment here..."; - const overtypeContainer = overtypeWrapper.parentElement!.closest("div")!; - overtypeContainer.classList.add("overtype-container"); - return overtypeContainer.parentElement!.closest("div")!; + overtypeInput.classList.add('overtype-input') + const overtypePreview = document.createElement('div') + overtypePreview.classList.add('overtype-preview') + overtypeInput.insertAdjacentElement('afterend', overtypePreview) + const overtypeWrapper = overtypeInput.parentElement!.closest('div')! + overtypeWrapper.classList.add('overtype-wrapper') + overtypeInput.placeholder = 'Add your comment here...' + const overtypeContainer = overtypeWrapper.parentElement!.closest('div')! + overtypeContainer.classList.add('overtype-container') + return overtypeContainer.parentElement!.closest('div')! } function hljsHighlighter(code: string, language: string) { try { if (language && hljs.getLanguage(language)) { - const result = hljs.highlight(code, { language }); - return result.value; + const result = hljs.highlight(code, { language }) + return result.value } else { - const result = hljs.highlightAuto(code); - return result.value; + const result = hljs.highlightAuto(code) + return result.value } } catch (error) { - console.warn("highlight.js highlighting failed:", error); - return code; + console.warn('highlight.js highlighting failed:', error) + return code } }