@datalayer/lexical-loro 0.0.3 → 0.1.0

package/lib/plugins/TableCellResizer/index.js

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

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

package/lib/plugins/TableHoverActionsPlugin/index.js

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

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

package/lib/plugins/TableOfContentsPlugin/index.js

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

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