@joinezco/markdown-editor 0.0.1

package/dist/editor/extensions/slash-commands.js

@@ -0,0 +1,324 @@
+import { Extension } from '@tiptap/core';
+import { PluginKey } from '@tiptap/pm/state';
+import { Plugin } from '@tiptap/pm/state';
+import tippy from 'tippy.js';
+export const SlashCommands = Extension.create({
+    name: 'slashCommands',
+    addOptions() {
+        return {
+            commands: [],
+            char: '/',
+            allowSpaces: false,
+            startOfLine: false,
+        };
+    },
+    addProseMirrorPlugins() {
+        let slashView = null;
+        return [
+            new Plugin({
+                key: new PluginKey('slashCommands'),
+                view: () => {
+                    slashView = new SlashCommandsView({
+                        editor: this.editor,
+                        commands: this.options.commands,
+                        char: this.options.char,
+                        allowSpaces: this.options.allowSpaces,
+                        startOfLine: this.options.startOfLine,
+                    });
+                    return slashView;
+                },
+                props: {
+                    handleKeyDown: (_, event) => {
+                        if (slashView) {
+                            // Track when "/" is typed to distinguish from cursor movement
+                            if (event.key === '/') {
+                                slashView.lastInputWasSlash = true;
+                            }
+                            else {
+                                slashView.lastInputWasSlash = false;
+                            }
+                            if (slashView.dropdown) {
+                                return slashView.handleKeyDown(event);
+                            }
+                        }
+                        return false;
+                    }
+                }
+            }),
+        ];
+    },
+});
+class SlashCommandsView {
+    editor;
+    commands;
+    char;
+    allowSpaces;
+    startOfLine;
+    dropdown = null;
+    popup = null;
+    range = null;
+    query = '';
+    selectedIndex = 0;
+    lastInputWasSlash = false;
+    outsideClickHandler = null;
+    constructor({ editor, commands, char, allowSpaces, startOfLine, }) {
+        this.editor = editor;
+        this.commands = commands;
+        this.char = char;
+        this.allowSpaces = allowSpaces;
+        this.startOfLine = startOfLine;
+        this.editor.on('selectionUpdate', this.selectionUpdate.bind(this));
+        this.editor.on('update', this.selectionUpdate.bind(this));
+    }
+    selectionUpdate() {
+        const { selection } = this.editor.state;
+        const { $from } = selection;
+        // Get text before cursor in current node
+        const currentNode = $from.parent;
+        const currentNodeText = currentNode.textContent;
+        const posInNode = $from.parentOffset;
+        const textBeforeCursor = currentNodeText.slice(0, posInNode);
+        // Look for slash command pattern
+        const match = textBeforeCursor.match(new RegExp(`${this.char}([^\\s${this.char}]*)$`));
+        if (match && this.lastInputWasSlash) {
+            const query = match[1];
+            const from = $from.pos - match[0].length;
+            const to = $from.pos;
+            this.range = { from, to };
+            this.query = query;
+            this.selectedIndex = 0;
+            this.showSuggestions();
+        }
+        else {
+            this.hideSuggestions();
+            // Reset the flag when we're not in a slash command context
+            if (!match) {
+                this.lastInputWasSlash = false;
+            }
+        }
+    }
+    createDropdown() {
+        const dropdown = document.createElement('div');
+        dropdown.className = 'slash-commands-dropdown';
+        const filteredCommands = this.getFilteredCommands();
+        if (filteredCommands.length === 0) {
+            const noResults = document.createElement('div');
+            noResults.className = 'slash-command-item';
+            noResults.innerHTML = `
+        <div class="slash-command-content">
+          <div class="slash-command-text">
+            <div class="slash-command-title">No results</div>
+            <div class="slash-command-description">No commands found for "${this.query}"</div>
+          </div>
+        </div>
+      `;
+            dropdown.appendChild(noResults);
+        }
+        else {
+            filteredCommands.forEach((command, index) => {
+                const item = document.createElement('button');
+                item.className = `slash-command-item ${index === this.selectedIndex ? 'selected' : ''}`;
+                item.innerHTML = `
+          <div class="slash-command-content">
+            ${command.icon ? `<span class="slash-command-icon">${command.icon}</span>` : ''}
+            <div class="slash-command-text">
+              <div class="slash-command-title">${command.title}</div>
+              <div class="slash-command-description">${command.description}</div>
+            </div>
+          </div>
+        `;
+                item.addEventListener('click', () => this.selectCommand(command));
+                dropdown.appendChild(item);
+            });
+        }
+        // Add keyboard event handling
+        dropdown.addEventListener('keydown', this.handleKeyDown.bind(this));
+        return dropdown;
+    }
+    handleKeyDown(event) {
+        const filteredCommands = this.getFilteredCommands();
+        switch (event.key) {
+            case 'ArrowUp':
+                event.preventDefault();
+                if (this.selectedIndex === 0) {
+                    // Exit dropdown when at the start and pressing up
+                    this.hideSuggestions();
+                    return false; // Let editor handle the event
+                }
+                else {
+                    this.selectedIndex = this.selectedIndex - 1;
+                    this.updateSelection();
+                }
+                return true;
+            case 'ArrowDown':
+                event.preventDefault();
+                if (this.selectedIndex === filteredCommands.length - 1) {
+                    // Cycle to start when at the end and pressing down
+                    this.selectedIndex = 0;
+                }
+                else {
+                    this.selectedIndex = this.selectedIndex + 1;
+                }
+                this.updateSelection();
+                return true;
+            case 'Enter':
+                event.preventDefault();
+                const selectedCommand = filteredCommands[this.selectedIndex];
+                if (selectedCommand) {
+                    this.selectCommand(selectedCommand);
+                }
+                return true;
+            case 'Escape':
+                event.preventDefault();
+                this.hideSuggestions();
+                return true;
+            default:
+                return false;
+        }
+    }
+    updateSelection() {
+        if (!this.dropdown)
+            return;
+        const items = this.dropdown.querySelectorAll('.slash-command-item');
+        items.forEach((item, index) => {
+            if (index === this.selectedIndex) {
+                item.classList.add('selected');
+            }
+            else {
+                item.classList.remove('selected');
+            }
+        });
+    }
+    showSuggestions() {
+        // Always recreate the dropdown to ensure fresh content and event listeners
+        this.dropdown = this.createDropdown();
+        if (this.popup) {
+            // Update existing popup content
+            this.popup.setContent(this.dropdown);
+        }
+        else {
+            // Create new popup
+            const instances = tippy(document.body, {
+                getReferenceClientRect: () => {
+                    if (!this.range) {
+                        // Return a default rect if range is null
+                        return new DOMRect(0, 0, 0, 0);
+                    }
+                    const { view } = this.editor;
+                    const { from } = this.range;
+                    const start = view.coordsAtPos(from);
+                    const end = view.coordsAtPos(this.range.to);
+                    return {
+                        top: start.top,
+                        bottom: end.bottom,
+                        left: start.left,
+                        right: end.right,
+                        width: end.right - start.left,
+                        height: end.bottom - start.top,
+                        x: start.left,
+                        y: start.top,
+                        toJSON: () => ({
+                            top: start.top,
+                            bottom: end.bottom,
+                            left: start.left,
+                            right: end.right,
+                            width: end.right - start.left,
+                            height: end.bottom - start.top,
+                            x: start.left,
+                            y: start.top,
+                        })
+                    };
+                },
+                appendTo: () => document.body,
+                content: this.dropdown,
+                showOnCreate: true,
+                interactive: true,
+                trigger: 'manual',
+                placement: 'bottom-start',
+                theme: 'slash-commands',
+                maxWidth: 'none',
+                onShow: () => {
+                    // Add outside click handler when dropdown is shown
+                    this.addOutsideClickHandler();
+                },
+                onHide: () => {
+                    // Remove outside click handler when dropdown is hidden
+                    this.removeOutsideClickHandler();
+                }
+            });
+            this.popup = instances[0];
+        }
+    }
+    hideSuggestions() {
+        this.removeOutsideClickHandler();
+        if (this.popup) {
+            this.popup.destroy();
+            this.popup = null;
+        }
+        // Force cleanup of any remaining tippy instances
+        const existingTippyInstances = document.querySelectorAll('[data-tippy-root]');
+        existingTippyInstances.forEach(instance => {
+            instance.remove();
+        });
+        // Also remove any dropdown elements that might be lingering
+        const existingDropdowns = document.querySelectorAll('.slash-commands-dropdown');
+        existingDropdowns.forEach(dropdown => {
+            console.log('Force removing dropdown element');
+            dropdown.remove();
+        });
+        this.dropdown = null;
+        this.range = null;
+        this.query = '';
+        this.selectedIndex = 0;
+        this.lastInputWasSlash = false;
+    }
+    addOutsideClickHandler() {
+        if (this.outsideClickHandler) {
+            this.removeOutsideClickHandler();
+        }
+        this.outsideClickHandler = (event) => {
+            const target = event.target;
+            // Check if click is outside the dropdown and editor
+            if (this.dropdown && !this.dropdown.contains(target) &&
+                !this.editor.view.dom.contains(target)) {
+                this.hideSuggestions();
+            }
+        };
+        // Add listener with a slight delay to avoid immediate closure
+        setTimeout(() => {
+            document.addEventListener('click', this.outsideClickHandler, true);
+        }, 100);
+    }
+    removeOutsideClickHandler() {
+        if (this.outsideClickHandler) {
+            document.removeEventListener('click', this.outsideClickHandler, true);
+            this.outsideClickHandler = null;
+        }
+    }
+    getFilteredCommands() {
+        if (!this.query) {
+            return this.commands;
+        }
+        return this.commands.filter(command => command.title.toLowerCase().includes(this.query.toLowerCase()) ||
+            command.description.toLowerCase().includes(this.query.toLowerCase()));
+    }
+    selectCommand(command) {
+        if (this.range) {
+            // Store the range before hiding suggestions, as hideSuggestions() might clear it
+            const range = this.range;
+            console.log('Executing command, hiding suggestions first');
+            // Hide suggestions first to ensure dropdown closes
+            this.hideSuggestions();
+            console.log('Suggestions hidden, executing command');
+            // Then execute the command with the stored range
+            command.command({ editor: this.editor, range });
+            console.log('Command execution completed');
+        }
+    }
+    destroy() {
+        this.removeOutsideClickHandler();
+        this.hideSuggestions();
+        this.editor.off('selectionUpdate', this.selectionUpdate);
+        this.editor.off('update', this.selectionUpdate);
+    }
+}

