@datalayer/lexical-loro 0.1.0 → 0.2.1

package/lib/plugins/ActionsPlugin/index.js

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

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

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

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

package/lib/plugins/AutoLinkPlugin/index.js

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

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