@datalayer/lexical-loro 0.2.5 → 1.0.0

package/lib/nodes/FigmaNode.js

@@ -1,52 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { BlockWithAlignableContents } from '@lexical/react/LexicalBlockWithAlignableContents';
-import { DecoratorBlockNode, } from '@lexical/react/LexicalDecoratorBlockNode';
-function FigmaComponent({ className, format, nodeKey, documentID, }) {
-    return (_jsx(BlockWithAlignableContents, { className: className, format: format, nodeKey: nodeKey, children: _jsx("iframe", { width: "560", height: "315", src: `https://www.figma.com/embed?embed_host=lexical&url=\
-        https://www.figma.com/file/${documentID}`, allowFullScreen: true }) }));
-}
-export class FigmaNode extends DecoratorBlockNode {
-    __id;
-    static getType() {
-        return 'figma';
-    }
-    static clone(node) {
-        return new FigmaNode(node.__id, node.__format, node.__key);
-    }
-    static importJSON(serializedNode) {
-        return $createFigmaNode(serializedNode.documentID).updateFromJSON(serializedNode);
-    }
-    exportJSON() {
-        return {
-            ...super.exportJSON(),
-            documentID: this.__id,
-        };
-    }
-    constructor(id, format, key) {
-        super(format, key);
-        this.__id = id;
-    }
-    updateDOM() {
-        return false;
-    }
-    getId() {
-        return this.__id;
-    }
-    getTextContent(_includeInert, _includeDirectionless) {
-        return `https://www.figma.com/file/${this.__id}`;
-    }
-    decorate(_editor, config) {
-        const embedBlockTheme = config.theme.embedBlock || {};
-        const className = {
-            base: embedBlockTheme.base || '',
-            focus: embedBlockTheme.focus || '',
-        };
-        return (_jsx(FigmaComponent, { className: className, format: this.__format, nodeKey: this.getKey(), documentID: this.__id }));
-    }
-}
-export function $createFigmaNode(documentID) {
-    return new FigmaNode(documentID);
-}
-export function $isFigmaNode(node) {
-    return node instanceof FigmaNode;
-}

package/lib/nodes/ImageComponent.d.ts

@@ -1,16 +0,0 @@
-import type { LexicalCommand, LexicalEditor, NodeKey } from 'lexical';
-import type { JSX } from 'react';
-import './ImageNode.css';
-export declare const RIGHT_CLICK_IMAGE_COMMAND: LexicalCommand<MouseEvent>;
-export default function ImageComponent({ src, altText, nodeKey, width, height, maxWidth, resizable, showCaption, caption, captionsEnabled, }: {
-    altText: string;
-    caption: LexicalEditor;
-    height: 'inherit' | number;
-    maxWidth: number;
-    nodeKey: NodeKey;
-    resizable: boolean;
-    showCaption: boolean;
-    src: string;
-    width: 'inherit' | number;
-    captionsEnabled: boolean;
-}): JSX.Element;

package/lib/nodes/ImageComponent.js

