@datalayer/lexical-loro 1.0.2 → 1.0.5

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 {};

package/lib/plugins/AutoEmbedPlugin/index.js

@@ -0,0 +1,158 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AutoEmbedOption, LexicalAutoEmbedPlugin, URL_MATCHER, } from '@lexical/react/LexicalAutoEmbedPlugin';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useMemo, useState } from 'react';
+import * as ReactDOM from 'react-dom';
+import useModal from '../../hooks/useModal';
+import Button from '../../ui/Button';
+import { DialogActions } from '../../ui/Dialog';
+import { INSERT_FIGMA_COMMAND } from '../FigmaPlugin';
+import { INSERT_TWEET_COMMAND } from '../TwitterPlugin';
+import { INSERT_YOUTUBE_COMMAND } from '../YouTubePlugin';
+export const YoutubeEmbedConfig = {
+    contentName: 'YouTube Video',
+    exampleUrl: 'https://www.youtube.com/watch?v=jNQXAC9IVRw',
+    // Icon for display.
+    icon: _jsx("i", { className: "icon youtube" }),
+    insertNode: (editor, result) => {
+        editor.dispatchCommand(INSERT_YOUTUBE_COMMAND, result.id);
+    },
+    keywords: ['youtube', 'video'],
+    // Determine if a given URL is a match and return url data.
+    parseUrl: async (url) => {
+        const match = /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/.exec(url);
+        const id = match ? (match?.[2].length === 11 ? match[2] : null) : null;
+        if (id != null) {
+            return {
+                id,
+                url,
+            };
+        }
+        return null;
+    },
+    type: 'youtube-video',
+};
+export const TwitterEmbedConfig = {
+    // e.g. Tweet or Google Map.
+    contentName: 'X(Tweet)',
+    exampleUrl: 'https://x.com/jack/status/20',
+    // Icon for display.
+    icon: _jsx("i", { className: "icon x" }),
+    // Create the Lexical embed node from the url data.
+    insertNode: (editor, result) => {
+        editor.dispatchCommand(INSERT_TWEET_COMMAND, result.id);
+    },
+    // For extra searching.
+    keywords: ['tweet', 'twitter', 'x'],
+    // Determine if a given URL is a match and return url data.
+    parseUrl: (text) => {
+        const match = /^https:\/\/(twitter|x)\.com\/(#!\/)?(\w+)\/status(es)*\/(\d+)/.exec(text);
+        if (match != null) {
+            return {
+                id: match[5],
+                url: match[1],
+            };
+        }
+        return null;
+    },
+    type: 'tweet',
+};
+export const FigmaEmbedConfig = {
+    contentName: 'Figma Document',
+    exampleUrl: 'https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File',
+    icon: _jsx("i", { className: "icon figma" }),
+    insertNode: (editor, result) => {
+        editor.dispatchCommand(INSERT_FIGMA_COMMAND, result.id);
+    },
+    keywords: ['figma', 'figma.com', 'mock-up'],
+    // Determine if a given URL is a match and return url data.
+    parseUrl: (text) => {
+        const match = /https:\/\/([\w.-]+\.)?figma.com\/(file|proto)\/([0-9a-zA-Z]{22,128})(?:\/.*)?$/.exec(text);
+        if (match != null) {
+            return {
+                id: match[3],
+                url: match[0],
+            };
+        }
+        return null;
+    },
+    type: 'figma',
+};
+export const EmbedConfigs = [
+    TwitterEmbedConfig,
+    YoutubeEmbedConfig,
+    FigmaEmbedConfig,
+];
+function AutoEmbedMenuItem({ index, isSelected, onClick, onMouseEnter, option, }) {
+    let className = 'item';
+    if (isSelected) {
+        className += ' selected';
+    }
+    return (_jsx("li", { tabIndex: -1, className: className, ref: option.setRefElement, role: "option", "aria-selected": isSelected, id: 'typeahead-item-' + index, onMouseEnter: onMouseEnter, onClick: onClick, children: _jsx("span", { className: "text", children: option.title }) }, option.key));
+}
+function AutoEmbedMenu({ options, selectedItemIndex, onOptionClick, onOptionMouseEnter, }) {
+    return (_jsx("div", { className: "typeahead-popover", children: _jsx("ul", { children: options.map((option, i) => (_jsx(AutoEmbedMenuItem, { index: i, isSelected: selectedItemIndex === i, onClick: () => onOptionClick(option, i), onMouseEnter: () => onOptionMouseEnter(i), option: option }, option.key))) }) }));
+}
+const debounce = (callback, delay) => {
+    let timeoutId;
+    return (text) => {
+        window.clearTimeout(timeoutId);
+        timeoutId = window.setTimeout(() => {
+            callback(text);
+        }, delay);
+    };
+};
+export function AutoEmbedDialog({ embedConfig, onClose, }) {
+    const [text, setText] = useState('');
+    const [editor] = useLexicalComposerContext();
+    const [embedResult, setEmbedResult] = useState(null);
+    const validateText = useMemo(() => debounce((inputText) => {
+        const urlMatch = URL_MATCHER.exec(inputText);
+        if (embedConfig != null && inputText != null && urlMatch != null) {
+            Promise.resolve(embedConfig.parseUrl(inputText)).then((parseResult) => {
+                setEmbedResult(parseResult);
+            });
+        }
+        else if (embedResult != null) {
+            setEmbedResult(null);
+        }
+    }, 200), [embedConfig, embedResult]);
+    const onClick = () => {
+        if (embedResult != null) {
+            embedConfig.insertNode(editor, embedResult);
+            onClose();
+        }
+    };
+    return (_jsxs("div", { style: { width: '600px' }, children: [_jsx("div", { className: "Input__wrapper", children: _jsx("input", { type: "text", className: "Input__input", placeholder: embedConfig.exampleUrl, value: text, "data-test-id": `${embedConfig.type}-embed-modal-url`, onChange: (e) => {
+                        const { value } = e.target;
+                        setText(value);
+                        validateText(value);
+                    } }) }), _jsx(DialogActions, { children: _jsx(Button, { disabled: !embedResult, onClick: onClick, "data-test-id": `${embedConfig.type}-embed-modal-submit-btn`, children: "Embed" }) })] }));
+}
+export default function AutoEmbedPlugin() {
+    const [modal, showModal] = useModal();
+    const openEmbedModal = (embedConfig) => {
+        showModal(`Embed ${embedConfig.contentName}`, (onClose) => (_jsx(AutoEmbedDialog, { embedConfig: embedConfig, onClose: onClose })));
+    };
+    const getMenuOptions = (activeEmbedConfig, embedFn, dismissFn) => {
+        return [
+            new AutoEmbedOption('Dismiss', {
+                onSelect: dismissFn,
+            }),
+            new AutoEmbedOption(`Embed ${activeEmbedConfig.contentName}`, {
+                onSelect: embedFn,
+            }),
+        ];
+    };
+    return (_jsxs(_Fragment, { children: [modal, _jsx(LexicalAutoEmbedPlugin, { embedConfigs: EmbedConfigs, onOpenEmbedModalForConfig: openEmbedModal, getMenuOptions: getMenuOptions, menuRenderFn: (anchorElementRef, { selectedIndex, options, selectOptionAndCleanUp, setHighlightedIndex }) => anchorElementRef.current
+                    ? ReactDOM.createPortal(_jsx("div", { className: "typeahead-popover auto-embed-menu", style: {
+                            marginLeft: `${Math.max(parseFloat(anchorElementRef.current.style.width) - 200, 0)}px`,
+                            width: 200,
+                        }, children: _jsx(AutoEmbedMenu, { options: options, selectedItemIndex: selectedIndex, onOptionClick: (option, index) => {
+                                setHighlightedIndex(index);
+                                selectOptionAndCleanUp(option);
+                            }, onOptionMouseEnter: (index) => {
+                                setHighlightedIndex(index);
+                            } }) }), anchorElementRef.current)
+                    : null })] }));
+}

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

@@ -0,0 +1,2 @@
+import type { JSX } from 'react';
+export default function LexicalAutoLinkPlugin(): JSX.Element;

package/lib/plugins/AutoLinkPlugin/index.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AutoLinkPlugin, createLinkMatcherWithRegExp, } from '@lexical/react/LexicalAutoLinkPlugin';
+const URL_REGEX = /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)(?<![-.+():%])/;
+const EMAIL_REGEX = /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
+const MATCHERS = [
+    createLinkMatcherWithRegExp(URL_REGEX, (text) => {
+        return text.startsWith('http') ? text : `https://${text}`;
+    }),
+    createLinkMatcherWithRegExp(EMAIL_REGEX, (text) => {
+        return `mailto:${text}`;
+    }),
+];
+export default function LexicalAutoLinkPlugin() {
+    return _jsx(AutoLinkPlugin, { matchers: MATCHERS });
+}

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

@@ -0,0 +1,10 @@
+import type { JSX } from 'react';
+declare global {
+    interface Navigator {
+        userAgentData?: {
+            mobile: boolean;
+        };
+    }
+}
+export declare const uuid: string;
+export default function AutocompletePlugin(): JSX.Element | null;