@payloadcms/richtext-lexical 3.84.0 → 4.0.0-internal.38b7f1d

package/dist/features/experimental_table/client/plugins/TablePlugin/TableGridPopup/index.js

@@ -0,0 +1,219 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import './index.css';
+const GRID_COLUMNS = 10;
+const GRID_ROWS = 7;
+function ColumnsIcon() {
+  return /*#__PURE__*/_jsxs("svg", {
+    fill: "none",
+    height: "12",
+    viewBox: "0 0 12 12",
+    width: "12",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("rect", {
+      height: "9",
+      rx: "1",
+      stroke: "currentColor",
+      width: "3",
+      x: "1.5",
+      y: "1.5"
+    }), /*#__PURE__*/_jsx("rect", {
+      height: "9",
+      rx: "1",
+      stroke: "currentColor",
+      width: "3",
+      x: "7.5",
+      y: "1.5"
+    })]
+  });
+}
+function RowsIcon() {
+  return /*#__PURE__*/_jsxs("svg", {
+    fill: "none",
+    height: "12",
+    viewBox: "0 0 12 12",
+    width: "12",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("rect", {
+      height: "3",
+      rx: "1",
+      stroke: "currentColor",
+      width: "9",
+      x: "1.5",
+      y: "1.5"
+    }), /*#__PURE__*/_jsx("rect", {
+      height: "3",
+      rx: "1",
+      stroke: "currentColor",
+      width: "9",
+      x: "1.5",
+      y: "7.5"
+    })]
+  });
+}
+export function TableGridPopup({
+  anchorElem,
+  editor: _editor,
+  isOpen,
+  onClose,
+  onInsert,
+  position
+}) {
+  const [hoverCol, setHoverCol] = useState(0);
+  const [hoverRow, setHoverRow] = useState(0);
+  const [inputCols, setInputCols] = useState('');
+  const [inputRows, setInputRows] = useState('');
+  const [focusedInput, setFocusedInput] = useState(null);
+  const popupRef = useRef(null);
+  const colsInputRef = useRef(null);
+  const rowsInputRef = useRef(null);
+  const effectiveCols = hoverCol > 0 ? hoverCol : inputCols ? parseInt(inputCols, 10) || 0 : 5;
+  const effectiveRows = hoverRow > 0 ? hoverRow : inputRows ? parseInt(inputRows, 10) || 0 : 5;
+  useEffect(() => {
+    if (!isOpen) {
+      setHoverCol(0);
+      setHoverRow(0);
+      setInputCols('');
+      setInputRows('');
+      setFocusedInput(null);
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    const handleKeyDown = e => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        onClose();
+      }
+      if (e.key === 'Enter' && focusedInput) {
+        e.preventDefault();
+        const cols = parseInt(inputCols, 10);
+        const rows = parseInt(inputRows, 10);
+        if (cols > 0 && rows > 0) {
+          onInsert(cols, rows);
+        }
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown, true);
+    return () => document.removeEventListener('keydown', handleKeyDown, true);
+  }, [isOpen, onClose, onInsert, focusedInput, inputCols, inputRows]);
+  const handleCellClick = useCallback((col, row) => {
+    if (col > 0 && row > 0) {
+      onInsert(col, row);
+    }
+  }, [onInsert]);
+  const handleCellMouseEnter = useCallback((col_0, row_0) => {
+    setHoverCol(col_0);
+    setHoverRow(row_0);
+  }, []);
+  const handleGridMouseLeave = useCallback(() => {
+    setHoverCol(0);
+    setHoverRow(0);
+  }, []);
+  if (!isOpen || !position || !anchorElem) {
+    return null;
+  }
+  const cells = [];
+  for (let row_1 = 1; row_1 <= GRID_ROWS; row_1++) {
+    for (let col_1 = 1; col_1 <= GRID_COLUMNS; col_1++) {
+      const isInSelection = col_1 <= effectiveCols && row_1 <= effectiveRows;
+      const isHovered = col_1 <= hoverCol && row_1 <= hoverRow;
+      let className = 'table-grid-popup__cell';
+      if (isInSelection && isHovered) {
+        className += ' table-grid-popup__cell--hover';
+      } else if (isInSelection) {
+        className += ' table-grid-popup__cell--selected';
+      }
+      cells.push(/*#__PURE__*/_jsx("div", {
+        "aria-label": `${col_1} columns, ${row_1} rows`,
+        className: className,
+        onClick: () => handleCellClick(col_1, row_1),
+        onKeyDown: e_0 => {
+          if (e_0.key === 'Enter' || e_0.key === ' ') {
+            e_0.preventDefault();
+            handleCellClick(col_1, row_1);
+          }
+        },
+        onMouseEnter: () => handleCellMouseEnter(col_1, row_1),
+        role: "button",
+        tabIndex: -1
+      }, `${row_1}-${col_1}`));
+    }
+  }
+  const showTooltip = hoverCol > 0 && hoverRow > 0;
+  return /*#__PURE__*/createPortal(/*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "table-grid-popup__backdrop",
+      onClick: onClose
+    }), /*#__PURE__*/_jsx("div", {
+      className: "table-grid-popup",
+      ref: popupRef,
+      style: {
+        transform: `translate(${position.left}px, ${position.top}px)`
+      },
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "table-grid-popup__content",
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: "table-grid-popup__header",
+          children: [/*#__PURE__*/_jsxs("div", {
+            className: `table-grid-popup__input-group${focusedInput === 'cols' ? ' table-grid-popup__input-group--focused' : ''}`,
+            children: [/*#__PURE__*/_jsx("div", {
+              className: "table-grid-popup__input-icon",
+              children: /*#__PURE__*/_jsx(ColumnsIcon, {})
+            }), /*#__PURE__*/_jsx("input", {
+              "aria-label": "Columns",
+              className: "table-grid-popup__input",
+              min: 1,
+              onBlur: () => setFocusedInput(null),
+              onChange: e_1 => setInputCols(e_1.target.value),
+              onFocus: () => setFocusedInput('cols'),
+              placeholder: hoverCol > 0 ? String(hoverCol) : '5',
+              ref: colsInputRef,
+              type: "number",
+              value: inputCols
+            })]
+          }), /*#__PURE__*/_jsx("span", {
+            className: "table-grid-popup__separator",
+            children: "×"
+          }), /*#__PURE__*/_jsxs("div", {
+            className: `table-grid-popup__input-group${focusedInput === 'rows' ? ' table-grid-popup__input-group--focused' : ''}`,
+            children: [/*#__PURE__*/_jsx("div", {
+              className: "table-grid-popup__input-icon",
+              children: /*#__PURE__*/_jsx(RowsIcon, {})
+            }), /*#__PURE__*/_jsx("input", {
+              "aria-label": "Rows",
+              className: "table-grid-popup__input",
+              min: 1,
+              onBlur: () => setFocusedInput(null),
+              onChange: e_2 => setInputRows(e_2.target.value),
+              onFocus: () => setFocusedInput('rows'),
+              placeholder: hoverRow > 0 ? String(hoverRow) : '5',
+              ref: rowsInputRef,
+              type: "number",
+              value: inputRows
+            })]
+          })]
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "table-grid-popup__grid",
+          onMouseLeave: handleGridMouseLeave,
+          children: [cells, showTooltip && /*#__PURE__*/_jsxs("div", {
+            className: "table-grid-popup__tooltip",
+            style: {
+              left: `calc(${(hoverCol - 0.5) / GRID_COLUMNS * 100}%)`,
+              top: `calc(${(hoverRow - 1) / GRID_ROWS * 100}%)`
+            },
+            children: [effectiveCols, " × ", effectiveRows]
+          })]
+        })]
+      })
+    })]
+  }), anchorElem);
+}
+//# sourceMappingURL=index.js.map

