Update lexical (#642)

Co-authored-by: mark-tate <[email protected]>
jpmorganchase · Sep 3, 2024 · 6a9ee3e · 6a9ee3e
1 parent bd1c7b3
commit 6a9ee3e
Show file tree

Hide file tree

Showing 8 changed files with 217 additions and 170 deletions.
diff --git a/packages/content-editor-plugin/package.json b/packages/content-editor-plugin/package.json
@@ -48,19 +48,19 @@
     "@salt-ds/lab": "1.0.0-alpha.50",
     "@salt-ds/theme": "^1.19.0",
     "@floating-ui/react": "^0.26.6",
-    "@lexical/code": "^0.11.1",
-    "@lexical/link": "^0.11.1",
-    "@lexical/list": "^0.11.1",
-    "@lexical/rich-text": "^0.11.1",
-    "@lexical/table": "^0.11.1",
-    "@lexical/react": "^0.11.1",
-    "@lexical/selection": "^0.11.1",
-    "@lexical/utils": "^0.11.1",
-    "@lexical/markdown": "^0.11.1",
+    "@lexical/code": "^0.17.1",
+    "@lexical/link": "^0.17.1",
+    "@lexical/list": "^0.17.1",
+    "@lexical/rich-text": "^0.17.1",
+    "@lexical/table": "^0.17.1",
+    "@lexical/react": "^0.17.1",
+    "@lexical/selection": "^0.17.1",
+    "@lexical/utils": "^0.17.1",
+    "@lexical/markdown": "^0.17.1",
     "@vanilla-extract/css": "^1.6.0",
     "clsx": "^2.0.0",
     "gray-matter": "^4.0.3",
-    "lexical": "^0.11.1",
+    "lexical": "^0.17.1",
     "react-split": "^2.0.14",
     "lodash-es": "^4.17.21",
     "md5": "*",

diff --git a/packages/content-editor-plugin/src/components/ContentEditor.tsx b/packages/content-editor-plugin/src/components/ContentEditor.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
 import { ContentEditable } from '@lexical/react/LexicalContentEditable';
-import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
 
 const ContentEditor = () => (
   <RichTextPlugin

diff --git a/packages/content-editor-plugin/src/components/Toolbar/InsertBlockDropdown.tsx b/packages/content-editor-plugin/src/components/Toolbar/InsertBlockDropdown.tsx
@@ -3,7 +3,7 @@ import { Dropdown, Option } from '@salt-ds/core';
 import { $createCodeNode } from '@lexical/code';
 import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND } from '@lexical/list';
 import { $createHeadingNode, $createQuoteNode, HeadingTagType } from '@lexical/rich-text';
-import { $wrapNodes } from '@lexical/selection';
+import { $setBlocksType } from '@lexical/selection';
 import { $createParagraphNode, $getSelection, $isRangeSelection, LexicalEditor } from 'lexical';
 
 interface BlockSourceType {
@@ -44,7 +44,7 @@ export function InsertBlockDropdown({
         const selection = $getSelection();
 
         if ($isRangeSelection(selection)) {
-          $wrapNodes(selection, () => $createParagraphNode());
+          $setBlocksType(selection, () => $createParagraphNode());
         }
       });
     }
@@ -56,7 +56,7 @@ export function InsertBlockDropdown({
         const selection = $getSelection();
 
         if ($isRangeSelection(selection)) {
-          $wrapNodes(selection, () => $createHeadingNode(item.type as HeadingTagType));
+          $setBlocksType(selection, () => $createHeadingNode(item.type as HeadingTagType));
         }
       });
     }
@@ -80,7 +80,7 @@ export function InsertBlockDropdown({
         const selection = $getSelection();
 
         if ($isRangeSelection(selection)) {
-          $wrapNodes(selection, () => $createQuoteNode());
+          $setBlocksType(selection, () => $createQuoteNode());
         }
       });
     }
