@joinezco/markdown-editor 0.0.3 → 0.0.4

package/.turbo/turbo-build.log

@@ -1,5 +1,4 @@
-
-
-> @joinezco/markdown-editor@0.0.2 build /home/theo/dev/mono/src/typescript/markdown-editor
-> tsc -p tsconfig.lib.json
-
+
+> @joinezco/markdown-editor@0.0.3 build /home/theo/dev/mono/src/typescript/markdown-editor
+> tsc -p tsconfig.lib.json
+

package/dist/editor/extensions/codeblock.js

@@ -147,36 +147,36 @@ export const ExtendedCodeblock = Node.create({
     },
     // Register input rules (e.g., ``` or ~~~ at the start of a line)
     addInputRules() {
+        const parseLanguageAttributes = (input) => {
+            if (!input)
+                return { language: 'markdown' };
+            // If input contains a dot, treat it as a filename
+            if (input.includes('.')) {
+                const ext = input.split('.').pop()?.toLowerCase() || '';
+                const lang = extOrLanguageToLanguageId[ext] || 'markdown';
+                return { file: input, language: lang };
+            }
+            // Otherwise, check if it's a language name
+            const matchingLanguage = Object.entries(extOrLanguageToLanguageId).find(([ext, lang]) => {
+                return lang.includes(input) || ext === input;
+            });
+            if (matchingLanguage) {
+                return { language: matchingLanguage[1], file: null };
+            }
+            return { language: 'markdown' };
+        };
         return [
+            // ```language + space — more specific, checked first
             textblockTypeInputRule({
-                find: /^```([^\s`]+)?\s$/,
+                find: /^```([^\s`]+)\s$/,
                 type: this.type,
-                getAttributes: match => {
-                    const input = match[1]?.trim();
-                    if (!input)
-                        return { language: 'markdown' };
-                    // If input contains a dot, treat it as a filename
-                    if (input.includes('.')) {
-                        const ext = input.split('.').pop()?.toLowerCase() || '';
-                        const lang = extOrLanguageToLanguageId[ext] || 'markdown';
-                        return {
-                            file: input,
-                            language: lang,
-                        };
-                    }
-                    // Otherwise, check if it's a language name
-                    const matchingLanguage = Object.entries(extOrLanguageToLanguageId).find(([ext, lang]) => {
-                        return lang.includes(input) || ext === input;
-                    });
-                    if (matchingLanguage) {
-                        return {
-                            language: matchingLanguage[1],
-                            file: null,
-                        };
-                    }
-                    // If no language match found, default to markdown
-                    return { language: 'markdown' };
-                },
+                getAttributes: match => parseLanguageAttributes(match[1]?.trim()),
+            }),
+            // ``` alone — triggers immediately on the third backtick
+            textblockTypeInputRule({
+                find: /^```$/,
+                type: this.type,
+                getAttributes: () => ({ language: '' }),
             }),
         ];
     },
@@ -236,6 +236,14 @@ export const ExtendedCodeblock = Node.create({
                     main = state.doc.lineAt(main.head);
                 if (dir < 0 ? main.from > 0 : main.to < state.doc.length)
                     return false;
+                // ArrowUp from first line: focus toolbar instead of escaping to ProseMirror
+                if (dir < 0) {
+                    const toolbarInput = cm.dom.querySelector('.cm-toolbar-input');
+                    if (toolbarInput) {
+                        toolbarInput.focus();
+                        return true;
+                    }
+                }
                 // @ts-ignore
                 let targetPos = getPos() + (dir < 0 ? 0 : node.nodeSize);
                 let selection = Selection.near(view.state.doc.resolve(targetPos), dir);
@@ -302,10 +310,34 @@ export const ExtendedCodeblock = Node.create({
             // Reassign z-indexes for all codeblocks whenever a new one is created
             // This ensures proper stacking order based on DOM position
             reassignZIndexes();
+            // Handle ArrowUp from toolbar to escape to ProseMirror above
+            dom.addEventListener('keydown', (e) => {
+                const target = e.target;
+                if (target.classList.contains('cm-toolbar-input') && e.key === 'ArrowUp') {
+                    // Check if the dropdown is open — if so, let toolbar handle it
+                    const dropdown = dom.querySelector('.cm-search-results');
+                    if (dropdown && dropdown.children.length > 0)
+                        return;
+                    e.preventDefault();
+                    e.stopPropagation();
+                    // @ts-ignore
+                    const pos = getPos();
+                    if (pos !== undefined) {
+                        let selection = Selection.near(view.state.doc.resolve(pos), -1);
+                        let tr = view.state.tr.setSelection(selection).scrollIntoView();
+                        view.dispatch(tr);
+                        view.focus();
+                    }
+                }
+            }, true);
             // Track whether this codeblock was created empty (e.g. via ``` input rule)
             const wasCreatedEmpty = !node.textContent && !node.attrs.file;
-            // Initialize filesystem worker and update extensions asynchronously
-            getFileSystemWorker().then(fs => {
+            // Use the editor's filesystem if available (so codeblocks can resolve
+            // file references seeded into the same filesystem), otherwise fall back
+            // to a standalone worker.
+            const editorFs = editor.storage.persistence?.options?.fs;
+            const fsPromise = editorFs ? Promise.resolve(editorFs) : getFileSystemWorker();
+            fsPromise.then(fs => {
                 fsWorker = fs;
                 SearchIndex.get(fsWorker, '.codeblock/index.json').then(index => {
                     // Reconfigure with codeblock extension once fs is ready
@@ -344,6 +376,15 @@ export const ExtendedCodeblock = Node.create({
             return {
                 dom,
                 setSelection(anchor, head) {
+                    // If the codeblock wasn't focused (entering from outside),
+                    // direct to the toolbar input for keyboard navigation
+                    if (!cm.hasFocus) {
+                        const toolbarInput = cm.dom.querySelector('.cm-toolbar-input');
+                        if (toolbarInput) {
+                            toolbarInput.focus();
+                            return;
+                        }
+                    }
                     cm.focus();
                     updating = true;
                     cm.dispatch({ selection: { anchor, head } });

package/dist/editor/index.js

@@ -11,6 +11,28 @@ import { ExtendedLink } from './extensions/link';
 import { SlashCommands } from './extensions/slash-commands';
 import { defaultSlashCommands } from './commands';
 import { StyleModule } from 'style-mod';
+// Override native caret blink speed on browsers that support caret-animation (Firefox 130+/Zen)
+let caretBlinkInjected = false;
+function injectCaretBlink() {
+    if (caretBlinkInjected)
+        return;
+    caretBlinkInjected = true;
+    const style = document.createElement('style');
+    style.textContent = `
+@supports (caret-animation: manual) {
+    .ezco-mde .ProseMirror {
+        caret-animation: manual;
+    }
+    .ezco-mde .ProseMirror:focus {
+        animation: ezco-mde-caret-blink 1s step-end infinite;
+    }
+    @keyframes ezco-mde-caret-blink {
+        from, 50% { caret-color: currentColor; }
+        50.1%, to { caret-color: transparent; }
+    }
+}`;
+    document.head.appendChild(style);
+}
 /**
  * Create a Markdown-ready Tiptap Editor with default extensions and options.
  *
@@ -63,6 +85,7 @@ export function createEditor(options = {}) {
     editor.view.dom.classList.add('ezco-mde');
     if (typeof document !== 'undefined') {
         StyleModule.mount(document, styleModule);
+        injectCaretBlink();
     }
     return editor;
 }

package/dist/editor/styles.js

@@ -230,5 +230,13 @@ export const styleModule = new StyleModule({
                 flex: 1
             }
         },
+        // Make task checkboxes visible when selected (Ctrl-A)
+        // Checkboxes don't natively show selection highlighting,
+        // so add an outline using the system Highlight color
+        '& ul[data-type="taskList"] li > label > input[type="checkbox"]': {
+            '&::selection': {
+                background: 'Highlight',
+            },
+        },
     }
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@joinezco/markdown-editor",
   "private": false,
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@codemirror/state": "^6.5.2",
-    "@codemirror/view": "6.36.7",
+    "@codemirror/view": "^6.36.7",
     "@tiptap/core": "^3.4.1",
     "@tiptap/extension-link": "^3.4.1",
     "@tiptap/extension-table": "^3.4.1",
@@ -35,7 +35,7 @@
     "tippy.js": "^6.3.7",
     "tiptap-markdown": "^0.8.10",
     "vite-plugin-node-polyfills": "^0.24.0",
-    "@joinezco/codeblock": "0.0.9"
+    "@joinezco/codeblock": "0.0.10"
   },
   "devDependencies": {
     "@eslint/js": "^9.22.0",

package/src/lib/editor/extensions/codeblock.ts

@@ -170,39 +170,40 @@ export const ExtendedCodeblock = Node.create({
 
     // Register input rules (e.g., ``` or ~~~ at the start of a line)
     addInputRules() {
-        return [
-            textblockTypeInputRule({
-                find: /^```([^\s`]+)?\s$/,
-                type: this.type,
-                getAttributes: match => {
-                    const input = match[1]?.trim();
-                    if (!input) return { language: 'markdown' };
-
-                    // If input contains a dot, treat it as a filename
-                    if (input.includes('.')) {
-                        const ext = input.split('.').pop()?.toLowerCase() || '';
-                        const lang = extOrLanguageToLanguageId[ext as ExtensionOrLanguage] || 'markdown'
-                        return {
-                            file: input,
-                            language: lang,
-                        };
-                    }
+        const parseLanguageAttributes = (input: string | undefined) => {
+            if (!input) return { language: 'markdown' };
+
+            // If input contains a dot, treat it as a filename
+            if (input.includes('.')) {
+                const ext = input.split('.').pop()?.toLowerCase() || '';
+                const lang = extOrLanguageToLanguageId[ext as ExtensionOrLanguage] || 'markdown'
+                return { file: input, language: lang };
+            }
 
-                    // Otherwise, check if it's a language name
-                    const matchingLanguage = Object.entries(extOrLanguageToLanguageId).find(([ext, lang]) => {
-                        return lang.includes(input) || ext === input;
-                    })
+            // Otherwise, check if it's a language name
+            const matchingLanguage = Object.entries(extOrLanguageToLanguageId).find(([ext, lang]) => {
+                return lang.includes(input) || ext === input;
+            })
 
-                    if (matchingLanguage) {
-                        return {
-                            language: matchingLanguage[1],
-                            file: null,
-                        };
-                    }
+            if (matchingLanguage) {
+                return { language: matchingLanguage[1], file: null };
+            }
 
-                    // If no language match found, default to markdown
-                    return { language: 'markdown' };
-                },
+            return { language: 'markdown' };
+        };
+
+        return [
+            // ```language + space — more specific, checked first
+            textblockTypeInputRule({
+                find: /^```([^\s`]+)\s$/,
+                type: this.type,
+                getAttributes: match => parseLanguageAttributes(match[1]?.trim()),
+            }),
+            // ``` alone — triggers immediately on the third backtick
+            textblockTypeInputRule({
+                find: /^```$/,
+                type: this.type,
+                getAttributes: () => ({ language: '' }),
             }),
         ];
     },
@@ -269,6 +270,16 @@ export const ExtendedCodeblock = Node.create({
                 if (!main.empty) return false
                 if (unit == "line") main = state.doc.lineAt(main.head)
                 if (dir < 0 ? main.from > 0 : main.to < state.doc.length) return false
+
+                // ArrowUp from first line: focus toolbar instead of escaping to ProseMirror
+                if (dir < 0) {
+                    const toolbarInput = cm.dom.querySelector<HTMLInputElement>('.cm-toolbar-input');
+                    if (toolbarInput) {
+                        toolbarInput.focus();
+                        return true;
+                    }
+                }
+
                 // @ts-ignore
                 let targetPos = getPos() + (dir < 0 ? 0 : node.nodeSize)
                 let selection = Selection.near(view.state.doc.resolve(targetPos), dir)
@@ -342,11 +353,36 @@ export const ExtendedCodeblock = Node.create({
             // This ensures proper stacking order based on DOM position
             reassignZIndexes();
 
+            // Handle ArrowUp from toolbar to escape to ProseMirror above
+            dom.addEventListener('keydown', (e) => {
+                const target = e.target as HTMLElement;
+                if (target.classList.contains('cm-toolbar-input') && e.key === 'ArrowUp') {
+                    // Check if the dropdown is open — if so, let toolbar handle it
+                    const dropdown = dom.querySelector('.cm-search-results');
+                    if (dropdown && dropdown.children.length > 0) return;
+
+                    e.preventDefault();
+                    e.stopPropagation();
+                    // @ts-ignore
+                    const pos = getPos();
+                    if (pos !== undefined) {
+                        let selection = Selection.near(view.state.doc.resolve(pos), -1);
+                        let tr = view.state.tr.setSelection(selection).scrollIntoView();
+                        view.dispatch(tr);
+                        view.focus();
+                    }
+                }
+            }, true);
+
             // Track whether this codeblock was created empty (e.g. via ``` input rule)
             const wasCreatedEmpty = !node.textContent && !node.attrs.file;
 
-            // Initialize filesystem worker and update extensions asynchronously
-            getFileSystemWorker().then(fs => {
+            // Use the editor's filesystem if available (so codeblocks can resolve
+            // file references seeded into the same filesystem), otherwise fall back
+            // to a standalone worker.
+            const editorFs = editor.storage.persistence?.options?.fs;
+            const fsPromise = editorFs ? Promise.resolve(editorFs) : getFileSystemWorker();
+            fsPromise.then(fs => {
                 fsWorker = fs;
                 SearchIndex.get(fsWorker, '.codeblock/index.json').then(index => {
                     // Reconfigure with codeblock extension once fs is ready
@@ -388,6 +424,15 @@ export const ExtendedCodeblock = Node.create({
             return {
                 dom,
                 setSelection(anchor, head) {
+                    // If the codeblock wasn't focused (entering from outside),
+                    // direct to the toolbar input for keyboard navigation
+                    if (!cm.hasFocus) {
+                        const toolbarInput = cm.dom.querySelector<HTMLInputElement>('.cm-toolbar-input');
+                        if (toolbarInput) {
+                            toolbarInput.focus();
+                            return;
+                        }
+                    }
                     cm.focus()
                     updating = true
                     cm.dispatch({ selection: { anchor, head } })

package/src/lib/editor/index.ts

@@ -13,6 +13,28 @@ import { SlashCommands } from './extensions/slash-commands';
 import { defaultSlashCommands } from './commands';
 import { StyleModule } from 'style-mod';
 
+// Override native caret blink speed on browsers that support caret-animation (Firefox 130+/Zen)
+let caretBlinkInjected = false;
+function injectCaretBlink() {
+    if (caretBlinkInjected) return;
+    caretBlinkInjected = true;
+    const style = document.createElement('style');
+    style.textContent = `
+@supports (caret-animation: manual) {
+    .ezco-mde .ProseMirror {
+        caret-animation: manual;
+    }
+    .ezco-mde .ProseMirror:focus {
+        animation: ezco-mde-caret-blink 1s step-end infinite;
+    }
+    @keyframes ezco-mde-caret-blink {
+        from, 50% { caret-color: currentColor; }
+        50.1%, to { caret-color: transparent; }
+    }
+}`;
+    document.head.appendChild(style);
+}
+
 export type MarkdownEditorOptions = Partial<EditorOptions> & {
     extensions?: Extension[];
     fs?: FileSystemOptions;
@@ -77,6 +99,7 @@ export function createEditor(options: MarkdownEditorOptions = {}): MarkdownEdito
 
     if (typeof document !== 'undefined') {
         StyleModule.mount(document, styleModule);
+        injectCaretBlink();
     }
     return editor as MarkdownEditor;
 }

package/src/lib/editor/styles.ts

@@ -247,5 +247,13 @@ export const styleModule: StyleModule = new StyleModule({
                 flex: 1
             }
         },
+        // Make task checkboxes visible when selected (Ctrl-A)
+        // Checkboxes don't natively show selection highlighting,
+        // so add an outline using the system Highlight color
+        '& ul[data-type="taskList"] li > label > input[type="checkbox"]': {
+            '&::selection': {
+                background: 'Highlight',
+            },
+        },
     }
 })

package/src/test/multiview-sync.test.ts

@@ -0,0 +1,137 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { fileChangeBus } from '@joinezco/codeblock'
+import { EditorView } from '@codemirror/view'
+import { EditorState } from '@codemirror/state'
+
+describe('FileChangeBus', () => {
+    let viewA: EditorView
+    let viewB: EditorView
+    let containerA: HTMLElement
+    let containerB: HTMLElement
+
+    beforeEach(() => {
+        containerA = document.createElement('div')
+        containerB = document.createElement('div')
+        document.body.appendChild(containerA)
+        document.body.appendChild(containerB)
+
+        viewA = new EditorView({
+            state: EditorState.create({ doc: 'initial' }),
+            parent: containerA,
+        })
+        viewB = new EditorView({
+            state: EditorState.create({ doc: 'initial' }),
+            parent: containerB,
+        })
+    })
+
+    afterEach(() => {
+        viewA.destroy()
+        viewB.destroy()
+        containerA.remove()
+        containerB.remove()
+    })
+
+    it('should notify other subscribers but not the source', () => {
+        const received: { view: string; content: string }[] = []
+
+        fileChangeBus.subscribe('test.txt', viewA, (content) => {
+            received.push({ view: 'A', content })
+        })
+        fileChangeBus.subscribe('test.txt', viewB, (content) => {
+            received.push({ view: 'B', content })
+        })
+
+        // Notify from view A — only B should receive
+        fileChangeBus.notify('test.txt', 'hello from A', viewA)
+
+        expect(received).toEqual([{ view: 'B', content: 'hello from A' }])
+    })
+
+    it('should not notify after unsubscribe', () => {
+        const received: string[] = []
+
+        const unsub = fileChangeBus.subscribe('test.txt', viewA, (content) => {
+            received.push(content)
+        })
+        fileChangeBus.subscribe('test.txt', viewB, () => {})
+
+        unsub()
+        fileChangeBus.notify('test.txt', 'hello', viewB)
+
+        expect(received).toEqual([])
+    })
+
+    it('should handle multiple files independently', () => {
+        const received: string[] = []
+
+        fileChangeBus.subscribe('a.txt', viewA, (content) => {
+            received.push('a:' + content)
+        })
+        fileChangeBus.subscribe('b.txt', viewA, (content) => {
+            received.push('b:' + content)
+        })
+
+        fileChangeBus.notify('a.txt', 'one', viewB)
+        fileChangeBus.notify('b.txt', 'two', viewB)
+
+        expect(received).toEqual(['a:one', 'b:two'])
+    })
+
+    it('should sync document content between views via the bus', () => {
+        // Simulate two views on the same file using the bus to sync
+
+        const unsubA = fileChangeBus.subscribe('shared.txt', viewA, (content) => {
+            if (viewA.state.doc.toString() !== content) {
+                viewA.dispatch({ changes: { from: 0, to: viewA.state.doc.length, insert: content } })
+            }
+        })
+        const unsubB = fileChangeBus.subscribe('shared.txt', viewB, (content) => {
+            if (viewB.state.doc.toString() !== content) {
+                viewB.dispatch({ changes: { from: 0, to: viewB.state.doc.length, insert: content } })
+            }
+        })
+
+        // Edit view A and "save" (notify the bus)
+        viewA.dispatch({ changes: { from: 0, to: viewA.state.doc.length, insert: 'updated content' } })
+        fileChangeBus.notify('shared.txt', 'updated content', viewA)
+
+        // View B should have received the update
+        expect(viewB.state.doc.toString()).toBe('updated content')
+        // View A should NOT have been re-dispatched (it was the source)
+        expect(viewA.state.doc.toString()).toBe('updated content')
+
+        unsubA()
+        unsubB()
+    })
+
+    it('should not create infinite loops when both views subscribe', () => {
+        let dispatchCountA = 0
+        let dispatchCountB = 0
+
+        fileChangeBus.subscribe('shared.txt', viewA, (content) => {
+            if (viewA.state.doc.toString() !== content) {
+                dispatchCountA++
+                viewA.dispatch({ changes: { from: 0, to: viewA.state.doc.length, insert: content } })
+                // In the real codeblockView, this dispatch would NOT trigger save because
+                // receivingExternalUpdate is true. So we do NOT re-notify.
+            }
+        })
+        fileChangeBus.subscribe('shared.txt', viewB, (content) => {
+            if (viewB.state.doc.toString() !== content) {
+                dispatchCountB++
+                viewB.dispatch({ changes: { from: 0, to: viewB.state.doc.length, insert: content } })
+            }
+        })
+
+        // Simulate save from A
+        viewA.dispatch({ changes: { from: 0, to: viewA.state.doc.length, insert: 'final' } })
+        fileChangeBus.notify('shared.txt', 'final', viewA)
+
+        // Only B should have dispatched once
+        expect(dispatchCountA).toBe(0)
+        expect(dispatchCountB).toBe(1)
+        expect(viewA.state.doc.toString()).toBe('final')
+        expect(viewB.state.doc.toString()).toBe('final')
+    })
+})

package/TEST_README.md

@@ -1,359 +0,0 @@
-# Markdown Editor Testing Guide
-
-This document explains how to use the testing setup for the `@joinezco/markdown-editor` library.
-
-## Overview
-
-The testing setup uses **Vitest** with **browser testing capabilities** to test the markdown editor in a real browser environment. This allows us to test DOM interactions, keyboard events, and the actual rendering behavior of the editor.
-
-## Setup
-
-### Dependencies
-
-The following testing dependencies are included:
-
-- `vitest` - Fast unit test framework
-- `@vitest/browser` - Browser testing support
-- `@vitest/ui` - Web UI for test results
-- `playwright` - Browser automation for testing
-- `jsdom` - DOM implementation for Node.js
-- `webdriverio` - WebDriver implementation
-
-### Configuration
-
-The testing is configured in [`vitest.config.ts`](./vitest.config.ts) with:
-
-- **Browser testing enabled** using Playwright with Chromium
-- **Test environment** set up with proper DOM mocking
-- **Coverage reporting** with v8 provider
-- **Custom setup file** for browser environment preparation
-
-## Running Tests
-
-### Available Scripts
-
-```bash
-# Run tests in watch mode
-npm run test
-
-# Run tests with UI
-npm run test:ui
-
-# Run tests in browser mode
-npm run test:browser
-
-# Run tests once and exit
-npm run test:run
-
-# Run tests with coverage
-npm run test:coverage
-```
-
-### Test Files
-
-Tests are located in the `src/test/` directory:
-
-- [`setup.ts`](./src/test/setup.ts) - Global test setup and browser mocks
-- [`utils.ts`](./src/test/utils.ts) - Testing utilities for markdown editor
-- [`editor.test.ts`](./src/test/editor.test.ts) - Core editor functionality tests
-- [`extensions.test.ts`](./src/test/extensions.test.ts) - Extension-specific tests
-
-## Testing Utilities
-
-The [`utils.ts`](./src/test/utils.ts) file provides comprehensive utilities for testing the markdown editor:
-
-### DOM Management
-
-```typescript
-// Create a test container
-const container = createTestContainer()
-
-// Create and initialize editor
-const editor = await createTestEditor(container)
-await waitForEditor(editor)
-
-// Cleanup after test
-cleanupEditor(editor, container)
-```
-
-### Content Management
-
-```typescript
-// Get current markdown content
-const content = getMarkdownContent(editor)
-
-// Set new markdown content
-setMarkdownContent(editor, '# New Content')
-
-// Get HTML output
-const html = getHTMLContent(editor)
-```
-
-### User Interactions
-
-```typescript
-// Focus the editor
-focusEditor(editor)
-
-// Type text
-typeText(editor, 'Hello, World!')
-
-// Simulate key presses
-pressKey(editor, 'b', { ctrl: true }) // Ctrl+B for bold
-
-// Set cursor position
-setSelection(editor, 0, 10) // Select characters 0-10
-```
-
-### Async Operations
-
-```typescript
-// Wait for conditions
-await waitFor(() => editor.isFocused, 5000)
-
-// Wait for editor to be ready
-await waitForEditor(editor)
-```
-
-## Test Categories
-
-### Basic Editor Functionality
-
-Tests core editor features:
-- Editor initialization and DOM rendering
-- Content getting/setting
-- Focus management
-- Selection handling
-
-### Markdown Content Management
-
-Tests markdown processing:
-- Content conversion between markdown and HTML
-- Handling of various markdown syntax
-- Content validation and error handling
-
-### Text Input and Editing
-
-Tests user input:
-- Text insertion at cursor position
-- Line breaks and formatting
-- Keyboard shortcuts (Ctrl+B, Ctrl+I, etc.)
-
-### Extension Testing
-
-Tests specific editor extensions:
-- **Task Lists** - Checkbox rendering and interaction
-- **Tables** - Table rendering and navigation
-- **Links** - Link detection and rendering
-- **Code Blocks** - Syntax highlighting and language support
-- **Slash Commands** - Command menu functionality
-
-### Browser-specific Features
-
-Tests browser interactions:
-- Copy/paste operations
-- Undo/redo functionality
-- Keyboard event handling
-- DOM event simulation
-
-## Writing New Tests
-
-### Basic Test Structure
-
-```typescript
-import { describe, it, expect, beforeEach, afterEach } from 'vitest'
-import { MarkdownEditor } from '../lib/editor'
-import {
-  createTestContainer,
-  createTestEditor,
-  waitForEditor,
-  cleanupEditor,
-} from './utils'
-
-describe('My Feature', () => {
-  let container: HTMLElement
-  let editor: MarkdownEditor
-
-  beforeEach(async () => {
-    container = createTestContainer()
-    editor = await createTestEditor(container)
-    await waitForEditor(editor)
-  })
-
-  afterEach(() => {
-    cleanupEditor(editor, container)
-  })
-
-  it('should do something', () => {
-    // Your test code here
-    expect(editor).toBeDefined()
-  })
-})
-```
-
-### Testing Editor State
-
-```typescript
-it('should update content correctly', () => {
-  setMarkdownContent(editor, '# Test Heading')
-  const content = getMarkdownContent(editor)
-  expect(content).toContain('# Test Heading')
-  
-  const html = getHTMLContent(editor)
-  expect(html).toContain('<h1>Test Heading</h1>')
-})
-```
-
-### Testing User Interactions
-
-```typescript
-it('should handle keyboard shortcuts', () => {
-  focusEditor(editor)
-  typeText(editor, 'bold text')
-  setSelection(editor, 0, 9) // Select "bold text"
-  
-  pressKey(editor, 'b', { ctrl: true })
-  
-  const content = getMarkdownContent(editor)
-  expect(content).toContain('**bold text**')
-})
-```
-
-### Testing Async Operations
-
-```typescript
-it('should handle async updates', async () => {
-  let updateTriggered = false
-  
-  const testEditor = await createTestEditor(container, {
-    onUpdate: () => { updateTriggered = true }
-  })
-  
-  typeText(testEditor, 'New content')
-  
-  await waitFor(() => updateTriggered, 2000)
-  expect(updateTriggered).toBe(true)
-})
-```
-
-## Browser Testing Features
-
-### Real DOM Environment
-
-Tests run in a real browser environment (Chromium via Playwright), providing:
-- Accurate DOM rendering
-- Real event handling
-- Proper CSS layout
-- Browser-specific behaviors
-
-### Visual Testing
-
-While not implemented in the current setup, the browser environment supports:
-- Screenshot comparison testing
-- Visual regression testing
-- Layout testing
-
-### Performance Testing
-
-The browser environment allows for:
-- Measuring render times
-- Testing with large documents
-- Memory usage monitoring
-
-## Debugging Tests
-
-### Using the UI
-
-Run tests with the UI for better debugging:
-
-```bash
-npm run test:ui
-```
-
-This opens a web interface showing:
-- Test results and failures
-- Test execution timeline
-- Code coverage reports
-- Interactive test running
-
-### Browser DevTools
-
-When running browser tests, you can:
-- Set `headless: false` in `vitest.config.ts`
-- Use browser DevTools for debugging
-- Inspect the actual DOM during tests
-
-### Console Logging
-
-Add debug logging in tests:
-
-```typescript
-it('should debug editor state', () => {
-  console.log('Editor state:', editor.state)
-  console.log('Current content:', getMarkdownContent(editor))
-  // ... test code
-})
-```
-
-## Best Practices
-
-### Test Isolation
-
-- Always use `beforeEach`/`afterEach` for setup/cleanup
-- Create fresh editor instances for each test
-- Clean up DOM elements after tests
-
-### Async Handling
-
-- Use `await waitForEditor()` after creating editors
-- Use `waitFor()` for conditional waiting
-- Handle async operations properly
-
-### Realistic Testing
-
-- Test actual user interactions (typing, clicking)
-- Use real markdown content in tests
-- Test edge cases and error conditions
-
-### Performance
-
-- Keep tests focused and fast
-- Use appropriate timeouts
-- Clean up resources properly
-
-## Troubleshooting
-
-### Common Issues
-
-1. **Editor not ready**: Always use `await waitForEditor(editor)` after creation
-2. **DOM not found**: Ensure container is created and editor is initialized
-3. **Async timing**: Use `waitFor()` for conditions that may take time
-4. **Memory leaks**: Always call `cleanupEditor()` in `afterEach`
-
-### Browser Issues
-
-1. **Headless failures**: Set `headless: false` for debugging
-2. **Timeout errors**: Increase timeout values in config
-3. **Worker issues**: Check that worker files are accessible
-
-## Contributing
-
-When adding new tests:
-
-1. Follow the existing test structure
-2. Add utilities to `utils.ts` for reusable functionality
-3. Group related tests in describe blocks
-4. Use descriptive test names
-5. Include both positive and negative test cases
-6. Test browser-specific behaviors when relevant
-
-## Future Enhancements
-
-Potential improvements to the testing setup:
-
-- Visual regression testing with screenshot comparison
-- Performance benchmarking tests
-- Accessibility testing integration
-- Cross-browser testing support
-- Integration with CI/CD pipelines
-- Test data generation utilities