package/dist/features/experimental_table/client/plugins/TablePlugin/TableGridPopup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["useCallback","useEffect","useRef","useState","React","createPortal","GRID_COLUMNS","GRID_ROWS","ColumnsIcon","_jsxs","fill","height","viewBox","width","xmlns","_jsx","rx","stroke","x","y","RowsIcon","TableGridPopup","anchorElem","editor","_editor","isOpen","onClose","onInsert","position","hoverCol","setHoverCol","hoverRow","setHoverRow","inputCols","setInputCols","inputRows","setInputRows","focusedInput","setFocusedInput","popupRef","colsInputRef","rowsInputRef","effectiveCols","parseInt","effectiveRows","handleKeyDown","e","key","preventDefault","stopPropagation","cols","rows","document","addEventListener","removeEventListener","handleCellClick","col","row","handleCellMouseEnter","handleGridMouseLeave","cells","isInSelection","isHovered","className","push","onClick","onKeyDown","onMouseEnter","role","tabIndex","showTooltip","Fragment","ref","style","transform","left","top","min","onBlur","onChange","target","value","onFocus","placeholder","String","type","onMouseLeave"],"sources":["../../../../../../../src/features/experimental_table/client/plugins/TablePlugin/TableGridPopup/index.tsx"],"sourcesContent":["'use client'\n\nimport type { LexicalEditor } from 'lexical'\n\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport * as React from 'react'\nimport { createPortal } from 'react-dom'\n\nimport './index.css'\n\nconst GRID_COLUMNS = 10\nconst GRID_ROWS = 7\n\nfunction ColumnsIcon() {\n  return (\n    <svg fill=\"none\" height=\"12\" viewBox=\"0 0 12 12\" width=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\n      <rect height=\"9\" rx=\"1\" stroke=\"currentColor\" width=\"3\" x=\"1.5\" y=\"1.5\" />\n      <rect height=\"9\" rx=\"1\" stroke=\"currentColor\" width=\"3\" x=\"7.5\" y=\"1.5\" />\n    </svg>\n  )\n}\n\nfunction RowsIcon() {\n  return (\n    <svg fill=\"none\" height=\"12\" viewBox=\"0 0 12 12\" width=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\n      <rect height=\"3\" rx=\"1\" stroke=\"currentColor\" width=\"9\" x=\"1.5\" y=\"1.5\" />\n      <rect height=\"3\" rx=\"1\" stroke=\"currentColor\" width=\"9\" x=\"1.5\" y=\"7.5\" />\n    </svg>\n  )\n}\n\ntype TableGridPopupProps = {\n  anchorElem: HTMLElement | null\n  editor: LexicalEditor\n  isOpen: boolean\n  onClose: () => void\n  onInsert: (cols: number, rows: number) => void\n  position: { left: number; top: number } | null\n}\n\nexport function TableGridPopup({\n  anchorElem,\n  editor: _editor,\n  isOpen,\n  onClose,\n  onInsert,\n  position,\n}: TableGridPopupProps) {\n  const [hoverCol, setHoverCol] = useState(0)\n  const [hoverRow, setHoverRow] = useState(0)\n  const [inputCols, setInputCols] = useState('')\n  const [inputRows, setInputRows] = useState('')\n  const [focusedInput, setFocusedInput] = useState<'cols' | 'rows' | null>(null)\n  const popupRef = useRef<HTMLDivElement>(null)\n  const colsInputRef = useRef<HTMLInputElement>(null)\n  const rowsInputRef = useRef<HTMLInputElement>(null)\n\n  const effectiveCols = hoverCol > 0 ? hoverCol : inputCols ? parseInt(inputCols, 10) || 0 : 5\n  const effectiveRows = hoverRow > 0 ? hoverRow : inputRows ? parseInt(inputRows, 10) || 0 : 5\n\n  useEffect(() => {\n    if (!isOpen) {\n      setHoverCol(0)\n      setHoverRow(0)\n      setInputCols('')\n      setInputRows('')\n      setFocusedInput(null)\n    }\n  }, [isOpen])\n\n  useEffect(() => {\n    if (!isOpen) {\n      return\n    }\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault()\n        e.stopPropagation()\n        onClose()\n      }\n      if (e.key === 'Enter' && focusedInput) {\n        e.preventDefault()\n        const cols = parseInt(inputCols, 10)\n        const rows = parseInt(inputRows, 10)\n        if (cols > 0 && rows > 0) {\n          onInsert(cols, rows)\n        }\n      }\n    }\n    document.addEventListener('keydown', handleKeyDown, true)\n    return () => document.removeEventListener('keydown', handleKeyDown, true)\n  }, [isOpen, onClose, onInsert, focusedInput, inputCols, inputRows])\n\n  const handleCellClick = useCallback(\n    (col: number, row: number) => {\n      if (col > 0 && row > 0) {\n        onInsert(col, row)\n      }\n    },\n    [onInsert],\n  )\n\n  const handleCellMouseEnter = useCallback((col: number, row: number) => {\n    setHoverCol(col)\n    setHoverRow(row)\n  }, [])\n\n  const handleGridMouseLeave = useCallback(() => {\n    setHoverCol(0)\n    setHoverRow(0)\n  }, [])\n\n  if (!isOpen || !position || !anchorElem) {\n    return null\n  }\n\n  const cells: React.ReactNode[] = []\n  for (let row = 1; row <= GRID_ROWS; row++) {\n    for (let col = 1; col <= GRID_COLUMNS; col++) {\n      const isInSelection = col <= effectiveCols && row <= effectiveRows\n      const isHovered = col <= hoverCol && row <= hoverRow\n      let className = 'table-grid-popup__cell'\n      if (isInSelection && isHovered) {\n        className += ' table-grid-popup__cell--hover'\n      } else if (isInSelection) {\n        className += ' table-grid-popup__cell--selected'\n      }\n\n      cells.push(\n        <div\n          aria-label={`${col} columns, ${row} rows`}\n          className={className}\n          key={`${row}-${col}`}\n          onClick={() => handleCellClick(col, row)}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault()\n              handleCellClick(col, row)\n            }\n          }}\n          onMouseEnter={() => handleCellMouseEnter(col, row)}\n          role=\"button\"\n          tabIndex={-1}\n        />,\n      )\n    }\n  }\n\n  const showTooltip = hoverCol > 0 && hoverRow > 0\n\n  return createPortal(\n    <React.Fragment>\n      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n      <div className=\"table-grid-popup__backdrop\" onClick={onClose} />\n      <div\n        className=\"table-grid-popup\"\n        ref={popupRef}\n        style={{\n          transform: `translate(${position.left}px, ${position.top}px)`,\n        }}\n      >\n        <div className=\"table-grid-popup__content\">\n          <div className=\"table-grid-popup__header\">\n            <div\n              className={`table-grid-popup__input-group${focusedInput === 'cols' ? ' table-grid-popup__input-group--focused' : ''}`}\n            >\n              <div className=\"table-grid-popup__input-icon\">\n                <ColumnsIcon />\n              </div>\n              <input\n                aria-label=\"Columns\"\n                className=\"table-grid-popup__input\"\n                min={1}\n                onBlur={() => setFocusedInput(null)}\n                onChange={(e) => setInputCols(e.target.value)}\n                onFocus={() => setFocusedInput('cols')}\n                placeholder={hoverCol > 0 ? String(hoverCol) : '5'}\n                ref={colsInputRef}\n                type=\"number\"\n                value={inputCols}\n              />\n            </div>\n            <span className=\"table-grid-popup__separator\">×</span>\n            <div\n              className={`table-grid-popup__input-group${focusedInput === 'rows' ? ' table-grid-popup__input-group--focused' : ''}`}\n            >\n              <div className=\"table-grid-popup__input-icon\">\n                <RowsIcon />\n              </div>\n              <input\n                aria-label=\"Rows\"\n                className=\"table-grid-popup__input\"\n                min={1}\n                onBlur={() => setFocusedInput(null)}\n                onChange={(e) => setInputRows(e.target.value)}\n                onFocus={() => setFocusedInput('rows')}\n                placeholder={hoverRow > 0 ? String(hoverRow) : '5'}\n                ref={rowsInputRef}\n                type=\"number\"\n                value={inputRows}\n              />\n            </div>\n          </div>\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n          <div className=\"table-grid-popup__grid\" onMouseLeave={handleGridMouseLeave}>\n            {cells}\n            {showTooltip && (\n              <div\n                className=\"table-grid-popup__tooltip\"\n                style={{\n                  left: `calc(${((hoverCol - 0.5) / GRID_COLUMNS) * 100}%)`,\n                  top: `calc(${((hoverRow - 1) / GRID_ROWS) * 100}%)`,\n                }}\n              >\n                {effectiveCols} × {effectiveRows}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </React.Fragment>,\n    anchorElem,\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/features/experimental_table/client/plugins/TablePlugin/index.css

@@ -0,0 +1,235 @@
+@layer payload-default {
+  .LexicalEditorTheme__tableScrollableWrapper {
+    overflow-x: auto;
+    margin: 0 var(--spacer-4) var(--spacer-5) 0;
+  }
+  .LexicalEditorTheme__tableScrollableWrapper > .LexicalEditorTheme__table {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .LexicalEditorTheme__tableAlignmentCenter {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .LexicalEditorTheme__tableAlignmentRight {
+    margin-left: auto;
+  }
+
+  .LexicalEditorTheme__tableSelection *::selection {
+    background-color: transparent;
+  }
+
+  .LexicalEditorTheme__table {
+    border-collapse: collapse;
+    max-width: 100%;
+    border-spacing: 0;
+    overflow-y: scroll;
+    overflow-x: scroll;
+    table-layout: fixed;
+    width: fit-content;
+    margin-top: var(--spacer-4);
+    margin-bottom: var(--spacer-5);
+
+    ::selection {
+      background: var(--color-bg-selected);
+    }
+
+    br::selection {
+      background: unset;
+    }
+  }
+
+  .LexicalEditorTheme__tableFrozenColumn tr > td:first-child {
+    background-color: var(--color-bg);
+    position: sticky;
+    z-index: 2;
+    left: 0;
+  }
+  .LexicalEditorTheme__tableFrozenColumn tr > th:first-child {
+    background-color: var(--color-bg-secondary);
+    position: sticky;
+    z-index: 2;
+    left: 0;
+  }
+  .LexicalEditorTheme__tableFrozenColumn tr > :first-child::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    height: 100%;
+    border-right: var(--stroke-width-small) solid var(--color-border);
+  }
+
+  .LexicalEditorTheme__tableFrozenColumn
+    tr
+    > :first-child.LexicalEditorTheme__tableCellSelected::after {
+    left: 0;
+    top: calc(var(--stroke-width-small) / -1);
+    right: calc(var(--stroke-width-small) / -1);
+    bottom: calc(var(--stroke-width-small) / -1);
+    height: auto;
+  }
+
+  .LexicalEditorTheme__tableRowStriping tr:nth-child(even) {
+    background-color: var(--color-bg-hover);
+  }
+
+  .LexicalEditorTheme__tableSelected {
+    outline: 2px solid var(--color-border-selected);
+  }
+
+  .LexicalEditorTheme__tableCell {
+    border: var(--stroke-width-small) solid var(--color-border);
+    vertical-align: top;
+    text-align: start;
+    padding: var(--spacer-2);
+    position: relative;
+    cursor: default;
+    outline: none;
+  }
+
+  .LexicalEditorTheme__tableCell > .LexicalEditorTheme__paragraph,
+  .LexicalEditorTheme__tableCell > .LexicalEditorTheme__h1,
+  .LexicalEditorTheme__tableCell > .LexicalEditorTheme__h2,
+  .LexicalEditorTheme__tableCell > .LexicalEditorTheme__h3,
+  .LexicalEditorTheme__tableCell > .LexicalEditorTheme__h4,
+  .LexicalEditorTheme__tableCell > .LexicalEditorTheme__h5,
+  .LexicalEditorTheme__tableCell > .LexicalEditorTheme__h6,
+  .LexicalEditorTheme__tableCell > .LexicalEditorTheme__quote,
+  .LexicalEditorTheme__tableCell > .LexicalEditorTheme__ol1,
+  .LexicalEditorTheme__tableCell > .LexicalEditorTheme__ul {
+    overflow: inherit;
+    margin-block: 0;
+  }
+
+  .LexicalEditorTheme__tableCellResizer {
+    position: absolute;
+    right: calc(var(--spacer-1) * -1);
+    height: 100%;
+    width: var(--spacer-2);
+    cursor: ew-resize;
+    z-index: 10;
+    top: 0;
+  }
+
+  .LexicalEditorTheme__tableCellHeader {
+    background-color: var(--color-bg-secondary);
+    text-align: start;
+  }
+
+  .LexicalEditorTheme__tableCellSelected {
+    caret-color: transparent;
+  }
+
+  .LexicalEditorTheme__tableCellSelected::after {
+    position: absolute;
+    left: calc(var(--stroke-width-small) / -1);
+    right: calc(var(--stroke-width-small) / -1);
+    bottom: calc(var(--stroke-width-small) / -1);
+    top: calc(var(--stroke-width-small) / -1);
+    background-color: var(--color-bg-selected);
+    border: var(--stroke-width-small) solid var(--color-border-selected);
+    opacity: 0.5;
+    content: '';
+    pointer-events: none;
+  }
+
+  .LexicalEditorTheme__tableCellHeader.LexicalEditorTheme__tableCellSelected::after {
+    background-color: var(--color-bg-selected-hover);
+  }
+
+  .LexicalEditorTheme__tableAddColumns {
+    height: 100%;
+  }
+
+  .LexicalEditorTheme__tableAddColumns,
+  .LexicalEditorTheme__tableAddRows {
+    position: absolute;
+    background-color: var(--color-bg-secondary);
+    border-radius: var(--radius-medium);
+    animation: table-controls 0.2s ease;
+    border: 0;
+    cursor: pointer;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 3C8.27614 3 8.5 3.22386 8.5 3.5V7.5H12.5C12.7761 7.5 13 7.72386 13 8C13 8.27614 12.7761 8.5 12.5 8.5H8.5V12.5C8.5 12.7761 8.27614 13 8 13C7.72386 13 7.5 12.7761 7.5 12.5V8.5H3.5C3.22386 8.5 3 8.27614 3 8C3 7.72386 3.22386 7.5 3.5 7.5H7.5V3.5C7.5 3.22386 7.72386 3 8 3Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: var(--spacer-3) var(--spacer-3);
+  }
+
+  .LexicalEditorTheme__tableAddColumns:hover,
+  .LexicalEditorTheme__tableAddRows:hover {
+    background-color: var(--color-bg-secondary-hover);
+  }
+
+  .LexicalEditorTheme__tableAddRows {
+    width: calc(100% - 25px);
+  }
+
+  @keyframes table-controls {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  .LexicalEditorTheme__tableCellResizeRuler {
+    display: block;
+    position: absolute;
+    width: var(--stroke-width-small);
+    background-color: var(--color-border-selected);
+    height: 100%;
+    top: 0;
+  }
+
+  .LexicalEditorTheme__tableCellActionButtonContainer {
+    display: block;
+    right: var(--spacer-1);
+    top: var(--spacer-1);
+    position: absolute;
+    z-index: 4;
+    width: var(--spacer-3);
+    height: var(--spacer-3);
+  }
+
+  .LexicalEditorTheme__tableCellActionButton {
+    background-color: var(--color-bg-secondary);
+    display: block;
+    border: 0;
+    border-radius: var(--radius-full);
+    width: var(--spacer-3);
+    height: var(--spacer-3);
+    color: var(--color-text);
+    cursor: pointer;
+  }
+
+  .LexicalEditorTheme__tableCellActionButton:hover {
+    background-color: var(--color-border);
+  }
+
+  html[data-theme='dark'] {
+    .LexicalEditorTheme__tableCellHeader {
+      background-color: var(--color-bg-secondary);
+    }
+
+    .LexicalEditorTheme__tableCellSelected::after {
+      background-color: var(--color-bg-selected);
+      opacity: 0.5;
+    }
+
+    .LexicalEditorTheme__tableAddColumns,
+    .LexicalEditorTheme__tableAddRows {
+      background-color: var(--color-bg-secondary);
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 3C8.27614 3 8.5 3.22386 8.5 3.5V7.5H12.5C12.7761 7.5 13 7.72386 13 8C13 8.27614 12.7761 8.5 12.5 8.5H8.5V12.5C8.5 12.7761 8.27614 13 8 13C7.72386 13 7.5 12.7761 7.5 12.5V8.5H3.5C3.22386 8.5 3 8.27614 3 8C3 7.72386 3.22386 7.5 3.5 7.5H7.5V3.5C7.5 3.22386 7.72386 3 8 3Z' fill='white' fill-opacity='0.9'/%3E%3C/svg%3E");
+    }
+
+    .LexicalEditorTheme__tableAddColumns:hover,
+    .LexicalEditorTheme__tableAddRows:hover {
+      background-color: var(--color-bg-secondary-hover);
+    }
+  }
+}

package/dist/features/experimental_table/client/plugins/TablePlugin/index.d.ts

@@ -2,7 +2,7 @@ import type { EditorThemeClasses, Klass, LexicalCommand, LexicalEditor, LexicalN
 import type { JSX } from 'react';
 import * as React from 'react';
 import type { PluginComponent } from '../../../../typesClient.js';
-import './index.scss';
+import './index.css';
 export type CellContextShape = {
     cellEditorConfig: CellEditorConfig | null;
     cellEditorPlugins: Array<JSX.Element> | JSX.Element | null;

package/dist/features/experimental_table/client/plugins/TablePlugin/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/features/experimental_table/client/plugins/TablePlugin/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,kBAAkB,EAClB,KAAK,EACL,cAAc,EACd,aAAa,EACb,WAAW,EAEZ,MAAM,SAAS,CAAA;AAChB,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAShC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAKjE,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAA;IACzC,iBAAiB,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAAA;IAC1D,GAAG,EAAE,CACH,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,EACzC,iBAAiB,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,KACvD,IAAI,CAAA;CACV,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;IACtC,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAA;IACzC,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,KAAK,IAAI,CAAA;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,kBAAkB,CAAA;CAC3B,CAAC,CAAA;AAEF,eAAO,MAAM,yBAAyB,EAAE,cAAc,CAAC,EAAE,CAExD,CAAA;AAED,eAAO,MAAM,WAAW,iCAMtB,CAAA;AAEF,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE,eAwBnE;AAED,eAAO,MAAM,WAAW,EAAE,eAuEzB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/features/experimental_table/client/plugins/TablePlugin/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAEV,kBAAkB,EAClB,KAAK,EACL,cAAc,EACd,aAAa,EACb,WAAW,EACZ,MAAM,SAAS,CAAA;AAChB,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAchC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAGjE,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAA;IACzC,iBAAiB,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAAA;IAC1D,GAAG,EAAE,CACH,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,EACzC,iBAAiB,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,KACvD,IAAI,CAAA;CACV,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;IACtC,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAA;IACzC,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,KAAK,IAAI,CAAA;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,kBAAkB,CAAA;CAC3B,CAAC,CAAA;AAEF,eAAO,MAAM,yBAAyB,EAAE,cAAc,CAAC,EAAE,CAExD,CAAA;AAED,eAAO,MAAM,WAAW,iCAMtB,CAAA;AAEF,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE,eAwBnE;AAED,eAAO,MAAM,WAAW,EAAE,eA4HzB,CAAA"}