chore: upgrade lexical & apply patches (#2757)

packages/web/package.json

@@ -28,7 +28,7 @@
     "@babel/plugin-transform-react-jsx": "^7.19.0",
     "@babel/preset-env": "*",
     "@babel/preset-typescript": "^7.21.5",
-    "@lexical/react": "0.12.5",
+    "@lexical/react": "0.12.6",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@simplewebauthn/browser": "^8.0.2",
     "@standardnotes/authenticator": "^2.4.0",
@@ -76,7 +76,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
-    "lexical": "0.12.5",
+    "lexical": "0.12.6",
     "lint-staged": ">=13",
     "mini-css-extract-plugin": "^2.7.2",
     "minimatch": "^5.1.1",
@@ -109,7 +109,7 @@
   },
   "dependencies": {
     "@ariakit/react": "^0.3.9",
-    "@lexical/headless": "0.12.5",
+    "@lexical/headless": "0.12.6",
     "@radix-ui/react-slot": "^1.0.1",
     "fast-diff": "^1.3.0"
   }

packages/web/src/javascripts/Components/SuperEditor/Lexical/Utils/MarkdownImport.ts

@@ -14,7 +14,7 @@
 import { CodeNode, $createCodeNode } from '@lexical/code'
 import { ElementTransformer, TextFormatTransformer, TextMatchTransformer, Transformer } from '@lexical/markdown'
 
-import { $isListItemNode, $isListNode } from '@lexical/list'
+import { $isListItemNode, $isListNode, ListItemNode } from '@lexical/list'
 import { $isQuoteNode } from '@lexical/rich-text'
 import { $findMatchingParent } from '@lexical/utils'
 import {
@@ -132,7 +132,7 @@ function importBlocks(
   if (elementNode.isAttached() && lineTextTrimmed.length > 0) {
     const previousNode = elementNode.getPreviousSibling()
     if ($isParagraphNode(previousNode) || $isQuoteNode(previousNode) || $isListNode(previousNode)) {
-      let targetNode: LexicalNode | null = previousNode
+      let targetNode: typeof previousNode | ListItemNode | null = previousNode
 
       if ($isListNode(previousNode)) {
         const lastDescendant = previousNode.getLastDescendant()

packages/web/src/javascripts/Components/SuperEditor/Plugins/TableCellActionMenuPlugin/index.tsx

@@ -18,8 +18,6 @@ import {
   $isTextNode,
   DEPRECATED_$getNodeTriplet,
   DEPRECATED_$isGridCellNode,
-  DEPRECATED_$isGridSelection,
-  GridSelection,
 } from 'lexical'
 
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
@@ -40,6 +38,8 @@ import {
   HTMLTableElementWithWithTableSelectionState,
   TableCellHeaderStates,
   TableCellNode,
+  GridSelection,
+  $isGridSelection,
 } from '@lexical/table'
 import { ReactPortal, useCallback, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
@@ -103,8 +103,8 @@ function $canUnmerge(): boolean {
   const selection = $getSelection()
   if (
     ($isRangeSelection(selection) && !selection.isCollapsed()) ||
-    (DEPRECATED_$isGridSelection(selection) && !selection.anchor.is(selection.focus)) ||
-    (!$isRangeSelection(selection) && !DEPRECATED_$isGridSelection(selection))
+    ($isGridSelection(selection) && !selection.anchor.is(selection.focus)) ||
+    (!$isRangeSelection(selection) && !$isGridSelection(selection))
   ) {
     return false
   }
@@ -167,7 +167,7 @@ function TableActionMenu({ onClose, tableCellNode: _tableCellNode, cellMerge }:
     editor.getEditorState().read(() => {
       const selection = $getSelection()
       // Merge cells
-      if (DEPRECATED_$isGridSelection(selection)) {
+      if ($isGridSelection(selection)) {
         const currentSelectionCounts = computeSelectionCount(selection)
         updateSelectionCounts(computeSelectionCount(selection))
         setCanMergeCells(
@@ -207,7 +207,7 @@ function TableActionMenu({ onClose, tableCellNode: _tableCellNode, cellMerge }:
   const mergeTableCellsAtSelection = () => {
     editor.update(() => {
       const selection = $getSelection()
-      if (DEPRECATED_$isGridSelection(selection)) {
+      if ($isGridSelection(selection)) {
         const { columns, rows } = computeSelectionCount(selection)
         const nodes = selection.getNodes()
         let firstCell: null | DEPRECATED_GridCellNode = null

packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/ToolbarLinkTextEditor.tsx

@@ -1,6 +1,6 @@
 import Icon from '@/Components/Icon/Icon'
 import { KeyboardKey } from '@standardnotes/ui-services'
-import { $getSelection, $isRangeSelection, $isTextNode, LexicalEditor, RangeSelection } from 'lexical'
+import { $getSelection, $isRangeSelection, $isTextNode, LexicalEditor, RangeSelection, TextNode } from 'lexical'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { VisuallyHidden } from '@ariakit/react'
 import { getSelectedNode } from '../../Lexical/Utils/getSelectedNode'
@@ -14,7 +14,10 @@ type Props = {
   setEditMode: (isEditMode: boolean) => void
 }
 
-export const $isLinkTextNode = (node: ReturnType<typeof getSelectedNode>, selection: RangeSelection) => {
+export const $isLinkTextNode = (
+  node: ReturnType<typeof getSelectedNode>,
+  selection: RangeSelection,
+): node is TextNode => {
   const parent = node.getParent()
   return $isLinkNode(parent) && $isTextNode(node) && selection.anchor.getNode() === selection.focus.getNode()
 }