@joinezco/markdown-editor 0.0.1

package/src/test/example.ts

@@ -0,0 +1,92 @@
+export const file = `
+# \`@joinezco/markdown-editor\`
+
+This editor supports **Markdown** syntax.
+
+## Features
+
+### Bring-your-own-LLM
+
+Use \`/settings\` to configure, \`ctrl + enter\` to trigger a completion
+
+* [ ] \`TODO: actually use settings\`
+* [ ] \`TODO: actually use llms\`
+### Lists
+
+#### Bullets
+
+* Paragraphs
+* Headings
+* *Italic* and **Bold** text
+* \`Inline code\`
+* Links (auto-detected [example.com](http://example.com) and [manual](https://google.com)
+
+#### Ordered
+
+1. \`todo:\` Emojis
+2. 
+
+#### Tasks
+
+* [x] Task 1 (Done)
+
+* [ ] Task 2 (Pending)
+
+  * [ ] Subtask 2.1
+
+* [ ] Task 3
+
+### Tables
+
+| Header 1 | Header 2 | Header 3 |
+|----------|----------|----------|
+| Cell 1   | Cell 2   | Cell 3   |
+| Cell 4   | Cell 5   | Cell 6   |
+
+ - [ ] \`TODO: fix pasting typical md syntax not producing tables\`
+
+### Codeblocks
+
+\`\`\`javascript
+function greet(name) {
+  console.log(\`Hello, \${name}!\`);
+}
+
+greet('World');
+\`\`\`
+
+- [ ] \`TODO: support registering/calling execution handlers for each file extension/mime\` (e.g. allowing to run files)
+
+#### Language server support
+
+Lazily-loaded language server support for Typescript/Javascript, Python, Rust, and Go.
+
+\`\`\`python
+def add(a, b):
+  """Adds two numbers."""
+  return a + b
+
+print(add(5, 3))
+\`\`\`
+
+
+* [ ] \`TODO: support LSPs\`
+
+  * [x] \`js/ts\`
+
+  * [ ] \`python\`
+
+  * [ ] \`rust\`
+
+  * [ ] \`go\`
+
+
+#### Virtual filesystem
+
+Reference and change files in a document-local filesystem.
+
+\`\`\`src/App.tsx
+\`\`\`
+
+Try editing the content!
+`;

package/src/test/extensions.test.ts

