@moldable-ai/editor 0.1.7 → 0.1.9

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 { mergeRegister } from '@lexical/utils';
+import { $getNodeByKey, $getSelection, $isNodeSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, } from 'lexical';
+import { useCallback, useEffect, useRef, useState, } from 'react';
+import { $isImageNode } from './image-node';
+import { useMediaResolver } from './media-context';
+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 { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode } from 'lexical';
+import type { JSX } from 'react';
+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,EACV,gBAAgB,EAEhB,eAAe,EACf,YAAY,EACZ,WAAW,EACX,OAAO,EACP,qBAAqB,EACtB,MAAM,SAAS,CAAA;AAChB,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAyB,aAAa,EAAE,MAAM,SAAS,CAAA;AAG9D,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 { $applyNodeReplacement, DecoratorNode } from 'lexical';
+import { ImageComponent } from './image-component';
+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":"AAkBA,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,WAAW,EACZ,MAAM,mBAAmB,CAAA;AAC1B,OAAO,KAAK,EAAE,WAAW,EAAe,MAAM,SAAS,CAAA;AAUvD;;GAEG;AACH,eAAO,MAAM,EAAE,EAAE,kBAgBhB,CAAA;AAUD,eAAO,MAAM,KAAK,EAAE,oBAuBnB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,oBAyBlC,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

@@ -4,6 +4,9 @@
  */
 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';
+import { $createImageNode, $isImageNode, ImageNode } from './image-node';
+import { $createMediaNode, $isMediaNode, MediaNode, } from './media-node';
 /**
  * Horizontal rule transformer - supports ---, ***, and ___
  */
@@ -25,6 +28,78 @@ 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 +109,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 { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode } from 'lexical';
+import type { JSX } from 'react';
+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,EACV,gBAAgB,EAEhB,eAAe,EACf,YAAY,EACZ,WAAW,EACX,OAAO,EACP,qBAAqB,EACtB,MAAM,SAAS,CAAA;AAChB,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,EAAyB,aAAa,EAAE,MAAM,SAAS,CAAA;AAG9D,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 { $applyNodeReplacement, DecoratorNode } from 'lexical';
+import { useMediaResolver } from './media-context';
+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;AA2CvC,wBAAgB,oBAAoB,CAAC,EACnC,aAAa,GACd,EAAE;IACD,aAAa,CAAC,EAAE,mBAAmB,CAAA;CACpC,QAsGA"}