@crystallize/design-system 1.24.24 → 1.24.26

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @crystallize/design-system
 
+## 1.24.26
+
+### Patch Changes
+
+- 045d05a: It was found that table th and td elements were both rendered as td. To fix it, now we tell lexical that they are different.
+
+## 1.24.25
+
+### Patch Changes
+
+- 48ba84c: Upgrade lexical to latest version
+
 ## 1.24.24
 
 ### Patch Changes

package/dist/index.js

@@ -8273,7 +8273,6 @@ var init_parse_initial_state = __esm({
 // src/rich-text-editor/model/crystallize-to-lexical.ts
 function composeInitialState({ richText }) {
   return function setLexicalState() {
-    const root = (0, import_lexical.$getRoot)();
     function handleNode({
       crystallizeContentNode,
       lexicalParent
@@ -8364,13 +8363,12 @@ function composeInitialState({ richText }) {
             lexicalNode = (0, import_table.$createTableRowNode)();
             break;
           }
-          case "table-cell":
+          case "table-cell": {
+            lexicalNode = (0, import_table.$createTableCellNode)(0, void 0);
+            break;
+          }
           case "table-head-cell": {
-            const colSpan = void 0;
-            lexicalNode = (0, import_table.$createTableCellNode)(
-              0,
-              colSpan
-            );
+            lexicalNode = (0, import_table.$createTableCellNode)(2, void 0);
             break;
           }
           case "container":
@@ -8419,6 +8417,7 @@ function composeInitialState({ richText }) {
         lexicalParent.append(lexicalNode);
       }
     }
+    const root = (0, import_lexical.$getRoot)();
     parseInitialState({ richText }).forEach(
       (crystallizeContentNode) => handleNode({ crystallizeContentNode, lexicalParent: root })
     );
@@ -37732,7 +37731,7 @@ function CodeActionMenuContainer({ anchorElem }) {
   const [editor] = (0, import_LexicalComposerContext.useLexicalComposerContext)();
   const [lang, setLang] = (0, import_react128.useState)("");
   const [isShown, setShown] = (0, import_react128.useState)(false);
-  const [shouldListenMouseMove, setShouldListenMouseMove] = (0, import_react128.useState)(true);
+  const [shouldListenMouseMove, setShouldListenMouseMove] = (0, import_react128.useState)(false);
   const [position, setPosition] = (0, import_react128.useState)({
     right: "0",
     top: "0"
@@ -37742,36 +37741,40 @@ function CodeActionMenuContainer({ anchorElem }) {
   function getCodeDOMNode() {
     return codeDOMNodeRef.current;
   }
-  const debouncedOnMouseMove = (0, import_use_debounce2.useDebouncedCallback)((event) => {
-    const { codeDOMNode, isOutside } = getMouseInfo(event);
-    if (isOutside) {
-      setShown(false);
-      return;
-    }
-    if (!codeDOMNode) {
-      return;
-    }
-    codeDOMNodeRef.current = codeDOMNode;
-    let codeNode = null;
-    let _lang = "";
-    editor.update(() => {
-      const maybeCodeNode = (0, import_lexical6.$getNearestNodeFromDOMNode)(codeDOMNode);
-      if ((0, import_code6.$isCodeNode)(maybeCodeNode)) {
-        codeNode = maybeCodeNode;
-        _lang = codeNode.getLanguage() || "";
+  const debouncedOnMouseMove = (0, import_use_debounce2.useDebouncedCallback)(
+    (event) => {
+      const { codeDOMNode, isOutside } = getMouseInfo(event);
+      if (isOutside) {
+        setShown(false);
+        return;
       }
-    });
-    if (codeNode) {
-      const { y: editorElemY, right: editorElemRight } = anchorElem.getBoundingClientRect();
-      const { y, right } = codeDOMNode.getBoundingClientRect();
-      setLang(_lang);
-      setShown(true);
-      setPosition({
-        right: `${editorElemRight - right + CODE_PADDING}px`,
-        top: `${y - editorElemY}px`
+      if (!codeDOMNode) {
+        return;
+      }
+      codeDOMNodeRef.current = codeDOMNode;
+      let codeNode = null;
+      let _lang = "";
+      editor.update(() => {
+        const maybeCodeNode = (0, import_lexical6.$getNearestNodeFromDOMNode)(codeDOMNode);
+        if ((0, import_code6.$isCodeNode)(maybeCodeNode)) {
+          codeNode = maybeCodeNode;
+          _lang = codeNode.getLanguage() || "";
+        }
       });
-    }
-  }, 50);
+      if (codeNode) {
+        const { y: editorElemY, right: editorElemRight } = anchorElem.getBoundingClientRect();
+        const { y, right } = codeDOMNode.getBoundingClientRect();
+        setLang(_lang);
+        setShown(true);
+        setPosition({
+          right: `${editorElemRight - right + CODE_PADDING}px`,
+          top: `${y - editorElemY}px`
+        });
+      }
+    },
+    50,
+    { maxWait: 1e3 }
+  );
   (0, import_react128.useEffect)(() => {
     if (!shouldListenMouseMove) {
       return;
@@ -37783,24 +37786,29 @@ function CodeActionMenuContainer({ anchorElem }) {
       document.removeEventListener("mousemove", debouncedOnMouseMove);
     };
   }, [shouldListenMouseMove, debouncedOnMouseMove]);
-  editor.registerMutationListener(import_code6.CodeNode, (mutations) => {
-    editor.getEditorState().read(() => {
-      for (const [key, type] of mutations) {
-        switch (type) {
-          case "created":
-            codeSetRef.current.add(key);
-            setShouldListenMouseMove(codeSetRef.current.size > 0);
-            break;
-          case "destroyed":
-            codeSetRef.current.delete(key);
-            setShouldListenMouseMove(codeSetRef.current.size > 0);
-            break;
-          default:
-            break;
-        }
-      }
-    });
-  });
+  (0, import_react128.useEffect)(() => {
+    return editor.registerMutationListener(
+      import_code6.CodeNode,
+      (mutations) => {
+        editor.getEditorState().read(() => {
+          for (const [key, type] of mutations) {
+            switch (type) {
+              case "created":
+                codeSetRef.current.add(key);
+                break;
+              case "destroyed":
+                codeSetRef.current.delete(key);
+                break;
+              default:
+                break;
+            }
+          }
+        });
+        setShouldListenMouseMove(codeSetRef.current.size > 0);
+      },
+      { skipInitialization: false }
+    );
+  }, [editor]);
   const normalizedLang = (0, import_code6.normalizeCodeLang)(lang);
   const codeFriendlyName = (0, import_code6.getLanguageFriendlyName)(lang);
   return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(import_jsx_runtime148.Fragment, {
@@ -37827,7 +37835,7 @@ function CodeActionMenuContainer({ anchorElem }) {
 }
 function getMouseInfo(event) {
   const target = event.target;
-  if (target && target instanceof HTMLElement) {
+  if ((0, import_lexical6.isHTMLElement)(target)) {
     const codeDOMNode = target.closest("code.CrystallizeRTEditorTheme__code");
     const isOutside = !(codeDOMNode || target.closest("div.c-rte-code-action-menu-container"));
     return { codeDOMNode, isOutside };
@@ -38369,12 +38377,11 @@ function FloatingLinkEditorPlugin({
   const [editor] = (0, import_LexicalComposerContext4.useLexicalComposerContext)();
   return useFloatingLinkEditorToolbar(editor, anchorElem);
 }
-var import_react131, React5, import_lexical8, import_react_dom3, import_link4, import_LexicalComposerContext4, import_utils, import_jsx_runtime150;
+var import_react131, import_lexical8, import_react_dom3, import_link4, import_LexicalComposerContext4, import_utils, import_jsx_runtime150;
 var init_FloatingLinkEditorPlugin = __esm({
   "src/rich-text-editor/plugins/FloatingLinkEditorPlugin/index.tsx"() {
     "use strict";
     import_react131 = require("react");
-    React5 = require("react");
     import_lexical8 = require("lexical");
     import_react_dom3 = require("react-dom");
     import_link4 = require("@lexical/link");
@@ -38698,13 +38705,13 @@ function FloatingTextFormatToolbarPlugin({
   const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
   return useFloatingTextFormatToolbar(editor, anchorElem);
 }
-var import_react132, React6, import_lexical9, import_react_dom4, import_code8, import_link5, import_LexicalComposerContext5, import_utils2, import_jsx_runtime151;
+var import_react132, React5, import_lexical9, import_react_dom4, import_code8, import_link5, import_LexicalComposerContext5, import_utils2, import_jsx_runtime151;
 var init_FloatingTextFormatToolbarPlugin = __esm({
   "src/rich-text-editor/plugins/FloatingTextFormatToolbarPlugin/index.tsx"() {
     "use strict";
     init_13();
     import_react132 = require("react");
-    React6 = require("react");
+    React5 = require("react");
     import_lexical9 = require("lexical");
     import_react_dom4 = require("react-dom");
     import_code8 = require("@lexical/code");
@@ -38727,11 +38734,11 @@ function LinkPlugin() {
     validateUrl
   });
 }
-var React7, import_LexicalLinkPlugin, import_jsx_runtime152;
+var React6, import_LexicalLinkPlugin, import_jsx_runtime152;
 var init_LinkPlugin = __esm({
   "src/rich-text-editor/plugins/LinkPlugin/index.tsx"() {
     "use strict";
-    React7 = require("react");
+    React6 = require("react");
     import_LexicalLinkPlugin = require("@lexical/react/LexicalLinkPlugin");
     init_url();
     import_jsx_runtime152 = require("react/jsx-runtime");
@@ -38942,7 +38949,7 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
   (0, import_react136.useEffect)(() => {
     editor.getEditorState().read(() => {
       const selection = (0, import_lexical13.$getSelection)();
-      if ((0, import_lexical13.DEPRECATED_$isGridSelection)(selection)) {
+      if ((0, import_table4.$isTableSelection)(selection)) {
         const selectionShape = selection.getShape();
         updateSelectionCounts({
           columns: selectionShape.toX - selectionShape.fromX + 1,
@@ -38959,9 +38966,9 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
         if (!tableElement) {
           throw new Error("Expected to find tableElement in DOM");
         }
-        const tableSelection = (0, import_table4.getTableSelectionFromTableElement)(tableElement);
+        const tableSelection = (0, import_table4.getTableObserverFromTableElement)(tableElement);
         if (tableSelection !== null) {
-          tableSelection.clearHighlight();
+          tableSelection.$clearHighlight();
         }
         tableNode.markDirty();
         updateTableCellNode(tableCellNode.getLatest());
@@ -38976,13 +38983,13 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
         const selection = (0, import_lexical13.$getSelection)();
         const tableNode = (0, import_table4.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
         let tableRowIndex;
-        if ((0, import_lexical13.DEPRECATED_$isGridSelection)(selection)) {
+        if ((0, import_table4.$isTableSelection)(selection)) {
           const selectionShape = selection.getShape();
           tableRowIndex = shouldInsertAfter ? selectionShape.toY : selectionShape.fromY;
         } else {
           tableRowIndex = (0, import_table4.$getTableRowIndexFromTableCellNode)(tableCellNode);
         }
-        const grid = (0, import_table4.$getElementGridForTableNode)(editor, tableNode);
+        const grid = (0, import_table4.$getElementForTableNode)(editor, tableNode);
         (0, import_table4.$insertTableRow)(tableNode, tableRowIndex, shouldInsertAfter, selectionCounts.rows, grid);
         clearTableSelection();
       });
@@ -38995,13 +39002,13 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
         const selection = (0, import_lexical13.$getSelection)();
         const tableNode = (0, import_table4.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
         let tableColumnIndex;
-        if ((0, import_lexical13.DEPRECATED_$isGridSelection)(selection)) {
+        if ((0, import_table4.$isTableSelection)(selection)) {
           const selectionShape = selection.getShape();
           tableColumnIndex = shouldInsertAfter ? selectionShape.toX : selectionShape.fromX;
         } else {
           tableColumnIndex = (0, import_table4.$getTableColumnIndexFromTableCellNode)(tableCellNode);
         }
-        const grid = (0, import_table4.$getElementGridForTableNode)(editor, tableNode);
+        const grid = (0, import_table4.$getElementForTableNode)(editor, tableNode);
         (0, import_table4.$insertTableColumn)(tableNode, tableColumnIndex, shouldInsertAfter, selectionCounts.columns, grid);
         clearTableSelection();
       });
@@ -39390,7 +39397,7 @@ function BlockFormatDropDown({
     if (blockType !== "paragraph") {
       editor.update(() => {
         const selection = (0, import_lexical15.$getSelection)();
-        if ((0, import_lexical15.$isRangeSelection)(selection) || (0, import_lexical15.DEPRECATED_$isGridSelection)(selection))
+        if ((0, import_lexical15.$isRangeSelection)(selection) || (0, import_table6.$isTableSelection)(selection))
           (0, import_selection4.$setBlocksType)(selection, () => (0, import_lexical15.$createParagraphNode)());
       });
     }
@@ -39399,7 +39406,7 @@ function BlockFormatDropDown({
     if (blockType !== headingSize) {
       editor.update(() => {
         const selection = (0, import_lexical15.$getSelection)();
-        if ((0, import_lexical15.$isRangeSelection)(selection) || (0, import_lexical15.DEPRECATED_$isGridSelection)(selection)) {
+        if ((0, import_lexical15.$isRangeSelection)(selection) || (0, import_table6.$isTableSelection)(selection)) {
           (0, import_selection4.$setBlocksType)(selection, () => (0, import_rich_text5.$createHeadingNode)(headingSize));
         }
       });
@@ -39423,7 +39430,7 @@ function BlockFormatDropDown({
     if (blockType !== "quote") {
       editor.update(() => {
         const selection = (0, import_lexical15.$getSelection)();
-        if ((0, import_lexical15.$isRangeSelection)(selection) || (0, import_lexical15.DEPRECATED_$isGridSelection)(selection)) {
+        if ((0, import_lexical15.$isRangeSelection)(selection) || (0, import_table6.$isTableSelection)(selection)) {
           (0, import_selection4.$setBlocksType)(selection, () => (0, import_rich_text5.$createQuoteNode)());
         } else {
           (0, import_selection4.$setBlocksType)((0, import_lexical15.$getRoot)().select(), () => (0, import_rich_text5.$createQuoteNode)());
@@ -39435,7 +39442,7 @@ function BlockFormatDropDown({
     if (blockType !== "code") {
       editor.update(() => {
         let selection = (0, import_lexical15.$getSelection)();
-        if ((0, import_lexical15.$isRangeSelection)(selection) || (0, import_lexical15.DEPRECATED_$isGridSelection)(selection)) {
+        if ((0, import_lexical15.$isRangeSelection)(selection) || (0, import_table6.$isTableSelection)(selection)) {
           if (selection.isCollapsed()) {
             (0, import_selection4.$setBlocksType)(selection, () => (0, import_code9.$createCodeNode)());
           } else {
@@ -39986,7 +39993,7 @@ function ToolbarPlugin({
     ]
   });
 }
-var import_react138, import_lexical15, import_code9, import_link6, import_list5, import_LexicalComposerContext11, import_LexicalDecoratorBlockNode, import_LexicalHorizontalRuleNode4, import_rich_text5, import_selection4, import_utils4, import_jsx_runtime156, headingTypeToBlockName, headings, blockTypeToBlockName, CODE_LANGUAGE_OPTIONS;
+var import_react138, import_lexical15, import_code9, import_link6, import_list5, import_LexicalComposerContext11, import_LexicalDecoratorBlockNode, import_LexicalHorizontalRuleNode4, import_rich_text5, import_selection4, import_table6, import_utils4, import_jsx_runtime156, headingTypeToBlockName, headings, blockTypeToBlockName, CODE_LANGUAGE_OPTIONS;
 var init_ToolbarPlugin = __esm({
   "src/rich-text-editor/plugins/ToolbarPlugin/index.tsx"() {
     "use strict";
@@ -40000,6 +40007,7 @@ var init_ToolbarPlugin = __esm({
     import_LexicalHorizontalRuleNode4 = require("@lexical/react/LexicalHorizontalRuleNode");
     import_rich_text5 = require("@lexical/rich-text");
     import_selection4 = require("@lexical/selection");
+    import_table6 = require("@lexical/table");
     import_utils4 = require("@lexical/utils");
     init_button2();
     init_dialog2();
@@ -40387,7 +40395,7 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
 var cardStyles = (0, import_class_variance_authority3.cva)("c-card", {
   variants: {
     variant: {
-      default: "c-card",
+      default: "",
       elevate: "c-card-elevate"
     }
   },

package/dist/index.mjs

@@ -26,7 +26,7 @@ import { jsx } from "react/jsx-runtime";
 var cardStyles = cva("c-card", {
   variants: {
     variant: {
-      default: "c-card",
+      default: "",
       elevate: "c-card-elevate"
     }
   },
@@ -486,7 +486,7 @@ function Tag({
 // src/rich-text-editor/index.tsx
 import { lazy, Suspense } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
-var LazyRichTextEditor = lazy(() => import("./rich-text-editor-A5TU4T3X.mjs"));
+var LazyRichTextEditor = lazy(() => import("./rich-text-editor-QPSSPPTF.mjs"));
 var RichTextEditor = (props) => {
   return /* @__PURE__ */ jsx15(Suspense, {
     fallback: null,

package/dist/{rich-text-editor-A5TU4T3X.mjs → rich-text-editor-QPSSPPTF.mjs}

@@ -179,7 +179,6 @@ function parseInitialState({ richText }) {
 // src/rich-text-editor/model/crystallize-to-lexical.ts
 function composeInitialState({ richText }) {
   return function setLexicalState() {
-    const root = $getRoot();
     function handleNode({
       crystallizeContentNode,
       lexicalParent
@@ -270,13 +269,12 @@ function composeInitialState({ richText }) {
             lexicalNode = $createTableRowNode();
             break;
           }
-          case "table-cell":
+          case "table-cell": {
+            lexicalNode = $createTableCellNode(0, void 0);
+            break;
+          }
           case "table-head-cell": {
-            const colSpan = void 0;
-            lexicalNode = $createTableCellNode(
-              0,
-              colSpan
-            );
+            lexicalNode = $createTableCellNode(2, void 0);
             break;
           }
           case "container":
@@ -325,6 +323,7 @@ function composeInitialState({ richText }) {
         lexicalParent.append(lexicalNode);
       }
     }
+    const root = $getRoot();
     parseInitialState({ richText }).forEach(
       (crystallizeContentNode) => handleNode({ crystallizeContentNode, lexicalParent: root })
     );
@@ -610,7 +609,7 @@ function LexicalAutoLinkPlugin() {
 
 // src/rich-text-editor/plugins/CodeActionMenuPlugin/index.tsx
 import { useEffect, useRef, useState as useState3 } from "react";
-import { $getNearestNodeFromDOMNode as $getNearestNodeFromDOMNode3 } from "lexical";
+import { $getNearestNodeFromDOMNode as $getNearestNodeFromDOMNode3, isHTMLElement } from "lexical";
 import { createPortal } from "react-dom";
 import { useDebouncedCallback as useDebouncedCallback2 } from "use-debounce";
 import { $isCodeNode as $isCodeNode4, CodeNode as CodeNode2, getLanguageFriendlyName, normalizeCodeLang } from "@lexical/code";
@@ -784,7 +783,7 @@ function CodeActionMenuContainer({ anchorElem }) {
   const [editor] = useLexicalComposerContext();
   const [lang, setLang] = useState3("");
   const [isShown, setShown] = useState3(false);
-  const [shouldListenMouseMove, setShouldListenMouseMove] = useState3(true);
+  const [shouldListenMouseMove, setShouldListenMouseMove] = useState3(false);
   const [position, setPosition] = useState3({
     right: "0",
     top: "0"
@@ -794,36 +793,40 @@ function CodeActionMenuContainer({ anchorElem }) {
   function getCodeDOMNode() {
     return codeDOMNodeRef.current;
   }
-  const debouncedOnMouseMove = useDebouncedCallback2((event) => {
-    const { codeDOMNode, isOutside } = getMouseInfo(event);
-    if (isOutside) {
-      setShown(false);
-      return;
-    }
-    if (!codeDOMNode) {
-      return;
-    }
-    codeDOMNodeRef.current = codeDOMNode;
-    let codeNode = null;
-    let _lang = "";
-    editor.update(() => {
-      const maybeCodeNode = $getNearestNodeFromDOMNode3(codeDOMNode);
-      if ($isCodeNode4(maybeCodeNode)) {
-        codeNode = maybeCodeNode;
-        _lang = codeNode.getLanguage() || "";
+  const debouncedOnMouseMove = useDebouncedCallback2(
+    (event) => {
+      const { codeDOMNode, isOutside } = getMouseInfo(event);
+      if (isOutside) {
+        setShown(false);
+        return;
       }
-    });
-    if (codeNode) {
-      const { y: editorElemY, right: editorElemRight } = anchorElem.getBoundingClientRect();
-      const { y, right } = codeDOMNode.getBoundingClientRect();
-      setLang(_lang);
-      setShown(true);
-      setPosition({
-        right: `${editorElemRight - right + CODE_PADDING}px`,
-        top: `${y - editorElemY}px`
+      if (!codeDOMNode) {
+        return;
+      }
+      codeDOMNodeRef.current = codeDOMNode;
+      let codeNode = null;
+      let _lang = "";
+      editor.update(() => {
+        const maybeCodeNode = $getNearestNodeFromDOMNode3(codeDOMNode);
+        if ($isCodeNode4(maybeCodeNode)) {
+          codeNode = maybeCodeNode;
+          _lang = codeNode.getLanguage() || "";
+        }
       });
-    }
-  }, 50);
+      if (codeNode) {
+        const { y: editorElemY, right: editorElemRight } = anchorElem.getBoundingClientRect();
+        const { y, right } = codeDOMNode.getBoundingClientRect();
+        setLang(_lang);
+        setShown(true);
+        setPosition({
+          right: `${editorElemRight - right + CODE_PADDING}px`,
+          top: `${y - editorElemY}px`
+        });
+      }
+    },
+    50,
+    { maxWait: 1e3 }
+  );
   useEffect(() => {
     if (!shouldListenMouseMove) {
       return;
@@ -835,24 +838,29 @@ function CodeActionMenuContainer({ anchorElem }) {
       document.removeEventListener("mousemove", debouncedOnMouseMove);
     };
   }, [shouldListenMouseMove, debouncedOnMouseMove]);
-  editor.registerMutationListener(CodeNode2, (mutations) => {
-    editor.getEditorState().read(() => {
-      for (const [key, type] of mutations) {
-        switch (type) {
-          case "created":
-            codeSetRef.current.add(key);
-            setShouldListenMouseMove(codeSetRef.current.size > 0);
-            break;
-          case "destroyed":
-            codeSetRef.current.delete(key);
-            setShouldListenMouseMove(codeSetRef.current.size > 0);
-            break;
-          default:
-            break;
-        }
-      }
-    });
-  });
+  useEffect(() => {
+    return editor.registerMutationListener(
+      CodeNode2,
+      (mutations) => {
+        editor.getEditorState().read(() => {
+          for (const [key, type] of mutations) {
+            switch (type) {
+              case "created":
+                codeSetRef.current.add(key);
+                break;
+              case "destroyed":
+                codeSetRef.current.delete(key);
+                break;
+              default:
+                break;
+            }
+          }
+        });
+        setShouldListenMouseMove(codeSetRef.current.size > 0);
+      },
+      { skipInitialization: false }
+    );
+  }, [editor]);
   const normalizedLang = normalizeCodeLang(lang);
   const codeFriendlyName = getLanguageFriendlyName(lang);
   return /* @__PURE__ */ jsx6(Fragment, {
@@ -879,7 +887,7 @@ function CodeActionMenuContainer({ anchorElem }) {
 }
 function getMouseInfo(event) {
   const target = event.target;
-  if (target && target instanceof HTMLElement) {
+  if (isHTMLElement(target)) {
     const codeDOMNode = target.closest("code.CrystallizeRTEditorTheme__code");
     const isOutside = !(codeDOMNode || target.closest("div.c-rte-code-action-menu-container"));
     return { codeDOMNode, isOutside };
@@ -909,7 +917,6 @@ function CodeHighlightPlugin() {
 
 // src/rich-text-editor/plugins/FloatingLinkEditorPlugin/index.tsx
 import { useCallback, useEffect as useEffect4, useRef as useRef2, useState as useState5 } from "react";
-import "react";
 import {
   $getSelection as $getSelection3,
   $isRangeSelection,
@@ -1876,13 +1883,13 @@ function TabFocusPlugin() {
 
 // src/rich-text-editor/plugins/TableActionMenuPlugin/index.tsx
 import { useCallback as useCallback3, useEffect as useEffect9, useRef as useRef4, useState as useState7 } from "react";
-import { $getRoot as $getRoot3, $getSelection as $getSelection8, $isRangeSelection as $isRangeSelection6, DEPRECATED_$isGridSelection } from "lexical";
+import { $getRoot as $getRoot3, $getSelection as $getSelection8, $isRangeSelection as $isRangeSelection6 } from "lexical";
 import { createPortal as createPortal4 } from "react-dom";
 import { useLexicalComposerContext as useLexicalComposerContext9 } from "@lexical/react/LexicalComposerContext";
 import useLexicalEditable from "@lexical/react/useLexicalEditable";
 import {
   $deleteTableColumn,
-  $getElementGridForTableNode,
+  $getElementForTableNode,
   $getTableCellNodeFromLexicalNode,
   $getTableColumnIndexFromTableCellNode,
   $getTableNodeFromLexicalNodeOrThrow,
@@ -1892,8 +1899,9 @@ import {
   $isTableCellNode as $isTableCellNode2,
   $isTableNode as $isTableNode2,
   $isTableRowNode as $isTableRowNode2,
+  $isTableSelection,
   $removeTableRowAtIndex,
-  getTableSelectionFromTableElement,
+  getTableObserverFromTableElement,
   TableCellHeaderStates,
   TableCellNode as TableCellNode2
 } from "@lexical/table";
@@ -1919,7 +1927,7 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
   useEffect9(() => {
     editor.getEditorState().read(() => {
       const selection = $getSelection8();
-      if (DEPRECATED_$isGridSelection(selection)) {
+      if ($isTableSelection(selection)) {
         const selectionShape = selection.getShape();
         updateSelectionCounts({
           columns: selectionShape.toX - selectionShape.fromX + 1,
@@ -1936,9 +1944,9 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
         if (!tableElement) {
           throw new Error("Expected to find tableElement in DOM");
         }
-        const tableSelection = getTableSelectionFromTableElement(tableElement);
+        const tableSelection = getTableObserverFromTableElement(tableElement);
         if (tableSelection !== null) {
-          tableSelection.clearHighlight();
+          tableSelection.$clearHighlight();
         }
         tableNode.markDirty();
         updateTableCellNode(tableCellNode.getLatest());
@@ -1953,13 +1961,13 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
         const selection = $getSelection8();
         const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
         let tableRowIndex;
-        if (DEPRECATED_$isGridSelection(selection)) {
+        if ($isTableSelection(selection)) {
           const selectionShape = selection.getShape();
           tableRowIndex = shouldInsertAfter ? selectionShape.toY : selectionShape.fromY;
         } else {
           tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
         }
-        const grid = $getElementGridForTableNode(editor, tableNode);
+        const grid = $getElementForTableNode(editor, tableNode);
         $insertTableRow(tableNode, tableRowIndex, shouldInsertAfter, selectionCounts.rows, grid);
         clearTableSelection();
       });
@@ -1972,13 +1980,13 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
         const selection = $getSelection8();
         const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
         let tableColumnIndex;
-        if (DEPRECATED_$isGridSelection(selection)) {
+        if ($isTableSelection(selection)) {
           const selectionShape = selection.getShape();
           tableColumnIndex = shouldInsertAfter ? selectionShape.toX : selectionShape.fromX;
         } else {
           tableColumnIndex = $getTableColumnIndexFromTableCellNode(tableCellNode);
         }
-        const grid = $getElementGridForTableNode(editor, tableNode);
+        const grid = $getElementForTableNode(editor, tableNode);
         $insertTableColumn(tableNode, tableColumnIndex, shouldInsertAfter, selectionCounts.columns, grid);
         clearTableSelection();
       });
@@ -2212,7 +2220,6 @@ import {
   CAN_REDO_COMMAND,
   CAN_UNDO_COMMAND,
   COMMAND_PRIORITY_CRITICAL as COMMAND_PRIORITY_CRITICAL3,
-  DEPRECATED_$isGridSelection as DEPRECATED_$isGridSelection2,
   FORMAT_TEXT_COMMAND as FORMAT_TEXT_COMMAND2,
   REDO_COMMAND,
   SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND3,
@@ -2238,6 +2245,7 @@ import { $isDecoratorBlockNode } from "@lexical/react/LexicalDecoratorBlockNode"
 import { INSERT_HORIZONTAL_RULE_COMMAND } from "@lexical/react/LexicalHorizontalRuleNode";
 import { $createHeadingNode as $createHeadingNode2, $createQuoteNode as $createQuoteNode2, $isHeadingNode as $isHeadingNode2 } from "@lexical/rich-text";
 import { $selectAll, $setBlocksType } from "@lexical/selection";
+import { $isTableSelection as $isTableSelection2 } from "@lexical/table";
 import {
   $findMatchingParent as $findMatchingParent2,
   $getNearestBlockElementAncestorOrThrow,
@@ -2397,7 +2405,7 @@ function BlockFormatDropDown({
     if (blockType !== "paragraph") {
       editor.update(() => {
         const selection = $getSelection9();
-        if ($isRangeSelection7(selection) || DEPRECATED_$isGridSelection2(selection))
+        if ($isRangeSelection7(selection) || $isTableSelection2(selection))
           $setBlocksType(selection, () => $createParagraphNode2());
       });
     }
@@ -2406,7 +2414,7 @@ function BlockFormatDropDown({
     if (blockType !== headingSize) {
       editor.update(() => {
         const selection = $getSelection9();
-        if ($isRangeSelection7(selection) || DEPRECATED_$isGridSelection2(selection)) {
+        if ($isRangeSelection7(selection) || $isTableSelection2(selection)) {
           $setBlocksType(selection, () => $createHeadingNode2(headingSize));
         }
       });
@@ -2430,7 +2438,7 @@ function BlockFormatDropDown({
     if (blockType !== "quote") {
       editor.update(() => {
         const selection = $getSelection9();
-        if ($isRangeSelection7(selection) || DEPRECATED_$isGridSelection2(selection)) {
+        if ($isRangeSelection7(selection) || $isTableSelection2(selection)) {
           $setBlocksType(selection, () => $createQuoteNode2());
         } else {
           $setBlocksType($getRoot4().select(), () => $createQuoteNode2());
@@ -2442,7 +2450,7 @@ function BlockFormatDropDown({
     if (blockType !== "code") {
       editor.update(() => {
         let selection = $getSelection9();
-        if ($isRangeSelection7(selection) || DEPRECATED_$isGridSelection2(selection)) {
+        if ($isRangeSelection7(selection) || $isTableSelection2(selection)) {
           if (selection.isCollapsed()) {
             $setBlocksType(selection, () => $createCodeNode2());
           } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.24.24",
+  "version": "1.24.26",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -20,23 +20,23 @@
     }
   },
   "dependencies": {
-    "@lexical/clipboard": "0.12.4",
-    "@lexical/code": "0.12.4",
-    "@lexical/file": "0.12.4",
-    "@lexical/hashtag": "0.12.4",
-    "@lexical/html": "0.12.4",
-    "@lexical/link": "0.12.4",
-    "@lexical/list": "0.12.4",
-    "@lexical/mark": "0.12.4",
-    "@lexical/markdown": "0.12.4",
-    "@lexical/overflow": "0.12.4",
-    "@lexical/react": "0.12.4",
-    "@lexical/rich-text": "0.12.4",
-    "@lexical/selection": "0.12.4",
-    "@lexical/table": "0.12.4",
-    "@lexical/text": "0.12.4",
-    "@lexical/utils": "0.12.4",
-    "@lexical/yjs": "0.12.4",
+    "@lexical/clipboard": "0.21.0",
+    "@lexical/code": "0.21.0",
+    "@lexical/file": "0.21.0",
+    "@lexical/hashtag": "0.21.0",
+    "@lexical/html": "0.21.0",
+    "@lexical/link": "0.21.0",
+    "@lexical/list": "0.21.0",
+    "@lexical/mark": "0.21.0",
+    "@lexical/markdown": "0.21.0",
+    "@lexical/overflow": "0.21.0",
+    "@lexical/react": "0.21.0",
+    "@lexical/rich-text": "0.21.0",
+    "@lexical/selection": "0.21.0",
+    "@lexical/table": "0.21.0",
+    "@lexical/text": "0.21.0",
+    "@lexical/utils": "0.21.0",
+    "@lexical/yjs": "0.21.0",
     "@radix-ui/react-checkbox": "1.0.1",
     "@radix-ui/react-collapsible": "1.0.0",
     "@radix-ui/react-dialog": "1.0.5",
@@ -49,7 +49,7 @@
     "@radix-ui/react-switch": "^1.0.2",
     "@radix-ui/react-tooltip": "1.0.0",
     "class-variance-authority": "^0.4.0",
-    "lexical": "0.12.4",
+    "lexical": "0.21.0",
     "sonner": "^0.6.2",
     "tailwindcss-radix": "^2.6.1",
     "use-debounce": "8.0.4"
@@ -75,14 +75,13 @@
     "@storybook/react": "7.6.2",
     "@storybook/react-vite": "7.6.2",
     "@storybook/theming": "7.6.2",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/user-event": "14.5.1",
-    "@types/testing-library__jest-dom": "^5.14.5",
+    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/react": "16.1.0",
+    "@testing-library/user-event": "14.5.2",
     "@types/prettier": "2.7.2",
     "@types/react": "17.0.1",
     "@types/react-dom": "17.0.1",
-    "@vitejs/plugin-react": "^3.0.1",
+    "@vitejs/plugin-react": "4.3.4",
     "concurrently": "^7.6.0",
     "hex-rgb": "4.3.0",
     "postcss": "^8.4.21",
@@ -95,7 +94,7 @@
     "tsup": "^6.5.0",
     "typescript": "4.9.4",
     "vite": "5.3.5",
-    "vitest": "0.30.1",
+    "vitest": "2.1.8",
     "tsconfig": "0.0.0"
   },
   "keywords": [

package/src/card/card.tsx

@@ -7,7 +7,7 @@ type CardStylesProps = VariantProps<typeof cardStyles>;
 const cardStyles = cva('c-card', {
   variants: {
     variant: {
-      default: 'c-card',
+      default: '',
       elevate: 'c-card-elevate',
     },
   },

package/src/rich-text-editor/model/crystallize-to-lexical.ts

@@ -5,6 +5,7 @@ import {
   $getRoot,
   $isTextNode,
   LexicalNode,
+  ElementNode,
   TextFormatType,
 } from 'lexical';
 import { $createCodeHighlightNode, $createCodeNode } from '@lexical/code';
@@ -19,8 +20,6 @@ import { parseInitialState } from './parse-initial-state';
 
 export function composeInitialState({ richText }: { richText: CrystallizeRichText }) {
   return function setLexicalState() {
-    const root = $getRoot();
-
     function handleNode({
       crystallizeContentNode,
       lexicalParent,
@@ -74,7 +73,7 @@ export function composeInitialState({ richText }: { richText: CrystallizeRichTex
           case 'code': {
             const language = metadata && typeof metadata.language === 'string' ? metadata.language : null;
             lexicalNode = $createCodeNode(language);
-            lexicalNode.append($createCodeHighlightNode(textContent ?? ''));
+            (lexicalNode as ElementNode).append($createCodeHighlightNode(textContent ?? ''));
             insertedTextContent = true;
             break;
           }
@@ -117,23 +116,12 @@ export function composeInitialState({ richText }: { richText: CrystallizeRichTex
             lexicalNode = $createTableRowNode();
             break;
           }
-          case 'table-cell':
+          case 'table-cell': {
+            lexicalNode = $createTableCellNode(0, undefined);
+            break;
+          }
           case 'table-head-cell': {
-            // ** colSpan / rowSpan has not yet been implemented **
-            // const colSpanFromMeta = metadata?.colSpan;
-            // const colSpanParsed =
-            //   typeof colSpanFromMeta === 'number'
-            //     ? colSpanFromMeta
-            //     : parseInt(colSpanFromMeta as unknown as string, 10);
-            // const colSpan = !isNaN(colSpanParsed) ? colSpanParsed : undefined;
-            const colSpan = undefined;
-
-            lexicalNode = $createTableCellNode(
-              // 2 indicates NO_HEADER_STATUS
-              // See TableCellHeaderStates in @lexical/table/LexicalTableCellNode for details
-              0,
-              colSpan,
-            );
+            lexicalNode = $createTableCellNode(2, undefined);
             break;
           }
           // We do not deal with these tags. They should just be skipped.
@@ -144,7 +132,7 @@ export function composeInitialState({ richText }: { richText: CrystallizeRichTex
               children.forEach(n => handleNode({ crystallizeContentNode: n, lexicalParent }));
             } else if (typeof textContent === 'string' && kind === 'inline') {
               const textNode = $createTextNode(textContent);
-              lexicalNode.append(textNode);
+              (lexicalNode as ElementNode).append(textNode);
             }
             return;
           }
@@ -155,7 +143,7 @@ export function composeInitialState({ richText }: { richText: CrystallizeRichTex
           if (!lexicalNode && kind === 'inline') {
             lexicalNode = textNode;
           } else if (lexicalNode) {
-            lexicalNode.append(textNode);
+            (lexicalNode as ElementNode).append(textNode);
           }
         }
       }
@@ -192,10 +180,11 @@ export function composeInitialState({ richText }: { richText: CrystallizeRichTex
           }
         }
 
-        lexicalParent.append(lexicalNode);
+        (lexicalParent as ElementNode).append(lexicalNode);
       }
     }
 
+    const root = $getRoot();
     parseInitialState({ richText }).forEach(crystallizeContentNode =>
       handleNode({ crystallizeContentNode, lexicalParent: root }),
     );

package/src/rich-text-editor/model/lexical-to-crystallize.ts

@@ -199,16 +199,17 @@ export function lexicalToCrystallizeRichText({
   return crystallizeRichText;
 }
 
-const lexicalFormatToCrystallizeType: Record<TextFormatType, CrystallizeRichTextInlineFormattedNodes['type']> = {
-  bold: 'strong',
-  italic: 'emphasized',
-  underline: 'underlined',
-  strikethrough: 'deleted',
-  subscript: 'subscripted',
-  superscript: 'superscripted',
-  highlight: 'emphasized',
-  code: 'code',
-};
+const lexicalFormatToCrystallizeType: Partial<Record<TextFormatType, CrystallizeRichTextInlineFormattedNodes['type']>> =
+  {
+    bold: 'strong',
+    italic: 'emphasized',
+    underline: 'underlined',
+    strikethrough: 'deleted',
+    subscript: 'subscripted',
+    superscript: 'superscripted',
+    highlight: 'emphasized',
+    code: 'code',
+  };
 
 /**
  * Creates a rich text node with the ability to have

package/src/rich-text-editor/model/parse-initial-state.test.ts

@@ -1,17 +1,18 @@
 /* eslint-disable no-console */
 
-import type { CrystallizeRichText } from '../rich-text-editor';
 import { parseInitialState } from './parse-initial-state';
 
 describe('RichTextEditor parseInitialState', () => {
   it('ensures that the initial state is an array', async () => {
     expect(
       parseInitialState({
-        richText: {
-          kind: 'block',
-          type: 'paragraph',
-          textContent: 'hello',
-        },
+        richText: [
+          {
+            kind: 'block',
+            type: 'paragraph',
+            textContent: 'hello',
+          },
+        ],
       }),
     ).toEqual([
       {
@@ -42,7 +43,7 @@ describe('RichTextEditor parseInitialState', () => {
             textContent: 'hello',
           },
         ],
-      } as CrystallizeRichText,
+      },
     ]);
   });
 });

package/src/rich-text-editor/plugins/CodeActionMenuPlugin/index.tsx

@@ -7,7 +7,7 @@
  */
 
 import { useEffect, useRef, useState } from 'react';
-import { $getNearestNodeFromDOMNode } from 'lexical';
+import { $getNearestNodeFromDOMNode, isHTMLElement } from 'lexical';
 import { createPortal } from 'react-dom';
 import { useDebouncedCallback } from 'use-debounce';
 import { $isCodeNode, CodeNode, getLanguageFriendlyName, normalizeCodeLang } from '@lexical/code';
@@ -28,7 +28,7 @@ function CodeActionMenuContainer({ anchorElem }: { anchorElem: HTMLElement }): J
 
   const [lang, setLang] = useState('');
   const [isShown, setShown] = useState<boolean>(false);
-  const [shouldListenMouseMove, setShouldListenMouseMove] = useState<boolean>(true);
+  const [shouldListenMouseMove, setShouldListenMouseMove] = useState<boolean>(false);
   const [position, setPosition] = useState<Position>({
     right: '0',
     top: '0',
@@ -40,43 +40,47 @@ function CodeActionMenuContainer({ anchorElem }: { anchorElem: HTMLElement }): J
     return codeDOMNodeRef.current;
   }
 
-  const debouncedOnMouseMove = useDebouncedCallback((event: MouseEvent) => {
-    const { codeDOMNode, isOutside } = getMouseInfo(event);
+  const debouncedOnMouseMove = useDebouncedCallback(
+    (event: MouseEvent) => {
+      const { codeDOMNode, isOutside } = getMouseInfo(event);
 
-    if (isOutside) {
-      setShown(false);
-      return;
-    }
+      if (isOutside) {
+        setShown(false);
+        return;
+      }
 
-    if (!codeDOMNode) {
-      return;
-    }
+      if (!codeDOMNode) {
+        return;
+      }
 
-    codeDOMNodeRef.current = codeDOMNode;
+      codeDOMNodeRef.current = codeDOMNode;
 
-    let codeNode: CodeNode | null = null;
-    let _lang = '';
+      let codeNode: CodeNode | null = null;
+      let _lang = '';
 
-    editor.update(() => {
-      const maybeCodeNode = $getNearestNodeFromDOMNode(codeDOMNode);
+      editor.update(() => {
+        const maybeCodeNode = $getNearestNodeFromDOMNode(codeDOMNode);
 
-      if ($isCodeNode(maybeCodeNode)) {
-        codeNode = maybeCodeNode;
-        _lang = codeNode.getLanguage() || '';
-      }
-    });
-
-    if (codeNode) {
-      const { y: editorElemY, right: editorElemRight } = anchorElem.getBoundingClientRect();
-      const { y, right } = codeDOMNode.getBoundingClientRect();
-      setLang(_lang);
-      setShown(true);
-      setPosition({
-        right: `${editorElemRight - right + CODE_PADDING}px`,
-        top: `${y - editorElemY}px`,
+        if ($isCodeNode(maybeCodeNode)) {
+          codeNode = maybeCodeNode;
+          _lang = codeNode.getLanguage() || '';
+        }
       });
-    }
-  }, 50);
+
+      if (codeNode) {
+        const { y: editorElemY, right: editorElemRight } = anchorElem.getBoundingClientRect();
+        const { y, right } = codeDOMNode.getBoundingClientRect();
+        setLang(_lang);
+        setShown(true);
+        setPosition({
+          right: `${editorElemRight - right + CODE_PADDING}px`,
+          top: `${y - editorElemY}px`,
+        });
+      }
+    },
+    50,
+    { maxWait: 1000 },
+  );
 
   useEffect(() => {
     if (!shouldListenMouseMove) {
@@ -92,26 +96,32 @@ function CodeActionMenuContainer({ anchorElem }: { anchorElem: HTMLElement }): J
     };
   }, [shouldListenMouseMove, debouncedOnMouseMove]);
 
-  editor.registerMutationListener(CodeNode, mutations => {
-    editor.getEditorState().read(() => {
-      for (const [key, type] of mutations) {
-        switch (type) {
-          case 'created':
-            codeSetRef.current.add(key);
-            setShouldListenMouseMove(codeSetRef.current.size > 0);
-            break;
-
-          case 'destroyed':
-            codeSetRef.current.delete(key);
-            setShouldListenMouseMove(codeSetRef.current.size > 0);
-            break;
-
-          default:
-            break;
-        }
-      }
-    });
-  });
+  useEffect(() => {
+    return editor.registerMutationListener(
+      CodeNode,
+      mutations => {
+        editor.getEditorState().read(() => {
+          for (const [key, type] of mutations) {
+            switch (type) {
+              case 'created':
+                codeSetRef.current.add(key);
+                break;
+
+              case 'destroyed':
+                codeSetRef.current.delete(key);
+                break;
+
+              default:
+                break;
+            }
+          }
+        });
+        setShouldListenMouseMove(codeSetRef.current.size > 0);
+      },
+      { skipInitialization: false },
+    );
+  }, [editor]);
+
   const normalizedLang = normalizeCodeLang(lang);
   const codeFriendlyName = getLanguageFriendlyName(lang);
 
@@ -136,7 +146,7 @@ function getMouseInfo(event: MouseEvent): {
 } {
   const target = event.target;
 
-  if (target && target instanceof HTMLElement) {
+  if (isHTMLElement(target)) {
     const codeDOMNode = target.closest<HTMLElement>('code.CrystallizeRTEditorTheme__code');
     const isOutside = !(codeDOMNode || target.closest<HTMLElement>('div.c-rte-code-action-menu-container'));
 

package/src/rich-text-editor/plugins/FloatingLinkEditorPlugin/index.tsx

@@ -7,18 +7,15 @@
  */
 
 import { Dispatch, useCallback, useEffect, useRef, useState } from 'react';
-import * as React from 'react';
 import {
   $getSelection,
   $isRangeSelection,
+  BaseSelection,
   COMMAND_PRIORITY_CRITICAL,
   COMMAND_PRIORITY_HIGH,
   COMMAND_PRIORITY_LOW,
-  GridSelection,
   KEY_ESCAPE_COMMAND,
   LexicalEditor,
-  NodeSelection,
-  RangeSelection,
   SELECTION_CHANGE_COMMAND,
 } from 'lexical';
 import { createPortal } from 'react-dom';
@@ -53,7 +50,7 @@ function FloatingLinkEditor({
   const [rel, setRel] = useState<string | null>(null);
   const [target, setTarget] = useState<string | null>(null);
   const [isEditMode, setEditMode] = useState(false);
-  const [lastSelection, setLastSelection] = useState<RangeSelection | GridSelection | NodeSelection | null>(null);
+  const [lastSelection, setLastSelection] = useState<BaseSelection | null>(null);
   const tr = useTr();
 
   const updateLinkEditor = useCallback(() => {

package/src/rich-text-editor/plugins/TableActionMenuPlugin/index.tsx

@@ -7,13 +7,13 @@
  */
 
 import { ReactPortal, useCallback, useEffect, useRef, useState } from 'react';
-import { $getRoot, $getSelection, $isRangeSelection, DEPRECATED_$isGridSelection } from 'lexical';
+import { $getRoot, $getSelection, $isRangeSelection } from 'lexical';
 import { createPortal } from 'react-dom';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import useLexicalEditable from '@lexical/react/useLexicalEditable';
 import {
   $deleteTableColumn,
-  $getElementGridForTableNode,
+  $getElementForTableNode,
   $getTableCellNodeFromLexicalNode,
   $getTableColumnIndexFromTableCellNode,
   $getTableNodeFromLexicalNodeOrThrow,
@@ -23,8 +23,9 @@ import {
   $isTableCellNode,
   $isTableNode,
   $isTableRowNode,
+  $isTableSelection,
   $removeTableRowAtIndex,
-  getTableSelectionFromTableElement,
+  getTableObserverFromTableElement,
   HTMLTableElementWithWithTableSelectionState,
   TableCellHeaderStates,
   TableCellNode,
@@ -70,7 +71,7 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }: TableCel
     editor.getEditorState().read(() => {
       const selection = $getSelection();
 
-      if (DEPRECATED_$isGridSelection(selection)) {
+      if ($isTableSelection(selection)) {
         const selectionShape = selection.getShape();
 
         updateSelectionCounts({
@@ -91,9 +92,9 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }: TableCel
           throw new Error('Expected to find tableElement in DOM');
         }
 
-        const tableSelection = getTableSelectionFromTableElement(tableElement);
+        const tableSelection = getTableObserverFromTableElement(tableElement);
         if (tableSelection !== null) {
-          tableSelection.clearHighlight();
+          tableSelection.$clearHighlight();
         }
 
         tableNode.markDirty();
@@ -114,14 +115,14 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }: TableCel
 
         let tableRowIndex;
 
-        if (DEPRECATED_$isGridSelection(selection)) {
+        if ($isTableSelection(selection)) {
           const selectionShape = selection.getShape();
           tableRowIndex = shouldInsertAfter ? selectionShape.toY : selectionShape.fromY;
         } else {
           tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
         }
 
-        const grid = $getElementGridForTableNode(editor, tableNode);
+        const grid = $getElementForTableNode(editor, tableNode);
 
         $insertTableRow(tableNode, tableRowIndex, shouldInsertAfter, selectionCounts.rows, grid);
 
@@ -140,14 +141,14 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }: TableCel
 
         let tableColumnIndex;
 
-        if (DEPRECATED_$isGridSelection(selection)) {
+        if ($isTableSelection(selection)) {
           const selectionShape = selection.getShape();
           tableColumnIndex = shouldInsertAfter ? selectionShape.toX : selectionShape.fromX;
         } else {
           tableColumnIndex = $getTableColumnIndexFromTableCellNode(tableCellNode);
         }
 
-        const grid = $getElementGridForTableNode(editor, tableNode);
+        const grid = $getElementForTableNode(editor, tableNode);
 
         $insertTableColumn(tableNode, tableColumnIndex, shouldInsertAfter, selectionCounts.columns, grid);
 

package/src/rich-text-editor/plugins/ToolbarPlugin/index.tsx

@@ -18,7 +18,6 @@ import {
   CAN_REDO_COMMAND,
   CAN_UNDO_COMMAND,
   COMMAND_PRIORITY_CRITICAL,
-  DEPRECATED_$isGridSelection,
   FORMAT_TEXT_COMMAND,
   REDO_COMMAND,
   SELECTION_CHANGE_COMMAND,
@@ -46,6 +45,7 @@ import { $isDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode'
 import { INSERT_HORIZONTAL_RULE_COMMAND } from '@lexical/react/LexicalHorizontalRuleNode';
 import { $createHeadingNode, $createQuoteNode, $isHeadingNode, HeadingTagType } from '@lexical/rich-text';
 import { $selectAll, $setBlocksType } from '@lexical/selection';
+import { $isTableSelection } from '@lexical/table';
 import {
   $findMatchingParent,
   $getNearestBlockElementAncestorOrThrow,
@@ -116,7 +116,7 @@ function BlockFormatDropDown({
     if (blockType !== 'paragraph') {
       editor.update(() => {
         const selection = $getSelection();
-        if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection))
+        if ($isRangeSelection(selection) || $isTableSelection(selection))
           $setBlocksType(selection, () => $createParagraphNode());
       });
     }
@@ -126,7 +126,7 @@ function BlockFormatDropDown({
     if (blockType !== headingSize) {
       editor.update(() => {
         const selection = $getSelection();
-        if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection)) {
+        if ($isRangeSelection(selection) || $isTableSelection(selection)) {
           $setBlocksType(selection, () => $createHeadingNode(headingSize));
         }
       });
@@ -153,7 +153,7 @@ function BlockFormatDropDown({
     if (blockType !== 'quote') {
       editor.update(() => {
         const selection = $getSelection();
-        if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection)) {
+        if ($isRangeSelection(selection) || $isTableSelection(selection)) {
           $setBlocksType(selection, () => $createQuoteNode());
         } else {
           /**
@@ -171,7 +171,7 @@ function BlockFormatDropDown({
       editor.update(() => {
         let selection = $getSelection();
 
-        if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection)) {
+        if ($isRangeSelection(selection) || $isTableSelection(selection)) {
           if (selection.isCollapsed()) {
             $setBlocksType(selection, () => $createCodeNode());
           } else {