@@ -0,0 +1,333 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { MarkdownEditor } from '../lib/editor'
+import {
+    createTestContainer,
+    createTestEditor,
+    cleanupEditor,
+} from './utils'
+
+describe('MarkdownEditor Extensions', () => {
+    let container: HTMLElement
+    let editor: MarkdownEditor
+
+    beforeEach(async () => {
+        container = createTestContainer()
+        editor = await createTestEditor(container)
+        // await waitForEditor(editor)
+    })
+
+    afterEach(() => {
+        cleanupEditor(editor, container)
+    })
+
+    describe('Task List Extension', () => {
+        it('should render task lists correctly', () => {
+            editor.commands.setContent('- [ ] Unchecked task\n- [x] Checked task\n- [ ] Another unchecked')
+
+            const uncheckedTasks = editor.view.dom.querySelectorAll('[data-checked="false"]')
+            const checkedTasks = editor.view.dom.querySelectorAll('[data-checked="true"]')
+
+            expect(uncheckedTasks.length).toBe(2)
+            expect(checkedTasks.length).toBe(1)
+
+            expect(uncheckedTasks[0].textContent).toContain('Unchecked task')
+            expect(checkedTasks[0].textContent).toContain('Checked task')
+            expect(uncheckedTasks[1].textContent).toContain('Another unchecked')
+        })
+
+        it('should toggle task completion', () => {
+            editor.commands.setContent('- [ ] Task to toggle')
+            editor.commands.focus()
+
+            // Find the task item and verify initial state
+            const initialTaskElement = editor.view.dom.querySelector('[data-checked="false"]')
+            expect(initialTaskElement).toBeTruthy()
+            expect(initialTaskElement?.textContent).toContain('Task to toggle')
+
+            // Simulate task toggle (this would normally be done by clicking)
+            editor.commands.setContent('- [x] Task to toggle')
+
+            const toggledTaskElement = editor.view.dom.querySelector('[data-checked="true"]')
+            expect(toggledTaskElement).toBeTruthy()
+            expect(toggledTaskElement?.textContent).toContain('Task to toggle')
+
+            // Verify the unchecked task no longer exists
+            const uncheckedTask = editor.view.dom.querySelector('[data-checked="false"]')
+            expect(uncheckedTask).toBeNull()
+        })
+
+        it('should handle nested task lists', () => {
+            const nestedTasks = `- [ ] Parent task
+  - [ ] Child task 1
+  - [x] Child task 2
+- [x] Another parent task`
+
+            editor.commands.setContent(nestedTasks)
+
+            const allTasks = editor.view.dom.querySelectorAll('[data-checked]')
+            expect(allTasks.length).toBe(4)
+
+            const uncheckedTasks = editor.view.dom.querySelectorAll('[data-checked="false"]')
+            const checkedTasks = editor.view.dom.querySelectorAll('[data-checked="true"]')
+
+            expect(uncheckedTasks.length).toBe(2)
+            expect(checkedTasks.length).toBe(2)
+
+            // Verify task content
+            const taskTexts = Array.from(allTasks).map(task => task.textContent?.trim())
+            expect(taskTexts).toEqual(expect.arrayContaining([
+                expect.stringContaining('Parent task'),
+                expect.stringContaining('Child task 1'),
+                expect.stringContaining('Child task 2'),
+                expect.stringContaining('Another parent task')
+            ]))
+        })
+    })
+
+    describe('Table Extension', () => {
+        it('should render tables correctly', () => {
+            const tableMarkdown = `| Header 1 | Header 2 | Header 3 |
+|----------|----------|----------|
+| Cell 1   | Cell 2   | Cell 3   |
+| Cell 4   | Cell 5   | Cell 6   |`
+
+            editor.commands.setContent(tableMarkdown)
+
+            const table = editor.view.dom.querySelector('table')
+            expect(table).toBeTruthy()
+
+            const thead = table?.querySelector('thead')
+            const tbody = table?.querySelector('tbody')
+            expect(thead).toBeTruthy()
+            expect(tbody).toBeTruthy()
+
+            const headers = thead?.querySelectorAll('th')
+            expect(headers?.length).toBe(3)
+            expect(headers?.[0].textContent?.trim()).toBe('Header 1')
+            expect(headers?.[1].textContent?.trim()).toBe('Header 2')
+            expect(headers?.[2].textContent?.trim()).toBe('Header 3')
+
+            const rows = tbody?.querySelectorAll('tr')
+            expect(rows?.length).toBe(2)
+
+            const firstRowCells = rows?.[0].querySelectorAll('td')
+            expect(firstRowCells?.length).toBe(3)
+            expect(firstRowCells?.[0].textContent?.trim()).toBe('Cell 1')
+            expect(firstRowCells?.[1].textContent?.trim()).toBe('Cell 2')
+            expect(firstRowCells?.[2].textContent?.trim()).toBe('Cell 3')
+        })
+
+        it('should handle table navigation', () => {
+            const tableMarkdown = `| A | B |
+|---|---|
+| 1 | 2 |`
+
+            editor.commands.setContent(tableMarkdown)
+            editor.commands.focus()
+
+            // Position cursor in first cell
+            const firstCell = editor.view.dom.querySelector('td')
+            if (firstCell) {
+                firstCell.focus()
+            }
+
+            // Test that table structure is maintained
+            const table = editor.view.dom.querySelector('table')
+            expect(table).toBeTruthy()
+
+            const cells = table?.querySelectorAll('td')
+            expect(cells?.length).toBe(2)
+            expect(cells?.[0].textContent?.trim()).toBe('1')
+            expect(cells?.[1].textContent?.trim()).toBe('2')
+        })
+    })
+
+    describe('Link Extension', () => {
+        it('should render links correctly', () => {
+            editor.commands.setContent('Visit [Google](https://google.com) for search.')
+
+            const link = editor.view.dom.querySelector('a')
+            expect(link).toBeTruthy()
+            expect(link?.getAttribute('href')).toBe('https://google.com')
+            expect(link?.textContent).toBe('Google')
+        })
+
+        it('should auto-detect URLs', () => {
+            editor.commands.setContent('Visit https://example.com for more info.')
+
+            // Check if URL is present in the content (may or may not be auto-linked depending on extension)
+            const content = editor.view.dom.textContent
+            expect(content).toContain('https://example.com')
+
+            // If auto-linking is enabled, check for link element
+            const autoLink = editor.view.dom.querySelector('a[href="https://example.com"]')
+            if (autoLink) {
+                expect(autoLink.textContent).toBe('https://example.com')
+            }
+        })
+
+        it('should handle email links', () => {
+            editor.commands.setContent('Contact us at [email](mailto:test@example.com)')
+
+            const emailLink = editor.view.dom.querySelector('a[href="mailto:test@example.com"]')
+            expect(emailLink).toBeTruthy()
+            expect(emailLink?.textContent).toBe('email')
+            expect(emailLink?.getAttribute('href')).toBe('mailto:test@example.com')
+        })
+    })
+
+    describe('Code Block Extension', () => {
+        it('should render code blocks with syntax highlighting', () => {
+            const codeBlock = '```javascript\nfunction hello() {\n  console.log("Hello, World!");\n}\n```'
+            editor.commands.setContent(codeBlock)
+
+            const preElement = editor.view.dom.querySelector('pre')
+            expect(preElement).toBeTruthy()
+
+            const codeContent = preElement?.textContent || ''
+            expect(codeContent).toContain('function hello')
+            expect(codeContent).toContain('console.log')
+            expect(codeContent).toContain('Hello, World!')
+        })
+
+        it('should handle different programming languages', () => {
+            const pythonCode = '```python\ndef hello():\n    print("Hello, World!")\n```'
+            editor.commands.setContent(pythonCode)
+
+            const preElement = editor.view.dom.querySelector('pre')
+            expect(preElement).toBeTruthy()
+
+            const codeContent = preElement?.textContent || ''
+            expect(codeContent).toContain('def hello')
+            expect(codeContent).toContain('print')
+            expect(codeContent).toContain('Hello, World!')
+        })
+
+        it('should handle code blocks without language specification', () => {
+            const plainCode = '```\nplain text code\nno syntax highlighting\n```'
+            editor.commands.setContent(plainCode)
+
+            const preElement = editor.view.dom.querySelector('pre')
+            expect(preElement).toBeTruthy()
+
+            const codeContent = preElement?.textContent || ''
+            expect(codeContent).toContain('plain text code')
+            expect(codeContent).toContain('no syntax highlighting')
+        })
+
+        it('should handle inline code', () => {
+            editor.commands.setContent('Use the `console.log()` function to debug.')
+
+            const codeElement = editor.view.dom.querySelector('code')
+            expect(codeElement).toBeTruthy()
+            expect(codeElement?.textContent).toBe('console.log()')
+        })
+    })
+
+    describe('Slash Commands Extension', () => {
+        it('should trigger slash commands', () => {
+            editor.commands.focus()
+            editor.commands.setTextSelection(0)
+
+            // Type slash to trigger command menu
+            const { from } = editor.state.selection
+            editor.commands.insertContentAt(from, '/')
+
+            // TODO:
+        })
+    })
+
+    describe('File System Integration', () => {
+        it('should handle file references in code blocks', () => {
+            const fileReference = '```src/example.js\nconsole.log("File content");\n```'
+            editor.commands.setContent(fileReference)
+
+            const preElement = editor.view.dom.querySelector('pre')
+            expect(preElement).toBeTruthy()
+
+            const codeContent = preElement?.textContent || ''
+            expect(codeContent).toContain('console.log')
+            expect(codeContent).toContain('File content')
+        })
+
+        it('should maintain file system state', () => {
+            // Test that the editor maintains its filesystem integration
+            expect(editor.storage).toBeDefined()
+            expect(editor.storage.markdown).toBeDefined()
+        })
+    })
+
+    describe('Markdown Storage', () => {
+        it('should provide markdown storage interface', () => {
+            expect(editor.storage.markdown).toBeDefined()
+            expect(typeof editor.storage.markdown.getMarkdown).toBe('function')
+        })
+
+        it('should sync markdown content with storage', () => {
+            const testContent = '# Storage Test\n\nThis tests the storage interface.'
+            editor.commands.setContent(testContent)
+
+            const storedContent = editor.storage.markdown.getMarkdown()
+            expect(storedContent).toContain('# Storage Test')
+            expect(storedContent).toContain('This tests the storage interface.')
+        })
+    })
+
+    describe('Extension Interactions', () => {
+        it('should handle multiple extensions working together', () => {
+            const complexContent = `# Document with Multiple Features
+
+## Task List
+- [ ] Incomplete task
+- [x] Complete task
+
+## Code Example
+\`\`\`javascript
+function example() {
+  return "Hello, World!";
+}
+\`\`\`
+
+## Table
+| Feature | Status |
+|---------|--------|
+| Tasks   | ✓      |
+| Code    | ✓      |
+| Tables  | ✓      |
+
+## Links
+Visit [our website](https://example.com) for more info.`
+
+            editor.commands.setContent(complexContent)
+
+            // Verify all extensions are working
+            const h1 = editor.view.dom.querySelector('h1')
+            const h2Elements = editor.view.dom.querySelectorAll('h2')
+            expect(h1).toBeTruthy()
+            expect(h1?.textContent).toContain('Document with Multiple Features')
+            expect(h2Elements.length).toBeGreaterThan(0)
+
+            // Task lists
+            const taskElements = editor.view.dom.querySelectorAll('[data-checked]')
+            expect(taskElements.length).toBe(2)
+            expect(editor.view.dom.querySelector('[data-checked="false"]')).toBeTruthy()
+            expect(editor.view.dom.querySelector('[data-checked="true"]')).toBeTruthy()
+
+            // Code blocks
+            const preElement = editor.view.dom.querySelector('pre')
+            expect(preElement).toBeTruthy()
+            expect(preElement?.textContent).toContain('function example')
+
+            // Tables
+            const table = editor.view.dom.querySelector('table')
+            expect(table).toBeTruthy()
+            const tableHeaders = table?.querySelectorAll('th')
+            expect(tableHeaders?.length).toBe(2)
+
+            // Links
+            const link = editor.view.dom.querySelector('a[href="https://example.com"]')
+            expect(link).toBeTruthy()
+            expect(link?.textContent).toBe('our website')
+        })
+    })
+})

