@datalayer/lexical-loro 0.1.0 → 0.2.2

package/lib/plugins/TableCellResizer/index.js

@@ -1,297 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import './index.css';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
-import { $computeTableMapSkipCellCheck, $getTableNodeFromLexicalNodeOrThrow, $getTableRowIndexFromTableCellNode, $isTableCellNode, $isTableRowNode, getDOMCellFromTarget, getTableElement, TableNode, } from '@lexical/table';
-import { calculateZoomLevel, mergeRegister } from '@lexical/utils';
-import { $getNearestNodeFromDOMNode, isHTMLElement, SKIP_SCROLL_INTO_VIEW_TAG, } from 'lexical';
-import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
-import { createPortal } from 'react-dom';
-const MIN_ROW_HEIGHT = 33;
-const MIN_COLUMN_WIDTH = 92;
-function TableCellResizer({ editor }) {
-    const targetRef = useRef(null);
-    const resizerRef = useRef(null);
-    const tableRectRef = useRef(null);
-    const [hasTable, setHasTable] = useState(false);
-    const pointerStartPosRef = useRef(null);
-    const [pointerCurrentPos, updatePointerCurrentPos] = useState(null);
-    const [activeCell, updateActiveCell] = useState(null);
-    const [draggingDirection, updateDraggingDirection] = useState(null);
-    const resetState = useCallback(() => {
-        updateActiveCell(null);
-        targetRef.current = null;
-        updateDraggingDirection(null);
-        pointerStartPosRef.current = null;
-        tableRectRef.current = null;
-    }, []);
-    useEffect(() => {
-        const tableKeys = new Set();
-        return mergeRegister(editor.registerMutationListener(TableNode, (nodeMutations) => {
-            for (const [nodeKey, mutation] of nodeMutations) {
-                if (mutation === 'destroyed') {
-                    tableKeys.delete(nodeKey);
-                }
-                else {
-                    tableKeys.add(nodeKey);
-                }
-            }
-            setHasTable(tableKeys.size > 0);
-        }), editor.registerNodeTransform(TableNode, (tableNode) => {
-            if (tableNode.getColWidths()) {
-                return tableNode;
-            }
-            const numColumns = tableNode.getColumnCount();
-            const columnWidth = MIN_COLUMN_WIDTH;
-            tableNode.setColWidths(Array(numColumns).fill(columnWidth));
-            return tableNode;
-        }));
-    }, [editor]);
-    useEffect(() => {
-        if (!hasTable) {
-            return;
-        }
-        const onPointerMove = (event) => {
-            const target = event.target;
-            if (!isHTMLElement(target)) {
-                return;
-            }
-            if (draggingDirection) {
-                event.preventDefault();
-                event.stopPropagation();
-                updatePointerCurrentPos({
-                    x: event.clientX,
-                    y: event.clientY,
-                });
-                return;
-            }
-            if (resizerRef.current && resizerRef.current.contains(target)) {
-                return;
-            }
-            if (targetRef.current !== target) {
-                targetRef.current = target;
-                const cell = getDOMCellFromTarget(target);
-                if (cell && activeCell !== cell) {
-                    editor.getEditorState().read(() => {
-                        const tableCellNode = $getNearestNodeFromDOMNode(cell.elem);
-                        if (!tableCellNode) {
-                            throw new Error('TableCellResizer: Table cell node not found.');
-                        }
-                        const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
-                        const tableElement = getTableElement(tableNode, editor.getElementByKey(tableNode.getKey()));
-                        if (!tableElement) {
-                            throw new Error('TableCellResizer: Table element not found.');
-                        }
-                        targetRef.current = target;
-                        tableRectRef.current = tableElement.getBoundingClientRect();
-                        updateActiveCell(cell);
-                    }, { editor });
-                }
-                else if (cell == null) {
-                    resetState();
-                }
-            }
-        };
-        const onPointerDown = (event) => {
-            const isTouchEvent = event.pointerType === 'touch';
-            if (isTouchEvent) {
-                onPointerMove(event);
-            }
-        };
-        const resizerContainer = resizerRef.current;
-        resizerContainer?.addEventListener('pointermove', onPointerMove, {
-            capture: true,
-        });
-        const removeRootListener = editor.registerRootListener((rootElement, prevRootElement) => {
-            prevRootElement?.removeEventListener('pointermove', onPointerMove);
-            prevRootElement?.removeEventListener('pointerdown', onPointerDown);
-            rootElement?.addEventListener('pointermove', onPointerMove);
-            rootElement?.addEventListener('pointerdown', onPointerDown);
-        });
-        return () => {
-            removeRootListener();
-            resizerContainer?.removeEventListener('pointermove', onPointerMove);
-        };
-    }, [activeCell, draggingDirection, editor, resetState, hasTable]);
-    const isHeightChanging = (direction) => {
-        if (direction === 'bottom') {
-            return true;
-        }
-        return false;
-    };
-    const updateRowHeight = useCallback((heightChange) => {
-        if (!activeCell) {
-            throw new Error('TableCellResizer: Expected active cell.');
-        }
-        editor.update(() => {
-            const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
-            if (!$isTableCellNode(tableCellNode)) {
-                throw new Error('TableCellResizer: Table cell node not found.');
-            }
-            const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
-            const baseRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
-            const tableRows = tableNode.getChildren();
-            // Determine if this is a full row merge by checking colspan
-            const isFullRowMerge = tableCellNode.getColSpan() === tableNode.getColumnCount();
-            // For full row merges, apply to first row. For partial merges, apply to last row
-            const tableRowIndex = isFullRowMerge
-                ? baseRowIndex
-                : baseRowIndex + tableCellNode.getRowSpan() - 1;
-            if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
-                throw new Error('Expected table cell to be inside of table row.');
-            }
-            const tableRow = tableRows[tableRowIndex];
-            if (!$isTableRowNode(tableRow)) {
-                throw new Error('Expected table row');
-            }
-            let height = tableRow.getHeight();
-            if (height === undefined) {
-                const rowCells = tableRow.getChildren();
-                height = Math.min(...rowCells.map((cell) => getCellNodeHeight(cell, editor) ?? Infinity));
-            }
-            const newHeight = Math.max(height + heightChange, MIN_ROW_HEIGHT);
-            tableRow.setHeight(newHeight);
-        }, { tag: SKIP_SCROLL_INTO_VIEW_TAG });
-    }, [activeCell, editor]);
-    const getCellNodeHeight = (cell, activeEditor) => {
-        const domCellNode = activeEditor.getElementByKey(cell.getKey());
-        return domCellNode?.clientHeight;
-    };
-    const getCellColumnIndex = (tableCellNode, tableMap) => {
-        for (let row = 0; row < tableMap.length; row++) {
-            for (let column = 0; column < tableMap[row].length; column++) {
-                if (tableMap[row][column].cell === tableCellNode) {
-                    return column;
-                }
-            }
-        }
-    };
-    const updateColumnWidth = useCallback((widthChange) => {
-        if (!activeCell) {
-            throw new Error('TableCellResizer: Expected active cell.');
-        }
-        editor.update(() => {
-            const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
-            if (!$isTableCellNode(tableCellNode)) {
-                throw new Error('TableCellResizer: Table cell node not found.');
-            }
-            const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
-            const [tableMap] = $computeTableMapSkipCellCheck(tableNode, null, null);
-            const columnIndex = getCellColumnIndex(tableCellNode, tableMap);
-            if (columnIndex === undefined) {
-                throw new Error('TableCellResizer: Table column not found.');
-            }
-            const colWidths = tableNode.getColWidths();
-            if (!colWidths) {
-                return;
-            }
-            const width = colWidths[columnIndex];
-            if (width === undefined) {
-                return;
-            }
-            const newColWidths = [...colWidths];
-            const newWidth = Math.max(width + widthChange, MIN_COLUMN_WIDTH);
-            newColWidths[columnIndex] = newWidth;
-            tableNode.setColWidths(newColWidths);
-        }, { tag: SKIP_SCROLL_INTO_VIEW_TAG });
-    }, [activeCell, editor]);
-    const pointerUpHandler = useCallback((direction) => {
-        const handler = (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            if (!activeCell) {
-                throw new Error('TableCellResizer: Expected active cell.');
-            }
-            if (pointerStartPosRef.current) {
-                const { x, y } = pointerStartPosRef.current;
-                if (activeCell === null) {
-                    return;
-                }
-                const zoom = calculateZoomLevel(event.target);
-                if (isHeightChanging(direction)) {
-                    const heightChange = (event.clientY - y) / zoom;
-                    updateRowHeight(heightChange);
-                }
-                else {
-                    const widthChange = (event.clientX - x) / zoom;
-                    updateColumnWidth(widthChange);
-                }
-                resetState();
-                document.removeEventListener('pointerup', handler);
-            }
-        };
-        return handler;
-    }, [activeCell, resetState, updateColumnWidth, updateRowHeight]);
-    const toggleResize = useCallback((direction) => (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        if (!activeCell) {
-            throw new Error('TableCellResizer: Expected active cell.');
-        }
-        pointerStartPosRef.current = {
-            x: event.clientX,
-            y: event.clientY,
-        };
-        updatePointerCurrentPos(pointerStartPosRef.current);
-        updateDraggingDirection(direction);
-        document.addEventListener('pointerup', pointerUpHandler(direction));
-    }, [activeCell, pointerUpHandler]);
-    const getResizers = useCallback(() => {
-        if (activeCell) {
-            const { height, width, top, left } = activeCell.elem.getBoundingClientRect();
-            const zoom = calculateZoomLevel(activeCell.elem);
-            const zoneWidth = 16; // Pixel width of the zone where you can drag the edge
-            const styles = {
-                bottom: {
-                    backgroundColor: 'none',
-                    cursor: 'row-resize',
-                    height: `${zoneWidth}px`,
-                    left: `${window.scrollX + left}px`,
-                    top: `${window.scrollY + top + height - zoneWidth / 2}px`,
-                    width: `${width}px`,
-                },
-                right: {
-                    backgroundColor: 'none',
-                    cursor: 'col-resize',
-                    height: `${height}px`,
-                    left: `${window.scrollX + left + width - zoneWidth / 2}px`,
-                    top: `${window.scrollY + top}px`,
-                    width: `${zoneWidth}px`,
-                },
-            };
-            const tableRect = tableRectRef.current;
-            if (draggingDirection && pointerCurrentPos && tableRect) {
-                if (isHeightChanging(draggingDirection)) {
-                    styles[draggingDirection].left = `${window.scrollX + tableRect.left}px`;
-                    styles[draggingDirection].top = `${window.scrollY + pointerCurrentPos.y / zoom}px`;
-                    styles[draggingDirection].height = '3px';
-                    styles[draggingDirection].width = `${tableRect.width}px`;
-                }
-                else {
-                    styles[draggingDirection].top = `${window.scrollY + tableRect.top}px`;
-                    styles[draggingDirection].left = `${window.scrollX + pointerCurrentPos.x / zoom}px`;
-                    styles[draggingDirection].width = '3px';
-                    styles[draggingDirection].height = `${tableRect.height}px`;
-                }
-                styles[draggingDirection].backgroundColor = '#adf';
-                styles[draggingDirection].mixBlendMode = 'unset';
-            }
-            return styles;
-        }
-        return {
-            bottom: null,
-            left: null,
-            right: null,
-            top: null,
-        };
-    }, [activeCell, draggingDirection, pointerCurrentPos]);
-    const resizerStyles = getResizers();
-    return (_jsx("div", { ref: resizerRef, children: activeCell != null && (_jsxs(_Fragment, { children: [_jsx("div", { className: "TableCellResizer__resizer TableCellResizer__ui", style: resizerStyles.right || undefined, onPointerDown: toggleResize('right') }), _jsx("div", { className: "TableCellResizer__resizer TableCellResizer__ui", style: resizerStyles.bottom || undefined, onPointerDown: toggleResize('bottom') })] })) }));
-}
-export default function TableCellResizerPlugin() {
-    const [editor] = useLexicalComposerContext();
-    const isEditable = useLexicalEditable();
-    return useMemo(() => isEditable
-        ? createPortal(_jsx(TableCellResizer, { editor: editor }), document.body)
-        : null, [editor, isEditable]);
-}

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

