@moldable-ai/editor 0.1.8 → 0.1.11

package/dist/components/markdown-editor.d.ts

@@ -1,4 +1,6 @@
+import { type MarkdownReferenceOption } from '../lib/lexical/file-reference-plugin';
 import { type MarkdownEditorHandle } from '../lib/lexical/find-replace-plugin';
+import { type MarkdownMediaUpload } from '../lib/lexical/media-plugin';
 export interface MarkdownEditorProps {
     value: string;
     onChange: (value: string) => void;
@@ -13,6 +15,9 @@ export interface MarkdownEditorProps {
     findQuery?: string;
     currentFindMatch?: number;
     onFindMatchCountChange?: (count: number) => void;
+    onMediaUpload?: MarkdownMediaUpload;
+    resolveMediaUrl?: (src: string) => string;
+    referenceOptions?: MarkdownReferenceOption[];
 }
 export declare const MarkdownEditor: import("react").ForwardRefExoticComponent<MarkdownEditorProps & import("react").RefAttributes<MarkdownEditorHandle>>;
 export type { MarkdownEditorHandle };

package/dist/components/markdown-editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markdown-editor.d.ts","sourceRoot":"","sources":["../../src/components/markdown-editor.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,oCAAoC,CAAA;AAoB3C,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACjD;AAED,eAAO,MAAM,cAAc,sHAmIzB,CAAA;AAEF,YAAY,EAAE,oBAAoB,EAAE,CAAA"}
+{"version":3,"file":"markdown-editor.d.ts","sourceRoot":"","sources":["../../src/components/markdown-editor.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAEL,KAAK,uBAAuB,EAC7B,MAAM,sCAAsC,CAAA;AAC7C,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,oCAAoC,CAAA;AAS3C,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,6BAA6B,CAAA;AAkBpC,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAChD,aAAa,CAAC,EAAE,mBAAmB,CAAA;IACnC,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IACzC,gBAAgB,CAAC,EAAE,uBAAuB,EAAE,CAAA;CAC7C;AAED,eAAO,MAAM,cAAc,sHAmJzB,CAAA;AAEF,YAAY,EAAE,oBAAoB,EAAE,CAAA"}

package/dist/components/markdown-editor.js

@@ -18,9 +18,14 @@ import { cn } from '@moldable-ai/ui';
 import { LINK_MATCHERS } from '../lib/lexical/auto-link-config';
 import { ClickableLinkPlugin } from '../lib/lexical/clickable-link-plugin';
 import { editorTheme } from '../lib/lexical/editor-theme';
+import { FileReferencePlugin, } from '../lib/lexical/file-reference-plugin';
 import { FIND_REPLACE_UPDATE_TAG, FindReplacePlugin, } from '../lib/lexical/find-replace-plugin';
+import { ImageNode } from '../lib/lexical/image-node';
 import { $convertFromMarkdownString, $convertToMarkdownString, markdownTransformers, } from '../lib/lexical/markdown-transformers';
-import { SyncPlugin } from '../lib/lexical/sync-plugin';
+import { MediaProvider } from '../lib/lexical/media-context';
+import { MediaNode } from '../lib/lexical/media-node';
+import { MediaPasteDropPlugin, } from '../lib/lexical/media-plugin';
+import { EXTERNAL_MARKDOWN_SYNC_TAG, SyncPlugin, } from '../lib/lexical/sync-plugin';
 import { FloatingToolbar } from './floating-toolbar';
 import { CodeHighlightNode, CodeNode } from '@lexical/code';
 import { HorizontalRuleNode } from '@lexical/extension';
@@ -29,7 +34,7 @@ import { ListItemNode, ListNode } from '@lexical/list';
 import { MarkNode } from '@lexical/mark';
 import { HeadingNode, QuoteNode } from '@lexical/rich-text';
 import { $createParagraphNode, $getRoot } from 'lexical';
-export const MarkdownEditor = forwardRef(function MarkdownEditor({ value, onChange, placeholder = 'Write something...', disabled = false, autoFocus = false, className, contentClassName, minHeight = '150px', maxHeight = '50vh', hideMarkdownHint = false, findQuery = '', currentFindMatch = 0, onFindMatchCountChange, }, ref) {
+export const MarkdownEditor = forwardRef(function MarkdownEditor({ value, onChange, placeholder = 'Write something...', disabled = false, autoFocus = false, className, contentClassName, minHeight = '150px', maxHeight = '50vh', hideMarkdownHint = false, findQuery = '', currentFindMatch = 0, onFindMatchCountChange, onMediaUpload, resolveMediaUrl, referenceOptions, }, ref) {
     const initialValueRef = useRef(value);
     const initialConfig = {
         namespace: 'MarkdownEditor',
@@ -40,8 +45,9 @@ export const MarkdownEditor = forwardRef(function MarkdownEditor({ value, onChan
                     markdown: value,
                     transformers: markdownTransformers,
                     node: root,
-                    shouldPreserveNewLines: true,
+                    shouldPreserveNewLines: false,
                 });
+                root.selectEnd();
             }
             else {
                 root.append($createParagraphNode());
@@ -58,6 +64,8 @@ export const MarkdownEditor = forwardRef(function MarkdownEditor({ value, onChan
             LinkNode,
             MarkNode,
             HorizontalRuleNode,
+            ImageNode,
+            MediaNode,
         ],
         onError: (error) => {
             console.error('MarkdownEditor error:', error);
@@ -68,11 +76,12 @@ export const MarkdownEditor = forwardRef(function MarkdownEditor({ value, onChan
     const handleChange = useCallback((editorState, _editor, tags) => {
         if (tags.has(FIND_REPLACE_UPDATE_TAG))
             return;
+        if (tags.has(EXTERNAL_MARKDOWN_SYNC_TAG))
+            return;
         editorState.read(() => {
-            // Use shouldPreserveNewLines: true to preserve empty paragraphs as extra newlines
             const markdown = $convertToMarkdownString({
                 transformers: markdownTransformers,
-                shouldPreserveNewLines: true,
+                shouldPreserveNewLines: false,
             });
             // Only call onChange if the value actually changed
             if (markdown !== initialValueRef.current) {
@@ -81,5 +90,5 @@ export const MarkdownEditor = forwardRef(function MarkdownEditor({ value, onChan
             }
         });
     }, [onChange]);
-    return (_jsx(LexicalComposer, { initialConfig: initialConfig, children: _jsxs("div", { className: cn('relative h-full', className), "data-lexical-editor-container": true, children: [_jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: cn('prose prose-sm caret-primary dark:prose-invert max-w-none resize-none overflow-auto bg-transparent outline-none', disabled && 'cursor-not-allowed opacity-50', contentClassName), style: { minHeight, maxHeight }, "aria-placeholder": placeholder, "data-lexical-editor": "true", placeholder: _jsx("div", { className: "text-muted-foreground pointer-events-none absolute left-0 top-1 text-sm opacity-75", children: placeholder }) }), ErrorBoundary: LexicalErrorBoundary }), _jsx(HistoryPlugin, {}), autoFocus && _jsx(AutoFocusPlugin, {}), _jsx(ListPlugin, {}), _jsx(CheckListPlugin, {}), _jsx(TabIndentationPlugin, {}), _jsx(LinkPlugin, {}), _jsx(AutoLinkPlugin, { matchers: LINK_MATCHERS }), _jsx(ClickableLinkPlugin, {}), _jsx(FloatingToolbar, {}), _jsx(MarkdownShortcutPlugin, { transformers: markdownTransformers }), _jsx(OnChangePlugin, { onChange: handleChange, ignoreSelectionChange: true }), _jsx(FindReplacePlugin, { query: findQuery, currentIndex: currentFindMatch, onMatchCountChange: onFindMatchCountChange, editorRef: ref }), _jsx(SyncPlugin, { value: value, initialValueRef: initialValueRef }), !hideMarkdownHint && (_jsx("div", { className: "mt-1 flex justify-end", children: _jsx("span", { className: "text-muted-foreground/60 text-xs", children: "Markdown supported" }) }))] }) }));
+    return (_jsx(LexicalComposer, { initialConfig: initialConfig, children: _jsx(MediaProvider, { value: { resolveMediaUrl }, children: _jsxs("div", { className: cn('relative h-full', className), "data-lexical-editor-container": true, children: [_jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: cn('prose prose-sm caret-primary dark:prose-invert max-w-none resize-none overflow-auto bg-transparent outline-none', disabled && 'cursor-not-allowed opacity-50', contentClassName), style: { minHeight, maxHeight }, "aria-placeholder": placeholder, "data-lexical-editor": "true", placeholder: _jsx("div", { className: cn('pointer-events-none absolute inset-x-0 top-1 overflow-hidden whitespace-nowrap', contentClassName, 'text-muted-foreground text-sm opacity-75'), children: placeholder }) }), ErrorBoundary: LexicalErrorBoundary }), _jsx(HistoryPlugin, {}), autoFocus && _jsx(AutoFocusPlugin, {}), _jsx(ListPlugin, {}), _jsx(CheckListPlugin, {}), _jsx(TabIndentationPlugin, {}), _jsx(LinkPlugin, {}), _jsx(AutoLinkPlugin, { matchers: LINK_MATCHERS }), _jsx(ClickableLinkPlugin, {}), _jsx(FloatingToolbar, {}), _jsx(MarkdownShortcutPlugin, { transformers: markdownTransformers }), _jsx(FileReferencePlugin, { references: referenceOptions }), _jsx(MediaPasteDropPlugin, { onMediaUpload: onMediaUpload }), _jsx(OnChangePlugin, { onChange: handleChange, ignoreSelectionChange: true }), _jsx(FindReplacePlugin, { query: findQuery, currentIndex: currentFindMatch, onMatchCountChange: onFindMatchCountChange, editorRef: ref }), _jsx(SyncPlugin, { value: value, initialValueRef: initialValueRef }), !hideMarkdownHint && (_jsx("div", { className: "mt-1 flex justify-end", children: _jsx("span", { className: "text-muted-foreground/60 text-xs", children: "Markdown supported" }) }))] }) }) }));
 });

package/dist/index.d.ts

@@ -1,6 +1,10 @@
 export { MarkdownEditor, type MarkdownEditorHandle, type MarkdownEditorProps, } from './components/markdown-editor';
 export { FloatingToolbar } from './components/floating-toolbar';
-export { $convertFromMarkdownString, $convertToMarkdownString, markdownTransformers, HR, } from './lib/lexical/markdown-transformers';
+export { $convertFromMarkdownString, $convertToMarkdownString, markdownTransformers, HR, IMAGE, OBSIDIAN_IMAGE_EMBED, MEDIA, } from './lib/lexical/markdown-transformers';
+export { ImageNode, $createImageNode, $isImageNode, type ImagePayload, } from './lib/lexical/image-node';
+export { MediaNode, $createMediaNode, $isMediaNode, type MediaKind, type MediaPayload, } from './lib/lexical/media-node';
+export { MediaPasteDropPlugin, type MarkdownMediaKind, type MarkdownMediaUpload, type MarkdownMediaUploadResult, } from './lib/lexical/media-plugin';
+export { FileReferencePlugin, type MarkdownReferenceOption, } from './lib/lexical/file-reference-plugin';
 export { editorTheme } from './lib/lexical/editor-theme';
 export { LINK_MATCHERS, URL_REGEX, EMAIL_REGEX, } from './lib/lexical/auto-link-config';
 export { useFloatingToolbar, type FloatingToolbarState, } from './lib/lexical/floating-toolbar-plugin';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,cAAc,EACd,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,GACzB,MAAM,8BAA8B,CAAA;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAG/D,OAAO,EACL,0BAA0B,EAC1B,wBAAwB,EACxB,oBAAoB,EACpB,EAAE,GACH,MAAM,qCAAqC,CAAA;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AACxD,OAAO,EACL,aAAa,EACb,SAAS,EACT,WAAW,GACZ,MAAM,gCAAgC,CAAA;AACvC,OAAO,EACL,kBAAkB,EAClB,KAAK,oBAAoB,GAC1B,MAAM,uCAAuC,CAAA;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AACtD,OAAO,EACL,mBAAmB,EACnB,SAAS,GACV,MAAM,qCAAqC,CAAA;AAG5C,OAAO,EAAE,4BAA4B,EAAE,MAAM,+BAA+B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,cAAc,EACd,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,GACzB,MAAM,8BAA8B,CAAA;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAG/D,OAAO,EACL,0BAA0B,EAC1B,wBAAwB,EACxB,oBAAoB,EACpB,EAAE,EACF,KAAK,EACL,oBAAoB,EACpB,KAAK,GACN,MAAM,qCAAqC,CAAA;AAC5C,OAAO,EACL,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,KAAK,YAAY,GAClB,MAAM,0BAA0B,CAAA;AACjC,OAAO,EACL,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,KAAK,SAAS,EACd,KAAK,YAAY,GAClB,MAAM,0BAA0B,CAAA;AACjC,OAAO,EACL,oBAAoB,EACpB,KAAK,iBAAiB,EACtB,KAAK,mBAAmB,EACxB,KAAK,yBAAyB,GAC/B,MAAM,4BAA4B,CAAA;AACnC,OAAO,EACL,mBAAmB,EACnB,KAAK,uBAAuB,GAC7B,MAAM,qCAAqC,CAAA;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AACxD,OAAO,EACL,aAAa,EACb,SAAS,EACT,WAAW,GACZ,MAAM,gCAAgC,CAAA;AACvC,OAAO,EACL,kBAAkB,EAClB,KAAK,oBAAoB,GAC1B,MAAM,uCAAuC,CAAA;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AACtD,OAAO,EACL,mBAAmB,EACnB,SAAS,GACV,MAAM,qCAAqC,CAAA;AAG5C,OAAO,EAAE,4BAA4B,EAAE,MAAM,+BAA+B,CAAA"}

package/dist/index.js

@@ -2,7 +2,11 @@
 export { MarkdownEditor, } from './components/markdown-editor';
 export { FloatingToolbar } from './components/floating-toolbar';
 // Lexical utilities (for advanced use cases)
-export { $convertFromMarkdownString, $convertToMarkdownString, markdownTransformers, HR, } from './lib/lexical/markdown-transformers';
+export { $convertFromMarkdownString, $convertToMarkdownString, markdownTransformers, HR, IMAGE, OBSIDIAN_IMAGE_EMBED, MEDIA, } from './lib/lexical/markdown-transformers';
+export { ImageNode, $createImageNode, $isImageNode, } from './lib/lexical/image-node';
+export { MediaNode, $createMediaNode, $isMediaNode, } from './lib/lexical/media-node';
+export { MediaPasteDropPlugin, } from './lib/lexical/media-plugin';
+export { FileReferencePlugin, } from './lib/lexical/file-reference-plugin';
 export { editorTheme } from './lib/lexical/editor-theme';
 export { LINK_MATCHERS, URL_REGEX, EMAIL_REGEX, } from './lib/lexical/auto-link-config';
 export { useFloatingToolbar, } from './lib/lexical/floating-toolbar-plugin';

package/dist/lib/lexical/file-reference-plugin.d.ts

@@ -0,0 +1,9 @@
+export interface MarkdownReferenceOption {
+    path: string;
+    title?: string;
+    kind?: 'note' | 'file';
+}
+export declare function FileReferencePlugin({ references, }: {
+    references?: MarkdownReferenceOption[];
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=file-reference-plugin.d.ts.map

package/dist/lib/lexical/file-reference-plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-reference-plugin.d.ts","sourceRoot":"","sources":["../../../src/lib/lexical/file-reference-plugin.tsx"],"names":[],"mappings":"AAYA,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACvB;AAqDD,wBAAgB,mBAAmB,CAAC,EAClC,UAAU,GACX,EAAE;IACD,UAAU,CAAC,EAAE,uBAAuB,EAAE,CAAA;CACvC,2CAsGA"}

package/dist/lib/lexical/file-reference-plugin.js

@@ -0,0 +1,99 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LexicalTypeaheadMenuPlugin, MenuOption, useBasicTypeaheadTriggerMatch, } from '@lexical/react/LexicalTypeaheadMenuPlugin';
+import { useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { cn } from '@moldable-ai/ui';
+import { $createTextNode } from 'lexical';
+class FileReferenceOption extends MenuOption {
+    path;
+    title;
+    isCreate;
+    constructor(path, title, isCreate = false) {
+        super(`${isCreate ? 'create' : 'reference'}:${path}`);
+        this.path = path;
+        this.title = title;
+        this.isCreate = isCreate;
+    }
+}
+function referenceTarget(path) {
+    return path.replace(/\.md$/, '');
+}
+function titleFromPath(path) {
+    return path.split('/').pop()?.replace(/\.md$/, '') ?? path;
+}
+function slugifyReference(value) {
+    const segments = value
+        .split('/')
+        .map((segment) => segment
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9 -]/g, '')
+        .replace(/\s+/g, '-')
+        .replace(/^-+|-+$/g, ''))
+        .filter(Boolean);
+    return segments.join('/') || 'untitled';
+}
+function referenceScore(option, query) {
+    const needle = query.trim().toLowerCase();
+    if (!needle)
+        return 1;
+    const title = (option.title ?? titleFromPath(option.path)).toLowerCase();
+    const path = option.path.toLowerCase();
+    if (title === needle || path === needle || path === `${needle}.md`)
+        return 100;
+    if (title.startsWith(needle))
+        return 80;
+    if (path.startsWith(needle))
+        return 70;
+    if (title.includes(needle))
+        return 50;
+    if (path.includes(needle))
+        return 40;
+    return 0;
+}
+export function FileReferencePlugin({ references, }) {
+    const [query, setQuery] = useState(null);
+    const triggerFn = useBasicTypeaheadTriggerMatch('@', {
+        allowWhitespace: true,
+        maxLength: 80,
+        minLength: 0,
+    });
+    const options = useMemo(() => {
+        const matching = (references ?? [])
+            .map((reference) => ({
+            reference,
+            score: referenceScore(reference, query ?? ''),
+        }))
+            .filter(({ score }) => score > 0)
+            .sort((a, b) => b.score - a.score || a.reference.path.localeCompare(b.reference.path))
+            .slice(0, 8)
+            .map(({ reference }) => new FileReferenceOption(reference.path, reference.title ?? titleFromPath(reference.path)));
+        const trimmed = query?.trim();
+        if (!trimmed)
+            return matching;
+        const createPath = `${slugifyReference(trimmed)}.md`;
+        const hasExact = (references ?? []).some((reference) => reference.path.toLowerCase() === createPath.toLowerCase() ||
+            reference.path.replace(/\.md$/, '').toLowerCase() ===
+                createPath.replace(/\.md$/, '').toLowerCase());
+        return hasExact
+            ? matching
+            : [
+                ...matching,
+                new FileReferenceOption(createPath, `Create ${trimmed}`, true),
+            ].slice(0, 9);
+    }, [query, references]);
+    return (_jsx(LexicalTypeaheadMenuPlugin, { triggerFn: triggerFn, options: options, onQueryChange: setQuery, preselectFirstItem: true, onSelectOption: (option, textNodeContainingQuery, closeMenu) => {
+            if (!textNodeContainingQuery)
+                return;
+            const node = $createTextNode(`[[${referenceTarget(option.path)}]]`);
+            textNodeContainingQuery.replace(node);
+            node.selectEnd();
+            closeMenu();
+        }, menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => {
+            if (!anchorElementRef.current || options.length === 0)
+                return null;
+            return createPortal(_jsx("div", { className: "moldable-editor-reference-menu", children: options.map((option, index) => (_jsxs("button", { ref: option.setRefElement, type: "button", role: "option", "aria-selected": selectedIndex === index, className: cn('moldable-editor-reference-option', selectedIndex === index &&
+                        'moldable-editor-reference-option-selected'), onMouseEnter: () => setHighlightedIndex(index), onMouseDown: (event) => event.preventDefault(), onClick: () => selectOptionAndCleanUp(option), children: [_jsx("span", { className: "moldable-editor-reference-title", children: option.title }), _jsx("span", { className: "moldable-editor-reference-path", children: option.isCreate ? 'New note' : option.path })] }, option.key))) }), anchorElementRef.current);
+        } }));
+}

package/dist/lib/lexical/headless-editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headless-editor.d.ts","sourceRoot":"","sources":["../../../src/lib/lexical/headless-editor.ts"],"names":[],"mappings":"AASA;;;GAGG;AACH,wBAAgB,4BAA4B,oCAmB3C"}
+{"version":3,"file":"headless-editor.d.ts","sourceRoot":"","sources":["../../../src/lib/lexical/headless-editor.ts"],"names":[],"mappings":"AAWA;;;GAGG;AACH,wBAAgB,4BAA4B,oCAqB3C"}

package/dist/lib/lexical/headless-editor.js

@@ -1,4 +1,6 @@
 import { editorTheme } from './editor-theme';
+import { ImageNode } from './image-node';
+import { MediaNode } from './media-node';
 import { CodeHighlightNode, CodeNode } from '@lexical/code';
 import { HorizontalRuleNode } from '@lexical/extension';
 import { createHeadlessEditor } from '@lexical/headless';
@@ -23,6 +25,8 @@ export function createMoldableHeadlessEditor() {
             LinkNode,
             MarkNode,
             HorizontalRuleNode,
+            ImageNode,
+            MediaNode,
         ],
         theme: editorTheme,
         onError: (error) => {

package/dist/lib/lexical/image-component.d.ts

@@ -0,0 +1,8 @@
+import { type NodeKey } from 'lexical';
+export declare function ImageComponent({ altText, nodeKey, src, width, }: {
+    altText: string;
+    nodeKey: NodeKey;
+    src: string;
+    width?: number;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=image-component.d.ts.map

package/dist/lib/lexical/image-component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-component.d.ts","sourceRoot":"","sources":["../../../src/lib/lexical/image-component.tsx"],"names":[],"mappings":"AAcA,OAAO,EAQL,KAAK,OAAO,EACb,MAAM,SAAS,CAAA;AAQhB,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,OAAO,EACP,GAAG,EACH,KAAK,GACN,EAAE;IACD,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,OAAO,CAAA;IAChB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,2CAsIA"}

package/dist/lib/lexical/image-component.js

@@ -0,0 +1,99 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
+import { useCallback, useEffect, useRef, useState, } from 'react';
+import { $isImageNode } from './image-node';
+import { useMediaResolver } from './media-context';
+import { mergeRegister } from '@lexical/utils';
+import { $getNodeByKey, $getSelection, $isNodeSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, } from 'lexical';
+const MIN_IMAGE_WIDTH = 96;
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+export function ImageComponent({ altText, nodeKey, src, width, }) {
+    const [editor] = useLexicalComposerContext();
+    const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
+    const [isResizing, setIsResizing] = useState(false);
+    const imageRef = useRef(null);
+    const resizeStartRef = useRef(null);
+    const resolveMediaUrl = useMediaResolver();
+    const resolvedSrc = resolveMediaUrl?.(src) ?? src;
+    const removeSelectedImage = useCallback(() => {
+        const selection = $getSelection();
+        if (!$isNodeSelection(selection) || !selection.has(nodeKey))
+            return false;
+        const node = $getNodeByKey(nodeKey);
+        if (!$isImageNode(node))
+            return false;
+        node.remove();
+        return true;
+    }, [nodeKey]);
+    useEffect(() => {
+        return mergeRegister(editor.registerCommand(CLICK_COMMAND, (event) => {
+            if (isResizing)
+                return true;
+            if (event.target !== imageRef.current)
+                return false;
+            if (!event.shiftKey)
+                clearSelection();
+            setSelected(!isSelected);
+            return true;
+        }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_DELETE_COMMAND, removeSelectedImage, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_BACKSPACE_COMMAND, removeSelectedImage, COMMAND_PRIORITY_LOW));
+    }, [
+        clearSelection,
+        editor,
+        isResizing,
+        isSelected,
+        removeSelectedImage,
+        setSelected,
+    ]);
+    const handleResizePointerDown = (event) => {
+        const image = imageRef.current;
+        const root = editor.getRootElement();
+        if (!image || !root)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const rootRect = root.getBoundingClientRect();
+        const imageRect = image.getBoundingClientRect();
+        resizeStartRef.current = {
+            maxWidth: Math.max(MIN_IMAGE_WIDTH, rootRect.width - 48),
+            startWidth: imageRect.width,
+            startX: event.clientX,
+        };
+        setIsResizing(true);
+        const handlePointerMove = (pointerEvent) => {
+            const start = resizeStartRef.current;
+            if (!start)
+                return;
+            const nextWidth = clamp(Math.round(start.startWidth + pointerEvent.clientX - start.startX), MIN_IMAGE_WIDTH, start.maxWidth);
+            if (imageRef.current)
+                imageRef.current.style.width = `${nextWidth}px`;
+        };
+        const handlePointerUp = () => {
+            const nextWidth = imageRef.current?.getBoundingClientRect().width;
+            resizeStartRef.current = null;
+            setIsResizing(false);
+            document.body.style.userSelect = '';
+            document.removeEventListener('pointermove', handlePointerMove);
+            document.removeEventListener('pointerup', handlePointerUp);
+            if (!nextWidth)
+                return;
+            editor.update(() => {
+                const node = $getNodeByKey(nodeKey);
+                if ($isImageNode(node))
+                    node.setWidth(Math.round(nextWidth));
+            });
+        };
+        document.body.style.userSelect = 'none';
+        document.addEventListener('pointermove', handlePointerMove);
+        document.addEventListener('pointerup', handlePointerUp);
+    };
+    return (_jsxs("span", { className: [
+            'lexical-image-shell',
+            (isSelected || isResizing) && 'lexical-image-shell-selected',
+        ]
+            .filter(Boolean)
+            .join(' '), draggable: isSelected && !isResizing, children: [_jsx("img", { ref: imageRef, src: resolvedSrc, alt: altText, className: "lexical-image", draggable: false, style: { width: width ? `${width}px` : undefined } }), (isSelected || isResizing) && (_jsx("span", { "aria-hidden": "true", className: "lexical-image-resize-handle", onPointerDown: handleResizePointerDown }))] }));
+}

package/dist/lib/lexical/image-node.d.ts

@@ -0,0 +1,36 @@
+import type { JSX } from 'react';
+import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode } from 'lexical';
+import { DecoratorNode } from 'lexical';
+export type ImagePayload = {
+    altText?: string;
+    key?: NodeKey;
+    src: string;
+    width?: number;
+};
+export type SerializedImageNode = SerializedLexicalNode & {
+    altText: string;
+    src: string;
+    width?: number;
+};
+export declare class ImageNode extends DecoratorNode<JSX.Element> {
+    __altText: string;
+    __src: string;
+    __width?: number;
+    static getType(): string;
+    static clone(node: ImageNode): ImageNode;
+    static importJSON(serializedNode: SerializedImageNode): ImageNode;
+    static importDOM(): DOMConversionMap | null;
+    constructor(src: string, altText?: string, width?: number, key?: NodeKey);
+    exportJSON(): SerializedImageNode;
+    exportDOM(): DOMExportOutput;
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(): false;
+    getSrc(): string;
+    getAltText(): string;
+    getWidth(): number | undefined;
+    setWidth(width: number | undefined): this;
+    decorate(): JSX.Element;
+}
+export declare function $createImageNode({ altText, key, src, width, }: ImagePayload): ImageNode;
+export declare function $isImageNode(node: LexicalNode | null | undefined): node is ImageNode;
+//# sourceMappingURL=image-node.d.ts.map

package/dist/lib/lexical/image-node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-node.d.ts","sourceRoot":"","sources":["../../../src/lib/lexical/image-node.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,KAAK,EACV,gBAAgB,EAEhB,eAAe,EACf,YAAY,EACZ,WAAW,EACX,OAAO,EACP,qBAAqB,EACtB,MAAM,SAAS,CAAA;AAChB,OAAO,EAAyB,aAAa,EAAE,MAAM,SAAS,CAAA;AAE9D,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG,qBAAqB,GAAG;IACxD,OAAO,EAAE,MAAM,CAAA;IACf,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAyBD,qBAAa,SAAU,SAAQ,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC;IACvD,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB,MAAM,CAAC,OAAO,IAAI,MAAM;IAIxB,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,GAAG,SAAS;IAIxC,MAAM,CAAC,UAAU,CAAC,cAAc,EAAE,mBAAmB,GAAG,SAAS;IAQjE,MAAM,CAAC,SAAS,IAAI,gBAAgB,GAAG,IAAI;gBAS/B,GAAG,EAAE,MAAM,EAAE,OAAO,SAAK,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO;IAOpE,UAAU,IAAI,mBAAmB;IASjC,SAAS,IAAI,eAAe;IAQ5B,SAAS,CAAC,MAAM,EAAE,YAAY,GAAG,WAAW;IAO5C,SAAS,IAAI,KAAK;IAIlB,MAAM,IAAI,MAAM;IAIhB,UAAU,IAAI,MAAM;IAIpB,QAAQ,IAAI,MAAM,GAAG,SAAS;IAI9B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI;IAMzC,QAAQ,IAAI,GAAG,CAAC,OAAO;CAUxB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,GAAG,EACH,GAAG,EACH,KAAK,GACN,EAAE,YAAY,GAAG,SAAS,CAE1B;AAED,wBAAgB,YAAY,CAC1B,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GACnC,IAAI,IAAI,SAAS,CAEnB"}

package/dist/lib/lexical/image-node.js

@@ -0,0 +1,105 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ImageComponent } from './image-component';
+import { $applyNodeReplacement, DecoratorNode } from 'lexical';
+function $convertImageElement(domNode) {
+    const image = domNode;
+    const src = image.getAttribute('src');
+    if (!src || src.startsWith('file:///'))
+        return null;
+    const widthAttribute = image.getAttribute('width');
+    const styleWidth = image.style.width.endsWith('px')
+        ? Number.parseInt(image.style.width, 10)
+        : undefined;
+    const width = widthAttribute
+        ? Number.parseInt(widthAttribute, 10)
+        : styleWidth;
+    return {
+        node: $createImageNode({
+            altText: image.getAttribute('alt') ?? '',
+            src,
+            width: Number.isFinite(width) ? width : undefined,
+        }),
+    };
+}
+export class ImageNode extends DecoratorNode {
+    __altText;
+    __src;
+    __width;
+    static getType() {
+        return 'image';
+    }
+    static clone(node) {
+        return new ImageNode(node.__src, node.__altText, node.__width, node.__key);
+    }
+    static importJSON(serializedNode) {
+        return $createImageNode({
+            altText: serializedNode.altText,
+            src: serializedNode.src,
+            width: serializedNode.width,
+        });
+    }
+    static importDOM() {
+        return {
+            img: () => ({
+                conversion: $convertImageElement,
+                priority: 0,
+            }),
+        };
+    }
+    constructor(src, altText = '', width, key) {
+        super(key);
+        this.__src = src;
+        this.__altText = altText;
+        this.__width = width;
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            altText: this.__altText,
+            src: this.__src,
+            width: this.__width,
+        };
+    }
+    exportDOM() {
+        const element = document.createElement('img');
+        element.setAttribute('src', this.__src);
+        element.setAttribute('alt', this.__altText);
+        if (this.__width)
+            element.setAttribute('width', String(this.__width));
+        return { element };
+    }
+    createDOM(config) {
+        const element = document.createElement('span');
+        const className = config.theme.image;
+        if (typeof className === 'string')
+            element.className = className;
+        return element;
+    }
+    updateDOM() {
+        return false;
+    }
+    getSrc() {
+        return this.getLatest().__src;
+    }
+    getAltText() {
+        return this.getLatest().__altText;
+    }
+    getWidth() {
+        return this.getLatest().__width;
+    }
+    setWidth(width) {
+        const writable = this.getWritable();
+        writable.__width = width;
+        return writable;
+    }
+    decorate() {
+        return (_jsx(ImageComponent, { altText: this.__altText, nodeKey: this.getKey(), src: this.__src, width: this.__width }));
+    }
+}
+export function $createImageNode({ altText, key, src, width, }) {
+    return $applyNodeReplacement(new ImageNode(src, altText, width, key));
+}
+export function $isImageNode(node) {
+    return node instanceof ImageNode;
+}

package/dist/lib/lexical/markdown-transformers.d.ts

@@ -1,9 +1,12 @@
-import type { ElementTransformer, Transformer } from '@lexical/markdown';
+import type { ElementTransformer, TextMatchTransformer, Transformer } from '@lexical/markdown';
 import type { ElementNode } from 'lexical';
 /**
  * Horizontal rule transformer - supports ---, ***, and ___
  */
 export declare const HR: ElementTransformer;
+export declare const IMAGE: TextMatchTransformer;
+export declare const OBSIDIAN_IMAGE_EMBED: TextMatchTransformer;
+export declare const MEDIA: TextMatchTransformer;
 /**
  * All markdown transformers
  */

package/dist/lib/lexical/markdown-transformers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markdown-transformers.d.ts","sourceRoot":"","sources":["../../../src/lib/lexical/markdown-transformers.ts"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AACxE,OAAO,KAAK,EAAE,WAAW,EAAe,MAAM,SAAS,CAAA;AAEvD;;GAEG;AACH,eAAO,MAAM,EAAE,EAAE,kBAgBhB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,WAAW,CAOnD,CAAA;AAED;;GAEG;AACH,UAAU,0BAA0B;IAClC,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,CAAA;IACjC,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC,wBAAwB,CAAC,EAAE,OAAO,CAAA;CACnC;AAED;;GAEG;AACH,UAAU,wBAAwB;IAChC,YAAY,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,CAAA;IACjC,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,sBAAsB,CAAC,EAAE,OAAO,CAAA;CACjC;AAED;;;GAGG;AACH,wBAAgB,0BAA0B,CAAC,EACzC,QAAQ,EACR,YAAmC,EACnC,IAAI,EACJ,sBAA6B,EAC7B,wBAAgC,GACjC,EAAE,0BAA0B,GAAG,IAAI,CAQnC;AAED;;;GAGG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,YAAmC,EACnC,IAAI,EACJ,sBAA6B,GAC9B,GAAE,wBAA6B,GAAG,MAAM,CAExC"}
+{"version":3,"file":"markdown-transformers.d.ts","sourceRoot":"","sources":["../../../src/lib/lexical/markdown-transformers.ts"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,WAAW,EACZ,MAAM,mBAAmB,CAAA;AAC1B,OAAO,KAAK,EAAE,WAAW,EAAe,MAAM,SAAS,CAAA;AAGvD;;GAEG;AACH,eAAO,MAAM,EAAE,EAAE,kBAgBhB,CAAA;AAUD,eAAO,MAAM,KAAK,EAAE,oBAuBnB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,oBA2BlC,CAAA;AAMD,eAAO,MAAM,KAAK,EAAE,oBAiBnB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,WAAW,CAUnD,CAAA;AAED;;GAEG;AACH,UAAU,0BAA0B;IAClC,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,CAAA;IACjC,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC,wBAAwB,CAAC,EAAE,OAAO,CAAA;CACnC;AAED;;GAEG;AACH,UAAU,wBAAwB;IAChC,YAAY,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,CAAA;IACjC,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,sBAAsB,CAAC,EAAE,OAAO,CAAA;CACjC;AAED;;;GAGG;AACH,wBAAgB,0BAA0B,CAAC,EACzC,QAAQ,EACR,YAAmC,EACnC,IAAI,EACJ,sBAA6B,EAC7B,wBAAgC,GACjC,EAAE,0BAA0B,GAAG,IAAI,CAQnC;AAED;;;GAGG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,YAAmC,EACnC,IAAI,EACJ,sBAA6B,GAC9B,GAAE,wBAA6B,GAAG,MAAM,CAExC"}

package/dist/lib/lexical/markdown-transformers.js

@@ -2,8 +2,11 @@
  * Markdown Transformers for Lexical Editor
  * Provides import/export functionality with proper newline preservation
  */
+import { $createImageNode, $isImageNode, ImageNode } from './image-node';
+import { $createMediaNode, $isMediaNode, MediaNode, } from './media-node';
 import { $createHorizontalRuleNode, $isHorizontalRuleNode, HorizontalRuleNode, } from '@lexical/extension';
 import { CHECK_LIST, ELEMENT_TRANSFORMERS, MULTILINE_ELEMENT_TRANSFORMERS, TEXT_FORMAT_TRANSFORMERS, TEXT_MATCH_TRANSFORMERS, $convertFromMarkdownString as lexicalConvertFromMarkdown, $convertToMarkdownString as lexicalConvertToMarkdown, } from '@lexical/markdown';
+import { $createTextNode } from 'lexical';
 /**
  * Horizontal rule transformer - supports ---, ***, and ___
  */
@@ -25,6 +28,80 @@ export const HR = {
     },
     type: 'element',
 };
+function markdownImageText(altText, src, width) {
+    const escapedAlt = altText.replaceAll('[', '\\[').replaceAll(']', '\\]');
+    const escapedSrc = src.includes(' ') ? encodeURI(src) : src;
+    return width
+        ? `![${escapedAlt}](${escapedSrc}){width=${width}}`
+        : `![${escapedAlt}](${escapedSrc})`;
+}
+export const IMAGE = {
+    dependencies: [ImageNode],
+    export: (node) => {
+        if (!$isImageNode(node))
+            return null;
+        return markdownImageText(node.getAltText(), node.getSrc(), node.getWidth());
+    },
+    importRegExp: /!\[([^\]]*)\]\(([^)\s]+)(?:\s"((?:[^"]*\\")*[^"]*)"\s*)?\)(?:\{width=(\d+)\})?/,
+    regExp: /!\[([^\]]*)\]\(([^)\s]+)(?:\s"((?:[^"]*\\")*[^"]*)"\s*)?\)(?:\{width=(\d+)\})?$/,
+    replace: (textNode, match) => {
+        const [, altText = '', src = '', , widthMatch] = match;
+        const width = widthMatch ? Number.parseInt(widthMatch, 10) : undefined;
+        textNode.replace($createImageNode({
+            altText,
+            src,
+            width: Number.isFinite(width) ? width : undefined,
+        }));
+    },
+    trigger: ')',
+    type: 'text-match',
+};
+export const OBSIDIAN_IMAGE_EMBED = {
+    dependencies: [ImageNode],
+    importRegExp: /!\[\[([^\]|]+)(?:\|([^\]]+))?\]\]/,
+    regExp: /!\[\[([^\]|]+)(?:\|([^\]]+))?\]\]$/,
+    replace: (textNode, match) => {
+        const [, src = '', labelOrWidth = ''] = match;
+        const width = /^\d+$/.test(labelOrWidth)
+            ? Number.parseInt(labelOrWidth, 10)
+            : undefined;
+        const altText = width
+            ? src.split('/').pop()
+            : labelOrWidth || src.split('/').pop();
+        if (!/\.(avif|gif|jpe?g|png|svg|webp)$/i.test(src)) {
+            return $createTextNode(match[0]);
+        }
+        textNode.replace($createImageNode({
+            altText: altText ?? '',
+            src,
+            width,
+        }));
+    },
+    trigger: ']',
+    type: 'text-match',
+};
+function mediaMarkdown(kind, src) {
+    return `<${kind} controls src="${src.replaceAll('"', '&quot;')}"></${kind}>`;
+}
+export const MEDIA = {
+    dependencies: [MediaNode],
+    export: (node) => {
+        if (!$isMediaNode(node))
+            return null;
+        return mediaMarkdown(node.getKind(), node.getSrc());
+    },
+    importRegExp: /<(video|audio)\b[^>]*\bsrc=["']([^"']+)["'][^>]*>(?:<\/\1>)?/,
+    regExp: /<(video|audio)\b[^>]*\bsrc=["']([^"']+)["'][^>]*>(?:<\/\1>)?$/,
+    replace: (textNode, match) => {
+        const [, kind, src] = match;
+        if ((kind !== 'video' && kind !== 'audio') || !src) {
+            return $createTextNode(match[0]);
+        }
+        textNode.replace($createMediaNode({ kind, src }));
+    },
+    trigger: '>',
+    type: 'text-match',
+};
 /**
  * All markdown transformers
  */