package/src/test/setup.ts

@@ -0,0 +1,55 @@
+import { beforeAll, afterEach } from 'vitest'
+
+// Global test setup
+beforeAll(() => {
+    // Setup any global test configuration here
+    console.log('Setting up test environment for markdown editor...')
+})
+
+// Cleanup after each test
+afterEach(() => {
+    // Clean up any DOM elements created during tests
+    document.body.innerHTML = ''
+})
+
+// Mock window.matchMedia for tests
+Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: (query: string) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: () => { },
+        removeListener: () => { },
+        addEventListener: () => { },
+        removeEventListener: () => { },
+        dispatchEvent: () => { },
+    }),
+})
+
+// Mock ResizeObserver
+globalThis.ResizeObserver = class ResizeObserver {
+    observe() { }
+    unobserve() { }
+    disconnect() { }
+}
+
+// Mock IntersectionObserver
+globalThis.IntersectionObserver = class IntersectionObserver {
+    root = null
+    rootMargin = ''
+    thresholds = []
+
+    constructor() { }
+    observe() { }
+    unobserve() { }
+    disconnect() { }
+    takeRecords() { return [] }
+}
+
+// Mock getComputedStyle
+Object.defineProperty(window, 'getComputedStyle', {
+    value: () => ({
+        getPropertyValue: () => '',
+    }),
+})

