@datalayer/lexical-loro 0.0.7 → 0.1.0

package/lib/plugins/TablePlugin.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { INSERT_TABLE_COMMAND, TableCellNode, TableNode, TableRowNode, } from '@lexical/table';
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import Button from '../ui/Button';
+import { DialogActions } from '../ui/Dialog';
+import TextInput from '../ui/TextInput';
+export const CellContext = createContext({
+    cellEditorConfig: null,
+    cellEditorPlugins: null,
+    set: () => {
+        // Empty
+    },
+});
+export function TableContext({ children }) {
+    const [contextValue, setContextValue] = useState({
+        cellEditorConfig: null,
+        cellEditorPlugins: null,
+    });
+    return (_jsx(CellContext.Provider, { value: useMemo(() => ({
+            cellEditorConfig: contextValue.cellEditorConfig,
+            cellEditorPlugins: contextValue.cellEditorPlugins,
+            set: (cellEditorConfig, cellEditorPlugins) => {
+                setContextValue({ cellEditorConfig, cellEditorPlugins });
+            },
+        }), [contextValue.cellEditorConfig, contextValue.cellEditorPlugins]), children: children }));
+}
+export function InsertTableDialog({ activeEditor, onClose, }) {
+    const [rows, setRows] = useState('5');
+    const [columns, setColumns] = useState('5');
+    const [isDisabled, setIsDisabled] = useState(true);
+    useEffect(() => {
+        const row = Number(rows);
+        const column = Number(columns);
+        if (row && row > 0 && row <= 500 && column && column > 0 && column <= 50) {
+            setIsDisabled(false);
+        }
+        else {
+            setIsDisabled(true);
+        }
+    }, [rows, columns]);
+    const onClick = () => {
+        activeEditor.dispatchCommand(INSERT_TABLE_COMMAND, {
+            columns,
+            rows,
+        });
+        onClose();
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(TextInput, { placeholder: '# of rows (1-500)', label: "Rows", onChange: setRows, value: rows, "data-test-id": "table-modal-rows", type: "number" }), _jsx(TextInput, { placeholder: '# of columns (1-50)', label: "Columns", onChange: setColumns, value: columns, "data-test-id": "table-modal-columns", type: "number" }), _jsx(DialogActions, { "data-test-id": "table-model-confirm-insert", children: _jsx(Button, { disabled: isDisabled, onClick: onClick, children: "Confirm" }) })] }));
+}
+export function TablePlugin({ cellEditorConfig, children, }) {
+    const [editor] = useLexicalComposerContext();
+    const cellContext = useContext(CellContext);
+    useEffect(() => {
+        if (!editor.hasNodes([TableNode, TableRowNode, TableCellNode])) {
+            throw new Error('TablePlugin: TableNode, TableRowNode, or TableCellNode is not registered on editor');
+        }
+    }, [editor]);
+    useEffect(() => {
+        cellContext.set(cellEditorConfig, children);
+    }, [cellContext, cellEditorConfig, children]);
+    return null;
+}

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

@@ -0,0 +1,3 @@
+import type { JSX } from 'react';
+export declare function isSelectAll(event: KeyboardEvent): boolean;
+export default function TestRecorderPlugin(): JSX.Element;

package/lib/plugins/TestRecorderPlugin/index.js