package/dist/editor/extensions/taskitem.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Extended TaskItem extension with configurable input regex rules.
+ */
+export interface ExtendedTaskItemOptions {
+    nested: boolean;
+    inputRegex?: RegExp;
+}
+export declare const ExtendedTaskItem: import("@tiptap/core").Node<ExtendedTaskItemOptions, any>;

package/dist/editor/extensions/taskitem.js

@@ -0,0 +1,67 @@
+import { TaskItem } from '@tiptap/extension-task-item';
+import { wrappingInputRule } from '@tiptap/core';
+export const ExtendedTaskItem = TaskItem.extend({
+    addOptions() {
+        return {
+            ...this.parent?.(),
+            nested: true,
+            inputRegex: /^\s*[-+*]\s\[( |x|X)\](?:\s)?$/, // Match `- [ ]` or `- [x]`, with optional space
+        };
+    },
+    addInputRules() {
+        const { inputRegex } = this.options;
+        return [
+            wrappingInputRule({
+                find: inputRegex,
+                type: this.type,
+                getAttributes: (match) => {
+                    return {
+                        checked: match[1] === 'x' || match[1] === 'X',
+                    };
+                },
+            })
+        ];
+    },
+    addNodeView() {
+        return ({ node, getPos, editor }) => {
+            const listItem = document.createElement('li');
+            listItem.setAttribute('data-type', 'taskItem');
+            listItem.setAttribute('data-checked', node.attrs.checked);
+            const checkboxWrapper = document.createElement('label');
+            checkboxWrapper.contentEditable = 'false';
+            const checkbox = document.createElement('input');
+            checkbox.type = 'checkbox';
+            checkbox.checked = node.attrs.checked;
+            // Add click handler to the checkbox
+            checkbox.addEventListener('change', () => {
+                const pos = getPos();
+                if (typeof pos === 'number') {
+                    const { tr } = editor.state;
+                    tr.setNodeMarkup(pos, undefined, {
+                        ...node.attrs,
+                        checked: checkbox.checked
+                    });
+                    editor.view.dispatch(tr);
+                }
+            });
+            const content = document.createElement('div');
+            content.style.display = 'inline';
+            checkboxWrapper.appendChild(checkbox);
+            listItem.appendChild(checkboxWrapper);
+            listItem.appendChild(content);
+            return {
+                dom: listItem,
+                contentDOM: content,
+                update: (updatedNode) => {
+                    if (updatedNode.type !== this.type) {
+                        return false;
+                    }
+                    // Update checkbox state when node is updated
+                    checkbox.checked = updatedNode.attrs.checked;
+                    listItem.setAttribute('data-checked', updatedNode.attrs.checked);
+                    return true;
+                }
+            };
+        };
+    },
+});

