@datalayer/lexical-loro 0.1.0 → 0.2.1

package/lib/plugins/TablePlugin.js

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

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

package/lib/plugins/TestRecorderPlugin/index.js

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

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

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

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