@@ -93,7 +93,7 @@ export function InsertBlockDropdown({
 
         if ($isRangeSelection(selection)) {
           if (selection.isCollapsed()) {
-            $wrapNodes(selection, () => $createCodeNode());
+            $setBlocksType(selection, () => $createCodeNode());
           } else {
             const textContent = selection.getTextContent();
             const codeNode = $createCodeNode();

diff --git a/packages/content-editor-plugin/src/plugins/MarkdownLinkPlugin.tsx b/packages/content-editor-plugin/src/plugins/MarkdownLinkPlugin.tsx
@@ -1,10 +1,9 @@
 import { $createLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { $wrapNodes } from '@lexical/selection';
 import {
-  $createParagraphNode,
   $createTextNode,
   $getSelection,
+  $insertNodes,
   $isRangeSelection,
   $isTextNode,
   COMMAND_PRIORITY_EDITOR,
@@ -40,7 +39,8 @@ function useMarkdownLinkPlugin() {
             const linkTextNode = $createTextNode(text);
             linkTextNode.setFormat(selection.focus.getNode().getFormat());
             linkNode.append(linkTextNode);
-            $wrapNodes(selection, () => linkNode, $createParagraphNode());
+            $insertNodes([linkNode]);
+            linkNode.selectEnd();
           }
         }
       });

diff --git a/packages/content-editor-plugin/src/plugins/TableActionMenuPlugin.tsx b/packages/content-editor-plugin/src/plugins/TableActionMenuPlugin.tsx
@@ -3,7 +3,7 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
 import { $getSelection, $isRangeSelection, LexicalEditor } from 'lexical';
 import {
   $deleteTableColumn,
-  $getElementGridForTableNode,
+  $getElementForTableNode,
   $getTableCellNodeFromLexicalNode,
   $getTableColumnIndexFromTableCellNode,
   $getTableNodeFromLexicalNodeOrThrow,
@@ -115,7 +115,7 @@ function TableActionMenu({ editor, tableCellNode, onComplete }: TableActionMenuP
         if ($isTableCellNode(tableCellNode)) {
           const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
           const tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
-          const grid = $getElementGridForTableNode(editor, tableNode);
+          const grid = $getElementForTableNode(editor, tableNode);
 
           $insertTableRow(tableNode, tableRowIndex, shouldInsertAfter, 1, grid);
         }
@@ -132,7 +132,7 @@ function TableActionMenu({ editor, tableCellNode, onComplete }: TableActionMenuP
         if ($isTableCellNode(tableCellNode)) {
           const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
           const tableColumnIndex = $getTableColumnIndexFromTableCellNode(tableCellNode);
-          const grid = $getElementGridForTableNode(editor, tableNode);
+          const grid = $getElementForTableNode(editor, tableNode);
 
           $insertTableColumn(tableNode, tableColumnIndex, shouldInsertAfter, 1, grid);
         }

diff --git a/packages/site-components/src/AppHeaderControls/index.tsx b/packages/site-components/src/AppHeaderControls/index.tsx
@@ -16,7 +16,7 @@ type ActionMenuItem = {
 };
 
 function toUpperFirst(str) {
-  return `${str.substr(0, 1).toUpperCase()}${str.toLowerCase().substr(1)}`;
+  return `${str.charAt(0).toUpperCase()}${str.slice(1)}`;
 }
 
 export const AppHeaderControls: React.FC = () => {
@@ -69,7 +69,7 @@ export const AppHeaderControls: React.FC = () => {
           {isLoggedIn ? (
             <UserProfile
               avatarUrl={session?.user?.image || ''}
-              firstName={toUpperFirst(session?.user?.name)}
+              firstName={toUpperFirst(session?.user?.name || '')}
               prefixText="Welcome, "
             />
           ) : (

diff --git a/packages/site-components/src/UserProfile/index.tsx b/packages/site-components/src/UserProfile/index.tsx
@@ -5,7 +5,7 @@ import { Avatar } from '@salt-ds/core';
 import styles from './styles.css';
 
 function toUpperFirst(str) {
-  return `${str.substr(0, 1).toUpperCase()}${str.toLowerCase().substr(1)}`;
+  return `${str.charAt(0).toUpperCase()}${str.slice(1)}`;
 }
 
 export function UserProfile({