diff --git a/browser-extension/biome.json b/browser-extension/biome.json index d4b34d1..33cd57f 100644 --- a/browser-extension/biome.json +++ b/browser-extension/biome.json @@ -10,7 +10,7 @@ }, "files": { "ignoreUnknown": false, - "includes": [".*", "src/**", "tests/**", "!src/overtype", "!src/playgrounds"] + "includes": [".*", "*.config.ts", "src/**", "tests/**", "!src/overtype"] }, "formatter": { "enabled": true, diff --git a/browser-extension/playwright.config.ts b/browser-extension/playwright.config.ts index 173e3b5..ea2fa0f 100644 --- a/browser-extension/playwright.config.ts +++ b/browser-extension/playwright.config.ts @@ -2,12 +2,11 @@ import { defineConfig } from '@playwright/test' export default defineConfig({ + reporter: [['html', { open: 'never' }]], testDir: 'tests/e2e', use: { screenshot: 'only-on-failure', - video: 'retain-on-failure', trace: 'retain-on-failure', + video: 'retain-on-failure', }, - reporter: [['html', { open: 'never' }]], }) - diff --git a/browser-extension/src/entrypoints/content.ts b/browser-extension/src/entrypoints/content.ts index 83de338..2093239 100644 --- a/browser-extension/src/entrypoints/content.ts +++ b/browser-extension/src/entrypoints/content.ts @@ -1,8 +1,7 @@ -import { CONFIG, type ModeType } from '../lib/config' +import { CONFIG } from '../lib/config' import type { CommentEvent, CommentSpot } from '../lib/enhancer' import { logger } from '../lib/logger' import { EnhancerRegistry, TextareaRegistry } from '../lib/registries' -import { githubPrNewCommentContentScript } from '../playgrounds/github-playground' const enhancers = new EnhancerRegistry() const enhancedTextareas = new TextareaRegistry() @@ -24,10 +23,6 @@ enhancedTextareas.setEventHandlers( export default defineContentScript({ main() { - if ((CONFIG.MODE as ModeType) === 'PLAYGROUNDS_PR') { - githubPrNewCommentContentScript() - return - } const textAreasOnPageLoad = document.querySelectorAll(`textarea`) for (const textarea of textAreasOnPageLoad) { enhanceMaybe(textarea) diff --git a/browser-extension/src/lib/enhancers/modifyDOM.ts b/browser-extension/src/lib/enhancers/modifyDOM.ts index 4e51a76..f7daa7d 100644 --- a/browser-extension/src/lib/enhancers/modifyDOM.ts +++ b/browser-extension/src/lib/enhancers/modifyDOM.ts @@ -9,5 +9,22 @@ export function modifyDOM(overtypeInput: HTMLTextAreaElement): HTMLElement { overtypeInput.placeholder = 'Add your comment here...' const overtypeContainer = overtypeWrapper.parentElement!.closest('div')! overtypeContainer.classList.add('overtype-container') + + // Watch for class changes and restore if removed + const observer = new MutationObserver((mutations) => { + mutations.forEach((mutation) => { + if (mutation.type === 'attributes' && mutation.attributeName === 'class') { + if (!overtypeContainer.classList.contains('overtype-container')) { + overtypeContainer.classList.add('overtype-container') + } + } + }) + }) + + observer.observe(overtypeContainer, { + attributeFilter: ['class'], + attributes: true, + }) + return overtypeContainer.parentElement!.closest('div')! } diff --git a/browser-extension/src/lib/registries.ts b/browser-extension/src/lib/registries.ts index b6d8ad9..373a7a4 100644 --- a/browser-extension/src/lib/registries.ts +++ b/browser-extension/src/lib/registries.ts @@ -1,4 +1,5 @@ import type { OverTypeInstance } from 'overtype' +import OverType from 'overtype' import type { CommentEnhancer, CommentSpot } from './enhancer' import { GitHubIssueAddCommentEnhancer } from './enhancers/github/githubIssueAddComment' import { GitHubPRAddCommentEnhancer } from './enhancers/github/githubPRAddComment' @@ -19,6 +20,27 @@ export class EnhancerRegistry { // Register all available handlers this.register(new GitHubIssueAddCommentEnhancer()) this.register(new GitHubPRAddCommentEnhancer()) + const textColor = 'rgb(31, 35, 40)' + const headingColor = 'rgb(174, 52, 151)' + OverType.setTheme({ + colors: { + blockquote: 'rgb(89, 99, 110)', + code: '#59636e', + codeBg: '#f6f8fa', + cursor: '#f95738', + em: 'rgb(126, 123, 255)', + h1: headingColor, + h2: headingColor, + h3: headingColor, + hr: '#5a7a9b', + link: 'rgb(9, 105, 218)', + selection: 'rgba(244, 211, 94, 0.4)', + strong: 'rgb(45, 1, 142)', + syntaxMarker: textColor, + text: textColor, + }, + name: 'custom-github', + }) } private register(enhancer: CommentEnhancer): void { diff --git a/browser-extension/src/playgrounds/github-playground.ts b/browser-extension/src/playgrounds/github-playground.ts deleted file mode 100644 index 860a0e9..0000000 --- a/browser-extension/src/playgrounds/github-playground.ts +++ /dev/null @@ -1,47 +0,0 @@ -import hljs from 'highlight.js' -import OverType from '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, { - 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')! -} - -function hljsHighlighter(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/tests/har-fixture.ts b/browser-extension/tests/har-fixture.ts index 6464657..b15cb39 100644 --- a/browser-extension/tests/har-fixture.ts +++ b/browser-extension/tests/har-fixture.ts @@ -1,5 +1,12 @@ import { vi } from 'vitest' +// Mock MutationObserver for tests +global.MutationObserver = vi.fn().mockImplementation(() => ({ + disconnect: vi.fn(), + observe: vi.fn(), + takeRecords: vi.fn(() => []), +})) + // Mock the OverType editor component vi.mock('overtype', () => { const mockConstructor = vi.fn().mockImplementation(() => [ @@ -15,6 +22,7 @@ vi.mock('overtype', () => { }, ]) ;(mockConstructor as any).setCodeHighlighter = vi.fn() + ;(mockConstructor as any).setTheme = vi.fn() return { default: mockConstructor, } diff --git a/browser-extension/vitest.config.ts b/browser-extension/vitest.config.ts index 98e411b..d545330 100644 --- a/browser-extension/vitest.config.ts +++ b/browser-extension/vitest.config.ts @@ -5,7 +5,7 @@ export default defineConfig({ plugins: [WxtVitest()], test: { environment: 'node', - pool: 'threads', globals: true, + pool: 'threads', }, })