@@ -1,272 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import './ImageNode.css';
-import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
-import { useCollaborationContext } from '@lexical/react/LexicalCollaborationContext';
-import { CollaborationPlugin } from '@lexical/react/LexicalCollaborationPlugin';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
-import { HashtagPlugin } from '@lexical/react/LexicalHashtagPlugin';
-import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
-import { LexicalNestedComposer } from '@lexical/react/LexicalNestedComposer';
-import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
-import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
-import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
-import { mergeRegister } from '@lexical/utils';
-import { $getNodeByKey, $getSelection, $isNodeSelection, $isRangeSelection, $setSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, createCommand, DRAGSTART_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, SELECTION_CHANGE_COMMAND, } from 'lexical';
-import { Suspense, useCallback, useEffect, useRef, useState } from 'react';
-import { createWebsocketProvider } from '../collab/yjs/wsProvider';
-import { useSettings } from '../context/SettingsContext';
-import { useSharedHistoryContext } from '../context/SharedHistoryContext';
-import brokenImage from '../images/image-broken.svg';
-import EmojisPlugin from '../plugins/EmojisPlugin';
-import KeywordsPlugin from '../plugins/KeywordsPlugin';
-import LinkPlugin from '../plugins/LinkPlugin';
-import MentionsPlugin from '../plugins/MentionsPlugin';
-import TreeViewPlugin from '../plugins/TreeViewPlugin';
-import ContentEditable from '../ui/ContentEditable';
-import ImageResizer from '../ui/ImageResizer';
-import { $isImageNode } from './ImageNode';
-const imageCache = new Map();
-export const RIGHT_CLICK_IMAGE_COMMAND = createCommand('RIGHT_CLICK_IMAGE_COMMAND');
-function useSuspenseImage(src) {
-    let cached = imageCache.get(src);
-    if (typeof cached === 'boolean') {
-        return cached;
-    }
-    else if (!cached) {
-        cached = new Promise((resolve) => {
-            const img = new Image();
-            img.src = src;
-            img.onload = () => resolve(false);
-            img.onerror = () => resolve(true);
-        }).then((hasError) => {
-            imageCache.set(src, hasError);
-            return hasError;
-        });
-        imageCache.set(src, cached);
-        throw cached;
-    }
-    throw cached;
-}
-function isSVG(src) {
-    return src.toLowerCase().endsWith('.svg');
-}
-function LazyImage({ altText, className, imageRef, src, width, height, maxWidth, onError, }) {
-    const [dimensions, setDimensions] = useState(null);
-    const isSVGImage = isSVG(src);
-    // Set initial dimensions for SVG images
-    useEffect(() => {
-        if (imageRef.current && isSVGImage) {
-            const { naturalWidth, naturalHeight } = imageRef.current;
-            setDimensions({
-                height: naturalHeight,
-                width: naturalWidth,
-            });
-        }
-    }, [imageRef, isSVGImage]);
-    const hasError = useSuspenseImage(src);
-    useEffect(() => {
-        if (hasError) {
-            onError();
-        }
-    }, [hasError, onError]);
-    if (hasError) {
-        return _jsx(BrokenImage, {});
-    }
-    // Calculate final dimensions with proper scaling
-    const calculateDimensions = () => {
-        if (!isSVGImage) {
-            return {
-                height,
-                maxWidth,
-                width,
-            };
-        }
-        // Use natural dimensions if available, otherwise fallback to defaults
-        const naturalWidth = dimensions?.width || 200;
-        const naturalHeight = dimensions?.height || 200;
-        let finalWidth = naturalWidth;
-        let finalHeight = naturalHeight;
-        // Scale down if width exceeds maxWidth while maintaining aspect ratio
-        if (finalWidth > maxWidth) {
-            const scale = maxWidth / finalWidth;
-            finalWidth = maxWidth;
-            finalHeight = Math.round(finalHeight * scale);
-        }
-        // Scale down if height exceeds maxHeight while maintaining aspect ratio
-        const maxHeight = 500;
-        if (finalHeight > maxHeight) {
-            const scale = maxHeight / finalHeight;
-            finalHeight = maxHeight;
-            finalWidth = Math.round(finalWidth * scale);
-        }
-        return {
-            height: finalHeight,
-            maxWidth,
-            width: finalWidth,
-        };
-    };
-    const imageStyle = calculateDimensions();
-    return (_jsx("img", { className: className || undefined, src: src, alt: altText, ref: imageRef, style: imageStyle, onError: onError, draggable: "false", onLoad: (e) => {
-            if (isSVGImage) {
-                const img = e.currentTarget;
-                setDimensions({
-                    height: img.naturalHeight,
-                    width: img.naturalWidth,
-                });
-            }
-        } }));
-}
-function BrokenImage() {
-    return (_jsx("img", { src: brokenImage, style: {
-            height: 200,
-            opacity: 0.2,
-            width: 200,
-        }, draggable: "false", alt: "Broken image" }));
-}
-export default function ImageComponent({ src, altText, nodeKey, width, height, maxWidth, resizable, showCaption, caption, captionsEnabled, }) {
-    const imageRef = useRef(null);
-    const buttonRef = useRef(null);
-    const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
-    const [isResizing, setIsResizing] = useState(false);
-    const { isCollabActive } = useCollaborationContext();
-    const [editor] = useLexicalComposerContext();
-    const [selection, setSelection] = useState(null);
-    const activeEditorRef = useRef(null);
-    const [isLoadError, setIsLoadError] = useState(false);
-    const isEditable = useLexicalEditable();
-    const $onEnter = useCallback((event) => {
-        const latestSelection = $getSelection();
-        const buttonElem = buttonRef.current;
-        if (isSelected &&
-            $isNodeSelection(latestSelection) &&
-            latestSelection.getNodes().length === 1) {
-            if (showCaption) {
-                // Move focus into nested editor
-                $setSelection(null);
-                event.preventDefault();
-                caption.focus();
-                return true;
-            }
-            else if (buttonElem !== null &&
-                buttonElem !== document.activeElement) {
-                event.preventDefault();
-                buttonElem.focus();
-                return true;
-            }
-        }
-        return false;
-    }, [caption, isSelected, showCaption]);
-    const $onEscape = useCallback((event) => {
-        if (activeEditorRef.current === caption ||
-            buttonRef.current === event.target) {
-            $setSelection(null);
-            editor.update(() => {
-                setSelected(true);
-                const parentRootElement = editor.getRootElement();
-                if (parentRootElement !== null) {
-                    parentRootElement.focus();
-                }
-            });
-            return true;
-        }
-        return false;
-    }, [caption, editor, setSelected]);
-    const onClick = useCallback((payload) => {
-        const event = payload;
-        if (isResizing) {
-            return true;
-        }
-        if (event.target === imageRef.current) {
-            if (event.shiftKey) {
-                setSelected(!isSelected);
-            }
-            else {
-                clearSelection();
-                setSelected(true);
-            }
-            return true;
-        }
-        return false;
-    }, [isResizing, isSelected, setSelected, clearSelection]);
-    const onRightClick = useCallback((event) => {
-        editor.getEditorState().read(() => {
-            const latestSelection = $getSelection();
-            const domElement = event.target;
-            if (domElement.tagName === 'IMG' &&
-                $isRangeSelection(latestSelection) &&
-                latestSelection.getNodes().length === 1) {
-                editor.dispatchCommand(RIGHT_CLICK_IMAGE_COMMAND, event);
-            }
-        });
-    }, [editor]);
-    useEffect(() => {
-        const rootElement = editor.getRootElement();
-        const unregister = mergeRegister(editor.registerUpdateListener(({ editorState }) => {
-            const updatedSelection = editorState.read(() => $getSelection());
-            if ($isNodeSelection(updatedSelection)) {
-                setSelection(updatedSelection);
-            }
-            else {
-                setSelection(null);
-            }
-        }), editor.registerCommand(SELECTION_CHANGE_COMMAND, (_, activeEditor) => {
-            activeEditorRef.current = activeEditor;
-            return false;
-        }, COMMAND_PRIORITY_LOW), editor.registerCommand(CLICK_COMMAND, onClick, COMMAND_PRIORITY_LOW), editor.registerCommand(RIGHT_CLICK_IMAGE_COMMAND, onClick, COMMAND_PRIORITY_LOW), editor.registerCommand(DRAGSTART_COMMAND, (event) => {
-            if (event.target === imageRef.current) {
-                // TODO This is just a temporary workaround for FF to behave like other browsers.
-                // Ideally, this handles drag & drop too (and all browsers).
-                event.preventDefault();
-                return true;
-            }
-            return false;
-        }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ENTER_COMMAND, $onEnter, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ESCAPE_COMMAND, $onEscape, COMMAND_PRIORITY_LOW));
-        rootElement?.addEventListener('contextmenu', onRightClick);
-        return () => {
-            unregister();
-            rootElement?.removeEventListener('contextmenu', onRightClick);
-        };
-    }, [
-        clearSelection,
-        editor,
-        isResizing,
-        isSelected,
-        nodeKey,
-        $onEnter,
-        $onEscape,
-        onClick,
-        onRightClick,
-        setSelected,
-    ]);
-    const setShowCaption = () => {
-        editor.update(() => {
-            const node = $getNodeByKey(nodeKey);
-            if ($isImageNode(node)) {
-                node.setShowCaption(true);
-            }
-        });
-    };
-    const onResizeEnd = (nextWidth, nextHeight) => {
-        // Delay hiding the resize bars for click case
-        setTimeout(() => {
-            setIsResizing(false);
-        }, 200);
-        editor.update(() => {
-            const node = $getNodeByKey(nodeKey);
-            if ($isImageNode(node)) {
-                node.setWidthAndHeight(nextWidth, nextHeight);
-            }
-        });
-    };
-    const onResizeStart = () => {
-        setIsResizing(true);
-    };
-    const { historyState } = useSharedHistoryContext();
-    const { settings: { showNestedEditorTreeView }, } = useSettings();
-    const draggable = isSelected && $isNodeSelection(selection) && !isResizing;
-    const isFocused = (isSelected || isResizing) && isEditable;
-    return (_jsx(Suspense, { fallback: null, children: _jsxs(_Fragment, { children: [_jsx("div", { draggable: draggable, children: isLoadError ? (_jsx(BrokenImage, {})) : (_jsx(LazyImage, { className: isFocused
-                            ? `focused ${$isNodeSelection(selection) ? 'draggable' : ''}`
-                            : null, src: src, altText: altText, imageRef: imageRef, width: width, height: height, maxWidth: maxWidth, onError: () => setIsLoadError(true) })) }), showCaption && (_jsx("div", { className: "image-caption-container", children: _jsxs(LexicalNestedComposer, { initialEditor: caption, children: [_jsx(AutoFocusPlugin, {}), _jsx(MentionsPlugin, {}), _jsx(LinkPlugin, {}), _jsx(EmojisPlugin, {}), _jsx(HashtagPlugin, {}), _jsx(KeywordsPlugin, {}), isCollabActive ? (_jsx(CollaborationPlugin, { id: caption.getKey(), providerFactory: createWebsocketProvider, shouldBootstrap: true })) : (_jsx(HistoryPlugin, { externalHistoryState: historyState })), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { placeholder: "Enter a caption...", placeholderClassName: "ImageNode__placeholder", className: "ImageNode__contentEditable" }), ErrorBoundary: LexicalErrorBoundary }), showNestedEditorTreeView === true ? _jsx(TreeViewPlugin, {}) : null] }) })), resizable && $isNodeSelection(selection) && isFocused && (_jsx(ImageResizer, { showCaption: showCaption, setShowCaption: setShowCaption, editor: editor, buttonRef: buttonRef, imageRef: imageRef, maxWidth: maxWidth, onResizeStart: onResizeStart, onResizeEnd: onResizeEnd, captionsEnabled: !isLoadError && captionsEnabled }))] }) }));
-}

