@blocklet/editor 2.2.47 → 2.3.1

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

@@ -1,93 +1,125 @@
 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 { $getTableColumnIndexFromTableCellNode, $getTableNodeFromLexicalNodeOrThrow, $getTableRowIndexFromTableCellNode, $isTableCellNode, $isTableRowNode, $isTableSelection, getDOMCellFromTarget, } from '@lexical/table';
-import { $getNearestNodeFromDOMNode, $getSelection, COMMAND_PRIORITY_HIGH, SELECTION_CHANGE_COMMAND } from 'lexical';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+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 = 50;
+const MIN_COLUMN_WIDTH = 92;
 function TableCellResizer({ editor }) {
     const targetRef = useRef(null);
     const resizerRef = useRef(null);
     const tableRectRef = useRef(null);
-    const mouseStartPosRef = useRef(null);
-    const [mouseCurrentPos, updateMouseCurrentPos] = useState(null);
+    const [hasTable, setHasTable] = useState(false);
+    const pointerStartPosRef = useRef(null);
+    const [pointerCurrentPos, updatePointerCurrentPos] = useState(null);
     const [activeCell, updateActiveCell] = useState(null);
-    const [isSelectingGrid, updateIsSelectingGrid] = useState(false);
     const [draggingDirection, updateDraggingDirection] = useState(null);
-    useEffect(() => {
-        return editor.registerCommand(SELECTION_CHANGE_COMMAND, (payload) => {
-            const selection = $getSelection();
-            const isTableSelection = $isTableSelection(selection);
-            if (isSelectingGrid !== isTableSelection) {
-                updateIsSelectingGrid(isTableSelection);
-            }
-            return false;
-        }, COMMAND_PRIORITY_HIGH);
-    });
     const resetState = useCallback(() => {
         updateActiveCell(null);
         targetRef.current = null;
         updateDraggingDirection(null);
-        mouseStartPosRef.current = null;
+        pointerStartPosRef.current = null;
         tableRectRef.current = null;
     }, []);
     useEffect(() => {
-        const onMouseMove = (event) => {
-            setTimeout(() => {
-                const { target } = event;
-                if (draggingDirection) {
-                    updateMouseCurrentPos({
-                        x: event.clientX,
-                        y: event.clientY,
-                    });
-                    return;
+        const tableKeys = new Set();
+        return mergeRegister(editor.registerMutationListener(TableNode, (nodeMutations) => {
+            for (const [nodeKey, mutation] of nodeMutations) {
+                if (mutation === 'destroyed') {
+                    tableKeys.delete(nodeKey);
                 }
-                if (resizerRef.current && resizerRef.current.contains(target)) {
-                    return;
+                else {
+                    tableKeys.add(nodeKey);
                 }
-                if (targetRef.current !== target) {
-                    targetRef.current = target;
-                    const cell = getDOMCellFromTarget(target);
-                    if (cell && activeCell !== cell) {
-                        editor.update(() => {
-                            const tableCellNode = $getNearestNodeFromDOMNode(cell.elem);
-                            if (!tableCellNode) {
-                                // throw new Error('TableCellResizer: Table cell node not found.');
-                                // eslint-disable-next-line no-console
-                                console.log('TableCellResizer: Table cell node not found.');
-                                // [!] return instead of throwing error to avoid breaking the editor (#2055)
-                                return;
-                            }
-                            const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
-                            const tableElement = editor.getElementByKey(tableNode.getKey());
-                            if (!tableElement) {
-                                throw new Error('TableCellResizer: Table element not found.');
-                            }
-                            targetRef.current = target;
-                            tableRectRef.current = tableElement.getBoundingClientRect();
-                            updateActiveCell(cell);
-                        });
-                    }
-                    else if (cell == null) {
-                        resetState();
-                    }
+            }
+            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 });
                 }
-            }, 0);
+                else if (cell == null) {
+                    resetState();
+                }
+            }
         };
-        document.addEventListener('mousemove', onMouseMove);
+        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 () => {
-            document.removeEventListener('mousemove', onMouseMove);
+            removeRootListener();
+            resizerContainer?.removeEventListener('pointermove', onPointerMove);
         };
-    }, [activeCell, draggingDirection, editor, resetState]);
+    }, [activeCell, draggingDirection, editor, resetState, hasTable]);
     const isHeightChanging = (direction) => {
-        if (direction === 'bottom')
+        if (direction === 'bottom') {
             return true;
+        }
         return false;
     };
-    const updateRowHeight = useCallback((newHeight) => {
+    const updateRowHeight = useCallback((heightChange) => {
         if (!activeCell) {
             throw new Error('TableCellResizer: Expected active cell.');
         }
@@ -97,8 +129,12 @@ function TableCellResizer({ editor }) {
                 throw new Error('TableCellResizer: Table cell node not found.');
             }
             const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
-            const tableRowIndex = $getTableRowIndexFromTableCellNode(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.');
             }
@@ -106,10 +142,29 @@ function TableCellResizer({ editor }) {
             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 updateColumnWidth = useCallback((newWidth) => {
+    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.');
         }
@@ -119,60 +174,48 @@ function TableCellResizer({ editor }) {
                 throw new Error('TableCellResizer: Table cell node not found.');
             }
             const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
-            const tableColumnIndex = $getTableColumnIndexFromTableCellNode(tableCellNode);
-            const tableRows = tableNode.getChildren();
-            for (let r = 0; r < tableRows.length; r++) {
-                const tableRow = tableRows[r];
-                if (!$isTableRowNode(tableRow)) {
-                    throw new Error('Expected table row');
-                }
-                const rowCells = tableRow.getChildren();
-                const rowCellsSpan = rowCells.map((cell) => cell.getColSpan());
-                const aggregatedRowSpans = rowCellsSpan.reduce((rowSpans, cellSpan) => {
-                    const previousCell = rowSpans[rowSpans.length - 1] ?? 0;
-                    rowSpans.push(previousCell + cellSpan);
-                    return rowSpans;
-                }, []);
-                const rowColumnIndexWithSpan = aggregatedRowSpans.findIndex((cellSpan) => cellSpan > tableColumnIndex);
-                if (rowColumnIndexWithSpan >= rowCells.length || rowColumnIndexWithSpan < 0) {
-                    throw new Error('Expected table cell to be inside of table row.');
-                }
-                const tableCell = rowCells[rowColumnIndexWithSpan];
-                if (!$isTableCellNode(tableCell)) {
-                    throw new Error('Expected table cell');
-                }
-                tableCell.setWidth(newWidth);
+            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 mouseUpHandler = useCallback((direction) => {
+    const pointerUpHandler = useCallback((direction) => {
         const handler = (event) => {
             event.preventDefault();
             event.stopPropagation();
             if (!activeCell) {
                 throw new Error('TableCellResizer: Expected active cell.');
             }
-            if (mouseStartPosRef.current) {
-                const { x, y } = mouseStartPosRef.current;
+            if (pointerStartPosRef.current) {
+                const { x, y } = pointerStartPosRef.current;
                 if (activeCell === null) {
                     return;
                 }
+                const zoom = calculateZoomLevel(event.target);
                 if (isHeightChanging(direction)) {
-                    const { height } = activeCell.elem.getBoundingClientRect();
-                    const heightChange = Math.abs(event.clientY - y);
-                    const isShrinking = direction === 'bottom' && y > event.clientY;
-                    updateRowHeight(Math.max(isShrinking ? height - heightChange : heightChange + height, MIN_ROW_HEIGHT));
+                    const heightChange = (event.clientY - y) / zoom;
+                    updateRowHeight(heightChange);
                 }
                 else {
-                    const computedStyle = getComputedStyle(activeCell.elem);
-                    let width = activeCell.elem.clientWidth; // width with padding
-                    width -= parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);
-                    const widthChange = Math.abs(event.clientX - x);
-                    const isShrinking = direction === 'right' && x > event.clientX;
-                    updateColumnWidth(Math.max(isShrinking ? width - widthChange : widthChange + width, MIN_COLUMN_WIDTH));
+                    const widthChange = (event.clientX - x) / zoom;
+                    updateColumnWidth(widthChange);
                 }
                 resetState();
-                document.removeEventListener('mouseup', handler);
+                document.removeEventListener('pointerup', handler);
             }
         };
         return handler;
@@ -183,50 +226,55 @@ function TableCellResizer({ editor }) {
         if (!activeCell) {
             throw new Error('TableCellResizer: Expected active cell.');
         }
-        mouseStartPosRef.current = {
+        pointerStartPosRef.current = {
             x: event.clientX,
             y: event.clientY,
         };
-        updateMouseCurrentPos(mouseStartPosRef.current);
+        updatePointerCurrentPos(pointerStartPosRef.current);
         updateDraggingDirection(direction);
-        document.addEventListener('mouseup', mouseUpHandler(direction));
-    }, [activeCell, mouseUpHandler]);
+        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: '16px',
-                    left: `${window.pageXOffset + left}px`,
-                    top: `${window.pageYOffset + top + height - 8}px`,
+                    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.pageXOffset + left + width - 8}px`,
-                    top: `${window.pageYOffset + top}px`,
-                    width: '16px',
+                    left: `${window.scrollX + left + width - zoneWidth / 2}px`,
+                    top: `${window.scrollY + top}px`,
+                    zIndex: 1,
+                    width: `${zoneWidth}px`,
                 },
             };
             const tableRect = tableRectRef.current;
-            if (draggingDirection && mouseCurrentPos && tableRect) {
+            if (draggingDirection && pointerCurrentPos && tableRect) {
                 if (isHeightChanging(draggingDirection)) {
-                    styles[draggingDirection].left = `${window.pageXOffset + tableRect.left}px`;
-                    styles[draggingDirection].top = `${window.pageYOffset + mouseCurrentPos.y}px`;
+                    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.pageYOffset + tableRect.top}px`;
-                    styles[draggingDirection].left = `${window.pageXOffset + mouseCurrentPos.x}px`;
+                    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;
         }
@@ -236,9 +284,9 @@ function TableCellResizer({ editor }) {
             right: null,
             top: null,
         };
-    }, [activeCell, draggingDirection, mouseCurrentPos]);
+    }, [activeCell, draggingDirection, pointerCurrentPos]);
     const resizerStyles = getResizers();
-    return (_jsx("div", { ref: resizerRef, children: activeCell != null && !isSelectingGrid && (_jsxs(_Fragment, { children: [_jsx("div", { className: "TableCellResizer__resizer TableCellResizer__ui", style: resizerStyles.right || undefined, onMouseDown: toggleResize('right') }), _jsx("div", { className: "TableCellResizer__resizer TableCellResizer__ui", style: resizerStyles.bottom || undefined, onMouseDown: toggleResize('bottom') })] })) }));
+    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();

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './index.css';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import LexicalTableOfContents from '@lexical/react/LexicalTableOfContents';
+import { TableOfContentsPlugin as LexicalTableOfContentsPlugin } from '@lexical/react/LexicalTableOfContentsPlugin';
 import { useEffect, useRef, useState } from 'react';
 const MARGIN_ABOVE_EDITOR = 624;
 const HEADING_WIDTH = 9;
@@ -100,7 +100,7 @@ function TableOfContentsList({ tableOfContents }) {
             }) }) }));
 }
 export default function TableOfContentsPlugin() {
-    return (_jsx(LexicalTableOfContents, { children: (tableOfContents) => {
+    return (_jsx(LexicalTableOfContentsPlugin, { children: (tableOfContents) => {
             return _jsx(TableOfContentsList, { tableOfContents: tableOfContents });
         } }));
 }

package/lib/main/plugins/TablePlugin.d.ts

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { EditorThemeClasses, Klass, LexicalCommand, LexicalEditor, LexicalNode } from 'lexical';
-import * as React from 'react';
+import type { JSX } from 'react';
+import { EditorThemeClasses, Klass, LexicalEditor, LexicalNode } from 'lexical';
 export type InsertTableCommandPayload = Readonly<{
     columns: string;
     rows: string;
@@ -24,8 +24,7 @@ export type CellEditorConfig = Readonly<{
     readOnly?: boolean;
     theme?: EditorThemeClasses;
 }>;
-export declare const INSERT_NEW_TABLE_COMMAND: LexicalCommand<InsertTableCommandPayload>;
-export declare const CellContext: React.Context<CellContextShape>;
+export declare const CellContext: import("react").Context<CellContextShape>;
 export declare function TableContext({ children }: {
     children: JSX.Element;
 }): import("react/jsx-runtime").JSX.Element;

package/lib/main/plugins/TablePlugin.js

@@ -1,20 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * 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 { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { $createTableNodeWithDimensions, INSERT_TABLE_COMMAND, TableNode } from '@lexical/table';
-import { $insertNodes, COMMAND_PRIORITY_EDITOR, createCommand, } from 'lexical';
+import { INSERT_TABLE_COMMAND, TableCellNode, TableNode, TableRowNode } from '@lexical/table';
 import { createContext, useContext, useEffect, useMemo, useState } from 'react';
-import invariant from '../../shared/invariant';
 import Button from '../ui/Button';
 import { DialogActions } from '../ui/Dialog';
 import TextInput from '../ui/TextInput';
-export const INSERT_NEW_TABLE_COMMAND = createCommand('INSERT_NEW_TABLE_COMMAND');
 export const CellContext = createContext({
     cellEditorConfig: null,
     cellEditorPlugins: null,
@@ -56,25 +46,18 @@ export function InsertTableDialog({ activeEditor, onClose, }) {
         });
         onClose();
     };
-    return (_jsxs(_Fragment, { children: [_jsx(TextInput, { placeholder: "# of rows (1-500)", label: "Rows", onChange: setRows, value: rows, "data-test-id": "table-modal-rows", 
-                // @ts-ignore
-                type: "number" }), _jsx(TextInput, { placeholder: "# of columns (1-50)", label: "Columns", onChange: setColumns, value: columns, "data-test-id": "table-modal-columns", 
-                // @ts-ignore
-                type: "number" }), _jsx(DialogActions, { "data-test-id": "table-model-confirm-insert", children: _jsx(Button, { disabled: isDisabled, onClick: onClick, children: "Confirm" }) })] }));
+    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])) {
-            invariant(false, 'TablePlugin: TableNode is not registered on editor');
+        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);
-        return editor.registerCommand(INSERT_NEW_TABLE_COMMAND, ({ columns, rows, includeHeaders }) => {
-            const tableNode = $createTableNodeWithDimensions(Number(rows), Number(columns), includeHeaders);
-            $insertNodes([tableNode]);
-            return true;
-        }, COMMAND_PRIORITY_EDITOR);
-    }, [cellContext, cellEditorConfig, children, editor]);
+    }, [cellContext, cellEditorConfig, children]);
     return null;
 }

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

