chore(richtext-lexical): re-export lexical

docs/lexical/building-custom-features.mdx

@@ -83,7 +83,7 @@ The Server Feature, just like the Client Feature, allows you to add markdown tra
 
 ```ts
 import { createServerFeature } from '@payloadcms/richtext-lexical';
-import type { ElementTransformer } from '@lexical/markdown'
+import type { ElementTransformer } from '@payloadcms/richtext-lexical/lexical/markdown'
 import {
   $createMyNode,
   $isMyNode,
@@ -299,9 +299,9 @@ import type {
   EditorConfig,
   LexicalNode,
   SerializedLexicalNode,
-} from 'lexical'
+} from '@payloadcms/richtext-lexical/lexical'
 
-import { $applyNodeReplacement, DecoratorNode } from 'lexical'
+import { $applyNodeReplacement, DecoratorNode } from '@payloadcms/richtext-lexical/lexical'
 
 // SerializedLexicalNode is the default lexical node.
 // By setting your SerializedMyNode type to SerializedLexicalNode,
@@ -448,17 +448,17 @@ Example plugin.tsx:
 'use client'
 import type {
   LexicalCommand,
-} from 'lexical'
+} from '@payloadcms/richtext-lexical/lexical'
 
 import {
   createCommand,
   $getSelection,
   $isRangeSelection,
   COMMAND_PRIORITY_EDITOR
-} from 'lexical'
+} from '@payloadcms/richtext-lexical/lexical'
 
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
-import { $insertNodeToNearestRoot } from '@lexical/utils'
+import { useLexicalComposerContext } from '@payloadcms/richtext-lexical/lexical/react/LexicalComposerContext.js'
+import { $insertNodeToNearestRoot } from '@payloadcms/richtext-lexical/lexical/utils'
 import { useEffect } from 'react'
 
 import type { PluginComponent } from '@payloadcms/richtext-lexical' // type imports can be imported from @payloadcms/richtext-lexical - even on the client
@@ -589,7 +589,7 @@ import { createClientFeature, toolbarAddDropdownGroupWithItems } from '@payloadc
 import { IconComponent } from './icon';
 import { $isHorizontalRuleNode } from './nodes/MyNode';
 import { INSERT_MYNODE_COMMAND } from './plugin';
-import { $isNodeSelection } from 'lexical'
+import { $isNodeSelection } from '@payloadcms/richtext-lexical/lexical'
 
 export const MyClientFeature = createClientFeature({
    toolbarFixed: {
@@ -711,7 +711,7 @@ The Client Feature, just like the Server Feature, allows you to add markdown tra
 
 ```ts
 import { createClientFeature } from '@payloadcms/richtext-lexical/client';
