349 lines
12 KiB
TypeScript
349 lines
12 KiB
TypeScript
import React, { useEffect, useRef, useCallback, useState } from 'react';
|
|
import { Editor, defaultValueCtx, editorViewCtx, rootCtx, remarkStringifyOptionsCtx, remarkPluginsCtx } from '@milkdown/kit/core';
|
|
import { commonmark, toggleStrongCommand, toggleEmphasisCommand, wrapInBlockquoteCommand, wrapInBulletListCommand, wrapInOrderedListCommand, insertHrCommand, toggleInlineCodeCommand, insertImageCommand, toggleLinkCommand } from '@milkdown/kit/preset/commonmark';
|
|
import { gfm, toggleStrikethroughCommand } from '@milkdown/kit/preset/gfm';
|
|
import { history, undoCommand, redoCommand } from '@milkdown/kit/plugin/history';
|
|
import { listener, listenerCtx } from '@milkdown/kit/plugin/listener';
|
|
import { clipboard } from '@milkdown/kit/plugin/clipboard';
|
|
import { trailing } from '@milkdown/kit/plugin/trailing';
|
|
import { indent } from '@milkdown/kit/plugin/indent';
|
|
import { cursor } from '@milkdown/kit/plugin/cursor';
|
|
import { replaceAll } from '@milkdown/kit/utils';
|
|
import { Milkdown, MilkdownProvider, useInstance, useEditor } from '@milkdown/react';
|
|
import { callCommand } from '@milkdown/kit/utils';
|
|
import type { Ctx } from '@milkdown/kit/ctx';
|
|
import type { RemarkPlugin } from '@milkdown/kit/transformer';
|
|
import type { Root, List, ListItem } from 'mdast';
|
|
import type { Plugin } from 'unified';
|
|
import { visit } from 'unist-util-visit';
|
|
import { macroPlugin } from '../../plugins/macroPlugin';
|
|
import { imageResolverPlugin } from '../../plugins/imageResolverPlugin';
|
|
// Import macros module to register all macro definitions
|
|
import '../../macros';
|
|
import './MilkdownEditor.css';
|
|
import { InsertModal } from '../InsertModal';
|
|
import { unescapeMacroSyntax } from '../../utils/markdownEscape';
|
|
|
|
// Remark plugin to force tight lists (no blank lines between list items)
|
|
const remarkTightListsPlugin: Plugin<[Record<string, unknown>], Root> = () => {
|
|
return (tree: Root) => {
|
|
visit(tree, 'list', (node) => {
|
|
const listNode = node as List;
|
|
// Set spread to false to make lists tight
|
|
listNode.spread = false;
|
|
// Also set each list item's spread to false
|
|
for (const child of listNode.children) {
|
|
if (child.type === 'listItem') {
|
|
(child as ListItem).spread = false;
|
|
}
|
|
}
|
|
});
|
|
};
|
|
};
|
|
|
|
// Wrap as Milkdown RemarkPlugin format
|
|
const remarkTightLists: RemarkPlugin = {
|
|
plugin: remarkTightListsPlugin,
|
|
options: {},
|
|
};
|
|
|
|
type InsertModalMode = 'link' | 'image' | null;
|
|
|
|
interface MilkdownEditorProps {
|
|
content: string;
|
|
onChange: (markdown: string) => void;
|
|
placeholder?: string;
|
|
}
|
|
|
|
// Toolbar component that uses the editor instance
|
|
const EditorToolbar: React.FC = () => {
|
|
const [loading, getEditor] = useInstance();
|
|
const [insertMode, setInsertMode] = useState<InsertModalMode>(null);
|
|
const [selectedText, setSelectedText] = useState('');
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
const runCommand = useCallback((commandKey: any, payload?: unknown) => {
|
|
if (loading) return;
|
|
const editor = getEditor();
|
|
if (editor) {
|
|
editor.action(callCommand(commandKey, payload));
|
|
}
|
|
}, [loading, getEditor]);
|
|
|
|
const insertHeading = useCallback((level: number) => {
|
|
if (loading) return;
|
|
const editor = getEditor();
|
|
if (!editor) return;
|
|
|
|
editor.action((ctx) => {
|
|
const view = ctx.get(editorViewCtx);
|
|
const { state, dispatch } = view;
|
|
const { $from } = state.selection;
|
|
const lineStart = $from.start();
|
|
const lineEnd = $from.end();
|
|
const lineText = state.doc.textBetween(lineStart, lineEnd);
|
|
|
|
// Remove existing heading markers
|
|
const cleanText = lineText.replace(/^#{1,6}\s*/, '');
|
|
const newText = `${'#'.repeat(level)} ${cleanText}`;
|
|
|
|
const tr = state.tr.replaceWith(
|
|
lineStart,
|
|
lineEnd,
|
|
state.schema.text(newText)
|
|
);
|
|
dispatch(tr);
|
|
});
|
|
}, [loading, getEditor]);
|
|
|
|
// Get current selection text from editor
|
|
const getSelectionText = useCallback(() => {
|
|
const editor = getEditor();
|
|
if (!editor) return '';
|
|
let text = '';
|
|
editor.action((ctx) => {
|
|
const view = ctx.get(editorViewCtx);
|
|
const { state } = view;
|
|
const { selection } = state;
|
|
if (!selection.empty) {
|
|
text = state.doc.textBetween(selection.from, selection.to);
|
|
}
|
|
});
|
|
return text;
|
|
}, [getEditor]);
|
|
|
|
const openLinkModal = useCallback(() => {
|
|
const text = getSelectionText();
|
|
setSelectedText(text);
|
|
setInsertMode('link');
|
|
}, [getSelectionText]);
|
|
|
|
const openImageModal = useCallback(() => {
|
|
setSelectedText('');
|
|
setInsertMode('image');
|
|
}, []);
|
|
|
|
// Add keyboard shortcut listener for Ctrl/Cmd+K (link)
|
|
useEffect(() => {
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
|
|
e.preventDefault();
|
|
openLinkModal();
|
|
}
|
|
};
|
|
|
|
document.addEventListener('keydown', handleKeyDown);
|
|
return () => document.removeEventListener('keydown', handleKeyDown);
|
|
}, [openLinkModal]);
|
|
|
|
// Handle link insertion from modal
|
|
const handleInsertLink = useCallback((url: string, text?: string) => {
|
|
const editor = getEditor();
|
|
if (!editor) return;
|
|
|
|
editor.action((ctx) => {
|
|
const view = ctx.get(editorViewCtx);
|
|
const { state, dispatch } = view;
|
|
const { selection, schema } = state;
|
|
const currentSelectedText = selection.empty ? '' : state.doc.textBetween(selection.from, selection.to);
|
|
|
|
const linkText = currentSelectedText || text || url;
|
|
const linkUrl = url;
|
|
|
|
if (selection.empty) {
|
|
// No selection - create text node with link mark and insert it
|
|
const linkMark = schema.marks.link.create({ href: linkUrl });
|
|
const textNode = schema.text(linkText, [linkMark]);
|
|
const tr = state.tr.replaceSelectionWith(textNode, false);
|
|
dispatch(tr);
|
|
} else {
|
|
// Has selection - toggle link mark on selection
|
|
const linkMark = schema.marks.link.create({ href: linkUrl });
|
|
const tr = state.tr.addMark(selection.from, selection.to, linkMark);
|
|
dispatch(tr);
|
|
}
|
|
});
|
|
|
|
setInsertMode(null);
|
|
}, [getEditor]);
|
|
|
|
// Handle image insertion from modal
|
|
const handleInsertImage = useCallback((url: string, alt: string) => {
|
|
runCommand(insertImageCommand.key, { src: url, alt });
|
|
setInsertMode(null);
|
|
}, [runCommand]);
|
|
|
|
if (loading) return null;
|
|
|
|
return (
|
|
<>
|
|
<div className="milkdown-toolbar">
|
|
<div className="toolbar-group">
|
|
<button onClick={() => insertHeading(1)} title="Heading 1">H1</button>
|
|
<button onClick={() => insertHeading(2)} title="Heading 2">H2</button>
|
|
<button onClick={() => insertHeading(3)} title="Heading 3">H3</button>
|
|
</div>
|
|
|
|
<div className="toolbar-divider" />
|
|
|
|
<div className="toolbar-group">
|
|
<button onClick={() => runCommand(toggleStrongCommand.key)} title="Bold (Ctrl+B)">
|
|
<strong>B</strong>
|
|
</button>
|
|
<button onClick={() => runCommand(toggleEmphasisCommand.key)} title="Italic (Ctrl+I)">
|
|
<em>I</em>
|
|
</button>
|
|
<button onClick={() => runCommand(toggleStrikethroughCommand.key)} title="Strikethrough">
|
|
<s>S</s>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="toolbar-divider" />
|
|
|
|
<div className="toolbar-group">
|
|
<button onClick={() => runCommand(wrapInBulletListCommand.key)} title="Bullet List">•</button>
|
|
<button onClick={() => runCommand(wrapInOrderedListCommand.key)} title="Numbered List">1.</button>
|
|
<button onClick={() => runCommand(wrapInBlockquoteCommand.key)} title="Quote">❝</button>
|
|
<button onClick={() => runCommand(toggleInlineCodeCommand.key)} title="Code">{'{}'}</button>
|
|
</div>
|
|
|
|
<div className="toolbar-divider" />
|
|
|
|
<div className="toolbar-group">
|
|
<button onClick={openLinkModal} title="Insert Link (Ctrl+K)">🔗</button>
|
|
<button onClick={openImageModal} title="Insert Image">🖼</button>
|
|
<button onClick={() => runCommand(insertHrCommand.key)} title="Horizontal Rule">―</button>
|
|
</div>
|
|
|
|
<div className="toolbar-divider" />
|
|
|
|
<div className="toolbar-group">
|
|
<button onClick={() => runCommand(undoCommand.key)} title="Undo (Ctrl+Z)">↶</button>
|
|
<button onClick={() => runCommand(redoCommand.key)} title="Redo (Ctrl+Y)">↷</button>
|
|
</div>
|
|
</div>
|
|
|
|
{insertMode && (
|
|
<InsertModal
|
|
mode={insertMode}
|
|
onInsertLink={handleInsertLink}
|
|
onInsertImage={handleInsertImage}
|
|
onClose={() => setInsertMode(null)}
|
|
initialText={selectedText}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
// Main component with provider wrapper
|
|
export const MilkdownEditor: React.FC<MilkdownEditorProps> = (props) => {
|
|
return (
|
|
<MilkdownProvider>
|
|
<MilkdownProviderInner {...props} />
|
|
</MilkdownProvider>
|
|
);
|
|
};
|
|
|
|
// Separate component to use hooks within provider
|
|
const MilkdownProviderInner: React.FC<MilkdownEditorProps> = ({
|
|
content,
|
|
onChange,
|
|
placeholder = 'Start writing your content...',
|
|
}) => {
|
|
const [loading, getEditor] = useInstance();
|
|
const lastExternalContent = useRef(content);
|
|
const isInternalChange = useRef(false);
|
|
const onChangeRef = useRef(onChange);
|
|
const contentRef = useRef(content);
|
|
// Store the normalized markdown after Milkdown's initial round-trip
|
|
// Only trigger onChange if the markdown differs from this baseline
|
|
const normalizedBaseline = useRef<string | null>(null);
|
|
|
|
// Keep refs updated
|
|
useEffect(() => {
|
|
onChangeRef.current = onChange;
|
|
}, [onChange]);
|
|
|
|
useEffect(() => {
|
|
contentRef.current = content;
|
|
}, [content]);
|
|
|
|
// Initialize editor using useEditor hook
|
|
useEditor((root) => {
|
|
return Editor.make()
|
|
.config((ctx: Ctx) => {
|
|
ctx.set(rootCtx, root);
|
|
ctx.set(defaultValueCtx, contentRef.current);
|
|
// Configure remark-stringify to produce tight lists (no blank lines between list items)
|
|
ctx.set(remarkStringifyOptionsCtx, {
|
|
bullet: '-',
|
|
listItemIndent: 'one',
|
|
});
|
|
// Add custom remark plugin to force tight lists
|
|
ctx.set(remarkPluginsCtx, [remarkTightLists]);
|
|
ctx.get(listenerCtx).markdownUpdated((_ctx: Ctx, markdown: string, prevMarkdown: string) => {
|
|
// Unescape brackets and underscores to preserve macro syntax like [[photo_gallery]]
|
|
const unescaped = unescapeMacroSyntax(markdown);
|
|
const prevUnescaped = unescapeMacroSyntax(prevMarkdown);
|
|
|
|
if (unescaped !== prevUnescaped) {
|
|
// On first update after load, store the normalized baseline
|
|
// This captures Milkdown's round-trip formatting
|
|
if (normalizedBaseline.current === null) {
|
|
normalizedBaseline.current = unescaped;
|
|
return; // Don't trigger onChange for initial normalization
|
|
}
|
|
// Only trigger onChange if content differs from the baseline
|
|
// (meaning the user actually edited something)
|
|
if (unescaped !== normalizedBaseline.current) {
|
|
isInternalChange.current = true;
|
|
normalizedBaseline.current = unescaped; // Update baseline
|
|
onChangeRef.current(unescaped);
|
|
}
|
|
}
|
|
});
|
|
})
|
|
.use(commonmark)
|
|
.use(gfm)
|
|
.use(imageResolverPlugin)
|
|
.use(macroPlugin)
|
|
.use(history)
|
|
.use(listener)
|
|
.use(clipboard)
|
|
.use(trailing)
|
|
.use(indent)
|
|
.use(cursor);
|
|
}, []);
|
|
|
|
// Handle external content changes
|
|
useEffect(() => {
|
|
if (loading) return;
|
|
const editor = getEditor();
|
|
if (!editor) return;
|
|
|
|
if (content !== lastExternalContent.current && !isInternalChange.current) {
|
|
// Reset baseline so next markdownUpdated captures new normalized content
|
|
normalizedBaseline.current = null;
|
|
editor.action(replaceAll(content));
|
|
lastExternalContent.current = content;
|
|
} else if (isInternalChange.current) {
|
|
// Update ref for internal changes to keep it in sync
|
|
lastExternalContent.current = content;
|
|
}
|
|
isInternalChange.current = false;
|
|
}, [content, loading, getEditor]);
|
|
|
|
return (
|
|
<div className="milkdown-editor">
|
|
<EditorToolbar />
|
|
<div className="milkdown-content" data-placeholder={placeholder}>
|
|
<Milkdown />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MilkdownEditor;
|