@joinezco/markdown-editor 0.0.1 → 0.0.4

package/.turbo/turbo-build.log

@@ -0,0 +1,4 @@
+
+> @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

@@ -75,7 +75,6 @@ export const ExtendedCodeblock = Node.create({
                 },
                 // Render language back to HTML structure
                 renderHTML: attributes => {
-                    console.log('renderHTML attributes', { attributes });
                     if (!attributes.language || attributes.language === 'plaintext') {
                         return {}; // No class needed for plaintext
                     }
@@ -148,37 +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();
-                    console.log('input', { 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,
-                        };
-                    }
-                    // 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: '' }),
             }),
         ];
     },
@@ -238,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);
@@ -304,8 +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();
-            // Initialize filesystem worker and update extensions asynchronously
-            getFileSystemWorker().then(fs => {
+            // 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;
+            // 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
@@ -325,6 +357,16 @@ export const ExtendedCodeblock = Node.create({
                             }),
                         ]
                     }));
+                    // If created via input rule (empty), focus toolbar and open dropdown
+                    if (wasCreatedEmpty) {
+                        requestAnimationFrame(() => {
+                            const toolbarInput = cm.dom.querySelector('.cm-toolbar-input');
+                            if (toolbarInput) {
+                                toolbarInput.focus();
+                                toolbarInput.click();
+                            }
+                        });
+                    }
                 });
             }).catch(error => {
                 console.error('Failed to initialize filesystem worker:', error);
@@ -334,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

@@ -17,6 +17,26 @@ export const styleModule = new StyleModule({
         '--ezco-mde-bg-dark': '#1e1e1e',
         '--ezco-mde-link-color': '#5861ff',
         '--ezco-mde-link-color-hover': '#383ea3',
+        // Typography scale based on perfect fourth ratio (1.333)
+        '--ezco-mde-type-ratio': '1.25',
+        '--ezco-mde-base-font-size': '1rem',
+        '--ezco-mde-base-line-height': '1.5',
+        // Font sizes using modular scale
+        '--ezco-mde-text-xs': 'calc(var(--ezco-mde-base-font-size) / var(--ezco-mde-type-ratio))',
+        '--ezco-mde-text-sm': 'calc(var(--ezco-mde-text-xs) * var(--ezco-mde-type-ratio))',
+        '--ezco-mde-text-base': 'var(--ezco-mde-base-font-size)',
+        '--ezco-mde-text-lg': 'calc(var(--ezco-mde-text-base) * var(--ezco-mde-type-ratio))',
+        '--ezco-mde-text-xl': 'calc(var(--ezco-mde-text-lg) * var(--ezco-mde-type-ratio))',
+        '--ezco-mde-text-2xl': 'calc(var(--ezco-mde-text-xl) * var(--ezco-mde-type-ratio))',
+        '--ezco-mde-text-3xl': 'calc(var(--ezco-mde-text-2xl) * var(--ezco-mde-type-ratio))',
+        '--ezco-mde-text-4xl': 'calc(var(--ezco-mde-text-3xl) * var(--ezco-mde-type-ratio))',
+        // Line heights based on modular scale - inversely related to font size for better readability
+        '--ezco-mde-line-ratio': '1', // Smaller ratio for line height progression
+        '--ezco-mde-leading-loose': 'calc(var(--ezco-mde-base-line-height) * var(--ezco-mde-line-ratio))',
+        '--ezco-mde-leading-relaxed': 'var(--ezco-mde-base-line-height)',
+        '--ezco-mde-leading-normal': 'calc(var(--ezco-mde-base-line-height) / var(--ezco-mde-line-ratio))',
+        '--ezco-mde-leading-snug': 'calc(var(--ezco-mde-leading-normal) / var(--ezco-mde-line-ratio))',
+        '--ezco-mde-leading-tight': 'calc(var(--ezco-mde-leading-snug) / var(--ezco-mde-line-ratio))',
         // 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)',
@@ -33,6 +53,59 @@ export const styleModule = new StyleModule({
             color: 'var(--ezco-mde-link-color-hover)',
             cursor: 'pointer',
         },
+        // Typography styles for Markdown elements using modular scale
+        '& h1': {
+            'font-size': 'var(--ezco-mde-text-4xl)',
+            'line-height': 'var(--ezco-mde-leading-tight)',
+            'margin': '0.67em 0',
+            'font-weight': 'bold',
+        },
+        '& h2': {
+            'font-size': 'var(--ezco-mde-text-3xl)',
+            'line-height': 'var(--ezco-mde-leading-tight)',
+            'margin': '0.75em 0 0.5em 0',
+            'font-weight': 'bold',
+        },
+        '& h3': {
+            'font-size': 'var(--ezco-mde-text-2xl)',
+            'line-height': 'var(--ezco-mde-leading-snug)',
+            'margin': '0.83em 0 0.5em 0',
+            'font-weight': 'bold',
+        },
+        '& h4': {
+            'font-size': 'var(--ezco-mde-text-xl)',
+            'line-height': 'var(--ezco-mde-leading-snug)',
+            'margin': '1em 0 0.5em 0',
+            'font-weight': 'bold',
+        },
+        '& h5': {
+            'font-size': 'var(--ezco-mde-text-lg)',
+            'line-height': 'var(--ezco-mde-leading-normal)',
+            'margin': '1.17em 0 0.5em 0',
+            'font-weight': 'bold',
+        },
+        '& h6': {
+            'font-size': 'var(--ezco-mde-text-base)',
+            'line-height': 'var(--ezco-mde-leading-normal)',
+            'margin': '1.33em 0 0.5em 0',
+            'font-weight': 'bold',
+        },
+        '& p': {
+            'font-size': 'var(--ezco-mde-text-base)',
+            'line-height': 'var(--ezco-mde-leading-relaxed)',
+            'margin': '1em 0',
+        },
+        '& blockquote': {
+            'font-size': 'var(--ezco-mde-text-base)',
+            'line-height': 'var(--ezco-mde-leading-relaxed)',
+            'margin': '1.5em 0',
+            'padding': '0 1em',
+            'border-left': '4px solid #ddd',
+        },
+        '& small': {
+            'font-size': 'var(--ezco-mde-text-sm)',
+            'line-height': 'var(--ezco-mde-leading-normal)',
+        },
         // Codeblock styles
         '& .cm-editor': {
             margin: '2rem 0',
@@ -44,6 +117,8 @@ export const styleModule = new StyleModule({
             background: 'var(--ezco-mde-code-bg)',
             padding: '0.1em 0.3em',
             'border-radius': '3px',
+            '-webkit-box-decoration-break': 'clone',
+            'box-decoration-break': 'clone',
         },
         // Table styles
         '&.tableWrapper': {
@@ -113,6 +188,12 @@ export const styleModule = new StyleModule({
         '& li > p': {
             'margin-top': 0,
             'margin-bottom': 0,
+            'font-size': 'var(--ezco-mde-text-base)',
+            'line-height': 'var(--ezco-mde-leading-relaxed)',
+        },
+        '& ol > li > p, & ul > li > p': {
+            'font-size': 'var(--ezco-mde-text-base)',
+            'line-height': 'var(--ezco-mde-leading-relaxed)',
         },
         // Task list styles
         '& li[data-checked="true"]>div>p': {
@@ -149,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.1",
+  "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.8"
+    "@joinezco/codeblock": "0.0.10"
   },
   "devDependencies": {
     "@eslint/js": "^9.22.0",

package/src/App.css

@@ -133,7 +133,6 @@
 .settings-header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   padding: 20px 24px;
   border-bottom: 1px solid #e2e8f0;
 }

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

@@ -91,8 +91,6 @@ export const ExtendedCodeblock = Node.create({
                 // Render language back to HTML structure
                 renderHTML: attributes => {
 
-                    console.log('renderHTML attributes', { attributes });
-
                     if (!attributes.language || attributes.language === 'plaintext') {
                         return {}; // No class needed for plaintext
                     }
@@ -172,41 +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();
-                    console.log('input', { 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 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: '' }),
             }),
         ];
     },
@@ -273,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)
@@ -346,8 +353,36 @@ export const ExtendedCodeblock = Node.create({
             // This ensures proper stacking order based on DOM position
             reassignZIndexes();
 
-            // Initialize filesystem worker and update extensions asynchronously
-            getFileSystemWorker().then(fs => {
+            // 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;
+
+            // 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
@@ -367,6 +402,17 @@ export const ExtendedCodeblock = Node.create({
                             }),
                         ]
                     }));
+
+                    // If created via input rule (empty), focus toolbar and open dropdown
+                    if (wasCreatedEmpty) {
+                        requestAnimationFrame(() => {
+                            const toolbarInput = cm.dom.querySelector<HTMLInputElement>('.cm-toolbar-input');
+                            if (toolbarInput) {
+                                toolbarInput.focus();
+                                toolbarInput.click();
+                            }
+                        });
+                    }
                 })
             }).catch(error => {
                 console.error('Failed to initialize filesystem worker:', error);
@@ -378,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;
 }