package/src/test/utils.ts

@@ -0,0 +1,212 @@
+import { MarkdownEditor, createEditor, MarkdownEditorOptions } from '../lib/editor'
+import { CodeblockFS, type Fs } from '@joinezco/codeblock'
+
+/**
+ * Test utilities for markdown editor testing
+ */
+
+/**
+ * Creates a test container element in the DOM
+ */
+export function createTestContainer(id = 'test-editor'): HTMLElement {
+    const container = document.createElement('div')
+    container.id = id
+    container.style.width = '800px'
+    container.style.height = '600px'
+    document.body.appendChild(container)
+    return container
+}
+
+/**
+ * Removes a test container from the DOM
+ */
+export function removeTestContainer(container: HTMLElement): void {
+    if (container.parentNode) {
+        container.parentNode.removeChild(container)
+    }
+}
+
+/**
+ * Creates a mock filesystem for testing
+ */
+export async function createMockFS(): Promise<Fs | null> {
+    try {
+        // Create a minimal filesystem for testing
+        const fs = await CodeblockFS.worker()
+        return fs
+    } catch (error) {
+        console.warn('Failed to create filesystem for testing:', error)
+        return null
+    }
+}
+
+/**
+ * Creates a test markdown editor instance
+ */
+export async function createTestEditor(
+    container: HTMLElement,
+    options: Partial<MarkdownEditorOptions> = {}
+): Promise<MarkdownEditor> {
+    try {
+        const fs = await createMockFS()
+
+        const defaultOptions: MarkdownEditorOptions = {
+            element: container,
+            content: '# Test Document\n\nThis is a test document.',
+            // Only include fs if it was successfully created
+            ...(fs ? {
+                fs: {
+                    fs: fs,
+                    filepath: 'test.md',
+                    autoSave: false,
+                }
+            } : {}),
+            ...options,
+        }
+
+        const editor = createEditor(defaultOptions)
+
+        // Give the editor a moment to initialize
+        await new Promise(resolve => setTimeout(resolve, 100))
+
+        return editor
+    } catch (error) {
+        console.error('Failed to create test editor:', error)
+        throw error
+    }
+}
+
+/**
+ * Waits for the editor to be ready and rendered
+ */
+export function waitForEditor(editor: MarkdownEditor, timeout = 5000): Promise<void> {
+    return new Promise((resolve, reject) => {
+        const startTime = Date.now()
+
+        const checkReady = () => {
+            if (editor.view && editor.view.dom && editor.view.dom.isConnected) {
+                resolve()
+            } else if (Date.now() - startTime > timeout) {
+                reject(new Error('Editor did not become ready within timeout'))
+            } else {
+                setTimeout(checkReady, 100)
+            }
+        }
+
+        checkReady()
+    })
+}
+
+/**
+ * Gets the current markdown content from the editor
+ */
+export function getMarkdownContent(editor: MarkdownEditor): string {
+    return editor.storage.markdown.getMarkdown()
+}
+
+/**
+ * Sets markdown content in the editor
+ */
+export function setMarkdownContent(editor: MarkdownEditor, content: string): void {
+    editor.commands.setContent(content)
+}
+
+/**
+ * Simulates typing text in the editor
+ */
+export function typeText(editor: MarkdownEditor, text: string): void {
+    // Use insertContentAt with the current selection position to ensure
+    // text is inserted exactly where the cursor is
+    const { from } = editor.state.selection
+    console.log('editor state selection', { from })
+    editor.commands.insertContentAt(from, text)
+}
+
+/**
+ * Simulates key press in the editor
+ */
+export function pressKey(editor: MarkdownEditor, key: string, modifiers: { ctrl?: boolean, shift?: boolean, alt?: boolean } = {}): void {
+    const event = new KeyboardEvent('keydown', {
+        key,
+        ctrlKey: modifiers.ctrl || false,
+        shiftKey: modifiers.shift || false,
+        altKey: modifiers.alt || false,
+        bubbles: true,
+    })
+
+    editor.view.dom.dispatchEvent(event)
+}
+
+/**
+ * Gets the HTML content of the editor
+ */
+export function getHTMLContent(editor: MarkdownEditor): string {
+    return editor.getHTML()
+}
+
+/**
+ * Checks if the editor has focus
+ */
+export function isEditorFocused(editor: MarkdownEditor): boolean {
+    return editor.isFocused
+}
+
+/**
+ * Focuses the editor
+ */
+export function focusEditor(editor: MarkdownEditor): void {
+    editor.commands.focus()
+}
+
+/**
+ * Gets the current selection in the editor
+ */
+export function getSelection(editor: MarkdownEditor) {
+    return editor.state.selection
+}
+
+/**
+ * Sets the selection in the editor
+ */
+export function setSelection(editor: MarkdownEditor, from: number, to?: number): void {
+    to ? editor.commands.setTextSelection({ from, to }) : editor.commands.setTextSelection(from)
+}
+
+/**
+ * Waits for a specific condition to be true
+ */
+export function waitFor(
+    condition: () => boolean,
+    timeout = 5000,
+    interval = 100
+): Promise<void> {
+    return new Promise((resolve, reject) => {
+        const startTime = Date.now()
+
+        const check = () => {
+            if (condition()) {
+                resolve()
+            } else if (Date.now() - startTime > timeout) {
+                reject(new Error('Condition not met within timeout'))
+            } else {
+                setTimeout(check, interval)
+            }
+        }
+
+        check()
+    })
+}
+
+/**
+ * Cleanup function to destroy editor and remove container
+ */
+export function cleanupEditor(editor: MarkdownEditor | undefined, container: HTMLElement): void {
+    if (editor && typeof editor.destroy === 'function') {
+        try {
+            editor.destroy()
+        } catch (error) {
+            console.warn('Error destroying editor:', error)
+        }
+    }
+    removeTestContainer(container)
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />