@joinezco/markdown-editor 0.0.1

package/src/lib/editor/styles.ts

@@ -0,0 +1,166 @@
+import { StyleModule } from 'style-mod';
+
+const darkModeStyles = {
+    '--ezco-mde-code-bg': 'var(--ezco-mde-code-bg-dark)',
+    '--ezco-mde-bg': 'var(--ezco-mde-bg-dark)',
+    '--ezco-mde-table-bg': 'var(--cm-toolbar-bg-dark)',
+}
+export const styleModule: StyleModule = new StyleModule({
+    ':root[data-theme="dark"], [data-theme="dark"] .ezco-mde, .ezco-mde[data-theme="dark"]': darkModeStyles,
+    '@media (prefers-color-scheme: dark)': {
+        'div.ezco-mde': darkModeStyles
+    },
+    ':root, :root[data-theme="light"], [data-theme="light"] .ezco-mde, .ezco-mde[data-theme="light"]': {
+        // Light/dark mode vars
+        '--ezco-mde-code-bg-light': '#f1f1f1',
+        '--ezco-mde-code-bg-dark': '#2c2c2c',
+        '--ezco-mde-bg-light': '#ffffff',
+        '--ezco-mde-bg-dark': '#1e1e1e',
+        '--ezco-mde-link-color': '#5861ff',
+        '--ezco-mde-link-color-hover': '#383ea3',
+
+        // Default to light mode, overridden by media query
+        '--ezco-mde-code-bg': 'var(--ezco-mde-code-bg-light)',
+        '--ezco-mde-bg': 'var(--ezco-mde-bg-light)',
+        '--ezco-mde-table-bg': 'var(--cm-toolbar-bg-light)',
+    },
+    '.ezco-mde': {
+
+        // Base editor styles
+        'background': 'transparent',
+
+        '& a': {
+            color: 'var(--ezco-mde-link-color)',
+            'text-decoration': 'inherit',
+        },
+
+        '& a:hover': {
+            color: 'var(--ezco-mde-link-color-hover)',
+            cursor: 'pointer',
+        },
+
+        // Codeblock styles
+        '& .cm-editor': {
+            margin: '2rem 0',
+            border: '2px solid var(--ezco-mde-table-bg)'
+        },
+
+        // Inline code styles
+        '& > :not(.cm-editor) code': {
+            'font-family': 'monospace',
+            background: 'var(--ezco-mde-code-bg)',
+            padding: '0.1em 0.3em',
+            'border-radius': '3px',
+        },
+        // Table styles
+        '&.tableWrapper': {
+            margin: '1.5rem 0',
+            'overflow-x': 'auto'
+        },
+        '& table': {
+            "border-collapse": "collapse",
+            "width": "100%",
+            "margin": "2em 0",
+            border: '2px solid var(--ezco-mde-table-bg)',
+            overflow: 'hidden',
+            'table-layout': 'fixed',
+            '& p': {
+                margin: 0
+            },
+
+            '& > .column-resize-handle': {
+                'background-color': 'red',
+                bottom: '-2px',
+                'pointer-events': 'none',
+                position: 'absolute',
+                right: '-2px',
+                top: 0,
+                width: '4px',
+            },
+            '& th': {
+                'font-weight': 'bold',
+                'background-color': 'var(--ezco-mde-table-bg)',
+                'text-align': 'left',
+            },
+            '& th, & td': {
+                border: 'none',
+                padding: '0.5em',
+                'vertical-align': 'top',
+                position: 'relative',
+            },
+        },
+        '& .selectedCell::after': {
+            'z-index': 2,
+            position: 'absolute',
+            content: '""',
+            left: 0,
+            right: 0,
+            top: 0,
+            bottom: 0,
+            background: 'rgba(0, 123, 255, 0.1)',
+            'pointer-events': 'none',
+        },
+        '&.resize-cursor': {
+            '&': {
+                cursor: 'ew-resize',
+            },
+            cursor: 'col-resize',
+        },
+        // Tight list styles
+        '& .tight': {
+            margin: '0 18px',
+            '& li': {
+                'padding-left': '2px',
+            }
+        },
+        // List styles
+        '& ul, & ol, & menu': {
+            padding: 0,
+        },
+        // List item styles
+        '& li > p': {
+            'margin-top': 0,
+            'margin-bottom': 0,
+        },
+        // Task list styles
+        '& li[data-checked="true"]>div>p': {
+            "text-decoration": "line-through",
+            "color": "#888",
+        },
+        '& ul[data-type="taskList"]': {
+            'list-style': 'none',
+            'padding': 0,
+            'margin': 0,
+
+            '& p': {
+                'margin': 0,
+            },
+            '& p + ul[data-type="taskList"]': {
+                'margin-top': '0.25em'
+            },
+
+            '& p + p': {
+                'margin-top': '0.25em',
+            },
+
+            '& li': {
+                display: 'flex',
+                'align-items': 'flex-start',
+            },
+
+            '& li + li': {
+                'margin-top': '0.25em'
+            },
+
+            '& li > label': {
+                'margin-right': '6px'
+            },
+            '& li > label > input': {
+                margin: 0
+            },
+            '& li > div': {
+                flex: 1
+            }
+        },
+    }
+})

