@datalayer/lexical-loro 0.2.5 → 1.0.1

package/lib/plugins/ToolbarPlugin/utils.js

@@ -1,247 +0,0 @@
-/*
- * Copyright (c) 2023-2025 Datalayer, Inc.
- * Distributed under the terms of the MIT License.
- */
-/**
- * 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 { $createCodeNode } from '@lexical/code';
-import { INSERT_CHECK_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, } from '@lexical/list';
-import { $isDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
-import { $createHeadingNode, $createQuoteNode, $isHeadingNode, $isQuoteNode, } from '@lexical/rich-text';
-import { $patchStyleText, $setBlocksType } from '@lexical/selection';
-import { $isTableSelection } from '@lexical/table';
-import { $getNearestBlockElementAncestorOrThrow } from '@lexical/utils';
-import { $createParagraphNode, $getSelection, $isRangeSelection, $isTextNode, } from 'lexical';
-import { DEFAULT_FONT_SIZE, MAX_ALLOWED_FONT_SIZE, MIN_ALLOWED_FONT_SIZE, } from '../../context/ToolbarContext';
-// eslint-disable-next-line no-shadow
-export var UpdateFontSizeType;
-(function (UpdateFontSizeType) {
-    UpdateFontSizeType[UpdateFontSizeType["increment"] = 1] = "increment";
-    UpdateFontSizeType[UpdateFontSizeType["decrement"] = 2] = "decrement";
-})(UpdateFontSizeType || (UpdateFontSizeType = {}));
-/**
- * Calculates the new font size based on the update type.
- * @param currentFontSize - The current font size
- * @param updateType - The type of change, either increment or decrement
- * @returns the next font size
- */
-export const calculateNextFontSize = (currentFontSize, updateType) => {
-    if (!updateType) {
-        return currentFontSize;
-    }
-    let updatedFontSize = currentFontSize;
-    switch (updateType) {
-        case UpdateFontSizeType.decrement:
-            switch (true) {
-                case currentFontSize > MAX_ALLOWED_FONT_SIZE:
-                    updatedFontSize = MAX_ALLOWED_FONT_SIZE;
-                    break;
-                case currentFontSize >= 48:
-                    updatedFontSize -= 12;
-                    break;
-                case currentFontSize >= 24:
-                    updatedFontSize -= 4;
-                    break;
-                case currentFontSize >= 14:
-                    updatedFontSize -= 2;
-                    break;
-                case currentFontSize >= 9:
-                    updatedFontSize -= 1;
-                    break;
-                default:
-                    updatedFontSize = MIN_ALLOWED_FONT_SIZE;
-                    break;
-            }
-            break;
-        case UpdateFontSizeType.increment:
-            switch (true) {
-                case currentFontSize < MIN_ALLOWED_FONT_SIZE:
-                    updatedFontSize = MIN_ALLOWED_FONT_SIZE;
-                    break;
-                case currentFontSize < 12:
-                    updatedFontSize += 1;
-                    break;
-                case currentFontSize < 20:
-                    updatedFontSize += 2;
-                    break;
-                case currentFontSize < 36:
-                    updatedFontSize += 4;
-                    break;
-                case currentFontSize <= 60:
-                    updatedFontSize += 12;
-                    break;
-                default:
-                    updatedFontSize = MAX_ALLOWED_FONT_SIZE;
-                    break;
-            }
-            break;
-        default:
-            break;
-    }
-    return updatedFontSize;
-};
-/**
- * Patches the selection with the updated font size.
- */
-export const updateFontSizeInSelection = (editor, newFontSize, updateType) => {
-    const getNextFontSize = (prevFontSize) => {
-        if (!prevFontSize) {
-            prevFontSize = `${DEFAULT_FONT_SIZE}px`;
-        }
-        prevFontSize = prevFontSize.slice(0, -2);
-        const nextFontSize = calculateNextFontSize(Number(prevFontSize), updateType);
-        return `${nextFontSize}px`;
-    };
-    editor.update(() => {
-        if (editor.isEditable()) {
-            const selection = $getSelection();
-            if (selection !== null) {
-                $patchStyleText(selection, {
-                    'font-size': newFontSize || getNextFontSize,
-                });
-            }
-        }
-    });
-};
-export const updateFontSize = (editor, updateType, inputValue) => {
-    if (inputValue !== '') {
-        const nextFontSize = calculateNextFontSize(Number(inputValue), updateType);
-        updateFontSizeInSelection(editor, String(nextFontSize) + 'px', null);
-    }
-    else {
-        updateFontSizeInSelection(editor, null, updateType);
-    }
-};
-export const formatParagraph = (editor) => {
-    editor.update(() => {
-        const selection = $getSelection();
-        $setBlocksType(selection, () => $createParagraphNode());
-    });
-};
-export const formatHeading = (editor, blockType, headingSize) => {
-    if (blockType !== headingSize) {
-        editor.update(() => {
-            const selection = $getSelection();
-            $setBlocksType(selection, () => $createHeadingNode(headingSize));
-        });
-    }
-};
-export const formatBulletList = (editor, blockType) => {
-    if (blockType !== 'bullet') {
-        editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
-    }
-    else {
-        formatParagraph(editor);
-    }
-};
-export const formatCheckList = (editor, blockType) => {
-    if (blockType !== 'check') {
-        editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, undefined);
-    }
-    else {
-        formatParagraph(editor);
-    }
-};
-export const formatNumberedList = (editor, blockType) => {
-    if (blockType !== 'number') {
-        editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
-    }
-    else {
-        formatParagraph(editor);
-    }
-};
-export const formatQuote = (editor, blockType) => {
-    if (blockType !== 'quote') {
-        editor.update(() => {
-            const selection = $getSelection();
-            $setBlocksType(selection, () => $createQuoteNode());
-        });
-    }
-};
-export const formatCode = (editor, blockType) => {
-    if (blockType !== 'code') {
-        editor.update(() => {
-            let selection = $getSelection();
-            if (!selection) {
-                return;
-            }
-            if (!$isRangeSelection(selection) || selection.isCollapsed()) {
-                $setBlocksType(selection, () => $createCodeNode());
-            }
-            else {
-                const textContent = selection.getTextContent();
-                const codeNode = $createCodeNode();
-                selection.insertNodes([codeNode]);
-                selection = $getSelection();
-                if ($isRangeSelection(selection)) {
-                    selection.insertRawText(textContent);
-                }
-            }
-        });
-    }
-};
-export const clearFormatting = (editor) => {
-    editor.update(() => {
-        const selection = $getSelection();
-        if ($isRangeSelection(selection) || $isTableSelection(selection)) {
-            const anchor = selection.anchor;
-            const focus = selection.focus;
-            const nodes = selection.getNodes();
-            const extractedNodes = selection.extract();
-            if (anchor.key === focus.key && anchor.offset === focus.offset) {
-                return;
-            }
-            nodes.forEach((node, idx) => {
-                // We split the first and last node by the selection
-                // So that we don't format unselected text inside those nodes
-                if ($isTextNode(node)) {
-                    // Use a separate variable to ensure TS does not lose the refinement
-                    let textNode = node;
-                    if (idx === 0 && anchor.offset !== 0) {
-                        textNode = textNode.splitText(anchor.offset)[1] || textNode;
-                    }
-                    if (idx === nodes.length - 1) {
-                        textNode = textNode.splitText(focus.offset)[0] || textNode;
-                    }
-                    /**
-                     * If the selected text has one format applied
-                     * selecting a portion of the text, could
-                     * clear the format to the wrong portion of the text.
-                     *
-                     * The cleared text is based on the length of the selected text.
-                     */
-                    // We need this in case the selected text only has one format
-                    const extractedTextNode = extractedNodes[0];
-                    if (nodes.length === 1 && $isTextNode(extractedTextNode)) {
-                        textNode = extractedTextNode;
-                    }
-                    if (textNode.__style !== '') {
-                        textNode.setStyle('');
-                    }
-                    if (textNode.__format !== 0) {
-                        textNode.setFormat(0);
-                    }
-                    const nearestBlockElement = $getNearestBlockElementAncestorOrThrow(textNode);
-                    if (nearestBlockElement.__format !== 0) {
-                        nearestBlockElement.setFormat('');
-                    }
-                    if (nearestBlockElement.__indent !== 0) {
-                        nearestBlockElement.setIndent(0);
-                    }
-                    node = textNode;
-                }
-                else if ($isHeadingNode(node) || $isQuoteNode(node)) {
-                    node.replace($createParagraphNode(), true);
-                }
-                else if ($isDecoratorBlockNode(node)) {
-                    node.setFormat('');
-                }
-            });
-        }
-    });
-};

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

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

