@blocklet/editor-lite 2.6.0

package/lib/main/plugins/TableCellResizer/index.js

@@ -0,0 +1,295 @@
+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 } 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;
+            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' });
+    }, [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' });
+    }, [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`,
+                    zIndex: 1,
+                    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`,
+                    zIndex: 1,
+                    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/main/plugins/TableOfContentsPlugin/index.css

@@ -0,0 +1,87 @@
+.table-of-contents .heading2 {
+  margin-left: 10px;
+}
+
+.table-of-contents .heading3 {
+  margin-left: 20px;
+}
+
+.selected-heading {
+  color: #3578e5;
+  position: relative;
+}
+
+.selected-heading-wrapper::before {
+  content: ' ';
+  position: absolute;
+  display: inline-block;
+  left: -30px;
+  top: 4px;
+  z-index: 10;
+  height: 4px;
+  width: 4px;
+  background-color: #3578e5;
+  border: solid 4px white;
+  border-radius: 50%;
+}
+
+.normal-heading {
+  cursor: pointer;
+  line-height: 20px;
+  font-size: 16px;
+}
+
+.table-of-contents {
+  color: #65676b;
+  position: fixed;
+  top: 200px;
+  right: -35px;
+  padding: 10px;
+  width: 250px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  z-index: 1;
+  height: 300px;
+}
+
+.first-heading {
+  color: black;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.headings {
+  list-style: none;
+  margin-top: 0;
+  margin-left: 10px;
+  padding: 0;
+  overflow: scroll;
+  width: 200px;
+  height: 220px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.headings::-webkit-scrollbar {
+  display: none;
+}
+
+.headings::before {
+  content: ' ';
+  position: absolute;
+  height: 220px;
+  width: 4px;
+  right: 240px;
+  margin-top: 5px;
+  background-color: #ccd0d5;
+  border-radius: 2px;
+}
+
+.normal-heading-wrapper {
+  margin-left: 32px;
+  position: relative;
+}

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

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

package/lib/main/plugins/TableOfContentsPlugin/index.js

@@ -0,0 +1,106 @@
+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';
+    }
+    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();
+                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));
+                }
+                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/main/plugins/TablePlugin.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import 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;

package/lib/main/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/main/plugins/ToolbarPlugin/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export default function ToolbarPlugin(): import("react/jsx-runtime").JSX.Element | null;