@@ -1,4 +0,0 @@
-import * as React from 'react';
-export default function TableHoverActionsPlugin({ anchorElem, }: {
-    anchorElem?: HTMLElement;
-}): React.ReactPortal | null;

package/lib/plugins/TableHoverActionsPlugin/index.js

@@ -1,188 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
-import { $getTableAndElementByKey, $getTableColumnIndexFromTableCellNode, $getTableRowIndexFromTableCellNode, $insertTableColumnAtSelection, $insertTableRowAtSelection, $isTableCellNode, $isTableNode, getTableElement, TableNode, } from '@lexical/table';
-import { $findMatchingParent, mergeRegister } from '@lexical/utils';
-import { $getNearestNodeFromDOMNode, isHTMLElement, } from 'lexical';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { getThemeSelector } from '../../utils/getThemeSelector';
-import { useDebounce } from '../CodeActionMenuPlugin/utils';
-const BUTTON_WIDTH_PX = 20;
-function TableHoverActionsContainer({ anchorElem, }) {
-    const [editor, { getTheme }] = useLexicalComposerContext();
-    const isEditable = useLexicalEditable();
-    const [isShownRow, setShownRow] = useState(false);
-    const [isShownColumn, setShownColumn] = useState(false);
-    const [shouldListenMouseMove, setShouldListenMouseMove] = useState(false);
-    const [position, setPosition] = useState({});
-    const tableSetRef = useRef(new Set());
-    const tableCellDOMNodeRef = useRef(null);
-    const debouncedOnMouseMove = useDebounce((event) => {
-        const { isOutside, tableDOMNode } = getMouseInfo(event, getTheme);
-        if (isOutside) {
-            setShownRow(false);
-            setShownColumn(false);
-            return;
-        }
-        if (!tableDOMNode) {
-            return;
-        }
-        tableCellDOMNodeRef.current = tableDOMNode;
-        let hoveredRowNode = null;
-        let hoveredColumnNode = null;
-        let tableDOMElement = null;
-        editor.getEditorState().read(() => {
-            const maybeTableCell = $getNearestNodeFromDOMNode(tableDOMNode);
-            if ($isTableCellNode(maybeTableCell)) {
-                const table = $findMatchingParent(maybeTableCell, (node) => $isTableNode(node));
-                if (!$isTableNode(table)) {
-                    return;
-                }
-                tableDOMElement = getTableElement(table, editor.getElementByKey(table.getKey()));
-                if (tableDOMElement) {
-                    const rowCount = table.getChildrenSize();
-                    const colCount = table.getChildAtIndex(0)?.getChildrenSize();
-                    const rowIndex = $getTableRowIndexFromTableCellNode(maybeTableCell);
-                    const colIndex = $getTableColumnIndexFromTableCellNode(maybeTableCell);
-                    if (rowIndex === rowCount - 1) {
-                        hoveredRowNode = maybeTableCell;
-                    }
-                    else if (colIndex === colCount - 1) {
-                        hoveredColumnNode = maybeTableCell;
-                    }
-                }
-            }
-        }, { editor });
-        if (tableDOMElement) {
-            const { width: tableElemWidth, y: tableElemY, right: tableElemRight, left: tableElemLeft, bottom: tableElemBottom, height: tableElemHeight, } = tableDOMElement.getBoundingClientRect();
-            // Adjust for using the scrollable table container
-            const parentElement = tableDOMElement
-                .parentElement;
-            let tableHasScroll = false;
-            if (parentElement &&
-                parentElement.classList.contains('PlaygroundEditorTheme__tableScrollableWrapper')) {
-                tableHasScroll =
-                    parentElement.scrollWidth > parentElement.clientWidth;
-            }
-            const { y: editorElemY, left: editorElemLeft } = anchorElem.getBoundingClientRect();
-            if (hoveredRowNode) {
-                setShownColumn(false);
-                setShownRow(true);
-                setPosition({
-                    height: BUTTON_WIDTH_PX,
-                    left: tableHasScroll && parentElement
-                        ? parentElement.offsetLeft
-                        : tableElemLeft - editorElemLeft,
-                    top: tableElemBottom - editorElemY + 5,
-                    width: tableHasScroll && parentElement
-                        ? parentElement.offsetWidth
-                        : tableElemWidth,
-                });
-            }
-            else if (hoveredColumnNode) {
-                setShownColumn(true);
-                setShownRow(false);
-                setPosition({
-                    height: tableElemHeight,
-                    left: tableElemRight - editorElemLeft + 5,
-                    top: tableElemY - editorElemY,
-                    width: BUTTON_WIDTH_PX,
-                });
-            }
-        }
-    }, 50, 250);
-    // Hide the buttons on any table dimensions change to prevent last row cells
-    // overlap behind the 'Add Row' button when text entry changes cell height
-    const tableResizeObserver = useMemo(() => {
-        return new ResizeObserver(() => {
-            setShownRow(false);
-            setShownColumn(false);
-        });
-    }, []);
-    useEffect(() => {
-        if (!shouldListenMouseMove) {
-            return;
-        }
-        document.addEventListener('mousemove', debouncedOnMouseMove);
-        return () => {
-            setShownRow(false);
-            setShownColumn(false);
-            debouncedOnMouseMove.cancel();
-            document.removeEventListener('mousemove', debouncedOnMouseMove);
-        };
-    }, [shouldListenMouseMove, debouncedOnMouseMove]);
-    useEffect(() => {
-        return mergeRegister(editor.registerMutationListener(TableNode, (mutations) => {
-            editor.getEditorState().read(() => {
-                let resetObserver = false;
-                for (const [key, type] of mutations) {
-                    switch (type) {
-                        case 'created': {
-                            tableSetRef.current.add(key);
-                            resetObserver = true;
-                            break;
-                        }
-                        case 'destroyed': {
-                            tableSetRef.current.delete(key);
-                            resetObserver = true;
-                            break;
-                        }
-                        default:
-                            break;
-                    }
-                }
-                if (resetObserver) {
-                    // Reset resize observers
-                    tableResizeObserver.disconnect();
-                    for (const tableKey of tableSetRef.current) {
-                        const { tableElement } = $getTableAndElementByKey(tableKey);
-                        tableResizeObserver.observe(tableElement);
-                    }
-                    setShouldListenMouseMove(tableSetRef.current.size > 0);
-                }
-            }, { editor });
-        }, { skipInitialization: false }));
-    }, [editor, tableResizeObserver]);
-    const insertAction = (insertRow) => {
-        editor.update(() => {
-            if (tableCellDOMNodeRef.current) {
-                const maybeTableNode = $getNearestNodeFromDOMNode(tableCellDOMNodeRef.current);
-                maybeTableNode?.selectEnd();
-                if (insertRow) {
-                    $insertTableRowAtSelection();
-                    setShownRow(false);
-                }
-                else {
-                    $insertTableColumnAtSelection();
-                    setShownColumn(false);
-                }
-            }
-        });
-    };
-    if (!isEditable) {
-        return null;
-    }
-    return (_jsxs(_Fragment, { children: [isShownRow && (_jsx("button", { className: `${getTheme()?.tableAddRows}`, style: { ...position }, onClick: () => insertAction(true) })), isShownColumn && (_jsx("button", { className: `${getTheme()?.tableAddColumns}`, style: { ...position }, onClick: () => insertAction(false) }))] }));
-}
-function getMouseInfo(event, getTheme) {
-    const target = event.target;
-    const tableCellClass = getThemeSelector(getTheme, 'tableCell');
-    if (isHTMLElement(target)) {
-        const tableDOMNode = target.closest(`td${tableCellClass}, th${tableCellClass}`);
-        const isOutside = !(tableDOMNode ||
-            target.closest(`button${getThemeSelector(getTheme, 'tableAddRows')}`) ||
-            target.closest(`button${getThemeSelector(getTheme, 'tableAddColumns')}`) ||
-            target.closest('div.TableCellResizer__resizer'));
-        return { isOutside, tableDOMNode };
-    }
-    else {
-        return { isOutside: true, tableDOMNode: null };
-    }
-}
-export default function TableHoverActionsPlugin({ anchorElem = document.body, }) {
-    const isEditable = useLexicalEditable();
-    return isEditable
-        ? createPortal(_jsx(TableHoverActionsContainer, { anchorElem: anchorElem }), anchorElem)
-        : null;
-}

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