@@ -34,6 +111,9 @@ export const markdownTransformers = [
     ...ELEMENT_TRANSFORMERS,
     ...MULTILINE_ELEMENT_TRANSFORMERS,
     ...TEXT_FORMAT_TRANSFORMERS,
+    IMAGE,
+    OBSIDIAN_IMAGE_EMBED,
+    MEDIA,
     ...TEXT_MATCH_TRANSFORMERS,
 ];
 /**

package/dist/lib/lexical/media-context.d.ts

@@ -0,0 +1,7 @@
+type MediaContextValue = {
+    resolveMediaUrl?: (src: string) => string;
+};
+export declare const MediaProvider: import("react").Provider<MediaContextValue>;
+export declare function useMediaResolver(): ((src: string) => string) | undefined;
+export {};
+//# sourceMappingURL=media-context.d.ts.map

package/dist/lib/lexical/media-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-context.d.ts","sourceRoot":"","sources":["../../../src/lib/lexical/media-context.tsx"],"names":[],"mappings":"AAIA,KAAK,iBAAiB,GAAG;IACvB,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;CAC1C,CAAA;AAID,eAAO,MAAM,aAAa,6CAAwB,CAAA;AAElD,wBAAgB,gBAAgB,WAPN,MAAM,KAAK,MAAM,cAS1C"}

package/dist/lib/lexical/media-context.js

@@ -0,0 +1,7 @@
+'use client';
+import { createContext, useContext } from 'react';
+const MediaContext = createContext({});
+export const MediaProvider = MediaContext.Provider;
+export function useMediaResolver() {
+    return useContext(MediaContext).resolveMediaUrl;
+}

package/dist/lib/lexical/media-node.d.ts

@@ -0,0 +1,32 @@
+import type { JSX } from 'react';
+import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode } from 'lexical';
+import { DecoratorNode } from 'lexical';
+export type MediaKind = 'audio' | 'video';
+export type MediaPayload = {
+    kind: MediaKind;
+    key?: NodeKey;
+    src: string;
+};
+export type SerializedMediaNode = SerializedLexicalNode & {
+    kind: MediaKind;
+    src: string;
+};
+export declare class MediaNode extends DecoratorNode<JSX.Element> {
+    __kind: MediaKind;
+    __src: string;
+    static getType(): string;
+    static clone(node: MediaNode): MediaNode;
+    static importJSON(serializedNode: SerializedMediaNode): MediaNode;
+    static importDOM(): DOMConversionMap | null;
+    constructor(kind: MediaKind, src: string, key?: NodeKey);
+    exportJSON(): SerializedMediaNode;
+    exportDOM(): DOMExportOutput;
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(): false;
+    getKind(): MediaKind;
+    getSrc(): string;
+    decorate(): JSX.Element;
+}
+export declare function $createMediaNode({ kind, key, src }: MediaPayload): MediaNode;
+export declare function $isMediaNode(node: LexicalNode | null | undefined): node is MediaNode;
+//# sourceMappingURL=media-node.d.ts.map

package/dist/lib/lexical/media-node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-node.d.ts","sourceRoot":"","sources":["../../../src/lib/lexical/media-node.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAGhC,OAAO,KAAK,EACV,gBAAgB,EAEhB,eAAe,EACf,YAAY,EACZ,WAAW,EACX,OAAO,EACP,qBAAqB,EACtB,MAAM,SAAS,CAAA;AAChB,OAAO,EAAyB,aAAa,EAAE,MAAM,SAAS,CAAA;AAE9D,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,OAAO,CAAA;AAEzC,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,SAAS,CAAA;IACf,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG,qBAAqB,GAAG;IACxD,IAAI,EAAE,SAAS,CAAA;IACf,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AA4BD,qBAAa,SAAU,SAAQ,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC;IACvD,MAAM,EAAE,SAAS,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IAEb,MAAM,CAAC,OAAO,IAAI,MAAM;IAIxB,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,GAAG,SAAS;IAIxC,MAAM,CAAC,UAAU,CAAC,cAAc,EAAE,mBAAmB,GAAG,SAAS;IAOjE,MAAM,CAAC,SAAS,IAAI,gBAAgB,GAAG,IAAI;gBAa/B,IAAI,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO;IAMvD,UAAU,IAAI,mBAAmB;IAQjC,SAAS,IAAI,eAAe;IAO5B,SAAS,CAAC,MAAM,EAAE,YAAY,GAAG,WAAW;IAO5C,SAAS,IAAI,KAAK;IAIlB,OAAO,IAAI,SAAS;IAIpB,MAAM,IAAI,MAAM;IAIhB,QAAQ,IAAI,GAAG,CAAC,OAAO;CAGxB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,YAAY,GAAG,SAAS,CAE5E;AAED,wBAAgB,YAAY,CAC1B,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GACnC,IAAI,IAAI,SAAS,CAEnB"}

package/dist/lib/lexical/media-node.js

@@ -0,0 +1,97 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RichMediaPlayer } from '@moldable-ai/ui';
+import { useMediaResolver } from './media-context';
+import { $applyNodeReplacement, DecoratorNode } from 'lexical';
+function mediaKindFromElement(element) {
+    if (element.tagName.toLowerCase() === 'audio')
+        return 'audio';
+    if (element.tagName.toLowerCase() === 'video')
+        return 'video';
+    return null;
+}
+function $convertMediaElement(domNode) {
+    if (!(domNode instanceof HTMLElement))
+        return null;
+    const kind = mediaKindFromElement(domNode);
+    const src = domNode.getAttribute('src');
+    if (!kind || !src)
+        return null;
+    return { node: $createMediaNode({ kind, src }) };
+}
+function MediaComponent({ kind, src }) {
+    const resolveMediaUrl = useMediaResolver();
+    const resolvedSrc = resolveMediaUrl?.(src) ?? src;
+    return (_jsx("span", { className: "lexical-media-shell", children: _jsx(RichMediaPlayer, { kind: kind, src: resolvedSrc }) }));
+}
+export class MediaNode extends DecoratorNode {
+    __kind;
+    __src;
+    static getType() {
+        return 'media';
+    }
+    static clone(node) {
+        return new MediaNode(node.__kind, node.__src, node.__key);
+    }
+    static importJSON(serializedNode) {
+        return $createMediaNode({
+            kind: serializedNode.kind,
+            src: serializedNode.src,
+        });
+    }
+    static importDOM() {
+        return {
+            audio: () => ({
+                conversion: $convertMediaElement,
+                priority: 0,
+            }),
+            video: () => ({
+                conversion: $convertMediaElement,
+                priority: 0,
+            }),
+        };
+    }
+    constructor(kind, src, key) {
+        super(key);
+        this.__kind = kind;
+        this.__src = src;
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            kind: this.__kind,
+            src: this.__src,
+        };
+    }
+    exportDOM() {
+        const element = document.createElement(this.__kind);
+        element.setAttribute('controls', '');
+        element.setAttribute('src', this.__src);
+        return { element };
+    }
+    createDOM(config) {
+        const element = document.createElement('span');
+        const className = config.theme.media;
+        if (typeof className === 'string')
+            element.className = className;
+        return element;
+    }
+    updateDOM() {
+        return false;
+    }
+    getKind() {
+        return this.getLatest().__kind;
+    }
+    getSrc() {
+        return this.getLatest().__src;
+    }
+    decorate() {
+        return _jsx(MediaComponent, { kind: this.__kind, src: this.__src });
+    }
+}
+export function $createMediaNode({ kind, key, src }) {
+    return $applyNodeReplacement(new MediaNode(kind, src, key));
+}
+export function $isMediaNode(node) {
+    return node instanceof MediaNode;
+}

package/dist/lib/lexical/media-plugin.d.ts

@@ -0,0 +1,12 @@
+export type MarkdownMediaKind = 'image' | 'video' | 'audio' | 'file';
+export type MarkdownMediaUploadResult = {
+    altText?: string;
+    kind?: MarkdownMediaKind;
+    markdown?: string;
+    src: string;
+};
+export type MarkdownMediaUpload = (file: File) => Promise<MarkdownMediaUploadResult>;
+export declare function MediaPasteDropPlugin({ onMediaUpload, }: {
+    onMediaUpload?: MarkdownMediaUpload;
+}): null;
+//# sourceMappingURL=media-plugin.d.ts.map

package/dist/lib/lexical/media-plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-plugin.d.ts","sourceRoot":"","sources":["../../../src/lib/lexical/media-plugin.tsx"],"names":[],"mappings":"AAeA,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAA;AAEpE,MAAM,MAAM,yBAAyB,GAAG;IACtC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,iBAAiB,CAAA;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG,CAChC,IAAI,EAAE,IAAI,KACP,OAAO,CAAC,yBAAyB,CAAC,CAAA;AA4CvC,wBAAgB,oBAAoB,CAAC,EACnC,aAAa,GACd,EAAE;IACD,aAAa,CAAC,EAAE,mBAAmB,CAAA;CACpC,QA0GA"}

package/dist/lib/lexical/media-plugin.js

@@ -0,0 +1,139 @@
+'use client';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useEffect } from 'react';
+import { $createImageNode } from './image-node';
+import { $createMediaNode } from './media-node';
+import { $createParagraphNode, $createTextNode, $insertNodes, COMMAND_PRIORITY_HIGH, DROP_COMMAND, PASTE_COMMAND, } from 'lexical';
+function dataUrlForFile(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+            if (typeof reader.result === 'string')
+                resolve(reader.result);
+            else
+                reject(new Error('Failed to read file'));
+        };
+        reader.onerror = () => reject(reader.error ?? new Error('Failed to read file'));
+        reader.readAsDataURL(file);
+    });
+}
+function kindForFile(file) {
+    if (file.type.startsWith('image/'))
+        return 'image';
+    if (file.type.startsWith('video/'))
+        return 'video';
+    if (file.type.startsWith('audio/'))
+        return 'audio';
+    return 'file';
+}
+function escapeAttribute(value) {
+    return value
+        .replaceAll('&', '&')
+        .replaceAll('"', '"')
+        .replaceAll('<', '&lt;')
+        .replaceAll('>', '&gt;');
+}
+function markdownForMedia(result, file) {
+    const kind = result.kind ?? kindForFile(file);
+    const altText = result.altText ?? file.name;
+    if (result.markdown)
+        return result.markdown;
+    if (kind === 'video') {
+        return `<video controls src="${escapeAttribute(result.src)}"></video>`;
+    }
+    if (kind === 'audio') {
+        return `<audio controls src="${escapeAttribute(result.src)}"></audio>`;
+    }
+    return `[${altText}](${result.src})`;
+}
+export function MediaPasteDropPlugin({ onMediaUpload, }) {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        async function uploadFile(file) {
+            if (onMediaUpload)
+                return onMediaUpload(file);
+            return {
+                altText: file.name,
+                kind: kindForFile(file),
+                src: await dataUrlForFile(file),
+            };
+        }
+        async function insertFiles(files) {
+            for (const file of files) {
+                const result = await uploadFile(file);
+                const kind = result.kind ?? kindForFile(file);
+                editor.update(() => {
+                    if (kind === 'image') {
+                        $insertNodes([
+                            $createImageNode({
+                                altText: result.altText ?? file.name,
+                                src: result.src,
+                            }),
+                        ]);
+                        return;
+                    }
+                    if (kind === 'video' || kind === 'audio') {
+                        $insertNodes([$createMediaNode({ kind, src: result.src })]);
+                        return;
+                    }
+                    const paragraph = $createParagraphNode();
+                    paragraph.append($createTextNode(markdownForMedia(result, file)));
+                    $insertNodes([paragraph]);
+                });
+            }
+        }
+        function filesFromDataTransfer(dataTransfer) {
+            return Array.from(dataTransfer?.files ?? []).filter((file) => file.size > 0);
+        }
+        return editor.registerCommand(PASTE_COMMAND, (event) => {
+            if (!('clipboardData' in event))
+                return false;
+            const files = filesFromDataTransfer(event.clipboardData);
+            if (files.length === 0)
+                return false;
+            event.preventDefault();
+            void insertFiles(files);
+            return true;
+        }, COMMAND_PRIORITY_HIGH);
+    }, [editor, onMediaUpload]);
+    useEffect(() => {
+        return editor.registerCommand(DROP_COMMAND, (event) => {
+            const files = Array.from(event.dataTransfer?.files ?? []).filter((file) => file.size > 0);
+            if (files.length === 0)
+                return false;
+            event.preventDefault();
+            void Promise.resolve().then(async () => {
+                for (const file of files) {
+                    const result = onMediaUpload
+                        ? await onMediaUpload(file)
+                        : {
+                            altText: file.name,
+                            kind: kindForFile(file),
+                            src: await dataUrlForFile(file),
+                        };
+                    const kind = result.kind ?? kindForFile(file);
+                    editor.update(() => {
+                        if (kind === 'image') {
+                            $insertNodes([
+                                $createImageNode({
+                                    altText: result.altText ?? file.name,
+                                    src: result.src,
+                                }),
+                            ]);
+                        }
+                        else if (kind === 'video' || kind === 'audio') {
+                            $insertNodes([$createMediaNode({ kind, src: result.src })]);
+                        }
+                        else {
+                            const paragraph = $createParagraphNode();
+                            paragraph.append($createTextNode(markdownForMedia(result, file)));
+                            $insertNodes([paragraph]);
+                        }
+                    });
+                }
+            });
+            return true;
+        }, COMMAND_PRIORITY_HIGH);
+    }, [editor, onMediaUpload]);
+    return null;
+}

package/dist/lib/lexical/sync-plugin.d.ts

@@ -2,6 +2,7 @@ interface SyncPluginProps {
     value: string;
     initialValueRef: React.MutableRefObject<string>;
 }
+export declare const EXTERNAL_MARKDOWN_SYNC_TAG = "moldable-external-markdown-sync";
 /**
  * Plugin that syncs external value changes with the editor.
  * Handles cases where the value prop changes from outside the editor.

package/dist/lib/lexical/sync-plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sync-plugin.d.ts","sourceRoot":"","sources":["../../../src/lib/lexical/sync-plugin.tsx"],"names":[],"mappings":"AAWA,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,eAAe,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAA;CAChD;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,EAAE,eAAe,GAAG,IAAI,CAsC5E"}
+{"version":3,"file":"sync-plugin.d.ts","sourceRoot":"","sources":["../../../src/lib/lexical/sync-plugin.tsx"],"names":[],"mappings":"AAWA,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,eAAe,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAA;CAChD;AAED,eAAO,MAAM,0BAA0B,oCAAoC,CAAA;AAE3E;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,EAAE,eAAe,GAAG,IAAI,CAiD5E"}

package/dist/lib/lexical/sync-plugin.js

@@ -1,15 +1,16 @@
 'use client';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { useEffect } from 'react';
+import { useLayoutEffect } from 'react';
 import { $convertFromMarkdownString, $convertToMarkdownString, markdownTransformers, } from './markdown-transformers';
 import { $createParagraphNode, $getRoot } from 'lexical';
+export const EXTERNAL_MARKDOWN_SYNC_TAG = 'moldable-external-markdown-sync';
 /**
  * Plugin that syncs external value changes with the editor.
  * Handles cases where the value prop changes from outside the editor.
  */
 export function SyncPlugin({ value, initialValueRef }) {
     const [editor] = useLexicalComposerContext();
-    useEffect(() => {
+    useLayoutEffect(() => {
         // Skip if this is the initial render or if value matches what we have
         if (value === initialValueRef.current) {
             return;
@@ -19,10 +20,12 @@ export function SyncPlugin({ value, initialValueRef }) {
         editor.read(() => {
             currentMarkdown = $convertToMarkdownString({
                 transformers: markdownTransformers,
+                shouldPreserveNewLines: false,
             });
         });
         // Only update if the value is actually different
         if (currentMarkdown !== value) {
+            initialValueRef.current = value;
             editor.update(() => {
                 const root = $getRoot();
                 root.clear();
@@ -31,15 +34,20 @@ export function SyncPlugin({ value, initialValueRef }) {
                         markdown: value,
                         transformers: markdownTransformers,
                         node: root,
-                        shouldPreserveNewLines: true,
+                        shouldPreserveNewLines: false,
                     });
                 }
                 else {
                     root.append($createParagraphNode());
                 }
-            });
-            initialValueRef.current = value;
+                if (root.getChildrenSize() === 0) {
+                    root.append($createParagraphNode());
+                }
+                root.selectEnd();
+            }, { discrete: true, tag: EXTERNAL_MARKDOWN_SYNC_TAG });
+            return;
         }
+        initialValueRef.current = value;
     }, [editor, value, initialValueRef]);
     return null;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moldable-ai/editor",
-  "version": "0.1.8",
+  "version": "0.1.11",
   "description": "Rich text markdown editor for Moldable applications",
   "author": "Desiderata LLC",
   "license": "SEE LICENSE IN LICENSE",
@@ -75,7 +75,7 @@
     "vitest": "^4.0.16"
   },
   "peerDependencies": {
-    "@moldable-ai/ui": ">=0.2.7",
+    "@moldable-ai/ui": ">=0.2.12",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   }

