[WIP] Feature: $config protocol + NodeState registration/flattening

packages/lexical-html/src/index.ts

@@ -29,6 +29,7 @@ import {
   $isTextNode,
   ArtificialNode__DO_NOT_USE,
   ElementNode,
+  getRegisteredNode,
   isDocumentFragment,
   isInlineDomNode,
 } from 'lexical';
@@ -110,7 +111,7 @@ function $appendNodesToHTML(
     target = clone;
   }
   const children = $isElementNode(target) ? target.getChildren() : [];
-  const registeredNode = editor._nodes.get(target.getType());
+  const registeredNode = getRegisteredNode(editor, target.getType());
   let exportOutput;
 
   // Use HTMLConfig overrides, if available.

packages/lexical-list/src/LexicalListItemNode.ts

@@ -21,6 +21,7 @@ import type {
   RangeSelection,
   SerializedElementNode,
   Spread,
+  StaticNodeConfigRecord,
 } from 'lexical';
 
 import {
@@ -58,6 +59,26 @@ export class ListItemNode extends ElementNode {
   /** @internal */
   __checked?: boolean;
 
+  /** @internal */
+  $config(): StaticNodeConfigRecord<
+    'listitem',
+    {$transform: (node: ListItemNode) => void}
+  > {
+    return this.config('listitem', {
+      $transform: (node: ListItemNode): void => {
+        if (node.__checked == null) {
+          return;
+        }
+        const parent = node.getParent();
+        if ($isListNode(parent)) {
+          if (parent.getListType() !== 'check' && node.getChecked() != null) {
+            node.setChecked(undefined);
+          }
+        }
+      },
+    });
+  }
+
   static getType(): string {
     return 'listitem';
   }
@@ -110,21 +131,6 @@ export class ListItemNode extends ElementNode {
     return false;
   }
 
-  static transform(): (node: LexicalNode) => void {
-    return (node: LexicalNode) => {
-      invariant($isListItemNode(node), 'node is not a ListItemNode');
-      if (node.__checked == null) {
-        return;
-      }
-      const parent = node.getParent();
-      if ($isListNode(parent)) {
-        if (parent.getListType() !== 'check' && node.getChecked() != null) {
-          node.setChecked(undefined);
-        }
-      }
-    };
-  }
-
   static importDOM(): DOMConversionMap | null {
     return {
       li: () => ({

packages/lexical-list/src/LexicalListNode.ts

@@ -27,8 +27,8 @@ import {
   NodeKey,
   SerializedElementNode,
   Spread,
+  StaticNodeConfigRecord,
 } from 'lexical';
-import invariant from 'shared/invariant';
 import normalizeClassNames from 'shared/normalizeClassNames';
 
 import {$createListItemNode, $isListItemNode, ListItemNode} from '.';
@@ -60,6 +60,19 @@ export class ListNode extends ElementNode {
   /** @internal */
   __listType: ListType;
 
+  /** @internal */
+  $config(): StaticNodeConfigRecord<
+    'list',
+    {$transform: (node: ListNode) => void}
+  > {
+    return this.config('list', {
+      $transform: (node: ListNode): void => {
+        mergeNextSiblingListIfSameType(node);
+        updateChildrenListItemValue(node);
+      },
+    });
+  }
+
   static getType(): string {
     return 'list';
   }
@@ -129,14 +142,6 @@ export class ListNode extends ElementNode {
     return false;
   }
 
-  static transform(): (node: LexicalNode) => void {
-    return (node: LexicalNode) => {
-      invariant($isListNode(node), 'node is not a ListNode');
-      mergeNextSiblingListIfSameType(node);
-      updateChildrenListItemValue(node);
-    };
-  }
-
   static importDOM(): DOMConversionMap | null {
     return {
       ol: () => ({

packages/lexical-overflow/src/index.ts

@@ -11,29 +11,27 @@ import type {
   LexicalNode,
   RangeSelection,
   SerializedElementNode,
+  StaticNodeConfigRecord,
 } from 'lexical';
 
 import {$applyNodeReplacement, ElementNode} from 'lexical';
-import invariant from 'shared/invariant';
 
 export type SerializedOverflowNode = SerializedElementNode;
 
 /** @noInheritDoc */
 export class OverflowNode extends ElementNode {
-  static getType(): string {
-    return 'overflow';
-  }
-
-  static clone(node: OverflowNode): OverflowNode {
-    return new OverflowNode(node.__key);
-  }
-
-  static importJSON(serializedNode: SerializedOverflowNode): OverflowNode {
-    return $createOverflowNode().updateFromJSON(serializedNode);
-  }
-
-  static importDOM(): null {
-    return null;
+  /** @internal */
+  $config(): StaticNodeConfigRecord<
+    'overflow',
+    {$transform: (node: OverflowNode) => void}
+  > {
+    return this.config('overflow', {
+      $transform(node: OverflowNode) {
+        if (node.isEmpty()) {
+          node.remove();
+        }
+      },
+    });
   }
 
   createDOM(config: EditorConfig): HTMLElement {
@@ -60,15 +58,6 @@ export class OverflowNode extends ElementNode {
   excludeFromCopy(): boolean {
     return true;
   }
-
-  static transform(): (node: LexicalNode) => void {
-    return (node: LexicalNode) => {
-      invariant($isOverflowNode(node), 'node is not a OverflowNode');
-      if (node.isEmpty()) {
-        node.remove();
-      }
-    };
-  }
 }
 
 export function $createOverflowNode(): OverflowNode {

packages/lexical-playground/src/nodes/PollNode.tsx

@@ -8,8 +8,9 @@
 
 import type {JSX} from 'react';
 
-import {makeStateWrapper} from '@lexical/utils';
 import {
+  $getState,
+  $setState,
   createState,
   DecoratorNode,
   DOMConversionMap,
@@ -18,7 +19,9 @@ import {
   LexicalNode,
   SerializedLexicalNode,
   Spread,
+  StateConfigValue,
 } from 'lexical';
+import {StateValueOrUpdater} from 'packages/lexical/src/LexicalNodeState';
 import * as React from 'react';
 
 export type Options = ReadonlyArray<Option>;
@@ -94,39 +97,37 @@ function parseOptions(json: unknown): Options {
   return options;
 }
 
-const questionState = makeStateWrapper(
-  createState('question', {
-    parse: (v) => (typeof v === 'string' ? v : ''),
-  }),
-);
-const optionsState = makeStateWrapper(
-  createState('options', {
-    isEqual: (a, b) =>
-      a.length === b.length && JSON.stringify(a) === JSON.stringify(b),
-    parse: parseOptions,
-  }),
-);
+const questionState = createState('question', {
+  parse: (v) => (typeof v === 'string' ? v : ''),
+});
+const optionsState = createState('options', {
+  isEqual: (a, b) =>
+    a.length === b.length && JSON.stringify(a) === JSON.stringify(b),
+  parse: parseOptions,
+});
 
 export class PollNode extends DecoratorNode<JSX.Element> {
-  static getType(): string {
-    return 'poll';
+  $config() {
+    return this.config('poll', {
+      stateConfigs: [
+        {flat: true, stateConfig: questionState},
+        {flat: true, stateConfig: optionsState},
+      ],
+    });
   }
 
-  static clone(node: PollNode): PollNode {
-    return new PollNode(node.__key);
+  getQuestion(): StateConfigValue<typeof questionState> {
+    return $getState(this, questionState);
   }
-
-  static importJSON(serializedNode: SerializedPollNode): PollNode {
-    return $createPollNode(
-      serializedNode.question,
-      serializedNode.options,
-    ).updateFromJSON(serializedNode);
+  setQuestion(valueOrUpdater: StateValueOrUpdater<typeof questionState>): this {
+    return $setState(this, questionState, valueOrUpdater);
+  }
+  getOptions(): StateConfigValue<typeof optionsState> {
+    return $getState(this, optionsState);
+  }
+  setOptions(valueOrUpdater: StateValueOrUpdater<typeof optionsState>): this {
+    return $setState(this, optionsState, valueOrUpdater);
   }
-
-  getQuestion = questionState.makeGetterMethod<this>();
-  setQuestion = questionState.makeSetterMethod<this>();
-  getOptions = optionsState.makeGetterMethod<this>();
-  setOptions = optionsState.makeSetterMethod<this>();
 
   addOption(option: Option): this {
     return this.setOptions((options) => [...options, option]);

packages/lexical-playground/src/plugins/CollapsiblePlugin/CollapsibleTitleNode.ts

@@ -16,16 +16,14 @@ import {
   LexicalEditor,
   LexicalNode,
   RangeSelection,
-  SerializedElementNode,
+  StaticNodeConfigRecord,
 } from 'lexical';
 import {IS_CHROME} from 'shared/environment';
 import invariant from 'shared/invariant';
 
 import {$isCollapsibleContainerNode} from './CollapsibleContainerNode';
 import {$isCollapsibleContentNode} from './CollapsibleContentNode';
 
-type SerializedCollapsibleTitleNode = SerializedElementNode;
-
 export function $convertSummaryElement(
   domNode: HTMLElement,
 ): DOMConversionOutput | null {
@@ -35,13 +33,20 @@ export function $convertSummaryElement(
   };
 }
 
+/** @noInheritDoc */
 export class CollapsibleTitleNode extends ElementNode {
-  static getType(): string {
-    return 'collapsible-title';
-  }
-
-  static clone(node: CollapsibleTitleNode): CollapsibleTitleNode {
-    return new CollapsibleTitleNode(node.__key);
+  /** @internal */
+  $config(): StaticNodeConfigRecord<
+    'collapsible-title',
+    {$transform: (node: CollapsibleTitleNode) => void}
+  > {
+    return this.config('collapsible-title', {
+      $transform(node: CollapsibleTitleNode) {
+        if (node.isEmpty()) {
+          node.remove();
+        }
+      },
+    });
   }
 
   createDOM(config: EditorConfig, editor: LexicalEditor): HTMLElement {
@@ -77,24 +82,6 @@ export class CollapsibleTitleNode extends ElementNode {
     };
   }
 
-  static importJSON(
-    serializedNode: SerializedCollapsibleTitleNode,
-  ): CollapsibleTitleNode {
-    return $createCollapsibleTitleNode().updateFromJSON(serializedNode);
-  }
-
-  static transform(): (node: LexicalNode) => void {
-    return (node: LexicalNode) => {
-      invariant(
-        $isCollapsibleTitleNode(node),
-        'node is not a CollapsibleTitleNode',
-      );
-      if (node.isEmpty()) {
-        node.remove();
-      }
-    };
-  }
-
   insertNewAfter(_: RangeSelection, restoreSelection = true): ElementNode {
     const containerNode = this.getParentOrThrow();
 

packages/lexical-react/src/LexicalNestedComposer.tsx

@@ -16,7 +16,9 @@ import {
   LexicalComposerContext,
 } from '@lexical/react/LexicalComposerContext';
 import {
+  createSharedNodeState,
   EditorThemeClasses,
+  getRegisteredNode,
   Klass,
   LexicalEditor,
   LexicalNode,
@@ -83,6 +85,7 @@ export function LexicalNestedComposer({
             klass: entry.klass,
             replace: entry.replace,
             replaceWithKlass: entry.replaceWithKlass,
+            sharedNodeState: createSharedNodeState(entry.klass),
             transforms: getTransformSetFromKlass(entry.klass),
           });
         }
@@ -97,13 +100,17 @@ export function LexicalNestedComposer({
             replace = options.with;
             replaceWithKlass = options.withKlass || null;
           }
-          const registeredKlass = initialEditor._nodes.get(klass.getType());
+          const registeredKlass = getRegisteredNode(
+            initialEditor,
+            klass.getType(),
+          );
 
           initialEditor._nodes.set(klass.getType(), {
             exportDOM: registeredKlass ? registeredKlass.exportDOM : undefined,
             klass,
             replace,
             replaceWithKlass,
+            sharedNodeState: createSharedNodeState(klass),
             transforms: getTransformSetFromKlass(klass),
           });
         }

packages/lexical/src/LexicalConstants.ts

@@ -156,3 +156,4 @@ export const TEXT_TYPE_TO_MODE: Record<number, TextModeType> = {
 };
 
 export const NODE_STATE_KEY = '$';
+export const PROTOTYPE_CONFIG_METHOD = '$config';