feat(richtext-lexical)!: Update lexical from 0.12.6 to 0.13.1, port o…

…ver all useful changes from playground (#5066) * feat(richtext-lexical): Update lexical from 0.12.6 to 0.13.1, port over all useful changes from playground * chore: upgrade lexical version used in monorepo
payloadcms · Feb 12, 2024 · 0d18822 · 0d18822
1 parent 00fc034
commit 0d18822
Show file tree

Hide file tree

Showing 10 changed files with 248 additions and 228 deletions.
diff --git a/package.json b/package.json
@@ -77,7 +77,7 @@
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jwt-decode": "3.1.2",
-    "lexical": "0.12.5",
+    "lexical": "0.13.1",
     "lint-staged": "^14.0.1",
     "minimist": "1.2.8",
     "mongodb-memory-server": "^9",

diff --git a/packages/richtext-lexical/package.json b/packages/richtext-lexical/package.json
@@ -19,31 +19,31 @@
   },
   "dependencies": {
     "@faceless-ui/modal": "2.0.1",
-    "@lexical/headless": "0.12.6",
-    "@lexical/link": "0.12.6",
-    "@lexical/list": "0.12.6",
-    "@lexical/mark": "0.12.6",
-    "@lexical/markdown": "0.12.6",
-    "@lexical/react": "0.12.6",
-    "@lexical/rich-text": "0.12.6",
-    "@lexical/selection": "0.12.6",
-    "@lexical/utils": "0.12.6",
+    "@lexical/headless": "0.13.1",
+    "@lexical/link": "0.13.1",
+    "@lexical/list": "0.13.1",
+    "@lexical/mark": "0.13.1",
+    "@lexical/markdown": "0.13.1",
+    "@lexical/react": "0.13.1",
+    "@lexical/rich-text": "0.13.1",
+    "@lexical/selection": "0.13.1",
+    "@lexical/utils": "0.13.1",
     "bson-objectid": "2.0.4",
     "classnames": "^2.3.2",
     "deep-equal": "2.2.3",
     "i18next": "22.5.1",
     "json-schema": "^0.4.0",
-    "lexical": "0.12.6",
+    "lexical": "0.13.1",
     "lodash": "4.17.21",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-error-boundary": "^4.0.11",
+    "react-error-boundary": "4.0.12",
     "react-i18next": "11.18.6",
     "ts-essentials": "7.0.3"
   },
   "devDependencies": {
     "@payloadcms/eslint-config": "workspace:*",
-    "@types/json-schema": "7.0.12",
+    "@types/json-schema": "7.0.15",
     "@types/node": "20.6.2",
     "@types/react": "18.2.15",
     "payload": "workspace:*"

diff --git a/packages/richtext-lexical/src/field/features/BlockQuote/index.ts b/packages/richtext-lexical/src/field/features/BlockQuote/index.ts
@@ -2,7 +2,7 @@ import type { SerializedQuoteNode } from '@lexical/rich-text'
 
 import { $createQuoteNode, QuoteNode } from '@lexical/rich-text'
 import { $setBlocksType } from '@lexical/selection'
-import { $INTERNAL_isPointSelection, $getSelection } from 'lexical'
+import { $getSelection } from 'lexical'
 
 import type { HTMLConverter } from '../converters/html/converter/types'
 import type { FeatureProvider } from '../types'
@@ -31,9 +31,7 @@ export const BlockQuoteFeature = (): FeatureProvider => {
                 onClick: ({ editor }) => {
                   editor.update(() => {
                     const selection = $getSelection()
-                    if ($INTERNAL_isPointSelection(selection)) {
-                      $setBlocksType(selection, () => $createQuoteNode())
-                    }
+                    $setBlocksType(selection, () => $createQuoteNode())
                   })
                 },
                 order: 20,
@@ -44,6 +42,7 @@ export const BlockQuoteFeature = (): FeatureProvider => {
         markdownTransformers: [MarkdownTransformer],
         nodes: [
           {
+            type: QuoteNode.getType(),
             converters: {
               html: {
                 converter: async ({ converters, node, parent }) => {
@@ -62,7 +61,6 @@ export const BlockQuoteFeature = (): FeatureProvider => {
               } as HTMLConverter<SerializedQuoteNode>,
             },
             node: QuoteNode,
-            type: QuoteNode.getType(),
           },
         ],
         props: null,
@@ -82,9 +80,7 @@ export const BlockQuoteFeature = (): FeatureProvider => {
                   keywords: ['quote', 'blockquote'],
                   onSelect: () => {
                     const selection = $getSelection()
-                    if ($INTERNAL_isPointSelection(selection)) {
-                      $setBlocksType(selection, () => $createQuoteNode())
-                    }
+                    $setBlocksType(selection, () => $createQuoteNode())
                   },
                 }),
               ],

diff --git a/packages/richtext-lexical/src/field/features/Heading/index.ts b/packages/richtext-lexical/src/field/features/Heading/index.ts
@@ -2,7 +2,7 @@ import type { HeadingTagType, SerializedHeadingNode } from '@lexical/rich-text'
 
 import { $createHeadingNode, HeadingNode } from '@lexical/rich-text'
 import { $setBlocksType } from '@lexical/selection'
-import { $INTERNAL_isPointSelection, $getSelection } from 'lexical'
+import { $getSelection } from 'lexical'
 
 import type { HTMLConverter } from '../converters/html/converter/types'
 import type { FeatureProvider } from '../types'
@@ -14,9 +14,7 @@ import { MarkdownTransformer } from './markdownTransformer'
 
 const setHeading = (headingSize: HeadingTagType) => {
   const selection = $getSelection()
-  if ($INTERNAL_isPointSelection(selection)) {
-    $setBlocksType(selection, () => $createHeadingNode(headingSize))
-  }
+  $setBlocksType(selection, () => $createHeadingNode(headingSize))
 }
 
 type Props = {
@@ -67,6 +65,7 @@ export const HeadingFeature = (props: Props): FeatureProvider => {
         markdownTransformers: [MarkdownTransformer(enabledHeadingSizes)],
         nodes: [
           {
+            type: HeadingNode.getType(),
             converters: {
               html: {
                 converter: async ({ converters, node, parent }) => {
@@ -85,7 +84,6 @@ export const HeadingFeature = (props: Props): FeatureProvider => {
               } as HTMLConverter<SerializedHeadingNode>,
             },
             node: HeadingNode,
-            type: HeadingNode.getType(),
           },
         ],
         props,

diff --git a/packages/richtext-lexical/src/field/features/Link/nodes/LinkNode.ts b/packages/richtext-lexical/src/field/features/Link/nodes/LinkNode.ts
@@ -22,6 +22,8 @@ import {
 
 import type { LinkPayload } from '../plugins/floatingLinkEditor/types'
 
+import { $isAutoLinkNode } from './AutoLinkNode'
+
 export type LinkFields = {
   // unknown, custom fields:
   [key: string]: unknown
@@ -140,8 +142,8 @@ export class LinkNode extends ElementNode {
   exportJSON(): SerializedLinkNode {
     return {
       ...super.exportJSON(),
-      fields: this.getFields(),
       type: this.getType(),
+      fields: this.getFields(),
       version: 2,
     }
   }

diff --git a/packages/richtext-lexical/src/field/features/Link/plugins/autoLink/index.tsx b/packages/richtext-lexical/src/field/features/Link/plugins/autoLink/index.tsx
@@ -235,7 +235,8 @@ function handleLinkCreation(
   onChange: ChangeHandler,
 ): void {
   let currentNodes = [...nodes]
-  let text = currentNodes.map((node) => node.getTextContent()).join('')
+  const initialText = currentNodes.map((node) => node.getTextContent()).join('')
+  let text = initialText
 
   let match
   let invalidMatchEnd = 0
@@ -247,7 +248,7 @@ function handleLinkCreation(
     const isValid = isContentAroundIsValid(
       invalidMatchEnd + matchStart,
       invalidMatchEnd + matchEnd,
-      text,
+      initialText,
       currentNodes,
     )
 

diff --git a/.../richtext-lexical/src/field/features/Link/plugins/floatingLinkEditor/LinkEditor/index.tsx b/.../richtext-lexical/src/field/features/Link/plugins/floatingLinkEditor/LinkEditor/index.tsx
@@ -34,6 +34,8 @@ import { useEditorConfigContext } from '../../../../../lexical/config/EditorConf
 import { getSelectedNode } from '../../../../../lexical/utils/getSelectedNode'
 import { setFloatingElemPositionForLinkEditor } from '../../../../../lexical/utils/setFloatingElemPositionForLinkEditor'
 import { LinkDrawer } from '../../../drawer'
+import { $isAutoLinkNode } from '../../../nodes/AutoLinkNode'
+import { $createLinkNode } from '../../../nodes/LinkNode'
 import { $isLinkNode, TOGGLE_LINK_COMMAND } from '../../../nodes/LinkNode'
 import { transformExtraFields } from '../utilities'
 import { TOGGLE_LINK_WITH_MODAL_COMMAND } from './commands'
@@ -73,7 +75,7 @@ export function LinkEditor({
     // Sanitize custom fields here
     const validRelationships = config.collections.map((c) => c.slug) || []
     const fields = sanitizeFields({
-      config: config,
+      config,
       fields: fieldsUnsanitized,
       validRelationships,
     })
@@ -84,10 +86,11 @@ export function LinkEditor({
   const { closeModal, toggleModal } = useModal()
   const editDepth = useEditDepth()
   const [isLink, setIsLink] = useState(false)
+  const [isAutoLink, setIsAutoLink] = useState(false)
 
   const drawerSlug = formatDrawerSlug({
-    depth: editDepth,
     slug: `lexical-rich-text-link-` + uuid,
+    depth: editDepth,
   })
 
   const updateLinkEditor = useCallback(async () => {
@@ -98,9 +101,10 @@ export function LinkEditor({
     if ($isRangeSelection(selection)) {
       const node = getSelectedNode(selection)
       selectedNodeDomRect = editor.getElementByKey(node.getKey())?.getBoundingClientRect()
-      const linkParent: LinkNode = $findMatchingParent(node, $isLinkNode) as LinkNode
+      const linkParent: LinkNode = $findMatchingParent(node, $isLinkNode)
       if (linkParent == null) {
         setIsLink(false)
+        setIsAutoLink(false)
         setLinkUrl('')
         setLinkLabel('')
         return
@@ -152,6 +156,11 @@ export function LinkEditor({
       })
       setInitialState(state)
       setIsLink(true)
+      if ($isAutoLinkNode(linkParent)) {
+        setIsAutoLink(true)
+      } else {
+        setIsAutoLink(false)
+      }
     }
 
     const editorElem = editorRef.current
@@ -265,6 +274,7 @@ export function LinkEditor({
         () => {
           if (isLink) {
             setIsLink(false)
+            setIsAutoLink(false)
             return true
           }
           return false
@@ -301,18 +311,20 @@ export function LinkEditor({
                 tabIndex={0}
                 type="button"
               />
-              <button
-                aria-label="Remove link"
-                className="link-trash"
-                onClick={() => {
-                  editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)
-                }}
-                onMouseDown={(event) => {
-                  event.preventDefault()
-                }}
-                tabIndex={0}
-                type="button"
-              />
+              {!isAutoLink && (
+                <button
+                  aria-label="Remove link"
+                  className="link-trash"
+                  onClick={() => {
+                    editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)
+                  }}
+                  onMouseDown={(event) => {
+                    event.preventDefault()
+                  }}
+                  tabIndex={0}
+                  type="button"
+                />
+              )}
             </React.Fragment>
           )}
         </div>
@@ -325,6 +337,22 @@ export function LinkEditor({
 
           const newLinkPayload: LinkPayload = data as LinkPayload
 
+          // See: https://github.com/facebook/lexical/pull/5536. This updates autolink nodes to link nodes whenever a change was made (which is good!).
+          editor.update(() => {
+            const selection = $getSelection()
+            if ($isRangeSelection(selection)) {
+              const parent = getSelectedNode(selection).getParent()
+              if ($isAutoLinkNode(parent)) {
+                const linkNode = $createLinkNode({
+                  fields: newLinkPayload.fields,
+                })
+                parent.replace(linkNode, true)
+              }
+            }
+          })
+
+          // Needs to happen AFTER a potential auto link => link node conversion, as otherwise, the updated text to display may be lost due to
+          // it being applied to the auto link node instead of the link node.
           editor.dispatchCommand(TOGGLE_LINK_COMMAND, newLinkPayload)
         }}
         initialState={initialState}

diff --git a/packages/richtext-lexical/src/field/features/Paragraph/index.ts b/packages/richtext-lexical/src/field/features/Paragraph/index.ts
@@ -1,5 +1,5 @@
 import { $setBlocksType } from '@lexical/selection'
-import { $INTERNAL_isPointSelection, $createParagraphNode, $getSelection } from 'lexical'
+import { $createParagraphNode, $getSelection } from 'lexical'
 
 import type { FeatureProvider } from '../types'
 
@@ -23,9 +23,7 @@ export const ParagraphFeature = (): FeatureProvider => {
                 onClick: ({ editor }) => {
                   editor.update(() => {
                     const selection = $getSelection()
-                    if ($INTERNAL_isPointSelection(selection)) {
-                      $setBlocksType(selection, () => $createParagraphNode())
-                    }
+                    $setBlocksType(selection, () => $createParagraphNode())
                   })
                 },
                 order: 1,
@@ -49,9 +47,7 @@ export const ParagraphFeature = (): FeatureProvider => {
                   onSelect: ({ editor }) => {
                     editor.update(() => {
                       const selection = $getSelection()
-                      if ($INTERNAL_isPointSelection(selection)) {
-                        $setBlocksType(selection, () => $createParagraphNode())
-                      }
+                      $setBlocksType(selection, () => $createParagraphNode())
                     })
                   },
                 }),

diff --git a/packages/richtext-lexical/src/field/lexical/theme/EditorTheme.tsx b/packages/richtext-lexical/src/field/lexical/theme/EditorTheme.tsx
@@ -56,6 +56,7 @@ export const LexicalEditorTheme: EditorThemeClasses = {
   inlineImage: 'LexicalEditor__inline-image',
   link: 'LexicalEditorTheme__link',
   list: {
+    checklist: 'LexicalEditorTheme__checklist',
     listitem: 'LexicalEditorTheme__listItem',
     listitemChecked: 'LexicalEditorTheme__listItemChecked',
     listitemUnchecked: 'LexicalEditorTheme__listItemUnchecked',