package/src/styles/index.css

@@ -101,3 +101,120 @@
   padding: 0 4px;
   border-radius: 4px;
 }
+
+/* Rich media nodes */
+.lexical-image-shell {
+  display: inline-block;
+  max-width: 100%;
+  position: relative;
+  vertical-align: top;
+}
+
+.lexical-image-shell-selected {
+  outline: 3px solid var(--primary);
+  outline-offset: 0;
+}
+
+.lexical-image {
+  border-radius: 0;
+  display: block;
+  height: auto;
+  max-width: 100%;
+}
+
+.lexical-image-resize-handle {
+  background: var(--primary);
+  border: 2px solid var(--background);
+  border-radius: 9999px;
+  bottom: -8px;
+  cursor: nwse-resize;
+  height: 16px;
+  position: absolute;
+  right: -8px;
+  width: 16px;
+}
+
+.lexical-media-shell {
+  display: block;
+  max-width: 100%;
+  width: 100%;
+}
+
+.lexical-media {
+  background: rgb(10 10 10);
+  border: 1px solid rgb(255 255 255 / 0.1);
+  border-radius: 0.5rem;
+  color-scheme: dark;
+  display: block;
+  margin: 0.75rem 0;
+  max-width: 100%;
+}
+
+.lexical-media-video {
+  max-height: min(520px, 62vh);
+  width: 100%;
+}
+
+.lexical-media-audio {
+  padding: 0.75rem;
+  width: min(100%, 40rem);
+}
+
+/* File reference typeahead */
+.moldable-editor-reference-menu {
+  background: hsl(var(--popover));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
+  box-shadow:
+    0 16px 40px hsl(var(--foreground) / 0.14),
+    0 2px 8px hsl(var(--foreground) / 0.08);
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: min(22rem, calc(100vw - 2rem));
+  padding: 0.25rem;
+  z-index: 50;
+}
+
+.moldable-editor-reference-option {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: 0.375rem;
+  color: hsl(var(--popover-foreground));
+  cursor: pointer;
+  display: grid;
+  gap: 0.125rem;
+  justify-items: stretch;
+  min-height: 2.75rem;
+  padding: 0.45rem 0.625rem;
+  text-align: left;
+  width: 100%;
+}
+
+.moldable-editor-reference-option:hover,
+.moldable-editor-reference-option-selected {
+  background: hsl(var(--muted));
+}
+
+.moldable-editor-reference-title,
+.moldable-editor-reference-path {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.moldable-editor-reference-title {
+  color: hsl(var(--foreground));
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1.15;
+}
+
+.moldable-editor-reference-path {
+  color: hsl(var(--muted-foreground));
+  font-size: 0.71875rem;
+  line-height: 1.15;
+}