[lexical]: Breaking: add ability to use type discrimination for lexical node types

examples/vanilla-js-plugin/src/emoji-plugin/EmojiNode.ts

@@ -13,6 +13,7 @@ import {TextNode} from 'lexical';
 export type SerializedEmojiNode = Spread<
   {
     unifiedID: string;
+    type: 'emoji';
   },
   SerializedTextNode
 >;

packages/lexical-code/flow/LexicalCode.js.flow

@@ -110,6 +110,7 @@ declare export function normalizeCodeLang(lang: string): string;
 export type SerializedCodeNode = {
   ...SerializedElementNode,
   language: string | null | void,
+  type: 'code',
   ...
 };
 

packages/lexical-code/src/CodeHighlightNode.ts

@@ -37,6 +37,7 @@ export const DEFAULT_CODE_LANGUAGE = 'javascript';
 type SerializedCodeHighlightNode = Spread<
   {
     highlightType: string | null | undefined;
+    type: 'code-highlight';
   },
   SerializedTextNode
 >;

packages/lexical-code/src/CodeNode.ts

@@ -44,6 +44,7 @@ import {
 export type SerializedCodeNode = Spread<
   {
     language: string | null | undefined;
+    type: 'code';
   },
   SerializedElementNode
 >;

packages/lexical-link/src/index.ts

@@ -43,7 +43,7 @@ export type SerializedLinkNode = Spread<
   {
     url: string;
   },
-  Spread<LinkAttributes, SerializedElementNode>
+  Spread<LinkAttributes & {type: 'link'}, SerializedElementNode>
 >;
 
 type LinkHTMLElementType = HTMLAnchorElement | HTMLSpanElement;
@@ -330,6 +330,7 @@ export function $isLinkNode(
 export type SerializedAutoLinkNode = Spread<
   {
     isUnlinked: boolean;
+    type: 'autolink';
   },
   SerializedLinkNode
 >;

packages/lexical-list/flow/LexicalList.js.flow

@@ -13,7 +13,7 @@ import type {
   ParagraphNode,
   RangeSelection,
   LexicalCommand,
-  SerializedElementNode,
+  SerializedElementNode, Spread,
 } from 'lexical';
 import {ElementNode} from 'lexical';
 
@@ -79,12 +79,12 @@ declare export var INSERT_ORDERED_LIST_COMMAND: LexicalCommand<void>;
 declare export var INSERT_CHECK_LIST_COMMAND: LexicalCommand<void>;
 declare export var REMOVE_LIST_COMMAND: LexicalCommand<void>;
 
-export type SerializedListItemNode = SerializedElementNode & {
+export type SerializedListItemNode = Spread<{type: 'listitem'}, SerializedElementNode> & {
   checked: boolean | void,
   value: number,
 };
 
-export type SerializedListNode = SerializedElementNode & {
+export type SerializedListNode = Spread<{type: 'list'}, SerializedElementNode> & {
   listType: ListType,
   start: number,
   tag: ListNodeTagType,

packages/lexical-list/src/LexicalListItemNode.ts

@@ -46,6 +46,7 @@ export type SerializedListItemNode = Spread<
   {
     checked: boolean | undefined;
     value: number;
+    type: 'listitem';
   },
   SerializedElementNode
 >;

packages/lexical-list/src/LexicalListNode.ts

@@ -42,6 +42,7 @@ export type SerializedListNode = Spread<
     listType: ListType;
     start: number;
     tag: ListNodeTagType;
+    type: 'list';
   },
   SerializedElementNode
 >;

packages/lexical-mark/flow/LexicalMark.js.flow

@@ -11,13 +11,17 @@ import type {
   NodeKey,
   RangeSelection,
   TextNode,
-  SerializedElementNode,
+  SerializedElementNode, Spread,
 } from 'lexical';
 import {ElementNode, LexicalNode} from 'lexical';
 
-export type SerializedMarkNode = SerializedElementNode & {
-  ids: Array<string>,
-};
+export type SerializedMarkNode = Spread<
+  {
+    ids: Array<string>;
+    type: 'mark';
+  },
+  SerializedElementNode
+>;
 
 declare export class MarkNode extends ElementNode {
   __ids: Array<string>;

packages/lexical-mark/src/MarkNode.ts

@@ -25,6 +25,7 @@ import {$applyNodeReplacement, $isRangeSelection, ElementNode} from 'lexical';
 export type SerializedMarkNode = Spread<
   {
     ids: Array<string>;
+    type: 'mark';
   },
   SerializedElementNode
 >;

packages/lexical-overflow/flow/LexicalOverflow.js.flow

@@ -11,7 +11,7 @@ import type {
   LexicalNode,
   NodeKey,
   RangeSelection,
-  SerializedElementNode,
+  SerializedElementNode, Spread,
 } from 'lexical';
 import {ElementNode} from 'lexical';
 declare export class OverflowNode extends ElementNode {
@@ -29,4 +29,5 @@ declare export function $isOverflowNode(
   node: ?LexicalNode,
 ): node is OverflowNode;
 
-export type SerializedOverflowNode = SerializedElementNode;
+export type SerializedOverflowNode = Spread<{type: 'overflow'}, SerializedElementNode>;
+

packages/lexical-overflow/src/index.ts

@@ -12,11 +12,17 @@ import type {
   NodeKey,
   RangeSelection,
   SerializedElementNode,
+  Spread,
 } from 'lexical';
 
 import {$applyNodeReplacement, ElementNode} from 'lexical';
 
-export type SerializedOverflowNode = SerializedElementNode;
+export type SerializedOverflowNode = Spread<
+  {
+    type: 'overflow';
+  },
+  SerializedElementNode
+>;
 
 /** @noInheritDoc */
 export class OverflowNode extends ElementNode {

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

@@ -32,6 +32,7 @@ declare global {
 export type SerializedAutocompleteNode = Spread<
   {
     uuid: string;
+    type: 'autocomplete';
   },
   SerializedLexicalNode
 >;

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

@@ -19,6 +19,7 @@ import {$applyNodeReplacement, TextNode} from 'lexical';
 export type SerializedEmojiNode = Spread<
   {
     className: string;
+    type: 'emoji';
   },
   SerializedTextNode
 >;

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

@@ -27,6 +27,7 @@ export type SerializedEquationNode = Spread<
   {
     equation: string;
     inline: boolean;
+    type: 'equation';
   },
   SerializedLexicalNode
 >;

packages/lexical-playground/src/nodes/ExcalidrawNode/index.tsx

@@ -31,6 +31,7 @@ export type SerializedExcalidrawNode = Spread<
     data: string;
     width: Dimension;
     height: Dimension;
+    type: 'excalidraw';
   },
   SerializedLexicalNode
 >;

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

@@ -57,6 +57,7 @@ function FigmaComponent({
 export type SerializedFigmaNode = Spread<
   {
     documentID: string;
+    type: 'figma';
   },
   SerializedDecoratorBlockNode
 >;

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

@@ -65,6 +65,7 @@ export type SerializedImageNode = Spread<
     showCaption: boolean;
     src: string;
     width?: number;
+    type: 'image';
   },
   SerializedLexicalNode
 >;

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

@@ -62,6 +62,7 @@ export type SerializedInlineImageNode = Spread<
     src: string;
     width?: number;
     position?: Position;
+    type: 'inline-image';
   },
   SerializedLexicalNode
 >;

packages/lexical-playground/src/nodes/KeywordNode.ts

@@ -6,11 +6,21 @@
  *
  */
 
-import type {EditorConfig, LexicalNode, SerializedTextNode} from 'lexical';
+import type {
+  EditorConfig,
+  LexicalNode,
+  SerializedTextNode,
+  Spread,
+} from 'lexical';
 
 import {TextNode} from 'lexical';
 
-export type SerializedKeywordNode = SerializedTextNode;
+export type SerializedKeywordNode = Spread<
+  {
+    type: 'keyword';
+  },
+  SerializedTextNode
+>;
 
 export class KeywordNode extends TextNode {
   static getType(): string {

packages/lexical-playground/src/nodes/LayoutContainerNode.ts

@@ -23,6 +23,7 @@ import {ElementNode} from 'lexical';
 export type SerializedLayoutContainerNode = Spread<
   {
     templateColumns: string;
+    type: 'layout-container';
   },
   SerializedElementNode
 >;

packages/lexical-playground/src/nodes/LayoutItemNode.ts

@@ -11,12 +11,18 @@ import type {
   EditorConfig,
   LexicalNode,
   SerializedElementNode,
+  Spread,
 } from 'lexical';
 
 import {addClassNamesToElement} from '@lexical/utils';
 import {ElementNode} from 'lexical';
 
-export type SerializedLayoutItemNode = SerializedElementNode;
+export type SerializedLayoutItemNode = Spread<
+  {
+    type: 'layout-item';
+  },
+  SerializedElementNode
+>;
 
 export class LayoutItemNode extends ElementNode {
   static getType(): string {

packages/lexical-playground/src/nodes/MentionNode.ts

@@ -22,6 +22,7 @@ import {
 export type SerializedMentionNode = Spread<
   {
     mentionName: string;
+    type: 'mention';
   },
   SerializedTextNode
 >;

packages/lexical-playground/src/nodes/PageBreakNode/index.tsx

@@ -24,11 +24,17 @@ import {
   LexicalNode,
   NodeKey,
   SerializedLexicalNode,
+  Spread,
 } from 'lexical';
 import * as React from 'react';
 import {useCallback, useEffect} from 'react';
 
-export type SerializedPageBreakNode = SerializedLexicalNode;
+export type SerializedPageBreakNode = Spread<
+  {
+    type: 'page-break';
+  },
+  SerializedLexicalNode
+>;
 
 function PageBreakComponent({nodeKey}: {nodeKey: NodeKey}) {
   const [editor] = useLexicalComposerContext();

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

@@ -60,6 +60,7 @@ export type SerializedPollNode = Spread<
   {
     question: string;
     options: Options;
+    type: 'poll';
   },
   SerializedLexicalNode
 >;

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

@@ -31,6 +31,7 @@ export type SerializedStickyNode = Spread<
     yOffset: number;
     color: StickyNoteColor;
     caption: SerializedEditor;
+    type: 'sticky';
   },
   SerializedLexicalNode
 >;

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

@@ -126,6 +126,7 @@ function TweetComponent({
 export type SerializedTweetNode = Spread<
   {
     id: string;
+    type: 'tweet';
   },
   SerializedDecoratorBlockNode
 >;

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

@@ -62,6 +62,7 @@ function YouTubeComponent({
 export type SerializedYouTubeNode = Spread<
   {
     videoID: string;
+    type: 'youtube';
   },
   SerializedDecoratorBlockNode
 >;

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

@@ -27,6 +27,7 @@ import {setDomHiddenUntilFound} from './CollapsibleUtils';
 type SerializedCollapsibleContainerNode = Spread<
   {
     open: boolean;
+    type: 'collapsible-container';
   },
   SerializedElementNode
 >;

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

@@ -15,14 +15,20 @@ import {
   LexicalEditor,
   LexicalNode,
   SerializedElementNode,
+  Spread,
 } from 'lexical';
 import {IS_CHROME} from 'shared/environment';
 import invariant from 'shared/invariant';
 
 import {$isCollapsibleContainerNode} from './CollapsibleContainerNode';
 import {domOnBeforeMatch, setDomHiddenUntilFound} from './CollapsibleUtils';
 
-type SerializedCollapsibleContentNode = SerializedElementNode;
+type SerializedCollapsibleContentNode = Spread<
+  {
+    type: 'collapsible-content';
+  },
+  SerializedElementNode
+>;
 
 export function $convertCollapsibleContentElement(
   domNode: HTMLElement,

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

@@ -17,14 +17,20 @@ import {
   LexicalNode,
   RangeSelection,
   SerializedElementNode,
+  Spread,
 } from 'lexical';
 import {IS_CHROME} from 'shared/environment';
 import invariant from 'shared/invariant';
 
 import {$isCollapsibleContainerNode} from './CollapsibleContainerNode';
 import {$isCollapsibleContentNode} from './CollapsibleContentNode';
 
-type SerializedCollapsibleTitleNode = SerializedElementNode;
+type SerializedCollapsibleTitleNode = Spread<
+  {
+    type: 'collapsible-title';
+  },
+  SerializedElementNode
+>;
 
 export function $convertSummaryElement(
   domNode: HTMLElement,

packages/lexical-react/src/LexicalDecoratorBlockNode.ts

@@ -19,6 +19,7 @@ import {DecoratorNode} from 'lexical';
 export type SerializedDecoratorBlockNode = Spread<
   {
     format: ElementFormatType;
+    type: 'decorator-block';
   },
   SerializedLexicalNode
 >;