chore: upgrade lexical

package.json

@@ -43,10 +43,7 @@
     "@types/styled-components-react-native/@types/react": "17.0.2",
     "@types/react-native-vector-icons/@types/react": "17.0.2",
     "@types/react-native/@types/react": "17.0.2",
-    "@types/hoist-non-react-statics/@types/react": "17.0.2",
-    "@lexical/clipboard@0.16.0": "patch:@lexical/clipboard@npm:0.16.0#.yarn/patches/@lexical-clipboard-npm-0.16.0-3053c4af9c.patch",
-    "@lexical/rich-text@0.16.0": "patch:@lexical/rich-text@npm:0.16.0#.yarn/patches/@lexical-rich-text-npm-0.16.0-f484a17832.patch",
-    "@lexical/list@0.16.0": "patch:@lexical/list@npm:0.16.0#.yarn/patches/@lexical-list-npm-0.16.0-8f91da4ad5.patch"
+    "@types/hoist-non-react-statics/@types/react": "17.0.2"
   },
   "dependencies": {
     "@standardnotes/snjs": "workspace:*"

packages/web/package.json

@@ -107,17 +107,17 @@
   },
   "dependencies": {
     "@ariakit/react": "^0.3.9",
-    "@lexical/clipboard": "0.16.0",
-    "@lexical/headless": "0.16.0",
-    "@lexical/link": "0.16.0",
-    "@lexical/list": "0.16.0",
-    "@lexical/react": "0.16.0",
-    "@lexical/rich-text": "0.16.0",
-    "@lexical/utils": "0.16.0",
+    "@lexical/clipboard": "0.22.0",
+    "@lexical/headless": "0.22.0",
+    "@lexical/link": "0.22.0",
+    "@lexical/list": "0.22.0",
+    "@lexical/react": "0.22.0",
+    "@lexical/rich-text": "0.22.0",
+    "@lexical/utils": "0.22.0",
     "@radix-ui/react-slot": "^1.0.1",
     "@react-pdf/renderer": "^3.3.2",
     "comlink": "^4.4.1",
     "fast-diff": "^1.3.0",
-    "lexical": "0.16.0"
+    "lexical": "0.22.0"
   }
 }

packages/web/src/javascripts/Components/ClipperView/getSuperJSONFromClipHTML.tsx

@@ -1,10 +1,11 @@
-import { $createParagraphNode, $getRoot, $insertNodes, $nodesOfType, LexicalNode } from 'lexical'
+import { $createParagraphNode, $getRoot, $insertNodes, LexicalNode } from 'lexical'
 import { $generateNodesFromDOM } from '@lexical/html'
 import { createHeadlessEditor } from '@lexical/headless'
 import { BlockEditorNodes } from '../SuperEditor/Lexical/Nodes/AllNodes'
 import BlocksEditorTheme from '../SuperEditor/Lexical/Theme/Theme'
 import { ClipPayload } from '@standardnotes/clipper/src/types/message'
-import { LinkNode } from '@lexical/link'
+import { $isLinkNode } from '@lexical/link'
+import { $dfs } from '@lexical/utils'
 
 const AbsoluteLinkRegExp = new RegExp('^(?:[a-z+]+:)?//', 'i')
 