@@ -1,2 +0,0 @@
-import './index.css';
-export default function TableOfContentsPlugin(): import("react/jsx-runtime").JSX.Element;

package/lib/plugins/TableOfContentsPlugin/index.js

@@ -1,116 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import './index.css';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { TableOfContentsPlugin as LexicalTableOfContentsPlugin } from '@lexical/react/LexicalTableOfContentsPlugin';
-import { useEffect, useRef, useState } from 'react';
-const MARGIN_ABOVE_EDITOR = 624;
-const HEADING_WIDTH = 9;
-function indent(tagName) {
-    if (tagName === 'h2') {
-        return 'heading2';
-    }
-    else if (tagName === 'h3') {
-        return 'heading3';
-    }
-}
-function isHeadingAtTheTopOfThePage(element) {
-    const elementYPosition = element?.getClientRects()[0].y;
-    return (elementYPosition >= MARGIN_ABOVE_EDITOR &&
-        elementYPosition <= MARGIN_ABOVE_EDITOR + HEADING_WIDTH);
-}
-function isHeadingAboveViewport(element) {
-    const elementYPosition = element?.getClientRects()[0].y;
-    return elementYPosition < MARGIN_ABOVE_EDITOR;
-}
-function isHeadingBelowTheTopOfThePage(element) {
-    const elementYPosition = element?.getClientRects()[0].y;
-    return elementYPosition >= MARGIN_ABOVE_EDITOR + HEADING_WIDTH;
-}
-function TableOfContentsList({ tableOfContents, }) {
-    const [selectedKey, setSelectedKey] = useState('');
-    const selectedIndex = useRef(0);
-    const [editor] = useLexicalComposerContext();
-    function scrollToNode(key, currIndex) {
-        editor.getEditorState().read(() => {
-            const domElement = editor.getElementByKey(key);
-            if (domElement !== null) {
-                domElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                setSelectedKey(key);
-                selectedIndex.current = currIndex;
-            }
-        });
-    }
-    useEffect(() => {
-        function scrollCallback() {
-            if (tableOfContents.length !== 0 &&
-                selectedIndex.current < tableOfContents.length - 1) {
-                let currentHeading = editor.getElementByKey(tableOfContents[selectedIndex.current][0]);
-                if (currentHeading !== null) {
-                    if (isHeadingBelowTheTopOfThePage(currentHeading)) {
-                        //On natural scroll, user is scrolling up
-                        while (currentHeading !== null &&
-                            isHeadingBelowTheTopOfThePage(currentHeading) &&
-                            selectedIndex.current > 0) {
-                            const prevHeading = editor.getElementByKey(tableOfContents[selectedIndex.current - 1][0]);
-                            if (prevHeading !== null &&
-                                (isHeadingAboveViewport(prevHeading) ||
-                                    isHeadingBelowTheTopOfThePage(prevHeading))) {
-                                selectedIndex.current--;
-                            }
-                            currentHeading = prevHeading;
-                        }
-                        const prevHeadingKey = tableOfContents[selectedIndex.current][0];
-                        setSelectedKey(prevHeadingKey);
-                    }
-                    else if (isHeadingAboveViewport(currentHeading)) {
-                        //On natural scroll, user is scrolling down
-                        while (currentHeading !== null &&
-                            isHeadingAboveViewport(currentHeading) &&
-                            selectedIndex.current < tableOfContents.length - 1) {
-                            const nextHeading = editor.getElementByKey(tableOfContents[selectedIndex.current + 1][0]);
-                            if (nextHeading !== null &&
-                                (isHeadingAtTheTopOfThePage(nextHeading) ||
-                                    isHeadingAboveViewport(nextHeading))) {
-                                selectedIndex.current++;
-                            }
-                            currentHeading = nextHeading;
-                        }
-                        const nextHeadingKey = tableOfContents[selectedIndex.current][0];
-                        setSelectedKey(nextHeadingKey);
-                    }
-                }
-            }
-            else {
-                selectedIndex.current = 0;
-            }
-        }
-        let timerId;
-        function debounceFunction(func, delay) {
-            clearTimeout(timerId);
-            timerId = setTimeout(func, delay);
-        }
-        function onScroll() {
-            debounceFunction(scrollCallback, 10);
-        }
-        document.addEventListener('scroll', onScroll);
-        return () => document.removeEventListener('scroll', onScroll);
-    }, [tableOfContents, editor]);
-    return (_jsx("div", { className: "table-of-contents", children: _jsx("ul", { className: "headings", children: tableOfContents.map(([key, text, tag], index) => {
-                if (index === 0) {
-                    return (_jsxs("div", { className: "normal-heading-wrapper", children: [_jsx("div", { className: "first-heading", onClick: () => scrollToNode(key, index), role: "button", tabIndex: 0, children: ('' + text).length > 20
-                                    ? text.substring(0, 20) + '...'
-                                    : text }), _jsx("br", {})] }, key));
-                }
-                else {
-                    return (_jsx("div", { className: `normal-heading-wrapper ${selectedKey === key ? 'selected-heading-wrapper' : ''}`, children: _jsx("div", { onClick: () => scrollToNode(key, index), role: "button", className: indent(tag), tabIndex: 0, children: _jsx("li", { className: `normal-heading ${selectedKey === key ? 'selected-heading' : ''}
-                    `, children: ('' + text).length > 27
-                                    ? text.substring(0, 27) + '...'
-                                    : text }) }) }, key));
-                }
-            }) }) }));
-}
-export default function TableOfContentsPlugin() {
-    return (_jsx(LexicalTableOfContentsPlugin, { children: (tableOfContents) => {
-            return _jsx(TableOfContentsList, { tableOfContents: tableOfContents });
-        } }));
-}