@@ -22,7 +22,6 @@ import { getSelectedNode } from '../../utils/getSelectedNode';
 import { sanitizeUrl } from '../../utils/sanitizeUrl';
 // import { EmbedConfigs } from "../AutoEmbedPlugin";
 // import { INSERT_COLLAPSIBLE_COMMAND } from "../CollapsiblePlugin";
-// import { InsertEquationDialog } from "../EquationsPlugin";
 // import { INSERT_EXCALIDRAW_COMMAND } from "../ExcalidrawPlugin";
 import { INSERT_IMAGE_COMMAND } from '../ImagesPlugin';
 import { uploadFile, INSERT_COMPONENT_COMMAND } from '../ComponentPickerPlugin';

package/lib/main/themes/defaultTheme.js

@@ -143,7 +143,7 @@ const table = css `
   border-collapse: collapse;
   border-spacing: 0;
   table-layout: fixed;
-  width: auto;
+  width: fit-content;
 
   p {
     margin: 0;
@@ -157,6 +157,7 @@ const tableSelection = css `
 const tableSelected = css `
   outline: 2px solid rgb(60, 132, 244);
 `;
+const tableScrollableWrapper = css ``;
 const tableCell = css `
   border: 1px solid #bbb;
   min-width: 75px;
@@ -676,6 +677,7 @@ const defaultTheme = {
     tableCellSortedIndicator,
     tableResizeRuler,
     tableSelected,
+    tableScrollableWrapper,
     characterLimit,
     list: {
         listitem: listItem,

package/lib/main/ui/ContentEditable.d.ts

@@ -1,5 +1,2 @@
-import { ContentEditable as LexicalContentEditable } from '@lexical/react/LexicalContentEditable';
-import React from 'react';
-export interface ContentEditableProps extends React.ComponentProps<typeof LexicalContentEditable> {
-}
+import { ContentEditableProps } from '@lexical/react/LexicalContentEditable';
 export default function ContentEditable(props: ContentEditableProps): import("react/jsx-runtime").JSX.Element;

package/lib/main/ui/Modal.css

@@ -58,5 +58,5 @@
   background-color: #ddd;
 }
 .Modal__content {
-  /* padding-top: 20px; */
+  padding-top: 20px;
 }

package/lib/main/ui/TextInput.d.ts

@@ -5,15 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-/// <reference types="react" />
+import type { JSX } from 'react';
 import './Input.css';
+import { HTMLInputTypeAttribute } from 'react';
 type Props = Readonly<{
     'data-test-id'?: string;
     label: string;
     onChange: (val: string) => void;
     placeholder?: string;
     value: string;
-    autoFocus?: boolean;
+    type?: HTMLInputTypeAttribute;
 }>;
-export default function TextInput({ label, value, onChange, placeholder, 'data-test-id': dataTestId, autoFocus, }: Props): JSX.Element;
+export default function TextInput({ label, value, onChange, placeholder, 'data-test-id': dataTestId, type, }: Props): JSX.Element;
 export {};

package/lib/main/ui/TextInput.js

@@ -1,23 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * 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 { useEffect, useRef } from 'react';
 import './Input.css';
-export default function TextInput({ label, value, onChange, placeholder = '', 'data-test-id': dataTestId, autoFocus, }) {
-    const input = useRef(null);
-    useEffect(() => {
-        if (autoFocus) {
-            setTimeout(() => {
-                input.current?.focus();
-            });
-        }
-    }, [autoFocus]);
-    return (_jsxs("div", { className: "Input__wrapper", children: [_jsx("label", { className: "Input__label", children: label }), _jsx("input", { ref: input, type: "text", className: "Input__input", placeholder: placeholder, value: value, onChange: (e) => {
+export default function TextInput({ label, value, onChange, placeholder = '', 'data-test-id': dataTestId, type = 'text', }) {
+    return (_jsxs("div", { className: "Input__wrapper", children: [_jsx("label", { className: "Input__label", children: label }), _jsx("input", { type: type, className: "Input__input", placeholder: placeholder, value: value, onChange: (e) => {
                     onChange(e.target.value);
-                }, "data-test-id": dataTestId, autoFocus: autoFocus })] }));
+                }, "data-test-id": dataTestId })] }));
 }