-import type { ElementTransformer } from '@lexical/markdown'
+import type { ElementTransformer } from '@payloadcms/richtext-lexical/lexical/markdown'
 import {
   $createMyNode,
   $isMyNode,

docs/lexical/converters.mdx

@@ -200,7 +200,7 @@ Lexical provides a seamless way to perform conversions between various other for
 A headless editor can perform such conversions outside of the main editor instance. Follow this method to initiate a headless editor:
 
 ```ts
-import { createHeadlessEditor } from '@lexical/headless' // <= make sure this package is installed
+import { createHeadlessEditor } from '@payloadcms/richtext-lexical/lexical/headless'
 import { getEnabledNodes, sanitizeServerEditorConfig } from '@payloadcms/richtext-lexical'
 
 const yourEditorConfig // <= your editor config here
@@ -237,7 +237,7 @@ If you have access to the sanitized collection config, you can get access to the
 
 ```ts
 import type { CollectionConfig, RichTextField } from 'payload'
-import { createHeadlessEditor } from '@lexical/headless'
+import { createHeadlessEditor } from '@payloadcms/richtext-lexical/lexical/headless'
 import type { LexicalRichTextAdapter, SanitizedServerEditorConfig } from '@payloadcms/richtext-lexical'
 import {
   getEnabledNodes,
@@ -292,8 +292,8 @@ export const MyCollection: CollectionConfig = {
 Once you have your headless editor instance, you can use it to convert HTML to Lexical:
 
 ```ts
-import { $generateNodesFromDOM } from '@lexical/html'
-import { $getRoot, $getSelection } from 'lexical'
+import { $generateNodesFromDOM } from '@payloadcms/richtext-lexical/lexical/html'
+import { $getRoot, $getSelection } from '@payloadcms/richtext-lexical/lexical'
 import { JSDOM } from 'jsdom'
 
 headlessEditor.update(
@@ -360,9 +360,9 @@ Export content from the Lexical editor into Markdown format using these steps:
 Here's the code for it:
 
 ```ts
-import { $convertToMarkdownString } from '@lexical/markdown'
+import { $convertToMarkdownString } from '@payloadcms/richtext-lexical/lexical/markdown'
 import { sanitizeServerEditorConfig } from '@payloadcms/richtext-lexical'
-import type { SerializedEditorState } from 'lexical'
+import type { SerializedEditorState } from '@payloadcms/richtext-lexical/lexical'
 
 const yourSanitizedEditorConfig = sanitizeServerEditorConfig(yourEditorConfig, payloadConfig) // <= your editor config & Payload Config here
 const yourEditorState: SerializedEditorState // <= your current editor state here
@@ -396,8 +396,8 @@ Export content from the Lexical editor into plain text using these steps:
 Here's the code for it:
 
 ```ts
-import type { SerializedEditorState } from 'lexical'
-import { $getRoot } from 'lexical'
+import type { SerializedEditorState } from '@payloadcms/richtext-lexical/lexical'
+import { $getRoot } from '@payloadcms/richtext-lexical/lexical'
 
 const yourEditorState: SerializedEditorState // <= your current editor state here
 

examples/form-builder/next-app/components/RichText/nodeFormat.tsx

@@ -3,7 +3,7 @@
 // @ts-nocheck
 //This copy-and-pasted from lexical here here: https://github.com/facebook/lexical/blob/c2ceee223f46543d12c574e62155e619f9a18a5d/packages/lexical/src/LexicalConstants.ts
 
-import type { ElementFormatType, TextFormatType } from 'lexical'
+import type { ElementFormatType, TextFormatType } from '@payloadcms/richtext-lexical/lexical'
 import type { TextDetailType, TextModeType } from 'lexical/nodes/LexicalTextNode'
 
 /**
@@ -81,7 +81,7 @@ export const RTL_REGEX = new RegExp('^[^' + LTR + ']*[' + RTL + ']')
 // eslint-disable-next-line
 export const LTR_REGEX = new RegExp('^[^' + RTL + ']*[' + LTR + ']')
 
-export const TEXT_TYPE_TO_FORMAT: Record<TextFormatType | string, number> = {
+export const TEXT_TYPE_TO_FORMAT: Record<string | TextFormatType, number> = {
   bold: IS_BOLD,
   code: IS_CODE,
   highlight: IS_HIGHLIGHT,
@@ -92,7 +92,7 @@ export const TEXT_TYPE_TO_FORMAT: Record<TextFormatType | string, number> = {
   underline: IS_UNDERLINE,
 }
 
-export const DETAIL_TYPE_TO_DETAIL: Record<TextDetailType | string, number> = {
+export const DETAIL_TYPE_TO_DETAIL: Record<string | TextDetailType, number> = {
   directionless: IS_DIRECTIONLESS,
   unmergeable: IS_UNMERGEABLE,
 }

examples/form-builder/next-app/components/RichText/serialize.tsx

@@ -1,7 +1,15 @@
-import type { SerializedListItemNode, SerializedListNode } from '@lexical/list'
-import type { SerializedHeadingNode } from '@lexical/rich-text'
 import type { LinkFields, SerializedLinkNode } from '@payloadcms/richtext-lexical'
-import type { SerializedElementNode, SerializedLexicalNode, SerializedTextNode } from 'lexical'
+import type {
+  SerializedElementNode,
+  SerializedLexicalNode,
+  SerializedTextNode,
+} from '@payloadcms/richtext-lexical/lexical'
+import type {
+  SerializedListItemNode,
+  SerializedListNode,
+} from '@payloadcms/richtext-lexical/lexical/list'
+import type { SerializedHeadingNode } from '@payloadcms/richtext-lexical/lexical/rich-text'
+import type { JSX } from 'react'
 
 import React, { Fragment } from 'react'
 
@@ -90,19 +98,33 @@ export function serializeLexical({ nodes }: Props): JSX.Element {
           'children' in _node ? serializedChildrenFn(_node as SerializedElementNode) : ''
 
         switch (_node.type) {
-          case 'linebreak': {
-            return <br key={index} />
-          }
-          case 'paragraph': {
-            return <p key={index}>{serializedChildren}</p>
-          }
           case 'heading': {
             const node = _node as SerializedHeadingNode
 
             type Heading = Extract<keyof JSX.IntrinsicElements, 'h1' | 'h2' | 'h3' | 'h4' | 'h5'>
             const Tag = node?.tag as Heading
             return <Tag key={index}>{serializedChildren}</Tag>
           }
+          case 'linebreak': {
+            return <br key={index} />
+          }
+          case 'link': {
+            const node = _node as SerializedLinkNode
+
+            const fields: LinkFields = node.fields
+
+            return (
+              <CMSLink
+                key={index}
+                newTab={Boolean(fields?.newTab)}
+                reference={fields.doc as any}
+                type={fields.linkType === 'internal' ? 'reference' : 'custom'}
+                url={fields.url}
+              >
+                {serializedChildren}
+              </CMSLink>
+            )
+          }
           case 'list': {
             const node = _node as SerializedListNode
 
@@ -139,26 +161,12 @@ export function serializeLexical({ nodes }: Props): JSX.Element {
               )
             }
           }
+          case 'paragraph': {
+            return <p key={index}>{serializedChildren}</p>
+          }
           case 'quote': {
             return <blockquote key={index}>{serializedChildren}</blockquote>
           }
-          case 'link': {
-            const node = _node as SerializedLinkNode
-
-            const fields: LinkFields = node.fields
-
-            return (
-              <CMSLink
-                key={index}
-                newTab={Boolean(fields?.newTab)}
-                reference={fields.doc as any}
-                type={fields.linkType === 'internal' ? 'reference' : 'custom'}
-                url={fields.url}
-              >
-                {serializedChildren}
-              </CMSLink>
-            )
-          }
 
           /* case 'block': {
             // todo: fix types

examples/form-builder/next-app/package.json

@@ -12,10 +12,6 @@
     "@apollo/client": "^3.7.0",
     "@faceless-ui/css-grid": "^1.2.0",
     "@faceless-ui/modal": "^2.0.2",
-    "@lexical/list": "^0.14.5",
-    "@lexical/react": "0.14.5",
-    "@lexical/rich-text": "^0.14.5",
-    "@lexical/utils": "0.14.5",
     "@payloadcms/plugin-form-builder": "beta",
     "@payloadcms/richtext-lexical": "beta",
     "escape-html": "^1.0.3",

examples/form-builder/next-pages/components/RichText/nodeFormat.tsx

@@ -3,7 +3,7 @@
 // @ts-nocheck
 //This copy-and-pasted from lexical here here: https://github.com/facebook/lexical/blob/c2ceee223f46543d12c574e62155e619f9a18a5d/packages/lexical/src/LexicalConstants.ts
 
-import type { ElementFormatType, TextFormatType } from 'lexical'
+import type { ElementFormatType, TextFormatType } from '@payloadcms/richtext-lexical/lexical'
 import type { TextDetailType, TextModeType } from 'lexical/nodes/LexicalTextNode'
 
 /**
@@ -81,7 +81,7 @@ export const RTL_REGEX = new RegExp('^[^' + LTR + ']*[' + RTL + ']')
 // eslint-disable-next-line
 export const LTR_REGEX = new RegExp('^[^' + RTL + ']*[' + LTR + ']')
 
-export const TEXT_TYPE_TO_FORMAT: Record<TextFormatType | string, number> = {
+export const TEXT_TYPE_TO_FORMAT: Record<string | TextFormatType, number> = {
   bold: IS_BOLD,
   code: IS_CODE,
   highlight: IS_HIGHLIGHT,
@@ -92,7 +92,7 @@ export const TEXT_TYPE_TO_FORMAT: Record<TextFormatType | string, number> = {
   underline: IS_UNDERLINE,
 }
 
-export const DETAIL_TYPE_TO_DETAIL: Record<TextDetailType | string, number> = {
+export const DETAIL_TYPE_TO_DETAIL: Record<string | TextDetailType, number> = {
   directionless: IS_DIRECTIONLESS,
   unmergeable: IS_UNMERGEABLE,
 }

examples/form-builder/next-pages/components/RichText/serialize.tsx

@@ -1,7 +1,14 @@
-import type { SerializedListItemNode, SerializedListNode } from '@lexical/list'
-import type { SerializedHeadingNode } from '@lexical/rich-text'
 import type { LinkFields, SerializedLinkNode } from '@payloadcms/richtext-lexical'
-import type { SerializedElementNode, SerializedLexicalNode, SerializedTextNode } from 'lexical'
+import type {
+  SerializedElementNode,
+  SerializedLexicalNode,
+  SerializedTextNode,
+} from '@payloadcms/richtext-lexical/lexical'
+import type {
+  SerializedListItemNode,
+  SerializedListNode,
+} from '@payloadcms/richtext-lexical/lexical/list'
+import type { SerializedHeadingNode } from '@payloadcms/richtext-lexical/lexical/rich-text'
 
 import React, { Fragment } from 'react'
 
@@ -90,19 +97,33 @@ export function serializeLexical({ nodes }: Props): JSX.Element {
           'children' in _node ? serializedChildrenFn(_node as SerializedElementNode) : ''
 
         switch (_node.type) {
-          case 'linebreak': {
-            return <br key={index} />
-          }
-          case 'paragraph': {
-            return <p key={index}>{serializedChildren}</p>
-          }
           case 'heading': {
             const node = _node as SerializedHeadingNode
 
             type Heading = Extract<keyof JSX.IntrinsicElements, 'h1' | 'h2' | 'h3' | 'h4' | 'h5'>
             const Tag = node?.tag as Heading
             return <Tag key={index}>{serializedChildren}</Tag>
           }
+          case 'linebreak': {
+            return <br key={index} />
+          }
+          case 'link': {
+            const node = _node as SerializedLinkNode
+
+            const fields: LinkFields = node.fields
+
+            return (
+              <CMSLink
+                key={index}
+                newTab={Boolean(fields?.newTab)}
+                reference={fields.doc as any}
+                type={fields.linkType === 'internal' ? 'reference' : 'custom'}
+                url={fields.url}
+              >
+                {serializedChildren}
+              </CMSLink>
+            )
+          }
           case 'list': {
             const node = _node as SerializedListNode
 
@@ -139,26 +160,12 @@ export function serializeLexical({ nodes }: Props): JSX.Element {
               )
             }
           }
+          case 'paragraph': {
+            return <p key={index}>{serializedChildren}</p>
+          }
           case 'quote': {
             return <blockquote key={index}>{serializedChildren}</blockquote>
           }
-          case 'link': {
-            const node = _node as SerializedLinkNode
-
-            const fields: LinkFields = node.fields
-
-            return (
-              <CMSLink
-                key={index}
-                newTab={Boolean(fields?.newTab)}
-                reference={fields.doc as any}
-                type={fields.linkType === 'internal' ? 'reference' : 'custom'}
-                url={fields.url}
-              >
-                {serializedChildren}
-              </CMSLink>
-            )
-          }
 
           /* case 'block': {
             // todo: fix types

examples/form-builder/next-pages/package.json

@@ -12,10 +12,6 @@
     "@apollo/client": "^3.7.0",
     "@faceless-ui/css-grid": "^1.2.0",
     "@faceless-ui/modal": "^2.0.2",
-    "@lexical/list": "^0.14.5",
-    "@lexical/react": "0.14.5",
-    "@lexical/rich-text": "^0.14.5",
-    "@lexical/utils": "0.14.5",
     "@payloadcms/plugin-form-builder": "beta",
     "@payloadcms/richtext-lexical": "beta",
     "escape-html": "^1.0.3",

examples/form-builder/payload/package.json

@@ -17,10 +17,6 @@
     "@apollo/client": "^3.7.0",
     "@faceless-ui/css-grid": "^1.2.0",
     "@faceless-ui/modal": "^2.0.2",
-    "@lexical/list": "^0.14.5",
-    "@lexical/react": "0.14.5",
-    "@lexical/rich-text": "^0.14.5",
-    "@lexical/utils": "0.14.5",
     "@payloadcms/db-mongodb": "beta",
     "@payloadcms/next": "beta",
     "@payloadcms/plugin-cloud": "beta",