@datalayer/lexical-loro 0.2.5 → 1.0.1

package/lib/nodes/StickyComponent.js

@@ -1,162 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import './StickyNode.css';
-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 { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
-import { LexicalNestedComposer } from '@lexical/react/LexicalNestedComposer';
-import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
-import { calculateZoomLevel } from '@lexical/utils';
-import { $getNodeByKey } from 'lexical';
-import { useEffect, useLayoutEffect, useRef } from 'react';
-import { createWebsocketProvider } from '../collab/yjs/wsProvider';
-import { useSharedHistoryContext } from '../context/SharedHistoryContext';
-import StickyEditorTheme from '../themes/StickyEditorTheme';
-import ContentEditable from '../ui/ContentEditable';
-import { $isStickyNode } from './StickyNode';
-function positionSticky(stickyElem, positioning) {
-    const style = stickyElem.style;
-    const rootElementRect = positioning.rootElementRect;
-    const rectLeft = rootElementRect !== null ? rootElementRect.left : 0;
-    const rectTop = rootElementRect !== null ? rootElementRect.top : 0;
-    style.top = rectTop + positioning.y + 'px';
-    style.left = rectLeft + positioning.x + 'px';
-}
-export default function StickyComponent({ x, y, nodeKey, color, caption, }) {
-    const [editor] = useLexicalComposerContext();
-    const stickyContainerRef = useRef(null);
-    const positioningRef = useRef({
-        isDragging: false,
-        offsetX: 0,
-        offsetY: 0,
-        rootElementRect: null,
-        x: 0,
-        y: 0,
-    });
-    const { isCollabActive } = useCollaborationContext();
-    useEffect(() => {
-        const position = positioningRef.current;
-        position.x = x;
-        position.y = y;
-        const stickyContainer = stickyContainerRef.current;
-        if (stickyContainer !== null) {
-            positionSticky(stickyContainer, position);
-        }
-    }, [x, y]);
-    useLayoutEffect(() => {
-        const position = positioningRef.current;
-        const resizeObserver = new ResizeObserver((entries) => {
-            for (let i = 0; i < entries.length; i++) {
-                const entry = entries[i];
-                const { target } = entry;
-                position.rootElementRect = target.getBoundingClientRect();
-                const stickyContainer = stickyContainerRef.current;
-                if (stickyContainer !== null) {
-                    positionSticky(stickyContainer, position);
-                }
-            }
-        });
-        const removeRootListener = editor.registerRootListener((nextRootElem, prevRootElem) => {
-            if (prevRootElem !== null) {
-                resizeObserver.unobserve(prevRootElem);
-            }
-            if (nextRootElem !== null) {
-                resizeObserver.observe(nextRootElem);
-            }
-        });
-        const handleWindowResize = () => {
-            const rootElement = editor.getRootElement();
-            const stickyContainer = stickyContainerRef.current;
-            if (rootElement !== null && stickyContainer !== null) {
-                position.rootElementRect = rootElement.getBoundingClientRect();
-                positionSticky(stickyContainer, position);
-            }
-        };
-        window.addEventListener('resize', handleWindowResize);
-        return () => {
-            window.removeEventListener('resize', handleWindowResize);
-            removeRootListener();
-        };
-    }, [editor]);
-    useEffect(() => {
-        const stickyContainer = stickyContainerRef.current;
-        if (stickyContainer !== null) {
-            // Delay adding transition so we don't trigger the
-            // transition on load of the sticky.
-            setTimeout(() => {
-                stickyContainer.style.setProperty('transition', 'top 0.3s ease 0s, left 0.3s ease 0s');
-            }, 500);
-        }
-    }, []);
-    const handlePointerMove = (event) => {
-        const stickyContainer = stickyContainerRef.current;
-        const positioning = positioningRef.current;
-        const rootElementRect = positioning.rootElementRect;
-        const zoom = calculateZoomLevel(stickyContainer);
-        if (stickyContainer !== null &&
-            positioning.isDragging &&
-            rootElementRect !== null) {
-            positioning.x =
-                event.pageX / zoom - positioning.offsetX - rootElementRect.left;
-            positioning.y =
-                event.pageY / zoom - positioning.offsetY - rootElementRect.top;
-            positionSticky(stickyContainer, positioning);
-        }
-    };
-    const handlePointerUp = (event) => {
-        const stickyContainer = stickyContainerRef.current;
-        const positioning = positioningRef.current;
-        if (stickyContainer !== null) {
-            positioning.isDragging = false;
-            stickyContainer.classList.remove('dragging');
-            editor.update(() => {
-                const node = $getNodeByKey(nodeKey);
-                if ($isStickyNode(node)) {
-                    node.setPosition(positioning.x, positioning.y);
-                }
-            });
-        }
-        document.removeEventListener('pointermove', handlePointerMove);
-        document.removeEventListener('pointerup', handlePointerUp);
-    };
-    const handleDelete = () => {
-        editor.update(() => {
-            const node = $getNodeByKey(nodeKey);
-            if ($isStickyNode(node)) {
-                node.remove();
-            }
-        });
-    };
-    const handleColorChange = () => {
-        editor.update(() => {
-            const node = $getNodeByKey(nodeKey);
-            if ($isStickyNode(node)) {
-                node.toggleColor();
-            }
-        });
-    };
-    const { historyState } = useSharedHistoryContext();
-    return (_jsx("div", { ref: stickyContainerRef, className: "sticky-note-container", children: _jsxs("div", { className: `sticky-note ${color}`, onPointerDown: (event) => {
-                const stickyContainer = stickyContainerRef.current;
-                if (stickyContainer == null ||
-                    event.button === 2 ||
-                    event.target !== stickyContainer.firstChild) {
-                    // Right click or click on editor should not work
-                    return;
-                }
-                const stickContainer = stickyContainer;
-                const positioning = positioningRef.current;
-                if (stickContainer !== null) {
-                    const { top, left } = stickContainer.getBoundingClientRect();
-                    const zoom = calculateZoomLevel(stickContainer);
-                    positioning.offsetX = event.clientX / zoom - left;
-                    positioning.offsetY = event.clientY / zoom - top;
-                    positioning.isDragging = true;
-                    stickContainer.classList.add('dragging');
-                    document.addEventListener('pointermove', handlePointerMove);
-                    document.addEventListener('pointerup', handlePointerUp);
-                    event.preventDefault();
-                }
-            }, children: [_jsx("button", { onClick: handleDelete, className: "delete", "aria-label": "Delete sticky note", title: "Delete", children: "X" }), _jsx("button", { onClick: handleColorChange, className: "color", "aria-label": "Change sticky note color", title: "Color", children: _jsx("i", { className: "bucket" }) }), _jsxs(LexicalNestedComposer, { initialEditor: caption, initialTheme: StickyEditorTheme, children: [isCollabActive ? (_jsx(CollaborationPlugin, { id: caption.getKey(), providerFactory: createWebsocketProvider, shouldBootstrap: true })) : (_jsx(HistoryPlugin, { externalHistoryState: historyState })), _jsx(PlainTextPlugin, { contentEditable: _jsx(ContentEditable, { placeholder: "What's up?", placeholderClassName: "StickyNode__placeholder", className: "StickyNode__contentEditable" }), ErrorBoundary: LexicalErrorBoundary })] })] }) }));
-}

package/lib/nodes/StickyNode.d.ts

@@ -1,31 +0,0 @@
-import type { EditorConfig, LexicalEditor, LexicalNode, LexicalUpdateJSON, NodeKey, SerializedEditor, SerializedLexicalNode, Spread } from 'lexical';
-import type { JSX } from 'react';
-import { DecoratorNode } from 'lexical';
-type StickyNoteColor = 'pink' | 'yellow';
-export type SerializedStickyNode = Spread<{
-    xOffset: number;
-    yOffset: number;
-    color: StickyNoteColor;
-    caption: SerializedEditor;
-}, SerializedLexicalNode>;
-export declare class StickyNode extends DecoratorNode<JSX.Element> {
-    __x: number;
-    __y: number;
-    __color: StickyNoteColor;
-    __caption: LexicalEditor;
-    static getType(): string;
-    static clone(node: StickyNode): StickyNode;
-    static importJSON(serializedNode: SerializedStickyNode): StickyNode;
-    updateFromJSON(serializedNode: LexicalUpdateJSON<SerializedStickyNode>): this;
-    constructor(x: number, y: number, color: 'pink' | 'yellow', caption?: LexicalEditor, key?: NodeKey);
-    exportJSON(): SerializedStickyNode;
-    createDOM(config: EditorConfig): HTMLElement;
-    updateDOM(): false;
-    setPosition(x: number, y: number): void;
-    toggleColor(): void;
-    decorate(editor: LexicalEditor, config: EditorConfig): JSX.Element;
-    isIsolated(): true;
-}
-export declare function $isStickyNode(node: LexicalNode | null | undefined): node is StickyNode;
-export declare function $createStickyNode(xOffset: number, yOffset: number): StickyNode;
-export {};

package/lib/nodes/StickyNode.js

@@ -1,76 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { $setSelection, createEditor, DecoratorNode } from 'lexical';
-import * as React from 'react';
-import { createPortal } from 'react-dom';
-const StickyComponent = React.lazy(() => import('./StickyComponent'));
-export class StickyNode extends DecoratorNode {
-    __x;
-    __y;
-    __color;
-    __caption;
-    static getType() {
-        return 'sticky';
-    }
-    static clone(node) {
-        return new StickyNode(node.__x, node.__y, node.__color, node.__caption, node.__key);
-    }
-    static importJSON(serializedNode) {
-        return new StickyNode(serializedNode.xOffset, serializedNode.yOffset, serializedNode.color).updateFromJSON(serializedNode);
-    }
-    updateFromJSON(serializedNode) {
-        const stickyNode = super.updateFromJSON(serializedNode);
-        const caption = serializedNode.caption;
-        const nestedEditor = stickyNode.__caption;
-        const editorState = nestedEditor.parseEditorState(caption.editorState);
-        if (!editorState.isEmpty()) {
-            nestedEditor.setEditorState(editorState);
-        }
-        return stickyNode;
-    }
-    constructor(x, y, color, caption, key) {
-        super(key);
-        this.__x = x;
-        this.__y = y;
-        this.__caption = caption || createEditor();
-        this.__color = color;
-    }
-    exportJSON() {
-        return {
-            ...super.exportJSON(),
-            caption: this.__caption.toJSON(),
-            color: this.__color,
-            xOffset: this.__x,
-            yOffset: this.__y,
-        };
-    }
-    createDOM(config) {
-        const div = document.createElement('div');
-        div.style.display = 'contents';
-        return div;
-    }
-    updateDOM() {
-        return false;
-    }
-    setPosition(x, y) {
-        const writable = this.getWritable();
-        writable.__x = x;
-        writable.__y = y;
-        $setSelection(null);
-    }
-    toggleColor() {
-        const writable = this.getWritable();
-        writable.__color = writable.__color === 'pink' ? 'yellow' : 'pink';
-    }
-    decorate(editor, config) {
-        return createPortal(_jsx(StickyComponent, { color: this.__color, x: this.__x, y: this.__y, nodeKey: this.getKey(), caption: this.__caption }), document.body);
-    }
-    isIsolated() {
-        return true;
-    }
-}
-export function $isStickyNode(node) {
-    return node instanceof StickyNode;
-}
-export function $createStickyNode(xOffset, yOffset) {
-    return new StickyNode(xOffset, yOffset, 'yellow');
-}

package/lib/nodes/TweetNode.d.ts

@@ -1,21 +0,0 @@
-import type { DOMConversionMap, DOMExportOutput, EditorConfig, ElementFormatType, LexicalEditor, LexicalNode, NodeKey, Spread } from 'lexical';
-import type { JSX } from 'react';
-import { DecoratorBlockNode, SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
-export type SerializedTweetNode = Spread<{
-    id: string;
-}, SerializedDecoratorBlockNode>;
-export declare class TweetNode extends DecoratorBlockNode {
-    __id: string;
-    static getType(): string;
-    static clone(node: TweetNode): TweetNode;
-    static importJSON(serializedNode: SerializedTweetNode): TweetNode;
-    exportJSON(): SerializedTweetNode;
-    static importDOM(): DOMConversionMap<HTMLDivElement> | null;
-    exportDOM(): DOMExportOutput;
-    constructor(id: string, format?: ElementFormatType, key?: NodeKey);
-    getId(): string;
-    getTextContent(_includeInert?: boolean | undefined, _includeDirectionless?: false | undefined): string;
-    decorate(editor: LexicalEditor, config: EditorConfig): JSX.Element;
-}
-export declare function $createTweetNode(tweetID: string): TweetNode;
-export declare function $isTweetNode(node: TweetNode | LexicalNode | null | undefined): node is TweetNode;

package/lib/nodes/TweetNode.js

@@ -1,119 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BlockWithAlignableContents } from '@lexical/react/LexicalBlockWithAlignableContents';
-import { DecoratorBlockNode, } from '@lexical/react/LexicalDecoratorBlockNode';
-import { useCallback, useEffect, useRef, useState } from 'react';
-const WIDGET_SCRIPT_URL = 'https://platform.twitter.com/widgets.js';
-function $convertTweetElement(domNode) {
-    const id = domNode.getAttribute('data-lexical-tweet-id');
-    if (id) {
-        const node = $createTweetNode(id);
-        return { node };
-    }
-    return null;
-}
-let isTwitterScriptLoading = true;
-function TweetComponent({ className, format, loadingComponent, nodeKey, onError, onLoad, tweetID, }) {
-    const containerRef = useRef(null);
-    const previousTweetIDRef = useRef('');
-    const [isTweetLoading, setIsTweetLoading] = useState(false);
-    const createTweet = useCallback(async () => {
-        try {
-            // @ts-expect-error Twitter is attached to the window.
-            await window.twttr.widgets.createTweet(tweetID, containerRef.current);
-            setIsTweetLoading(false);
-            isTwitterScriptLoading = false;
-            if (onLoad) {
-                onLoad();
-            }
-        }
-        catch (error) {
-            if (onError) {
-                onError(String(error));
-            }
-        }
-    }, [onError, onLoad, tweetID]);
-    useEffect(() => {
-        if (tweetID !== previousTweetIDRef.current) {
-            setIsTweetLoading(true);
-            if (isTwitterScriptLoading) {
-                const script = document.createElement('script');
-                script.src = WIDGET_SCRIPT_URL;
-                script.async = true;
-                document.body?.appendChild(script);
-                script.onload = createTweet;
-                if (onError) {
-                    script.onerror = onError;
-                }
-            }
-            else {
-                createTweet();
-            }
-            if (previousTweetIDRef) {
-                previousTweetIDRef.current = tweetID;
-            }
-        }
-    }, [createTweet, onError, tweetID]);
-    return (_jsxs(BlockWithAlignableContents, { className: className, format: format, nodeKey: nodeKey, children: [isTweetLoading ? loadingComponent : null, _jsx("div", { style: { display: 'inline-block', width: '550px' }, ref: containerRef })] }));
-}
-export class TweetNode extends DecoratorBlockNode {
-    __id;
-    static getType() {
-        return 'tweet';
-    }
-    static clone(node) {
-        return new TweetNode(node.__id, node.__format, node.__key);
-    }
-    static importJSON(serializedNode) {
-        return $createTweetNode(serializedNode.id).updateFromJSON(serializedNode);
-    }
-    exportJSON() {
-        return {
-            ...super.exportJSON(),
-            id: this.getId(),
-        };
-    }
-    static importDOM() {
-        return {
-            div: (domNode) => {
-                if (!domNode.hasAttribute('data-lexical-tweet-id')) {
-                    return null;
-                }
-                return {
-                    conversion: $convertTweetElement,
-                    priority: 2,
-                };
-            },
-        };
-    }
-    exportDOM() {
-        const element = document.createElement('div');
-        element.setAttribute('data-lexical-tweet-id', this.__id);
-        const text = document.createTextNode(this.getTextContent());
-        element.append(text);
-        return { element };
-    }
-    constructor(id, format, key) {
-        super(format, key);
-        this.__id = id;
-    }
-    getId() {
-        return this.__id;
-    }
-    getTextContent(_includeInert, _includeDirectionless) {
-        return `https://x.com/i/web/status/${this.__id}`;
-    }
-    decorate(editor, config) {
-        const embedBlockTheme = config.theme.embedBlock || {};
-        const className = {
-            base: embedBlockTheme.base || '',
-            focus: embedBlockTheme.focus || '',
-        };
-        return (_jsx(TweetComponent, { className: className, format: this.__format, loadingComponent: "Loading...", nodeKey: this.getKey(), tweetID: this.__id }));
-    }
-}
-export function $createTweetNode(tweetID) {
-    return new TweetNode(tweetID);
-}
-export function $isTweetNode(node) {
-    return node instanceof TweetNode;
-}

package/lib/nodes/YouTubeNode.d.ts

@@ -1,22 +0,0 @@
-import type { DOMConversionMap, DOMExportOutput, EditorConfig, ElementFormatType, LexicalEditor, LexicalNode, NodeKey, Spread } from 'lexical';
-import type { JSX } from 'react';
-import { DecoratorBlockNode, SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
-export type SerializedYouTubeNode = Spread<{
-    videoID: string;
-}, SerializedDecoratorBlockNode>;
-export declare class YouTubeNode extends DecoratorBlockNode {
-    __id: string;
-    static getType(): string;
-    static clone(node: YouTubeNode): YouTubeNode;
-    static importJSON(serializedNode: SerializedYouTubeNode): YouTubeNode;
-    exportJSON(): SerializedYouTubeNode;
-    constructor(id: string, format?: ElementFormatType, key?: NodeKey);
-    exportDOM(): DOMExportOutput;
-    static importDOM(): DOMConversionMap | null;
-    updateDOM(): false;
-    getId(): string;
-    getTextContent(_includeInert?: boolean | undefined, _includeDirectionless?: false | undefined): string;
-    decorate(_editor: LexicalEditor, config: EditorConfig): JSX.Element;
-}
-export declare function $createYouTubeNode(videoID: string): YouTubeNode;
-export declare function $isYouTubeNode(node: YouTubeNode | LexicalNode | null | undefined): node is YouTubeNode;

package/lib/nodes/YouTubeNode.js

@@ -1,84 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { BlockWithAlignableContents } from '@lexical/react/LexicalBlockWithAlignableContents';
-import { DecoratorBlockNode, } from '@lexical/react/LexicalDecoratorBlockNode';
-function YouTubeComponent({ className, format, nodeKey, videoID, }) {
-    return (_jsx(BlockWithAlignableContents, { className: className, format: format, nodeKey: nodeKey, children: _jsx("iframe", { width: "560", height: "315", src: `https://www.youtube-nocookie.com/embed/${videoID}`, frameBorder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, title: "YouTube video" }) }));
-}
-function $convertYoutubeElement(domNode) {
-    const videoID = domNode.getAttribute('data-lexical-youtube');
-    if (videoID) {
-        const node = $createYouTubeNode(videoID);
-        return { node };
-    }
-    return null;
-}
-export class YouTubeNode extends DecoratorBlockNode {
-    __id;
-    static getType() {
-        return 'youtube';
-    }
-    static clone(node) {
-        return new YouTubeNode(node.__id, node.__format, node.__key);
-    }
-    static importJSON(serializedNode) {
-        return $createYouTubeNode(serializedNode.videoID).updateFromJSON(serializedNode);
-    }
-    exportJSON() {
-        return {
-            ...super.exportJSON(),
-            videoID: this.__id,
-        };
-    }
-    constructor(id, format, key) {
-        super(format, key);
-        this.__id = id;
-    }
-    exportDOM() {
-        const element = document.createElement('iframe');
-        element.setAttribute('data-lexical-youtube', this.__id);
-        element.setAttribute('width', '560');
-        element.setAttribute('height', '315');
-        element.setAttribute('src', `https://www.youtube-nocookie.com/embed/${this.__id}`);
-        element.setAttribute('frameborder', '0');
-        element.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture');
-        element.setAttribute('allowfullscreen', 'true');
-        element.setAttribute('title', 'YouTube video');
-        return { element };
-    }
-    static importDOM() {
-        return {
-            iframe: (domNode) => {
-                if (!domNode.hasAttribute('data-lexical-youtube')) {
-                    return null;
-                }
-                return {
-                    conversion: $convertYoutubeElement,
-                    priority: 1,
-                };
-            },
-        };
-    }
-    updateDOM() {
-        return false;
-    }
-    getId() {
-        return this.__id;
-    }
-    getTextContent(_includeInert, _includeDirectionless) {
-        return `https://www.youtube.com/watch?v=${this.__id}`;
-    }
-    decorate(_editor, config) {
-        const embedBlockTheme = config.theme.embedBlock || {};
-        const className = {
-            base: embedBlockTheme.base || '',
-            focus: embedBlockTheme.focus || '',
-        };
-        return (_jsx(YouTubeComponent, { className: className, format: this.__format, nodeKey: this.getKey(), videoID: this.__id }));
-    }
-}
-export function $createYouTubeNode(videoID) {
-    return new YouTubeNode(videoID);
-}
-export function $isYouTubeNode(node) {
-    return node instanceof YouTubeNode;
-}

package/lib/plugins/ActionsPlugin/index.d.ts

@@ -1,5 +0,0 @@
-import type { JSX } from 'react';
-export default function ActionsPlugin({ isRichText, shouldPreserveNewLinesInMarkdown, }: {
-    isRichText: boolean;
-    shouldPreserveNewLinesInMarkdown: boolean;
-}): JSX.Element;