package/lib/plugins/TreeViewPlugin/index.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { TreeView } from '@lexical/react/LexicalTreeView';
-export default function TreeViewPlugin() {
-    const [editor] = useLexicalComposerContext();
-    return (_jsx(TreeView, { viewClassName: "tree-view-output", treeTypeButtonClassName: "debug-treetype-button", timeTravelPanelClassName: "debug-timetravel-panel", timeTravelButtonClassName: "debug-timetravel-button", timeTravelPanelSliderClassName: "debug-timetravel-panel-slider", timeTravelPanelButtonClassName: "debug-timetravel-panel-button", editor: editor }));
-}

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

@@ -1,4 +0,0 @@
-import type { JSX } from 'react';
-import { LexicalCommand } from 'lexical';
-export declare const INSERT_TWEET_COMMAND: LexicalCommand<string>;
-export default function TwitterPlugin(): JSX.Element | null;

package/lib/plugins/TwitterPlugin/index.js

@@ -1,24 +0,0 @@
-/*
- * Copyright (c) 2023-2025 Datalayer, Inc.
- * Distributed under the terms of the MIT License.
- */
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { $insertNodeToNearestRoot } from '@lexical/utils';
-import { COMMAND_PRIORITY_EDITOR, createCommand } from 'lexical';
-import { useEffect } from 'react';
-import { $createTweetNode, TweetNode } from '../../nodes/TweetNode';
-export const INSERT_TWEET_COMMAND = createCommand('INSERT_TWEET_COMMAND');
-export default function TwitterPlugin() {
-    const [editor] = useLexicalComposerContext();
-    useEffect(() => {
-        if (!editor.hasNodes([TweetNode])) {
-            throw new Error('TwitterPlugin: TweetNode not registered on editor');
-        }
-        return editor.registerCommand(INSERT_TWEET_COMMAND, (payload) => {
-            const tweetNode = $createTweetNode(payload);
-            $insertNodeToNearestRoot(tweetNode);
-            return true;
-        }, COMMAND_PRIORITY_EDITOR);
-    }, [editor]);
-    return null;
-}

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

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

