@datalayer/lexical-loro 0.2.4 → 0.2.5

package/lib/nodes/FigmaNode.js

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,272 @@
+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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,151 @@
+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

@@ -0,0 +1,26 @@
+/**
+ * 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;