@@ -66,15 +67,18 @@ export const getSuperJSONFromClipPayload = async (clipPayload: ClipPayload) => {
 
   await new Promise<void>((resolve) => {
     editor.update(() => {
-      $nodesOfType(LinkNode).forEach((linkNode) => {
-        const url = linkNode.getURL()
+      for (const { node } of $dfs()) {
+        if (!$isLinkNode(node)) {
+          continue
+        }
+        const url = node.getURL()
         const isAbsoluteLink = AbsoluteLinkRegExp.test(url)
 
         if (!isAbsoluteLink) {
           const fixedURL = new URL(url, clipURL)
-          linkNode.setURL(fixedURL.toString())
+          node.setURL(fixedURL.toString())
         }
-      })
+      }
 
       resolve()
     })

packages/web/src/javascripts/Components/SuperEditor/Plugins/MarkdownPreviewPlugin/MarkdownPreviewPlugin.tsx

@@ -1,9 +1,10 @@
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { useEffect } from 'react'
 import { $createCodeNode } from '@lexical/code'
-import { $createTextNode, $getRoot, $nodesOfType, ParagraphNode } from 'lexical'
+import { $createTextNode, $getRoot, $isParagraphNode } from 'lexical'
 import { $convertToMarkdownString } from '@lexical/markdown'
 import { MarkdownTransformers } from '../../MarkdownTransformers'
+import { $dfs } from '@lexical/utils'
 
 type Props = {
   onMarkdown: (markdown: string) => void
@@ -15,10 +16,12 @@ export default function MarkdownPreviewPlugin({ onMarkdown }: Props): JSX.Elemen
   useEffect(() => {
     editor.update(() => {
       const root = $getRoot()
-      const paragraphs = $nodesOfType(ParagraphNode)
-      for (const paragraph of paragraphs) {
-        if (paragraph.isEmpty()) {
-          paragraph.remove()
+      for (const { node } of $dfs()) {
+        if (!$isParagraphNode(node)) {
+          continue
+        }
+        if (node.isEmpty()) {
+          node.remove()
         }
       }
       const markdown = $convertToMarkdownString(MarkdownTransformers)

packages/web/src/javascripts/Components/SuperEditor/Plugins/SearchPlugin/SearchPlugin.tsx

@@ -89,9 +89,10 @@ export const SearchPlugin = () => {
 
   const handleSearch = useCallback(
     (query: string, isCaseSensitive: boolean) => {
-      document.querySelectorAll('.search-highlight').forEach((element) => {
+      const currentHighlights = document.querySelectorAll('.search-highlight')
+      for (const element of currentHighlights) {
         element.remove()
-      })
+      }
 
       if (!query) {
         dispatch({ type: 'clear-results' })
@@ -109,7 +110,7 @@ export const SearchPlugin = () => {
 
         const results: SuperSearchResult[] = []
 
-        textNodes.forEach((node) => {
+        for (const node of textNodes) {
           const text = node.textContent || ''
 
           const indices: number[] = []
@@ -122,7 +123,7 @@ export const SearchPlugin = () => {
             indices.push(index)
           }
 
-          indices.forEach((index) => {
+          for (const index of indices) {
             const startIndex = index
             const endIndex = startIndex + query.length
 
@@ -131,8 +132,8 @@ export const SearchPlugin = () => {
               startIndex,
               endIndex,
             })
-          })
-        })
+          }
+        }
 
         dispatch({
           type: 'set-results',
@@ -205,7 +206,10 @@ export const SearchPlugin = () => {
           }
           replaceResult(result, true)
         } else if (type === 'all') {
-          resultsRef.current.forEach((result) => replaceResult(result))
+          const results = resultsRef.current
+          for (const result of results) {
+            replaceResult(result)
+          }
         }
 
         void handleSearch(queryRef.current, isCaseSensitiveRef.current)
@@ -214,9 +218,10 @@ export const SearchPlugin = () => {
   }, [addReplaceEventListener, currentResultIndexRef, editor, handleSearch, isCaseSensitiveRef, queryRef, resultsRef])
 
   useEffect(() => {
-    document.querySelectorAll('.search-highlight').forEach((element) => {
+    const currentHighlights = document.querySelectorAll('.search-highlight')
+    for (const element of currentHighlights) {
       element.remove()
-    })
+    }
     if (currentResultIndex === -1) {
       return
     }

packages/web/src/javascripts/Components/SuperEditor/Tools/HeadlessSuperConverter.tsx

@@ -1,24 +1,17 @@
 import { createHeadlessEditor } from '@lexical/headless'
 import { FileItem, PrefKey, PrefValue, SuperConverterServiceInterface } from '@standardnotes/snjs'
-import {
-  $createParagraphNode,
-  $getRoot,
-  $insertNodes,
-  $nodesOfType,
-  LexicalEditor,
-  LexicalNode,
-  ParagraphNode,
-} from 'lexical'
+import { $createParagraphNode, $getRoot, $insertNodes, $isParagraphNode, LexicalEditor, LexicalNode } from 'lexical'
 import BlocksEditorTheme from '../Lexical/Theme/Theme'
 import { BlockEditorNodes, SuperExportNodes } from '../Lexical/Nodes/AllNodes'
 import { MarkdownTransformers } from '../MarkdownTransformers'
 import { $generateHtmlFromNodes, $generateNodesFromDOM } from '@lexical/html'
-import { FileNode } from '../Plugins/EncryptedFilePlugin/Nodes/FileNode'
 import { $createFileExportNode } from '../Lexical/Nodes/FileExportNode'
 import { $createInlineFileNode } from '../Plugins/InlineFilePlugin/InlineFileNode'
 import { $convertFromMarkdownString } from '../Lexical/Utils/MarkdownImport'
 import { $convertToMarkdownString } from '../Lexical/Utils/MarkdownExport'
 import { parseFileName } from '@standardnotes/utils'
+import { $dfs } from '@lexical/utils'
+import { $isFileNode } from '../Plugins/EncryptedFilePlugin/Nodes/FileUtils'
 
 export class HeadlessSuperConverter implements SuperConverterServiceInterface {
   private importEditor: LexicalEditor
@@ -90,10 +83,12 @@ export class HeadlessSuperConverter implements SuperConverterServiceInterface {
             resolve()
             return
           }
-          const fileNodes = $nodesOfType(FileNode)
           const filenameCounts: Record<string, number> = {}
           Promise.all(
-            fileNodes.map(async (fileNode) => {
+            $dfs().map(async ({ node: fileNode }) => {
+              if (!$isFileNode(fileNode)) {
+                return
+              }
               const fileItem = getFileItem(fileNode.getId())
               if (!fileItem) {
                 return
@@ -145,8 +140,10 @@ export class HeadlessSuperConverter implements SuperConverterServiceInterface {
           switch (toFormat) {
             case 'txt':
             case 'md': {
-              const paragraphs = $nodesOfType(ParagraphNode)
-              for (const paragraph of paragraphs) {
+              for (const { node: paragraph } of $dfs()) {
+                if (!$isParagraphNode(paragraph)) {
+                  continue
+                }
                 if (paragraph.isEmpty()) {
                   paragraph.remove()
                 }
@@ -288,14 +285,16 @@ export class HeadlessSuperConverter implements SuperConverterServiceInterface {
     const ids: string[] = []
 
     this.exportEditor.getEditorState().read(() => {
-      const fileNodes = $nodesOfType(FileNode)
-      fileNodes.forEach((fileNode) => {
+      for (const { node: fileNode } of $dfs()) {
+        if (!$isFileNode(fileNode)) {
+          continue
+        }
         const nodeId = fileNode.getId()
         if (ids.includes(nodeId)) {
-          return
+          continue
         }
         ids.push(nodeId)
-      })
+      }
     })
 
     return ids