@@ -0,0 +1,346 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { IS_APPLE } from '@lexical/utils';
+import { $createParagraphNode, $createTextNode, $getRoot, getDOMSelection, } from 'lexical';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+const copy = (text) => {
+    const textArea = document.createElement('textarea');
+    textArea.value = text || '';
+    textArea.style.position = 'absolute';
+    textArea.style.opacity = '0';
+    document.body?.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+    try {
+        const result = document.execCommand('copy');
+        // eslint-disable-next-line no-console
+        console.log(result);
+    }
+    catch (error) {
+        console.error(error);
+    }
+    document.body?.removeChild(textArea);
+};
+const download = (filename, text) => {
+    const a = document.createElement('a');
+    a.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text || ''));
+    a.setAttribute('download', filename);
+    a.style.display = 'none';
+    document.body?.appendChild(a);
+    a.click();
+    document.body?.removeChild(a);
+};
+const formatStep = (step) => {
+    const formatOneStep = (name, value) => {
+        switch (name) {
+            case 'click': {
+                return `      await page.mouse.click(${value.x}, ${value.y});`;
+            }
+            case 'press': {
+                return `      await page.keyboard.press('${value}');`;
+            }
+            case 'keydown': {
+                return `      await page.keyboard.keydown('${value}');`;
+            }
+            case 'keyup': {
+                return `      await page.keyboard.keyup('${value}');`;
+            }
+            case 'type': {
+                return `      await page.keyboard.type('${value}');`;
+            }
+            case 'selectAll': {
+                return `      await selectAll(page);`;
+            }
+            case 'snapshot': {
+                return `      await assertHTMLSnapshot(page);
+      await assertSelection(page, {
+        anchorPath: [${value.anchorPath.toString()}],
+        anchorOffset: ${value.anchorOffset},
+        focusPath: [${value.focusPath.toString()}],
+        focusOffset: ${value.focusOffset},
+      });
+`;
+            }
+            default:
+                return ``;
+        }
+    };
+    const formattedStep = formatOneStep(step.name, step.value);
+    switch (step.count) {
+        case 1:
+            return formattedStep;
+        case 2:
+            return [formattedStep, formattedStep].join(`\n`);
+        default:
+            return `      await repeat(${step.count}, async () => {
+  ${formattedStep}
+      );`;
+    }
+};
+export function isSelectAll(event) {
+    return (event.key.toLowerCase() === 'a' &&
+        (IS_APPLE ? event.metaKey : event.ctrlKey));
+}
+// stolen from LexicalSelection-test
+function sanitizeSelection(selection) {
+    const { anchorNode, focusNode } = selection;
+    let { anchorOffset, focusOffset } = selection;
+    if (anchorOffset !== 0) {
+        anchorOffset--;
+    }
+    if (focusOffset !== 0) {
+        focusOffset--;
+    }
+    return { anchorNode, anchorOffset, focusNode, focusOffset };
+}
+function getPathFromNodeToEditor(node, rootElement) {
+    let currentNode = node;
+    const path = [];
+    while (currentNode !== rootElement) {
+        if (currentNode !== null && currentNode !== undefined) {
+            path.unshift(Array.from(currentNode?.parentNode?.childNodes ?? []).indexOf(currentNode));
+        }
+        currentNode = currentNode?.parentNode;
+    }
+    return path;
+}
+const keyPresses = new Set([
+    'Enter',
+    'Backspace',
+    'Delete',
+    'Escape',
+    'ArrowLeft',
+    'ArrowRight',
+    'ArrowUp',
+    'ArrowDown',
+]);
+function useTestRecorder(editor) {
+    const [steps, setSteps] = useState([]);
+    const [isRecording, setIsRecording] = useState(false);
+    const [, setCurrentInnerHTML] = useState('');
+    const [templatedTest, setTemplatedTest] = useState('');
+    const previousSelectionRef = useRef(null);
+    const skipNextSelectionChangeRef = useRef(false);
+    const preRef = useRef(null);
+    const getCurrentEditor = useCallback(() => {
+        return editor;
+    }, [editor]);
+    const generateTestContent = useCallback(() => {
+        const rootElement = editor.getRootElement();
+        const browserSelection = getDOMSelection(editor._window);
+        if (rootElement == null ||
+            browserSelection == null ||
+            browserSelection.anchorNode == null ||
+            browserSelection.focusNode == null ||
+            !rootElement.contains(browserSelection.anchorNode) ||
+            !rootElement.contains(browserSelection.focusNode)) {
+            return null;
+        }
+        return `
+import {
+  initializeE2E,
+  assertHTMLSnapshot,
+  assertSelection,
+  repeat,
+} from '../utils';
+import {selectAll} from '../keyboardShortcuts';
+import { RangeSelection } from 'lexical';
+import { NodeSelection } from 'lexical';
+
+describe('Test case', () => {
+  initializeE2E((e2e) => {
+    it('Should pass this test', async () => {
+      const {page} = e2e;
+
+      await page.focus('div[contenteditable="true"]');
+${steps.map(formatStep).join(`\n`)}
+    });
+});
+    `;
+    }, [editor, steps]);
+    // just a wrapper around inserting new actions so that we can
+    // coalesce some actions like insertText/moveNativeSelection
+    const pushStep = useCallback((name, value) => {
+        setSteps((currentSteps) => {
+            // trying to group steps
+            const currentIndex = steps.length - 1;
+            const lastStep = steps[currentIndex];
+            if (lastStep) {
+                if (lastStep.name === name) {
+                    if (name === 'type') {
+                        // for typing events we just append the text
+                        return [
+                            ...steps.slice(0, currentIndex),
+                            { ...lastStep, value: lastStep.value + value },
+                        ];
+                    }
+                    else {
+                        // for other events we bump the counter if their values are the same
+                        if (lastStep.value === value) {
+                            return [
+                                ...steps.slice(0, currentIndex),
+                                { ...lastStep, count: lastStep.count + 1 },
+                            ];
+                        }
+                    }
+                }
+            }
+            // could not group, just append a new one
+            return [...currentSteps, { count: 1, name, value }];
+        });
+    }, [steps, setSteps]);
+    useLayoutEffect(() => {
+        const onKeyDown = (event) => {
+            if (!isRecording) {
+                return;
+            }
+            const key = event.key;
+            if (isSelectAll(event)) {
+                pushStep('selectAll', '');
+            }
+            else if (keyPresses.has(key)) {
+                pushStep('press', event.key);
+            }
+            else if ([...key].length > 1) {
+                pushStep('keydown', event.key);
+            }
+            else {
+                pushStep('type', event.key);
+            }
+        };
+        const onKeyUp = (event) => {
+            if (!isRecording) {
+                return;
+            }
+            const key = event.key;
+            if (!keyPresses.has(key) && [...key].length > 1) {
+                pushStep('keyup', event.key);
+            }
+        };
+        return editor.registerRootListener((rootElement, prevRootElement) => {
+            if (prevRootElement !== null) {
+                prevRootElement.removeEventListener('keydown', onKeyDown);
+                prevRootElement.removeEventListener('keyup', onKeyUp);
+            }
+            if (rootElement !== null) {
+                rootElement.addEventListener('keydown', onKeyDown);
+                rootElement.addEventListener('keyup', onKeyUp);
+            }
+        });
+    }, [editor, isRecording, pushStep]);
+    useLayoutEffect(() => {
+        if (preRef.current) {
+            preRef.current.scrollTo(0, preRef.current.scrollHeight);
+        }
+    }, [generateTestContent]);
+    useEffect(() => {
+        if (steps) {
+            const testContent = generateTestContent();
+            if (testContent !== null) {
+                setTemplatedTest(testContent);
+            }
+            if (preRef.current) {
+                preRef.current.scrollTo(0, preRef.current.scrollHeight);
+            }
+        }
+    }, [generateTestContent, steps]);
+    useEffect(() => {
+        const removeUpdateListener = editor.registerUpdateListener(({ editorState, dirtyLeaves, dirtyElements }) => {
+            if (!isRecording) {
+                return;
+            }
+            const currentSelection = editorState._selection;
+            const previousSelection = previousSelectionRef.current;
+            const skipNextSelectionChange = skipNextSelectionChangeRef.current;
+            if (previousSelection !== currentSelection) {
+                if (dirtyLeaves.size === 0 &&
+                    dirtyElements.size === 0 &&
+                    !skipNextSelectionChange) {
+                    const browserSelection = getDOMSelection(editor._window);
+                    if (browserSelection &&
+                        (browserSelection.anchorNode == null ||
+                            browserSelection.focusNode == null)) {
+                        return;
+                    }
+                }
+                previousSelectionRef.current = currentSelection;
+            }
+            skipNextSelectionChangeRef.current = false;
+            const testContent = generateTestContent();
+            if (testContent !== null) {
+                setTemplatedTest(testContent);
+            }
+        });
+        return removeUpdateListener;
+    }, [editor, generateTestContent, isRecording, pushStep]);
+    // save innerHTML
+    useEffect(() => {
+        if (!isRecording) {
+            return;
+        }
+        const removeUpdateListener = editor.registerUpdateListener(() => {
+            const rootElement = editor.getRootElement();
+            if (rootElement !== null) {
+                setCurrentInnerHTML(rootElement?.innerHTML);
+            }
+        });
+        return removeUpdateListener;
+    }, [editor, isRecording]);
+    // clear editor and start recording
+    const toggleEditorSelection = useCallback((currentEditor) => {
+        if (!isRecording) {
+            currentEditor.update(() => {
+                const root = $getRoot();
+                root.clear();
+                const text = $createTextNode();
+                root.append($createParagraphNode().append(text));
+                text.select();
+            });
+            setSteps([]);
+        }
+        setIsRecording((currentIsRecording) => !currentIsRecording);
+    }, [isRecording]);
+    const onSnapshotClick = useCallback(() => {
+        if (!isRecording) {
+            return;
+        }
+        const browserSelection = getDOMSelection(getCurrentEditor()._window);
+        if (browserSelection === null ||
+            browserSelection.anchorNode == null ||
+            browserSelection.focusNode == null) {
+            return;
+        }
+        const { anchorNode, anchorOffset, focusNode, focusOffset } = sanitizeSelection(browserSelection);
+        const rootElement = getCurrentEditor().getRootElement();
+        let anchorPath;
+        if (anchorNode !== null) {
+            anchorPath = getPathFromNodeToEditor(anchorNode, rootElement);
+        }
+        let focusPath;
+        if (focusNode !== null) {
+            focusPath = getPathFromNodeToEditor(focusNode, rootElement);
+        }
+        pushStep('snapshot', {
+            anchorNode,
+            anchorOffset,
+            anchorPath,
+            focusNode,
+            focusOffset,
+            focusPath,
+        });
+    }, [pushStep, isRecording, getCurrentEditor]);
+    const onCopyClick = useCallback(() => {
+        copy(generateTestContent());
+    }, [generateTestContent]);
+    const onDownloadClick = useCallback(() => {
+        download('test.js', generateTestContent());
+    }, [generateTestContent]);
+    const button = (_jsx("button", { id: "test-recorder-button", className: `editor-dev-button ${isRecording ? 'active' : ''}`, onClick: () => toggleEditorSelection(getCurrentEditor()), title: isRecording ? 'Disable test recorder' : 'Enable test recorder' }));
+    const output = isRecording ? (_jsxs("div", { className: "test-recorder-output", children: [_jsxs("div", { className: "test-recorder-toolbar", children: [_jsx("button", { className: "test-recorder-button", id: "test-recorder-button-snapshot", title: "Insert snapshot", onClick: onSnapshotClick }), _jsx("button", { className: "test-recorder-button", id: "test-recorder-button-copy", title: "Copy to clipboard", onClick: onCopyClick }), _jsx("button", { className: "test-recorder-button", id: "test-recorder-button-download", title: "Download as a file", onClick: onDownloadClick })] }), _jsx("pre", { id: "test-recorder", ref: preRef, children: templatedTest })] })) : null;
+    return [button, output];
+}
+export default function TestRecorderPlugin() {
+    const [editor] = useLexicalComposerContext();
+    const [testRecorderButton, testRecorderOutput] = useTestRecorder(editor);
+    return (_jsxs(_Fragment, { children: [testRecorderButton, testRecorderOutput] }));
+}

