feat(richtext-lexical): export SerializedHeadingNode, add default node types (#6978)

Author: AlessioGr

docs/lexical/overview.mdx

@@ -199,6 +199,7 @@ import type {
   SerializedTextNode,
   SerializedUploadNode,
   TypedEditorState,
+  SerializedHeadingNode,
 } from '@payloadcms/richtext-lexical'
 
 const editorState: TypedEditorState<
@@ -213,6 +214,7 @@ const editorState: TypedEditorState<
   | SerializedRelationshipNode
   | SerializedTextNode
   | SerializedUploadNode
+  | SerializedHeadingNode
 > = {
   root: {
     type: 'root',
@@ -245,6 +247,47 @@ const editorState: TypedEditorState<
 }
 ```
 
+Alternatively, you can use the `DefaultTypedEditorState` type, which includes all types for all nodes included in the `defaultFeatures`:
+
+```ts
+import type {
+  DefaultTypedEditorState
+} from '@payloadcms/richtext-lexical'
+
+const editorState: DefaultTypedEditorState = {
+  root: {
+    type: 'root',
+    direction: 'ltr',
+    format: '',
+    indent: 0,
+    version: 1,
+    children: [
+      {
+        children: [
+          {
+            detail: 0,
+            format: 0,
+            mode: 'normal',
+            style: '',
+            text: 'Some text. Every property here is fully-typed',
+            type: 'text',
+            version: 1,
+          },
+        ],
+        direction: 'ltr',
+        format: '',
+        indent: 0,
+        type: 'paragraph',
+        textFormat: 0,
+        version: 1,
+      },
+    ],
+  },
+}
+```
+
+Just like `TypedEditorState`, the `DefaultTypedEditorState` also accepts an optional node type union as a generic. Here, this would **add** the specified node types to the default ones. Example: `DefaultTypedEditorState<SerializedBlockNode | YourCustomSerializedNode>`.
+
 This is a type-safe representation of the editor state. Looking at the auto-suggestions of `type` it will show you all the possible node types you can use.
 
 Make sure to only use types exported from `@payloadcms/richtext-lexical`, not from the lexical core packages. We only have control over types we export and can guarantee that those are correct, even though lexical core may export types with identical names.

packages/richtext-lexical/src/features/heading/feature.server.ts

@@ -1,4 +1,8 @@
-import type { HeadingTagType } from '@lexical/rich-text'
+import type {
+  SerializedHeadingNode as _SerializedHeadingNode,
+  HeadingTagType,
+} from '@lexical/rich-text'
+import type { Spread } from 'lexical'
 
 import { HeadingNode } from '@lexical/rich-text'
 
@@ -10,6 +14,13 @@ import { createNode } from '../typeUtilities.js'
 import { i18n } from './i18n.js'
 import { MarkdownTransformer } from './markdownTransformer.js'
 
+export type SerializedHeadingNode = Spread<
+  {
+    type: 'heading'
+  },
+  _SerializedHeadingNode
+>
+
 export type HeadingFeatureProps = {
   enabledHeadingSizes?: HeadingTagType[]
 }

packages/richtext-lexical/src/features/migrations/lexicalPluginToLexical/converter/converters/heading/converter.ts

@@ -1,5 +1,4 @@
-import type { SerializedHeadingNode } from '@lexical/rich-text'
-
+import type { SerializedHeadingNode } from '../../../../../heading/feature.server.js'
 import type { LexicalPluginNodeConverter } from '../../types.js'
 
 import { convertLexicalPluginNodesToLexical } from '../../index.js'

packages/richtext-lexical/src/features/migrations/slateToLexical/converter/converters/heading/converter.ts

@@ -1,5 +1,4 @@
-import type { SerializedHeadingNode } from '@lexical/rich-text'
-
+import type { SerializedHeadingNode } from '../../../../../heading/feature.server.js'
 import type { SlateNodeConverter } from '../../types.js'
 
 import { convertSlateNodesToLexical } from '../../index.js'

packages/richtext-lexical/src/nodeTypes.ts

@@ -5,17 +5,28 @@ import type {
   Spread,
   TextModeType,
 } from 'lexical'
-export type { SerializedQuoteNode } from './features/blockquote/feature.server.js'
-export type { SerializedBlockNode } from './features/blocks/nodes/BlocksNode.js'
-export type { SerializedHorizontalRuleNode } from './features/horizontalRule/nodes/HorizontalRuleNode.js'
 
-export type { SerializedAutoLinkNode, SerializedLinkNode } from './features/link/nodes/types.js'
+import type { SerializedQuoteNode } from './features/blockquote/feature.server.js'
+import type { SerializedBlockNode } from './features/blocks/nodes/BlocksNode.js'
+import type { SerializedHeadingNode } from './features/heading/feature.server.js'
+import type { SerializedHorizontalRuleNode } from './features/horizontalRule/nodes/HorizontalRuleNode.js'
+import type { SerializedAutoLinkNode, SerializedLinkNode } from './features/link/nodes/types.js'
+import type { SerializedListItemNode, SerializedListNode } from './features/lists/plugin/index.js'
+import type { SerializedRelationshipNode } from './features/relationship/nodes/RelationshipNode.js'
+import type { SerializedUploadNode } from './features/upload/nodes/UploadNode.js'
 
-export type { SerializedListItemNode, SerializedListNode } from './features/lists/plugin/index.js'
-
-export type { SerializedRelationshipNode } from './features/relationship/nodes/RelationshipNode.js'
-
-export type { SerializedUploadNode } from './features/upload/nodes/UploadNode.js'
+export {
+  SerializedAutoLinkNode,
+  SerializedBlockNode,
+  SerializedHeadingNode,
+  SerializedHorizontalRuleNode,
+  SerializedLinkNode,
+  SerializedListItemNode,
+  SerializedListNode,
+  SerializedQuoteNode,
+  SerializedRelationshipNode,
+  SerializedUploadNode,
+}
 
 export type SerializedParagraphNode<T extends SerializedLexicalNode = SerializedLexicalNode> =
   Spread<
@@ -46,3 +57,20 @@ type DecrementDepth<N extends number> = [0, 0, 1, 2, 3, 4][N]
 
 export type TypedEditorState<T extends SerializedLexicalNode = SerializedLexicalNode> =
   SerializedEditorState<RecursiveNodes<T>>
+
+export type DefaultNodeTypes =
+  | SerializedAutoLinkNode
+  | SerializedBlockNode
+  | SerializedHeadingNode
+  | SerializedHorizontalRuleNode
+  | SerializedLinkNode
+  | SerializedListItemNode
+  | SerializedListNode
+  | SerializedParagraphNode
+  | SerializedQuoteNode
+  | SerializedRelationshipNode
+  | SerializedTextNode
+  | SerializedUploadNode
+
+export type DefaultTypedEditorState<T extends SerializedLexicalNode = SerializedLexicalNode> =
+  TypedEditorState<DefaultNodeTypes | T>