package/lib/plugins/TypingPerfPlugin/index.js

@@ -1,97 +0,0 @@
-/*
- * Copyright (c) 2023-2025 Datalayer, Inc.
- * Distributed under the terms of the MIT License.
- */
-import { useEffect } from 'react';
-import useReport from '../../hooks/useReport';
-const validInputTypes = new Set([
-    'insertText',
-    'insertCompositionText',
-    'insertFromComposition',
-    'insertLineBreak',
-    'insertParagraph',
-    'deleteCompositionText',
-    'deleteContentBackward',
-    'deleteByComposition',
-    'deleteContent',
-    'deleteContentForward',
-    'deleteWordBackward',
-    'deleteWordForward',
-    'deleteHardLineBackward',
-    'deleteSoftLineBackward',
-    'deleteHardLineForward',
-    'deleteSoftLineForward',
-]);
-export default function TypingPerfPlugin() {
-    const report = useReport();
-    useEffect(() => {
-        let start = 0;
-        let timerId;
-        let keyPressTimerId;
-        let log = [];
-        let invalidatingEvent = false;
-        const measureEventEnd = function logKeyPress() {
-            if (keyPressTimerId != null) {
-                if (invalidatingEvent) {
-                    invalidatingEvent = false;
-                }
-                else {
-                    log.push(performance.now() - start);
-                }
-                clearTimeout(keyPressTimerId);
-                keyPressTimerId = null;
-            }
-        };
-        const measureEventStart = function measureEvent() {
-            if (timerId != null) {
-                clearTimeout(timerId);
-                timerId = null;
-            }
-            // We use a setTimeout(0) instead of requestAnimationFrame, due to
-            // inconsistencies between the sequencing of rAF in different browsers.
-            keyPressTimerId = setTimeout(measureEventEnd, 0);
-            // Schedule a timer to report the results.
-            timerId = setTimeout(() => {
-                const total = log.reduce((a, b) => a + b, 0);
-                const reportedText = 'Typing Perf: ' + Math.round((total / log.length) * 100) / 100 + 'ms';
-                report(reportedText);
-                log = [];
-            }, 2000);
-            // Make the time after we do the previous logic, so we don't measure the overhead
-            // for it all.
-            start = performance.now();
-        };
-        const beforeInputHandler = function beforeInputHandler(event) {
-            if (!validInputTypes.has(event.inputType) || invalidatingEvent) {
-                invalidatingEvent = false;
-                return;
-            }
-            measureEventStart();
-        };
-        const keyDownHandler = function keyDownHandler(event) {
-            const key = event.key;
-            if (key === 'Backspace' || key === 'Enter') {
-                measureEventStart();
-            }
-        };
-        const pasteHandler = function pasteHandler() {
-            invalidatingEvent = true;
-        };
-        const cutHandler = function cutHandler() {
-            invalidatingEvent = true;
-        };
-        window.addEventListener('keydown', keyDownHandler, true);
-        window.addEventListener('selectionchange', measureEventEnd, true);
-        window.addEventListener('beforeinput', beforeInputHandler, true);
-        window.addEventListener('paste', pasteHandler, true);
-        window.addEventListener('cut', cutHandler, true);
-        return () => {
-            window.removeEventListener('keydown', keyDownHandler, true);
-            window.removeEventListener('selectionchange', measureEventEnd, true);
-            window.removeEventListener('beforeinput', beforeInputHandler, true);
-            window.removeEventListener('paste', pasteHandler, true);
-            window.removeEventListener('cut', cutHandler, true);
-        };
-    }, [report]);
-    return null;
-}

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

