@datalayer/lexical-loro 0.0.7 → 0.1.0

package/lib/plugins/ToolbarPlugin/utils.js

@@ -0,0 +1,243 @@
+/**
+ * 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

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

package/lib/plugins/TreeViewPlugin/index.js

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

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

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

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

package/lib/plugins/TypingPerfPlugin/index.js

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

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

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

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

package/lib/server/validation.js

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

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

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

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

package/lib/themes/CommentEditorTheme.js

@@ -0,0 +1,7 @@
+import './CommentEditorTheme.css';
+import baseTheme from './PlaygroundEditorTheme';
+const theme = {
+    ...baseTheme,
+    paragraph: 'CommentEditorTheme__paragraph',
+};
+export default theme;

package/lib/themes/PlaygroundEditorTheme.d.ts

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