package/lib/plugins/TablePlugin.d.ts

@@ -1,31 +0,0 @@
-import type { JSX } from 'react';
-import { EditorThemeClasses, Klass, LexicalEditor, LexicalNode } from 'lexical';
-export type InsertTableCommandPayload = Readonly<{
-    columns: string;
-    rows: string;
-    includeHeaders?: boolean;
-}>;
-export type CellContextShape = {
-    cellEditorConfig: null | CellEditorConfig;
-    cellEditorPlugins: null | JSX.Element | Array<JSX.Element>;
-    set: (cellEditorConfig: null | CellEditorConfig, cellEditorPlugins: null | JSX.Element | Array<JSX.Element>) => void;
-};
-export type CellEditorConfig = Readonly<{
-    namespace: string;
-    nodes?: ReadonlyArray<Klass<LexicalNode>>;
-    onError: (error: Error, editor: LexicalEditor) => void;
-    readOnly?: boolean;
-    theme?: EditorThemeClasses;
-}>;
-export declare const CellContext: import("react").Context<CellContextShape>;
-export declare function TableContext({ children }: {
-    children: JSX.Element;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function InsertTableDialog({ activeEditor, onClose, }: {
-    activeEditor: LexicalEditor;
-    onClose: () => void;
-}): JSX.Element;
-export declare function TablePlugin({ cellEditorConfig, children, }: {
-    cellEditorConfig: CellEditorConfig;
-    children: JSX.Element | Array<JSX.Element>;
-}): JSX.Element | null;