@@ -1,4 +0,0 @@
-import type { JSX } from 'react';
-import { LexicalCommand } from 'lexical';
-export declare const INSERT_YOUTUBE_COMMAND: LexicalCommand<string>;
-export default function YouTubePlugin(): JSX.Element | null;

package/lib/plugins/YouTubePlugin/index.js

@@ -1,24 +0,0 @@
-/*
- * Copyright (c) 2023-2025 Datalayer, Inc.
- * Distributed under the terms of the MIT License.
- */
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { $insertNodeToNearestRoot } from '@lexical/utils';
-import { COMMAND_PRIORITY_EDITOR, createCommand } from 'lexical';
-import { useEffect } from 'react';
-import { $createYouTubeNode, YouTubeNode } from '../../nodes/YouTubeNode';
-export const INSERT_YOUTUBE_COMMAND = createCommand('INSERT_YOUTUBE_COMMAND');
-export default function YouTubePlugin() {
-    const [editor] = useLexicalComposerContext();
-    useEffect(() => {
-        if (!editor.hasNodes([YouTubeNode])) {
-            throw new Error('YouTubePlugin: YouTubeNode not registered on editor');
-        }
-        return editor.registerCommand(INSERT_YOUTUBE_COMMAND, (payload) => {
-            const youTubeNode = $createYouTubeNode(payload);
-            $insertNodeToNearestRoot(youTubeNode);
-            return true;
-        }, COMMAND_PRIORITY_EDITOR);
-    }, [editor]);
-    return null;
-}

package/lib/server/validation.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/server/validation.js

@@ -1,115 +0,0 @@
-/*
- * Copyright (c) 2023-2025 Datalayer, Inc.
- * Distributed under the terms of the MIT License.
- */
-import { createHeadlessEditor } from '@lexical/headless';
-import { $isMarkNode, $unwrapMarkNode } from '@lexical/mark';
-import * as http from 'http';
-import { $getRoot, $isElementNode } from 'lexical';
-import * as url from 'url';
-import PlaygroundNodes from '../nodes/PlaygroundNodes';
-const hostname = 'localhost';
-const port = 1235;
-let stringifiedEditorStateJSON = '';
-global.__DEV__ = true;
-const editor = createHeadlessEditor({
-    namespace: 'validation',
-    nodes: [...PlaygroundNodes],
-    onError: (error) => {
-        console.error(error);
-    },
-});
-const getJSONData = (req) => {
-    const body = [];
-    return new Promise((resolve) => {
-        req
-            .on('data', (chunk) => {
-            body.push(chunk);
-        })
-            .on('end', () => {
-            resolve(Buffer.concat(body).toString());
-        })
-            .on('error', (error) => {
-            // eslint-disable-next-line no-console
-            console.log(error);
-        });
-    });
-};
-const $sanitizeNode = (node) => {
-    if ($isMarkNode(node)) {
-        $unwrapMarkNode(node);
-        return;
-    }
-    if ($isElementNode(node)) {
-        const children = node.getChildren();
-        for (const child of children) {
-            $sanitizeNode(child);
-        }
-    }
-};
-const validateEditorState = async (stringifiedJSON) => {
-    if (stringifiedEditorStateJSON === stringifiedJSON) {
-        return true;
-    }
-    const prevEditorState = editor.getEditorState();
-    const nextEditorState = editor.parseEditorState(stringifiedJSON);
-    editor.setEditorState(nextEditorState);
-    editor.update(() => {
-        const root = $getRoot();
-        $sanitizeNode(root);
-    });
-    await Promise.resolve().then();
-    const assertion = JSON.stringify(editor.getEditorState().toJSON());
-    const success = assertion === stringifiedEditorStateJSON;
-    if (success) {
-        // eslint-disable-next-line no-console
-        console.log('Editor state updated successfully.');
-        editor.setEditorState(nextEditorState);
-        stringifiedEditorStateJSON = assertion;
-    }
-    else {
-        // eslint-disable-next-line no-console
-        console.log('Editor state was rejected!');
-        editor.setEditorState(prevEditorState);
-    }
-    return success;
-};
-const server = http.createServer(async (req, res) => {
-    const pathname = url.parse(req.url).pathname;
-    const { method } = req;
-    res.setHeader('Content-Type', 'application/json');
-    res.setHeader('Access-Control-Allow-Origin', '*');
-    res.setHeader('Access-Control-Request-Method', '*');
-    res.setHeader('Access-Control-Allow-Methods', 'OPTIONS, POST, GET');
-    res.setHeader('Access-Control-Allow-Headers', '*');
-    if (method === 'OPTIONS') {
-        res.end();
-        return;
-    }
-    if (method === 'POST' && pathname === '/setEditorState') {
-        const stringifiedJSON = await getJSONData(req);
-        const editorState = editor.parseEditorState(stringifiedJSON);
-        editor.setEditorState(editorState);
-        stringifiedEditorStateJSON = stringifiedJSON;
-        res.statusCode = 200;
-        res.end();
-    }
-    else if (method === 'POST' && pathname === '/validateEditorState') {
-        const stringifiedJSON = await getJSONData(req);
-        if (await validateEditorState(stringifiedJSON)) {
-            res.statusCode = 200;
-        }
-        else {
-            res.statusCode = 403;
-        }
-        res.end();
-    }
-    else {
-        res.statusCode = 404;
-        res.end();
-    }
-});
-server.listen(port, hostname, () => {
-    // eslint-disable-next-line no-console
-    console.log(`Read-only validation server running at http://${hostname}:${port}/`);
-});