package/lib/nodes/ImageNode.d.ts

@@ -1,50 +0,0 @@
-import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalEditor, LexicalNode, LexicalUpdateJSON, NodeKey, SerializedEditor, SerializedLexicalNode, Spread } from 'lexical';
-import type { JSX } from 'react';
-import { DecoratorNode } from 'lexical';
-export interface ImagePayload {
-    altText: string;
-    caption?: LexicalEditor;
-    height?: number;
-    key?: NodeKey;
-    maxWidth?: number;
-    showCaption?: boolean;
-    src: string;
-    width?: number;
-    captionsEnabled?: boolean;
-}
-export type SerializedImageNode = Spread<{
-    altText: string;
-    caption: SerializedEditor;
-    height?: number;
-    maxWidth: number;
-    showCaption: boolean;
-    src: string;
-    width?: number;
-}, SerializedLexicalNode>;
-export declare class ImageNode extends DecoratorNode<JSX.Element> {
-    __src: string;
-    __altText: string;
-    __width: 'inherit' | number;
-    __height: 'inherit' | number;
-    __maxWidth: number;
-    __showCaption: boolean;
-    __caption: LexicalEditor;
-    __captionsEnabled: boolean;
-    static getType(): string;
-    static clone(node: ImageNode): ImageNode;
-    static importJSON(serializedNode: SerializedImageNode): ImageNode;
-    updateFromJSON(serializedNode: LexicalUpdateJSON<SerializedImageNode>): this;
-    exportDOM(): DOMExportOutput;
-    static importDOM(): DOMConversionMap | null;
-    constructor(src: string, altText: string, maxWidth: number, width?: 'inherit' | number, height?: 'inherit' | number, showCaption?: boolean, caption?: LexicalEditor, captionsEnabled?: boolean, key?: NodeKey);
-    exportJSON(): SerializedImageNode;
-    setWidthAndHeight(width: 'inherit' | number, height: 'inherit' | number): void;
-    setShowCaption(showCaption: boolean): void;
-    createDOM(config: EditorConfig): HTMLElement;
-    updateDOM(): false;
-    getSrc(): string;
-    getAltText(): string;
-    decorate(): JSX.Element;
-}
-export declare function $createImageNode({ altText, height, maxWidth, captionsEnabled, src, width, showCaption, caption, key, }: ImagePayload): ImageNode;
-export declare function $isImageNode(node: LexicalNode | null | undefined): node is ImageNode;

