@datalayer/lexical-loro 0.0.3 → 0.1.0

package/lib/nodes/StickyNode.js

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

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

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

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

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

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

package/lib/plugins/ActionsPlugin/index.js

@@ -0,0 +1,168 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { $createCodeNode, $isCodeNode } from '@lexical/code';
+import { editorStateFromSerializedDocument, exportFile, importFile, serializedDocumentFromEditorState, } from '@lexical/file';
+import { $convertFromMarkdownString, $convertToMarkdownString, } from '@lexical/markdown';
+import { useCollaborationContext } from '@lexical/react/LexicalCollaborationContext';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { mergeRegister } from '@lexical/utils';
+import { $createTextNode, $getRoot, $isParagraphNode, CLEAR_EDITOR_COMMAND, CLEAR_HISTORY_COMMAND, COLLABORATION_TAG, COMMAND_PRIORITY_EDITOR, HISTORIC_TAG, } from 'lexical';
+import { useCallback, useEffect, useState } from 'react';
+import { INITIAL_SETTINGS } from '../../appSettings';
+import useFlashMessage from '../../hooks/useFlashMessage';
+import useModal from '../../hooks/useModal';
+import Button from '../../ui/Button';
+import { docFromHash, docToHash } from '../../utils/docSerialization';
+import { PLAYGROUND_TRANSFORMERS } from '../MarkdownTransformers';
+import { SPEECH_TO_TEXT_COMMAND, SUPPORT_SPEECH_RECOGNITION, } from '../SpeechToTextPlugin';
+import { CONNECTED_COMMAND, TOGGLE_CONNECT_COMMAND } from '../../collab/yjs/State';
+async function sendEditorState(editor) {
+    const stringifiedEditorState = JSON.stringify(editor.getEditorState());
+    try {
+        await fetch('http://localhost:1235/setEditorState', {
+            body: stringifiedEditorState,
+            headers: {
+                Accept: 'application/json',
+                'Content-type': 'application/json',
+            },
+            method: 'POST',
+        });
+    }
+    catch {
+        // NO-OP
+    }
+}
+async function validateEditorState(editor) {
+    const stringifiedEditorState = JSON.stringify(editor.getEditorState());
+    let response = null;
+    try {
+        response = await fetch('http://localhost:1235/validateEditorState', {
+            body: stringifiedEditorState,
+            headers: {
+                Accept: 'application/json',
+                'Content-type': 'application/json',
+            },
+            method: 'POST',
+        });
+    }
+    catch {
+        // NO-OP
+    }
+    if (response !== null && response.status === 403) {
+        throw new Error('Editor state validation failed! Server did not accept changes.');
+    }
+}
+async function shareDoc(doc) {
+    const url = new URL(window.location.toString());
+    url.hash = await docToHash(doc);
+    const newUrl = url.toString();
+    window.history.replaceState({}, '', newUrl);
+    await window.navigator.clipboard.writeText(newUrl);
+}
+export default function ActionsPlugin({ isRichText, shouldPreserveNewLinesInMarkdown, }) {
+    const [editor] = useLexicalComposerContext();
+    const [isEditable, setIsEditable] = useState(() => editor.isEditable());
+    const [isSpeechToText, setIsSpeechToText] = useState(false);
+    const [connected, setConnected] = useState(false);
+    const [isEditorEmpty, setIsEditorEmpty] = useState(true);
+    const [modal, showModal] = useModal();
+    const showFlashMessage = useFlashMessage();
+    const { isCollabActive } = useCollaborationContext();
+    useEffect(() => {
+        if (INITIAL_SETTINGS.isCollab) {
+            return;
+        }
+        docFromHash(window.location.hash).then((doc) => {
+            if (doc && doc.source === 'Playground') {
+                editor.setEditorState(editorStateFromSerializedDocument(editor, doc));
+                editor.dispatchCommand(CLEAR_HISTORY_COMMAND, undefined);
+            }
+        });
+    }, [editor]);
+    useEffect(() => {
+        return mergeRegister(editor.registerEditableListener((editable) => {
+            setIsEditable(editable);
+        }), editor.registerCommand(CONNECTED_COMMAND, (payload) => {
+            const isConnected = payload;
+            setConnected(isConnected);
+            return false;
+        }, COMMAND_PRIORITY_EDITOR));
+    }, [editor]);
+    useEffect(() => {
+        return editor.registerUpdateListener(({ dirtyElements, prevEditorState, tags }) => {
+            // If we are in read only mode, send the editor state
+            // to server and ask for validation if possible.
+            if (!isEditable &&
+                dirtyElements.size > 0 &&
+                !tags.has(HISTORIC_TAG) &&
+                !tags.has(COLLABORATION_TAG)) {
+                validateEditorState(editor);
+            }
+            editor.getEditorState().read(() => {
+                const root = $getRoot();
+                const children = root.getChildren();
+                if (children.length > 1) {
+                    setIsEditorEmpty(false);
+                }
+                else {
+                    if ($isParagraphNode(children[0])) {
+                        const paragraphChildren = children[0].getChildren();
+                        setIsEditorEmpty(paragraphChildren.length === 0);
+                    }
+                    else {
+                        setIsEditorEmpty(false);
+                    }
+                }
+            });
+        });
+    }, [editor, isEditable]);
+    const handleMarkdownToggle = useCallback(() => {
+        editor.update(() => {
+            const root = $getRoot();
+            const firstChild = root.getFirstChild();
+            if ($isCodeNode(firstChild) && firstChild.getLanguage() === 'markdown') {
+                $convertFromMarkdownString(firstChild.getTextContent(), PLAYGROUND_TRANSFORMERS, undefined, // node
+                shouldPreserveNewLinesInMarkdown);
+            }
+            else {
+                const markdown = $convertToMarkdownString(PLAYGROUND_TRANSFORMERS, undefined, //node
+                shouldPreserveNewLinesInMarkdown);
+                const codeNode = $createCodeNode('markdown');
+                codeNode.append($createTextNode(markdown));
+                root.clear().append(codeNode);
+                if (markdown.length === 0) {
+                    codeNode.select();
+                }
+            }
+        });
+    }, [editor, shouldPreserveNewLinesInMarkdown]);
+    return (_jsxs("div", { className: "actions", children: [SUPPORT_SPEECH_RECOGNITION && (_jsx("button", { onClick: () => {
+                    editor.dispatchCommand(SPEECH_TO_TEXT_COMMAND, !isSpeechToText);
+                    setIsSpeechToText(!isSpeechToText);
+                }, className: 'action-button action-button-mic ' +
+                    (isSpeechToText ? 'active' : ''), title: "Speech To Text", "aria-label": `${isSpeechToText ? 'Enable' : 'Disable'} speech to text`, children: _jsx("i", { className: "mic" }) })), _jsx("button", { className: "action-button import", onClick: () => importFile(editor), title: "Import", "aria-label": "Import editor state from JSON", children: _jsx("i", { className: "import" }) }), _jsx("button", { className: "action-button export", onClick: () => exportFile(editor, {
+                    fileName: `Playground ${new Date().toISOString()}`,
+                    source: 'Playground',
+                }), title: "Export", "aria-label": "Export editor state to JSON", children: _jsx("i", { className: "export" }) }), _jsx("button", { className: "action-button share", disabled: isCollabActive || INITIAL_SETTINGS.isCollab, onClick: () => shareDoc(serializedDocumentFromEditorState(editor.getEditorState(), {
+                    source: 'Playground',
+                })).then(() => showFlashMessage('URL copied to clipboard'), () => showFlashMessage('URL could not be copied to clipboard')), title: "Share", "aria-label": "Share Playground link to current editor state", children: _jsx("i", { className: "share" }) }), _jsx("button", { className: "action-button clear", disabled: isEditorEmpty, onClick: () => {
+                    showModal('Clear editor', (onClose) => (_jsx(ShowClearDialog, { editor: editor, onClose: onClose })));
+                }, title: "Clear", "aria-label": "Clear editor contents", children: _jsx("i", { className: "clear" }) }), _jsx("button", { className: `action-button ${!isEditable ? 'unlock' : 'lock'}`, onClick: () => {
+                    // Send latest editor state to commenting validation server
+                    if (isEditable) {
+                        sendEditorState(editor);
+                    }
+                    editor.setEditable(!editor.isEditable());
+                }, title: "Read-Only Mode", "aria-label": `${!isEditable ? 'Unlock' : 'Lock'} read-only mode`, children: _jsx("i", { className: !isEditable ? 'unlock' : 'lock' }) }), _jsx("button", { className: "action-button", onClick: handleMarkdownToggle, title: "Convert From Markdown", "aria-label": "Convert from markdown", children: _jsx("i", { className: "markdown" }) }), isCollabActive && (_jsx("button", { className: "action-button connect", onClick: () => {
+                    editor.dispatchCommand(TOGGLE_CONNECT_COMMAND, !connected);
+                }, title: `${connected ? 'Disconnect' : 'Connect'} Collaborative Editing`, "aria-label": `${connected ? 'Disconnect from' : 'Connect to'} a collaborative editing server`, children: _jsx("i", { className: connected ? 'disconnect' : 'connect' }) })), modal] }));
+}
+function ShowClearDialog({ editor, onClose, }) {
+    return (_jsxs(_Fragment, { children: ["Are you sure you want to clear the editor?", _jsxs("div", { className: "Modal__content", children: [_jsx(Button, { onClick: () => {
+                            editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
+                            editor.focus();
+                            onClose();
+                        }, children: "Clear" }), ' ', _jsx(Button, { onClick: () => {
+                            editor.focus();
+                            onClose();
+                        }, children: "Cancel" })] })] }));
+}

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

@@ -0,0 +1,19 @@
+import type { JSX } from 'react';
+import { EmbedConfig } from '@lexical/react/LexicalAutoEmbedPlugin';
+interface PlaygroundEmbedConfig extends EmbedConfig {
+    contentName: string;
+    icon?: JSX.Element;
+    exampleUrl: string;
+    keywords: Array<string>;
+    description?: string;
+}
+export declare const YoutubeEmbedConfig: PlaygroundEmbedConfig;
+export declare const TwitterEmbedConfig: PlaygroundEmbedConfig;
+export declare const FigmaEmbedConfig: PlaygroundEmbedConfig;
+export declare const EmbedConfigs: PlaygroundEmbedConfig[];
+export declare function AutoEmbedDialog({ embedConfig, onClose, }: {
+    embedConfig: PlaygroundEmbedConfig;
+    onClose: () => void;
+}): JSX.Element;
+export default function AutoEmbedPlugin(): JSX.Element;
+export {};