package/lib/setupEnv.d.ts

@@ -1,2 +0,0 @@
-declare const _default: Record<"useYjs" | "disableBeforeInput" | "emptyEditor" | "hasLinkAttributes" | "isAutocomplete" | "isCharLimit" | "isCharLimitUtf8" | "isCodeHighlighted" | "isCodeShiki" | "isCollab" | "isMaxLength" | "isRichText" | "listStrictIndent" | "measureTypingPerf" | "selectionAlwaysOnDisplay" | "shouldAllowHighlightingWithBrackets" | "shouldPreserveNewLinesInMarkdown" | "shouldUseLexicalContextMenu" | "showNestedEditorTreeView" | "showTableOfContents" | "showTreeView" | "tableCellBackgroundColor" | "tableCellMerge" | "tableHorizontalScroll" | "debug", boolean>;
-export default _default;

package/lib/setupEnv.js

@@ -1,29 +0,0 @@
-/*
- * Copyright (c) 2023-2025 Datalayer, Inc.
- * Distributed under the terms of the MIT License.
- */
-import { INITIAL_SETTINGS } from './appSettings';
-// Export a function so this is not tree-shaken,
-// but evaluate it immediately so it executes before
-// lexical computes CAN_USE_BEFORE_INPUT
-export default (() => {
-    // override default options with query parameters if any
-    const urlSearchParams = new URLSearchParams(window.location.search);
-    for (const param of Object.keys(INITIAL_SETTINGS)) {
-        if (urlSearchParams.has(param)) {
-            try {
-                const value = JSON.parse(urlSearchParams.get(param) ?? 'true');
-                INITIAL_SETTINGS[param] = Boolean(value);
-            }
-            catch (error) {
-                console.warn(`Unable to parse query parameter "${param}"`);
-            }
-        }
-    }
-    if (INITIAL_SETTINGS.disableBeforeInput) {
-        delete window.InputEvent.prototype.getTargetRanges;
-    }
-    // @ts-ignore
-    window.EXCALIDRAW_ASSET_PATH = process.env.EXCALIDRAW_ASSET_PATH;
-    return INITIAL_SETTINGS;
-})();

package/lib/themes/CommentEditorTheme.d.ts

@@ -1,4 +0,0 @@
-import type { EditorThemeClasses } from 'lexical';
-import './CommentEditorTheme.css';
-declare const theme: EditorThemeClasses;
-export default theme;

package/lib/themes/CommentEditorTheme.js

@@ -1,11 +0,0 @@
-/*
- * Copyright (c) 2023-2025 Datalayer, Inc.
- * Distributed under the terms of the MIT License.
- */
-import './CommentEditorTheme.css';
-import baseTheme from './PlaygroundEditorTheme';
-const theme = {
-    ...baseTheme,
-    paragraph: 'CommentEditorTheme__paragraph',
-};
-export default theme;

package/lib/themes/PlaygroundEditorTheme.d.ts

@@ -1,4 +0,0 @@
-import type { EditorThemeClasses } from 'lexical';
-import './PlaygroundEditorTheme.css';
-declare const theme: EditorThemeClasses;
-export default theme;