package/lib/plugins/ToolbarPlugin/fontSize.d.ts

@@ -0,0 +1,9 @@
+import './fontSize.css';
+import { LexicalEditor } from 'lexical';
+export declare function parseFontSizeForToolbar(input: string): string;
+export declare function parseAllowedFontSize(input: string): string;
+export default function FontSize({ selectionFontSize, disabled, editor, }: {
+    selectionFontSize: string;
+    disabled: boolean;
+    editor: LexicalEditor;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/plugins/ToolbarPlugin/fontSize.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import './fontSize.css';
+import * as React from 'react';
+import { MAX_ALLOWED_FONT_SIZE, MIN_ALLOWED_FONT_SIZE, } from '../../context/ToolbarContext';
+import { SHORTCUTS } from '../ShortcutsPlugin/shortcuts';
+import { updateFontSize, updateFontSizeInSelection, UpdateFontSizeType, } from './utils';
+function parseFontSize(input) {
+    const match = input.match(/^(\d+(?:\.\d+)?)(px|pt)$/);
+    return match ? [Number(match[1]), match[2]] : null;
+}
+function normalizeToPx(fontSize, unit) {
+    return unit === 'pt' ? Math.round((fontSize * 4) / 3) : fontSize;
+}
+function isValidFontSize(fontSizePx) {
+    return (fontSizePx >= MIN_ALLOWED_FONT_SIZE && fontSizePx <= MAX_ALLOWED_FONT_SIZE);
+}
+export function parseFontSizeForToolbar(input) {
+    const parsed = parseFontSize(input);
+    if (!parsed) {
+        return '';
+    }
+    const [fontSize, unit] = parsed;
+    const fontSizePx = normalizeToPx(fontSize, unit);
+    return `${fontSizePx}px`;
+}
+export function parseAllowedFontSize(input) {
+    const parsed = parseFontSize(input);
+    if (!parsed) {
+        return '';
+    }
+    const [fontSize, unit] = parsed;
+    const fontSizePx = normalizeToPx(fontSize, unit);
+    return isValidFontSize(fontSizePx) ? input : '';
+}
+export default function FontSize({ selectionFontSize, disabled, editor, }) {
+    const [inputValue, setInputValue] = React.useState(selectionFontSize);
+    const [inputChangeFlag, setInputChangeFlag] = React.useState(false);
+    const handleKeyPress = (e) => {
+        const inputValueNumber = Number(inputValue);
+        if (e.key === 'Tab') {
+            return;
+        }
+        if (['e', 'E', '+', '-'].includes(e.key) || isNaN(inputValueNumber)) {
+            e.preventDefault();
+            setInputValue('');
+            return;
+        }
+        setInputChangeFlag(true);
+        if (e.key === 'Enter' || e.key === 'Escape') {
+            e.preventDefault();
+            updateFontSizeByInputValue(inputValueNumber);
+        }
+    };
+    const handleInputBlur = () => {
+        if (inputValue !== '' && inputChangeFlag) {
+            const inputValueNumber = Number(inputValue);
+            updateFontSizeByInputValue(inputValueNumber);
+        }
+    };
+    const updateFontSizeByInputValue = (inputValueNumber) => {
+        let updatedFontSize = inputValueNumber;
+        if (inputValueNumber > MAX_ALLOWED_FONT_SIZE) {
+            updatedFontSize = MAX_ALLOWED_FONT_SIZE;
+        }
+        else if (inputValueNumber < MIN_ALLOWED_FONT_SIZE) {
+            updatedFontSize = MIN_ALLOWED_FONT_SIZE;
+        }
+        setInputValue(String(updatedFontSize));
+        updateFontSizeInSelection(editor, String(updatedFontSize) + 'px', null);
+        setInputChangeFlag(false);
+    };
+    React.useEffect(() => {
+        setInputValue(selectionFontSize);
+    }, [selectionFontSize]);
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", disabled: disabled ||
+                    (selectionFontSize !== '' &&
+                        Number(inputValue) <= MIN_ALLOWED_FONT_SIZE), onClick: () => updateFontSize(editor, UpdateFontSizeType.decrement, inputValue), className: "toolbar-item font-decrement", "aria-label": "Decrease font size", title: `Decrease font size (${SHORTCUTS.DECREASE_FONT_SIZE})`, children: _jsx("i", { className: "format minus-icon" }) }), _jsx("input", { type: "number", title: "Font size", value: inputValue, disabled: disabled, className: "toolbar-item font-size-input", min: MIN_ALLOWED_FONT_SIZE, max: MAX_ALLOWED_FONT_SIZE, onChange: (e) => setInputValue(e.target.value), onKeyDown: handleKeyPress, onBlur: handleInputBlur }), _jsx("button", { type: "button", disabled: disabled ||
+                    (selectionFontSize !== '' &&
+                        Number(inputValue) >= MAX_ALLOWED_FONT_SIZE), onClick: () => updateFontSize(editor, UpdateFontSizeType.increment, inputValue), className: "toolbar-item font-increment", "aria-label": "Increase font size", title: `Increase font size (${SHORTCUTS.INCREASE_FONT_SIZE})`, children: _jsx("i", { className: "format add-icon" }) })] }));
+}

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

@@ -0,0 +1,9 @@
+import type { JSX } from 'react';
+import { LexicalEditor } from 'lexical';
+import { Dispatch } from 'react';
+export default function ToolbarPlugin({ editor, activeEditor, setActiveEditor, setIsLinkEditMode, }: {
+    editor: LexicalEditor;
+    activeEditor: LexicalEditor;
+    setActiveEditor: Dispatch<LexicalEditor>;
+    setIsLinkEditMode: Dispatch<boolean>;
+}): JSX.Element;