feat(richtext-lexical)!: upgrade lexical from 0.15.0 to 0.16.0 and port over relevant playground changes (#6620)

**BREAKING:**
- This upgrades the required version of lexical from 0.15.0 to 0.16.0.
If you are using lexical directly in your project, possibly due to
custom features, there might be breaking changes for you. Please consult
the lexical 0.16.0 changelog:
https://github.com/facebook/lexical/releases/tag/v0.16.0

Author: AlessioGr

packages/richtext-lexical/package.json

@@ -43,21 +43,21 @@
   "dependencies": {
     "@faceless-ui/modal": "2.0.2",
     "@faceless-ui/scroll-info": "1.3.0",
-    "@lexical/headless": "0.15.0",
-    "@lexical/link": "0.15.0",
-    "@lexical/list": "0.15.0",
-    "@lexical/mark": "0.15.0",
-    "@lexical/markdown": "0.15.0",
-    "@lexical/react": "0.15.0",
-    "@lexical/rich-text": "0.15.0",
-    "@lexical/selection": "0.15.0",
-    "@lexical/utils": "0.15.0",
+    "@lexical/headless": "0.16.0",
+    "@lexical/link": "0.16.0",
+    "@lexical/list": "0.16.0",
+    "@lexical/mark": "0.16.0",
+    "@lexical/markdown": "0.16.0",
+    "@lexical/react": "0.16.0",
+    "@lexical/rich-text": "0.16.0",
+    "@lexical/selection": "0.16.0",
+    "@lexical/utils": "0.16.0",
     "@types/uuid": "^9.0.8",
     "bson-objectid": "2.0.4",
     "classnames": "^2.3.2",
     "deep-equal": "2.2.3",
     "json-schema": "^0.4.0",
-    "lexical": "0.15.0",
+    "lexical": "0.16.0",
     "lodash": "4.17.21",
     "react-error-boundary": "4.0.13",
     "uuid": "^9.0.1"
@@ -77,19 +77,19 @@
   "peerDependencies": {
     "@faceless-ui/modal": "2.0.2",
     "@faceless-ui/scroll-info": "1.3.0",
-    "@lexical/headless": "0.15.0",
-    "@lexical/link": "0.15.0",
-    "@lexical/list": "0.15.0",
-    "@lexical/mark": "0.15.0",
-    "@lexical/markdown": "0.15.0",
-    "@lexical/react": "0.15.0",
-    "@lexical/rich-text": "0.15.0",
-    "@lexical/selection": "0.15.0",
-    "@lexical/utils": "0.15.0",
+    "@lexical/headless": "0.16.0",
+    "@lexical/link": "0.16.0",
+    "@lexical/list": "0.16.0",
+    "@lexical/mark": "0.16.0",
+    "@lexical/markdown": "0.16.0",
+    "@lexical/react": "0.16.0",
+    "@lexical/rich-text": "0.16.0",
+    "@lexical/selection": "0.16.0",
+    "@lexical/utils": "0.16.0",
     "@payloadcms/next": "workspace:*",
     "@payloadcms/translations": "workspace:*",
     "@payloadcms/ui": "workspace:*",
-    "lexical": "0.15.0",
+    "lexical": "0.16.0",
     "payload": "workspace:*",
     "react": "^19.0.0 || ^19.0.0-rc-f994737d14-20240522",
     "react-dom": "^19.0.0 || ^19.0.0-rc-f994737d14-20240522"

packages/richtext-lexical/src/field/features/debug/testRecorder/plugin/index.tsx

@@ -88,7 +88,7 @@ const formatStep = (step: Step) => {
 }
 
 export function isSelectAll(event: KeyboardEvent): boolean {
-  return event.code === 'KeyA' && (IS_APPLE ? event.metaKey : event.ctrlKey)
+  return event.key.toLowerCase() === 'a' && (IS_APPLE ? event.metaKey : event.ctrlKey)
 }
 
 // stolen from LexicalSelection-test

packages/richtext-lexical/src/field/features/horizontalRule/component/index.tsx

@@ -4,7 +4,7 @@ import type { NodeKey } from 'lexical'
 
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
 import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection.js'
-import { mergeRegister } from '@lexical/utils'
+import { addClassNamesToElement, mergeRegister, removeClassNamesFromElement } from '@lexical/utils'
 import {
   $getNodeByKey,
   $getSelection,
@@ -18,6 +18,8 @@ import { useCallback, useEffect } from 'react'
 
 import { $isHorizontalRuleNode } from '../nodes/HorizontalRuleNode.js'
 
+const isSelectedClassName = 'selected'
+
 /**
  * React component rendered in the lexical editor, WITHIN the hr element created by createDOM of the HorizontalRuleNode.
  *
@@ -69,7 +71,11 @@ export function HorizontalRuleComponent({ nodeKey }: { nodeKey: NodeKey }) {
   useEffect(() => {
     const hrElem = editor.getElementByKey(nodeKey)
     if (hrElem !== null) {
-      hrElem.className = isSelected ? 'selected' : ''
+      if (isSelected) {
+        addClassNamesToElement(hrElem, isSelectedClassName)
+      } else {
+        removeClassNamesFromElement(hrElem, isSelectedClassName)
+      }
     }
   }, [editor, isSelected, nodeKey])
 

packages/richtext-lexical/src/field/features/horizontalRule/nodes/HorizontalRuleNode.tsx

@@ -2,11 +2,13 @@ import type {
   DOMConversionMap,
   DOMConversionOutput,
   DOMExportOutput,
+  EditorConfig,
   LexicalCommand,
   LexicalNode,
   SerializedLexicalNode,
 } from 'lexical'
 
+import { addClassNamesToElement } from '@lexical/utils'
 import { $applyNodeReplacement, DecoratorNode, createCommand } from 'lexical'
 import * as React from 'react'
 
@@ -65,8 +67,10 @@ export class HorizontalRuleNode extends DecoratorNode<React.ReactElement> {
   /**
    * Determines how the hr element is rendered in the lexical editor. This is only the "initial" / "outer" HTML element.
    */
-  createDOM(): HTMLElement {
-    return document.createElement('hr')
+  createDOM(config: EditorConfig): HTMLElement {
+    const element = document.createElement('hr')
+    addClassNamesToElement(element, config.theme.hr)
+    return element
   }
 
   /**

packages/richtext-lexical/src/field/features/horizontalRule/plugin/index.scss

@@ -1,20 +1,20 @@
 @import '../../../../scss/styles.scss';
 
-hr {
+.LexicalEditorTheme__hr {
   padding: 2px 2px;
   border: none;
   margin: 1rem 0;
   cursor: pointer;
 }
 
-hr:after {
+.LexicalEditorTheme__hr:after {
   content: '';
   display: block;
   height: 2px;
   background-color: var(--theme-elevation-250);
 }
 
-hr.selected {
+.LexicalEditorTheme__hr.selected {
   outline: 2px solid var(--theme-success-500);
   user-select: none;
 }

packages/richtext-lexical/src/field/features/link/plugins/clickableLink/index.tsx

@@ -1,12 +1,10 @@
 'use client'
-import LexicalClickableLinkPlugin from '@lexical/react/LexicalClickableLinkPlugin.js'
+import { ClickableLinkPlugin as LexicalClickableLinkPlugin } from '@lexical/react/LexicalClickableLinkPlugin.js'
 import React from 'react'
 
 import type { PluginComponent } from '../../../types.js'
 import type { ClientProps } from '../../feature.client.js'
 
 export const ClickableLinkPlugin: PluginComponent<ClientProps> = () => {
-  const Component = LexicalClickableLinkPlugin.default || LexicalClickableLinkPlugin
-  //@ts-expect-error ts being dumb
-  return <Component />
+  return <LexicalClickableLinkPlugin />
 }

packages/richtext-lexical/src/field/features/upload/nodes/UploadNode.tsx

@@ -26,6 +26,15 @@ export type UploadData = {
   value: number | string
 }
 
+function isGoogleDocCheckboxImg(img: HTMLImageElement): boolean {
+  return (
+    img.parentElement != null &&
+    img.parentElement.tagName === 'LI' &&
+    img.previousSibling === null &&
+    img.getAttribute('aria-roledescription') === 'checkbox'
+  )
+}
+
 function $convertUploadElement(domNode: HTMLImageElement): DOMConversionOutput | null {
   if (
     domNode.hasAttribute('data-lexical-upload-relation-to') &&
@@ -45,6 +54,10 @@ function $convertUploadElement(domNode: HTMLImageElement): DOMConversionOutput |
       return { node }
     }
   }
+  const img = domNode
+  if (img.src.startsWith('file:///') || isGoogleDocCheckboxImg(img)) {
+    return null
+  }
   // TODO: Auto-upload functionality here!
   //}
   return null

packages/richtext-lexical/src/field/lexical/LexicalEditor.tsx

@@ -1,6 +1,6 @@
 'use client'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
-import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary.js'
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary.js'
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin.js'
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin.js'
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin.js'
@@ -98,8 +98,6 @@ export const LexicalEditor: React.FC<
     }
   }, [isSmallWidthViewport])
 
-  const ErrorBoundaryComponent = LexicalErrorBoundary.default || LexicalErrorBoundary
-
   return (
     <React.Fragment>
       {editorConfig.features.plugins.map((plugin) => {
@@ -116,8 +114,7 @@ export const LexicalEditor: React.FC<
           }
         })}
         <RichTextPlugin
-          //@ts-expect-error ts being dumb
-          ErrorBoundary={ErrorBoundaryComponent}
+          ErrorBoundary={LexicalErrorBoundary}
           contentEditable={
             <div className="editor-scroller">
               <div className="editor" ref={onRef}>

packages/richtext-lexical/src/field/lexical/theme/EditorTheme.tsx

@@ -52,6 +52,7 @@ export const LexicalEditorTheme: EditorThemeClasses = {
     h5: 'LexicalEditorTheme__h5',
     h6: 'LexicalEditorTheme__h6',
   },
+  hr: 'LexicalEditorTheme__hr',
   indent: 'LexicalEditorTheme__indent',
   inlineImage: 'LexicalEditor__inline-image',
   link: 'LexicalEditorTheme__link',