package/lib/nodes/ImageNode.js

@@ -1,151 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { HashtagNode } from '@lexical/hashtag';
-import { LinkNode } from '@lexical/link';
-import { $applyNodeReplacement, createEditor, DecoratorNode, LineBreakNode, ParagraphNode, RootNode, TextNode, } from 'lexical';
-import * as React from 'react';
-import { EmojiNode } from './EmojiNode';
-import { KeywordNode } from './KeywordNode';
-const ImageComponent = React.lazy(() => import('./ImageComponent'));
-function isGoogleDocCheckboxImg(img) {
-    return (img.parentElement != null &&
-        img.parentElement.tagName === 'LI' &&
-        img.previousSibling === null &&
-        img.getAttribute('aria-roledescription') === 'checkbox');
-}
-function $convertImageElement(domNode) {
-    const img = domNode;
-    if (img.src.startsWith('file:///') || isGoogleDocCheckboxImg(img)) {
-        return null;
-    }
-    const { alt: altText, src, width, height } = img;
-    const node = $createImageNode({ altText, height, src, width });
-    return { node };
-}
-export class ImageNode extends DecoratorNode {
-    __src;
-    __altText;
-    __width;
-    __height;
-    __maxWidth;
-    __showCaption;
-    __caption;
-    // Captions cannot yet be used within editor cells
-    __captionsEnabled;
-    static getType() {
-        return 'image';
-    }
-    static clone(node) {
-        return new ImageNode(node.__src, node.__altText, node.__maxWidth, node.__width, node.__height, node.__showCaption, node.__caption, node.__captionsEnabled, node.__key);
-    }
-    static importJSON(serializedNode) {
-        const { altText, height, width, maxWidth, src, showCaption } = serializedNode;
-        return $createImageNode({
-            altText,
-            height,
-            maxWidth,
-            showCaption,
-            src,
-            width,
-        }).updateFromJSON(serializedNode);
-    }
-    updateFromJSON(serializedNode) {
-        const node = super.updateFromJSON(serializedNode);
-        const { caption } = serializedNode;
-        const nestedEditor = node.__caption;
-        const editorState = nestedEditor.parseEditorState(caption.editorState);
-        if (!editorState.isEmpty()) {
-            nestedEditor.setEditorState(editorState);
-        }
-        return node;
-    }
-    exportDOM() {
-        const element = document.createElement('img');
-        element.setAttribute('src', this.__src);
-        element.setAttribute('alt', this.__altText);
-        element.setAttribute('width', this.__width.toString());
-        element.setAttribute('height', this.__height.toString());
-        return { element };
-    }
-    static importDOM() {
-        return {
-            img: (node) => ({
-                conversion: $convertImageElement,
-                priority: 0,
-            }),
-        };
-    }
-    constructor(src, altText, maxWidth, width, height, showCaption, caption, captionsEnabled, key) {
-        super(key);
-        this.__src = src;
-        this.__altText = altText;
-        this.__maxWidth = maxWidth;
-        this.__width = width || 'inherit';
-        this.__height = height || 'inherit';
-        this.__showCaption = showCaption || false;
-        this.__caption =
-            caption ||
-                createEditor({
-                    namespace: 'Playground/ImageNodeCaption',
-                    nodes: [
-                        RootNode,
-                        TextNode,
-                        LineBreakNode,
-                        ParagraphNode,
-                        LinkNode,
-                        EmojiNode,
-                        HashtagNode,
-                        KeywordNode,
-                    ],
-                });
-        this.__captionsEnabled = captionsEnabled || captionsEnabled === undefined;
-    }
-    exportJSON() {
-        return {
-            ...super.exportJSON(),
-            altText: this.getAltText(),
-            caption: this.__caption.toJSON(),
-            height: this.__height === 'inherit' ? 0 : this.__height,
-            maxWidth: this.__maxWidth,
-            showCaption: this.__showCaption,
-            src: this.getSrc(),
-            width: this.__width === 'inherit' ? 0 : this.__width,
-        };
-    }
-    setWidthAndHeight(width, height) {
-        const writable = this.getWritable();
-        writable.__width = width;
-        writable.__height = height;
-    }
-    setShowCaption(showCaption) {
-        const writable = this.getWritable();
-        writable.__showCaption = showCaption;
-    }
-    // View
-    createDOM(config) {
-        const span = document.createElement('span');
-        const theme = config.theme;
-        const className = theme.image;
-        if (className !== undefined) {
-            span.className = className;
-        }
-        return span;
-    }
-    updateDOM() {
-        return false;
-    }
-    getSrc() {
-        return this.__src;
-    }
-    getAltText() {
-        return this.__altText;
-    }
-    decorate() {
-        return (_jsx(ImageComponent, { src: this.__src, altText: this.__altText, width: this.__width, height: this.__height, maxWidth: this.__maxWidth, nodeKey: this.getKey(), showCaption: this.__showCaption, caption: this.__caption, captionsEnabled: this.__captionsEnabled, resizable: true }));
-    }
-}
-export function $createImageNode({ altText, height, maxWidth = 500, captionsEnabled, src, width, showCaption, caption, key, }) {
-    return $applyNodeReplacement(new ImageNode(src, altText, maxWidth, width, height, showCaption, caption, captionsEnabled, key));
-}
-export function $isImageNode(node) {
-    return node instanceof ImageNode;
-}

package/lib/nodes/InlineImageNode/InlineImageComponent.d.ts

@@ -1,26 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-import type { Position } from './InlineImageNode';
-import type { LexicalEditor, NodeKey } from 'lexical';
-import type { JSX } from 'react';
-import './InlineImageNode.css';
-export declare function UpdateInlineImageDialog({ activeEditor, nodeKey, onClose, }: {
-    activeEditor: LexicalEditor;
-    nodeKey: NodeKey;
-    onClose: () => void;
-}): JSX.Element;
-export default function InlineImageComponent({ src, altText, nodeKey, width, height, showCaption, caption, position, }: {
-    altText: string;
-    caption: LexicalEditor;
-    height: 'inherit' | number;
-    nodeKey: NodeKey;
-    showCaption: boolean;
-    src: string;
-    width: 'inherit' | number;
-    position: Position;
-}): JSX.Element;