package/dist/editor/index.d.ts

@@ -0,0 +1,19 @@
+import { Editor, EditorOptions, Extension } from '@tiptap/core';
+import { MarkdownStorage } from 'tiptap-markdown';
+import { FileSystemOptions } from './extensions/filesystem';
+export type MarkdownEditorOptions = Partial<EditorOptions> & {
+    extensions?: Extension[];
+    fs?: FileSystemOptions;
+};
+export type MarkdownEditor = Editor & {
+    storage: {
+        markdown: MarkdownStorage;
+    } & Record<string, any>;
+};
+/**
+ * Create a Markdown-ready Tiptap Editor with default extensions and options.
+ *
+ * @param options Optional overrides for the Tiptap Editor options.
+ * @returns An instance of Tiptap Editor.
+ */
+export declare function createEditor(options?: MarkdownEditorOptions): MarkdownEditor;

package/dist/editor/index.js

@@ -0,0 +1,68 @@
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import TaskList from '@tiptap/extension-task-list';
+import { TableKit } from '@tiptap/extension-table';
+import { Markdown } from 'tiptap-markdown';
+import { ExtendedCodeblock } from './extensions/codeblock';
+import { ExtendedTaskItem } from './extensions/taskitem';
+import { FileSystem } from './extensions/filesystem';
+import { styleModule } from './styles';
+import { ExtendedLink } from './extensions/link';
+import { SlashCommands } from './extensions/slash-commands';
+import { defaultSlashCommands } from './commands';
+import { StyleModule } from 'style-mod';
+/**
+ * Create a Markdown-ready Tiptap Editor with default extensions and options.
+ *
+ * @param options Optional overrides for the Tiptap Editor options.
+ * @returns An instance of Tiptap Editor.
+ */
+export function createEditor(options = {}) {
+    const editor = new Editor({
+        extensions: [
+            FileSystem.configure(options.fs || {}),
+            ExtendedLink.configure({}),
+            StarterKit.configure({
+                codeBlock: false,
+                // bulletList: false, // As Markdown handles bullet lists and allows us to configure the marker to prevent task item conflicts
+            }),
+            Markdown.configure({
+                html: false,
+                tightLists: true,
+                tightListClass: 'tight',
+                bulletListMarker: '*',
+                linkify: true,
+                breaks: true,
+                transformPastedText: true,
+                transformCopiedText: true,
+            }),
+            ExtendedCodeblock,
+            TaskList,
+            ExtendedTaskItem.configure({
+                nested: true,
+            }),
+            TableKit.configure({
+                table: { resizable: true, allowTableNodeSelection: true },
+            }),
+            SlashCommands.configure({
+                commands: defaultSlashCommands,
+            }),
+            ...(options.extensions || []),
+        ],
+        editorProps: {
+            attributes: options.editorProps?.attributes || {},
+            ...(options.editorProps || {}),
+        },
+        content: options.content || '',
+        onUpdate: options.onUpdate || (() => { }),
+        autofocus: options.autofocus,
+        editable: options.editable,
+        injectCSS: options.injectCSS,
+        ...options,
+    });
+    editor.view.dom.classList.add('ezco-mde');
+    if (typeof document !== 'undefined') {
+        StyleModule.mount(document, styleModule);
+    }
+    return editor;
+}

package/dist/editor/styles.d.ts

@@ -0,0 +1,2 @@
+import { StyleModule } from 'style-mod';
+export declare const styleModule: StyleModule;

package/dist/editor/styles.js

@@ -0,0 +1,153 @@
+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 = 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/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './editor/index';
+export type { MarkdownEditor, MarkdownEditorOptions } from './editor/index';

package/dist/index.js

@@ -0,0 +1,2 @@
+// Main library entry point
+export * from './editor/index';

package/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vite + React + TS</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>