package/src/lib/index.ts

@@ -0,0 +1,3 @@
+// Main library entry point
+export * from './editor/index';
+export type { MarkdownEditor, MarkdownEditorOptions } from './editor/index';

package/src/lib/types/css.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+    const content: string;
+    export default content;
+}

package/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/src/test/editor.test.ts

@@ -0,0 +1,346 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { MarkdownEditor } from '../lib/editor'
+import {
+    createTestContainer,
+    createTestEditor,
+    pressKey,
+    waitFor,
+    cleanupEditor
+} from './utils'
+
+describe('MarkdownEditor', () => {
+    let container: HTMLElement
+    let editor: MarkdownEditor
+
+    beforeEach(async () => {
+        container = createTestContainer()
+        editor = await createTestEditor(container)
+    })
+
+    afterEach(() => {
+        cleanupEditor(editor, container)
+    })
+
+    describe('Basic Editor Functionality', () => {
+        it('should create an editor instance', () => {
+            expect(editor).toBeDefined()
+            if (!editor) return
+            expect(editor.view).toBeDefined()
+            expect(editor.view.dom).toBeDefined()
+        })
+
+        it('should render in the DOM', () => {
+            expect(container.querySelector('.ProseMirror')).toBeTruthy()
+        })
+
+        it('should have initial content', () => {
+            const content = editor.storage.markdown.getMarkdown()
+            expect(content).toContain('# Test Document')
+            expect(content).toContain('This is a test document.')
+        })
+
+        it('should be focusable', () => {
+            editor.commands.focus()
+            expect(editor.isFocused).toBe(true)
+        })
+    })
+
+    describe('Markdown Content Management', () => {
+        it('should get markdown content', () => {
+            const content = editor.storage.markdown.getMarkdown()
+            expect(typeof content).toBe('string')
+            expect(content.length).toBeGreaterThan(0)
+        })
+
+        it('should set markdown content', () => {
+            const newContent = '# New Heading\n\nNew paragraph content.'
+            editor.commands.setContent(newContent)
+
+            const retrievedContent = editor.storage.markdown.getMarkdown()
+            expect(retrievedContent).toContain('# New Heading')
+            expect(retrievedContent).toContain('New paragraph content.')
+        })
+
+        it('should handle empty content', () => {
+            editor.commands.setContent('')
+            const content = editor.storage.markdown.getMarkdown()
+            expect(content.trim()).toBe('')
+        })
+    })
+
+    describe('Text Input and Editing', () => {
+        it('should insert text at cursor position', () => {
+            editor.commands.focus()
+
+            editor.commands.insertContentAt(0, 'Inserted text: ')
+
+            const content = editor.storage.markdown.getMarkdown()
+            expect(content).toMatch(/^Inserted text:/)
+        })
+
+        it('should handle typing at different positions', () => {
+            // Set a simpler test content to avoid position calculation issues
+            editor.commands.setContent('This is a test document.')
+            editor.commands.focus()
+
+            const originalContent = editor.storage.markdown.getMarkdown()
+            const insertPosition = originalContent.indexOf('This is')
+
+            // Ensure we found the target text
+            expect(insertPosition).toBe(0) // Should be at the beginning
+
+            editor.commands.setTextSelection(insertPosition)
+            const { from } = editor.state.selection
+            editor.commands.insertContentAt(from, 'INSERTED ')
+
+            const newContent = editor.storage.markdown.getMarkdown()
+            expect(newContent).toContain('INSERTED This is')
+        })
+
+        it('should handle line breaks', () => {
+            editor.commands.focus()
+            editor.commands.setTextSelection(0)
+            const { from } = editor.state.selection
+            editor.commands.insertContentAt(from, 'First line\nSecond line\n')
+
+            const content = editor.storage.markdown.getMarkdown()
+            expect(content).toContain('First line')
+            expect(content).toContain('Second line')
+        })
+    })
+
+    describe('Markdown Formatting', () => {
+        it('should handle bold text', () => {
+            editor.commands.setContent('This is **bold** text.')
+
+            const strongElement = editor.view.dom.querySelector('strong')
+            expect(strongElement).toBeTruthy()
+            expect(strongElement?.textContent).toBe('bold')
+        })
+
+        it('should handle italic text', () => {
+            editor.commands.setContent('This is *italic* text.')
+
+            const emElement = editor.view.dom.querySelector('em')
+            expect(emElement).toBeTruthy()
+            expect(emElement?.textContent).toBe('italic')
+        })
+
+        it('should handle headings', () => {
+            editor.commands.setContent('# Heading 1\n## Heading 2\n### Heading 3')
+
+            const h1Element = editor.view.dom.querySelector('h1')
+            const h2Element = editor.view.dom.querySelector('h2')
+            const h3Element = editor.view.dom.querySelector('h3')
+
+            expect(h1Element).toBeTruthy()
+            expect(h1Element?.textContent).toBe('Heading 1')
+
+            expect(h2Element).toBeTruthy()
+            expect(h2Element?.textContent).toBe('Heading 2')
+
+            expect(h3Element).toBeTruthy()
+            expect(h3Element?.textContent).toBe('Heading 3')
+        })
+
+        it('should handle code blocks', () => {
+            editor.commands.setContent('```javascript\nconsole.log("Hello");\n```')
+
+            const preElement = editor.view.dom.querySelector('pre')
+            expect(preElement).toBeTruthy()
+
+            const codeContent = preElement?.textContent || ''
+            expect(codeContent).toContain('console.log')
+            expect(codeContent).toContain('Hello')
+        })
+
+        it('should handle inline code', () => {
+            editor.commands.setContent('This is `inline code` text.')
+
+            const codeElement = editor.view.dom.querySelector('code')
+            expect(codeElement).toBeTruthy()
+            expect(codeElement?.textContent).toBe('inline code')
+        })
+
+        it('should handle lists', () => {
+            editor.commands.setContent('- Item 1\n- Item 2\n- Item 3')
+
+            const ulElement = editor.view.dom.querySelector('ul')
+            expect(ulElement).toBeTruthy()
+
+            const liElements = ulElement?.querySelectorAll('li')
+            expect(liElements?.length).toBe(3)
+
+            expect(liElements?.[0].textContent?.trim()).toBe('Item 1')
+            expect(liElements?.[1].textContent?.trim()).toBe('Item 2')
+            expect(liElements?.[2].textContent?.trim()).toBe('Item 3')
+        })
+
+        it('should handle task lists', () => {
+            editor.commands.setContent('- [ ] Unchecked task\n- [x] Checked task')
+
+            const uncheckedTask = editor.view.dom.querySelector('[data-checked="false"]')
+            const checkedTask = editor.view.dom.querySelector('[data-checked="true"]')
+
+            expect(uncheckedTask).toBeTruthy()
+            expect(uncheckedTask?.textContent).toContain('Unchecked task')
+
+            expect(checkedTask).toBeTruthy()
+            expect(checkedTask?.textContent).toContain('Checked task')
+        })
+    })
+
+    describe('Selection and Cursor Management', () => {
+        it('should set and get selection', () => {
+            editor.commands.focus()
+            editor.commands.setTextSelection({ from: 5, to: 10 })
+            const selection = editor.state.selection
+            expect(selection.from).toBe(5)
+            expect(selection.to).toBe(10)
+        })
+
+        it('should handle cursor positioning', () => {
+            editor.commands.focus()
+            editor.commands.setTextSelection(0)
+            const selection = editor.state.selection
+            expect(selection.from).toBe(0)
+            expect(selection.to).toBe(0)
+        })
+    })
+
+    describe('Keyboard Shortcuts', () => {
+        it('should handle Ctrl+B for bold', () => {
+            editor.commands.focus()
+            editor.commands.setTextSelection(0)
+            const { from } = editor.state.selection
+            editor.commands.insertContentAt(from, 'bold text')
+            editor.commands.setTextSelection({ from: 0, to: 10 }) // Select "bold text"
+
+            pressKey(editor, 'b', { ctrl: true })
+
+            const content = editor.storage.markdown.getMarkdown()
+            expect(content).toContain('**bold text**')
+        })
+
+        it('should handle Ctrl+I for italic', () => {
+            editor.commands.focus()
+            editor.commands.setTextSelection(0)
+            const { from } = editor.state.selection
+            editor.commands.insertContentAt(from, 'italic text')
+            editor.commands.setTextSelection({ from: 0, to: 12 }) // Select "italic text"
+
+            pressKey(editor, 'i', { ctrl: true })
+
+            const content = editor.storage.markdown.getMarkdown()
+            expect(content).toContain('*italic text*')
+        })
+    })
+
+    describe('Editor State and Updates', () => {
+        it('should trigger update callbacks', async () => {
+            let updateCount = 0
+            let lastContent = ''
+
+            // Create a new editor with update callback
+            cleanupEditor(editor, container)
+            container = createTestContainer('test-editor-2')
+
+            editor = await createTestEditor(container, {
+                onUpdate: ({ editor }) => {
+                    updateCount++
+                    lastContent = (editor as MarkdownEditor).storage.markdown.getMarkdown()
+                }
+            })
+
+            editor.commands.focus()
+            const { from } = editor.state.selection
+            editor.commands.insertContentAt(from, 'New content')
+
+            // Wait for update to be processed
+            await waitFor(() => updateCount > 0, 2000)
+
+            expect(updateCount).toBeGreaterThan(0)
+            expect(lastContent).toContain('New content')
+        })
+
+        it('should maintain state across content changes', () => {
+            const initialContent = editor.storage.markdown.getMarkdown()
+
+            editor.commands.setContent('# Changed Content')
+            expect(editor.storage.markdown.getMarkdown()).toContain('# Changed Content')
+
+            editor.commands.setContent(initialContent)
+            expect(editor.storage.markdown.getMarkdown()).toContain('# Test Document')
+        })
+    })
+
+    describe('Error Handling', () => {
+        it('should handle invalid markdown gracefully', () => {
+            expect(() => {
+                editor.commands.setContent('# Heading\n\n```\nUnclosed code block')
+            }).not.toThrow()
+
+            const content = editor.storage.markdown.getMarkdown()
+            expect(content).toContain('Unclosed code block')
+        })
+
+        it('should handle very long content', () => {
+            const longContent = '# Long Content\n\n' + 'A'.repeat(10000)
+
+            expect(() => {
+                editor.commands.setContent(longContent)
+            }).not.toThrow()
+
+            const content = editor.storage.markdown.getMarkdown()
+            expect(content.length).toBeGreaterThan(10000)
+        })
+    })
+
+    describe('Browser-specific Features', () => {
+        it('should handle copy and paste operations', async () => {
+            editor.commands.focus()
+            editor.commands.setTextSelection(0)
+            const { from } = editor.state.selection
+            editor.commands.insertContentAt(from, 'Text to copy')
+            editor.commands.setTextSelection({ from: 0, to: 12 }) // Select "Text to copy"
+
+            // Simulate copy
+            pressKey(editor, 'c', { ctrl: true })
+
+            // Move cursor and paste
+            editor.commands.setTextSelection(12)
+            const { from: newFrom } = editor.state.selection
+            editor.commands.insertContentAt(newFrom, '\n\nPasted: ')
+            pressKey(editor, 'v', { ctrl: true })
+
+            // Note: Actual clipboard operations may not work in test environment
+            // This test verifies the key events are handled without errors
+            expect(() => {
+                pressKey(editor, 'c', { ctrl: true })
+                pressKey(editor, 'v', { ctrl: true })
+            }).not.toThrow()
+        })
+
+        it('should handle undo and redo', () => {
+            editor.commands.focus()
+            const originalContent = editor.storage.markdown.getMarkdown()
+
+            editor.commands.setTextSelection(0)
+            const { from } = editor.state.selection
+            editor.commands.insertContentAt(from, 'Added text')
+
+            // Undo
+            pressKey(editor, 'z', { ctrl: true })
+
+            // Content should be closer to original (undo may not be perfect due to test setup)
+            const undoContent = editor.storage.markdown.getMarkdown()
+            expect(undoContent).toBeDefined()
+
+            // Redo
+            pressKey(editor, 'y', { ctrl: true })
+
+            const redoContent = editor.storage.markdown.getMarkdown()
+            expect(redoContent).toBeDefined()
+        })
+    })
+})