@webiny/lexical-nodes 6.0.0-alpha.0 → 6.0.0-alpha.2

package/FontColorNode.d.ts

@@ -1,5 +1,6 @@
-import { EditorConfig, LexicalNode, SerializedTextNode, Spread, TextNode } from "lexical";
-import { EditorTheme } from "@webiny/lexical-theme";
+import type { EditorConfig, LexicalNode, SerializedTextNode, Spread } from "lexical";
+import { TextNode } from "lexical";
+import type { EditorTheme } from "@webiny/lexical-theme";
 export declare class ThemeColorValue {
     private readonly name;
     private value;
@@ -15,8 +16,7 @@ export interface FontColorPayload {
 export type SerializedFontColorNode = Spread<{
     themeColor: string;
     color: string;
-    type: "font-color-node";
-    version: 1;
+    type: "wby-font-color";
 }, SerializedTextNode>;
 /**
  * Main responsibility of this node is to apply custom or Webiny theme color to selected text.

package/FontColorNode.js

@@ -32,7 +32,7 @@ export class FontColorNode extends TextNode {
     this.__color = color;
   }
   static getType() {
-    return "font-color-node";
+    return "wby-font-color";
   }
   static clone(node) {
     return new FontColorNode(node.__text, node.__color, node.__key);
@@ -80,8 +80,7 @@ export class FontColorNode extends TextNode {
       ...super.exportJSON(),
       themeColor: this.__color.getName(),
       color: this.__color.getValue(),
-      type: "font-color-node",
-      version: 1
+      type: "wby-font-color"
     };
   }
   addColorValueToHTMLElement(element, theme) {

package/FontColorNode.js.map

@@ -1 +1 @@
-{"version":3,"names":["$getSelection","$isRangeSelection","createCommand","TextNode","ThemeColorValue","constructor","value","name","getValue","getName","updateFromTheme","theme","styles","colors","ADD_FONT_COLOR_COMMAND","FontColorNodeAttrName","FontColorNode","text","color","key","__color","getType","clone","node","__text","__key","importJSON","serializedNode","themeColor","setTextContent","setFormat","format","setDetail","detail","setMode","mode","setStyle","style","splitText","splitOffsets","newNodes","selection","fontColorNodes","map","fontColorNode","$createFontColorNode","getTextContent","$applyStylesToNode","newNode","replace","anchor","focus","getKey","exportJSON","type","version","addColorValueToHTMLElement","element","setAttribute","updateDOM","prevNode","dom","config","isUpdated","getColorStyle","createDOM","$isFontColorNode","source","getFormat","getStyle"],"sources":["FontColorNode.ts"],"sourcesContent":["import {\n    $getSelection,\n    $isRangeSelection,\n    createCommand,\n    EditorConfig,\n    LexicalNode,\n    SerializedTextNode,\n    Spread,\n    TextNode\n} from \"lexical\";\nimport { EditorTheme } from \"@webiny/lexical-theme\";\n\nexport class ThemeColorValue {\n    // Webiny theme color variable, like color1, color2, etc.\n    private readonly name: string;\n    // This can be a HEX value or a CSS variable.\n    private value: string;\n\n    constructor(value: string, name?: string) {\n        this.value = value;\n        this.name = name ?? \"custom\";\n    }\n\n    getValue() {\n        return this.value;\n    }\n\n    getName() {\n        return this.name;\n    }\n\n    updateFromTheme(theme: EditorTheme) {\n        if (theme?.styles?.colors && this.name !== \"custom\") {\n            this.value = theme.styles?.colors[this.name];\n        }\n    }\n}\n\nexport const ADD_FONT_COLOR_COMMAND = createCommand<FontColorPayload>(\"ADD_FONT_COLOR_COMMAND\");\n\nconst FontColorNodeAttrName = \"data-theme-font-color-name\";\n\nexport interface FontColorPayload {\n    color: ThemeColorValue;\n}\n\nexport type SerializedFontColorNode = Spread<\n    {\n        themeColor: string;\n        color: string;\n        type: \"font-color-node\";\n        version: 1;\n    },\n    SerializedTextNode\n>;\n\n/**\n * Main responsibility of this node is to apply custom or Webiny theme color to selected text.\n * Extends the original TextNode node to add additional transformation and support for webiny theme font color.\n */\nexport class FontColorNode extends TextNode {\n    private readonly __color: ThemeColorValue;\n\n    constructor(text: string, color: ThemeColorValue, key?: string) {\n        super(text, key);\n        this.__color = color;\n    }\n\n    static override getType(): string {\n        return \"font-color-node\";\n    }\n\n    static override clone(node: FontColorNode): FontColorNode {\n        return new FontColorNode(node.__text, node.__color, node.__key);\n    }\n\n    static override importJSON(serializedNode: SerializedFontColorNode): TextNode {\n        const node = new FontColorNode(\n            serializedNode.text,\n            new ThemeColorValue(serializedNode.color, serializedNode.themeColor)\n        );\n        node.setTextContent(serializedNode.text);\n        node.setFormat(serializedNode.format);\n        node.setDetail(serializedNode.detail);\n        node.setMode(serializedNode.mode);\n        node.setStyle(serializedNode.style);\n        return node;\n    }\n\n    override splitText(...splitOffsets: Array<number>): Array<FontColorNode> {\n        const newNodes = super.splitText(...splitOffsets);\n\n        const selection = $getSelection();\n\n        // After splitting, we need to re-apply styling to the new TextNodes.\n        const fontColorNodes = newNodes.map(node => {\n            if (node instanceof FontColorNode) {\n                return node;\n            }\n\n            const fontColorNode = $createFontColorNode(node.getTextContent(), this.__color);\n            $applyStylesToNode(fontColorNode, this);\n\n            const newNode = node.replace(fontColorNode);\n\n            // Since we're replacing the existing node, we need to update the selection keys.\n            // This is very important to not break the editor functionality!\n            if ($isRangeSelection(selection)) {\n                const anchor = selection.anchor;\n                const focus = selection.focus;\n\n                if (anchor.key === node.getKey()) {\n                    anchor.key = newNode.getKey();\n                }\n\n                if (focus.key === node.getKey()) {\n                    focus.key = newNode.getKey();\n                }\n            }\n\n            return newNode;\n        });\n\n        return fontColorNodes as Array<FontColorNode>;\n    }\n\n    override exportJSON(): SerializedFontColorNode {\n        return {\n            ...super.exportJSON(),\n            themeColor: this.__color.getName(),\n            color: this.__color.getValue(),\n            type: \"font-color-node\",\n            version: 1\n        };\n    }\n\n    private addColorValueToHTMLElement(element: HTMLElement, theme: EditorTheme): HTMLElement {\n        // Update color from webiny theme\n        this.__color.updateFromTheme(theme);\n        element.setAttribute(FontColorNodeAttrName, this.__color.getName());\n        element.style.color = this.__color.getValue();\n        return element;\n    }\n\n    override updateDOM(prevNode: this, dom: HTMLElement, config: EditorConfig): boolean {\n        const isUpdated = super.updateDOM(prevNode, dom, config);\n        this.__color.updateFromTheme(config.theme as EditorTheme);\n\n        dom.setAttribute(FontColorNodeAttrName, this.__color.getName());\n        dom.style.color = this.__color.getValue();\n        return isUpdated;\n    }\n\n    getColorStyle() {\n        return {\n            color: this.__color.getValue(),\n            themeColor: this.__color.getName()\n        };\n    }\n\n    override createDOM(config: EditorConfig): HTMLElement {\n        const element = super.createDOM(config);\n        return this.addColorValueToHTMLElement(element, config.theme as EditorTheme);\n    }\n}\n\nexport const $createFontColorNode = (text: string, color: ThemeColorValue): FontColorNode => {\n    return new FontColorNode(text, color);\n};\n\nexport const $isFontColorNode = (node: LexicalNode): node is FontColorNode => {\n    return node instanceof FontColorNode;\n};\n\nexport function $applyStylesToNode(node: TextNode, source: TextNode) {\n    node.setFormat(source.getFormat());\n    node.setStyle(source.getStyle());\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["$getSelection","$isRangeSelection","createCommand","TextNode","ThemeColorValue","constructor","value","name","getValue","getName","updateFromTheme","theme","styles","colors","ADD_FONT_COLOR_COMMAND","FontColorNodeAttrName","FontColorNode","text","color","key","__color","getType","clone","node","__text","__key","importJSON","serializedNode","themeColor","setTextContent","setFormat","format","setDetail","detail","setMode","mode","setStyle","style","splitText","splitOffsets","newNodes","selection","fontColorNodes","map","fontColorNode","$createFontColorNode","getTextContent","$applyStylesToNode","newNode","replace","anchor","focus","getKey","exportJSON","type","addColorValueToHTMLElement","element","setAttribute","updateDOM","prevNode","dom","config","isUpdated","getColorStyle","createDOM","$isFontColorNode","source","getFormat","getStyle"],"sources":["FontColorNode.ts"],"sourcesContent":["import type { EditorConfig, LexicalNode, SerializedTextNode, Spread } from \"lexical\";\nimport { $getSelection, $isRangeSelection, createCommand, TextNode } from \"lexical\";\nimport type { EditorTheme } from \"@webiny/lexical-theme\";\n\nexport class ThemeColorValue {\n    // Webiny theme color variable, like color1, color2, etc.\n    private readonly name: string;\n    // This can be a HEX value or a CSS variable.\n    private value: string;\n\n    constructor(value: string, name?: string) {\n        this.value = value;\n        this.name = name ?? \"custom\";\n    }\n\n    getValue() {\n        return this.value;\n    }\n\n    getName() {\n        return this.name;\n    }\n\n    updateFromTheme(theme: EditorTheme) {\n        if (theme?.styles?.colors && this.name !== \"custom\") {\n            this.value = theme.styles?.colors[this.name];\n        }\n    }\n}\n\nexport const ADD_FONT_COLOR_COMMAND = createCommand<FontColorPayload>(\"ADD_FONT_COLOR_COMMAND\");\n\nconst FontColorNodeAttrName = \"data-theme-font-color-name\";\n\nexport interface FontColorPayload {\n    color: ThemeColorValue;\n}\n\nexport type SerializedFontColorNode = Spread<\n    {\n        themeColor: string;\n        color: string;\n        type: \"wby-font-color\";\n    },\n    SerializedTextNode\n>;\n\n/**\n * Main responsibility of this node is to apply custom or Webiny theme color to selected text.\n * Extends the original TextNode node to add additional transformation and support for webiny theme font color.\n */\nexport class FontColorNode extends TextNode {\n    private readonly __color: ThemeColorValue;\n\n    constructor(text: string, color: ThemeColorValue, key?: string) {\n        super(text, key);\n        this.__color = color;\n    }\n\n    static override getType(): string {\n        return \"wby-font-color\";\n    }\n\n    static override clone(node: FontColorNode): FontColorNode {\n        return new FontColorNode(node.__text, node.__color, node.__key);\n    }\n\n    static override importJSON(serializedNode: SerializedFontColorNode): TextNode {\n        const node = new FontColorNode(\n            serializedNode.text,\n            new ThemeColorValue(serializedNode.color, serializedNode.themeColor)\n        );\n        node.setTextContent(serializedNode.text);\n        node.setFormat(serializedNode.format);\n        node.setDetail(serializedNode.detail);\n        node.setMode(serializedNode.mode);\n        node.setStyle(serializedNode.style);\n        return node;\n    }\n\n    override splitText(...splitOffsets: Array<number>): Array<FontColorNode> {\n        const newNodes = super.splitText(...splitOffsets);\n\n        const selection = $getSelection();\n\n        // After splitting, we need to re-apply styling to the new TextNodes.\n        const fontColorNodes = newNodes.map(node => {\n            if (node instanceof FontColorNode) {\n                return node;\n            }\n\n            const fontColorNode = $createFontColorNode(node.getTextContent(), this.__color);\n            $applyStylesToNode(fontColorNode, this);\n\n            const newNode = node.replace(fontColorNode);\n\n            // Since we're replacing the existing node, we need to update the selection keys.\n            // This is very important to not break the editor functionality!\n            if ($isRangeSelection(selection)) {\n                const anchor = selection.anchor;\n                const focus = selection.focus;\n\n                if (anchor.key === node.getKey()) {\n                    anchor.key = newNode.getKey();\n                }\n\n                if (focus.key === node.getKey()) {\n                    focus.key = newNode.getKey();\n                }\n            }\n\n            return newNode;\n        });\n\n        return fontColorNodes as Array<FontColorNode>;\n    }\n\n    override exportJSON(): SerializedFontColorNode {\n        return {\n            ...super.exportJSON(),\n            themeColor: this.__color.getName(),\n            color: this.__color.getValue(),\n            type: \"wby-font-color\"\n        };\n    }\n\n    private addColorValueToHTMLElement(element: HTMLElement, theme: EditorTheme): HTMLElement {\n        // Update color from webiny theme\n        this.__color.updateFromTheme(theme);\n        element.setAttribute(FontColorNodeAttrName, this.__color.getName());\n        element.style.color = this.__color.getValue();\n        return element;\n    }\n\n    override updateDOM(prevNode: this, dom: HTMLElement, config: EditorConfig): boolean {\n        const isUpdated = super.updateDOM(prevNode, dom, config);\n        this.__color.updateFromTheme(config.theme as EditorTheme);\n\n        dom.setAttribute(FontColorNodeAttrName, this.__color.getName());\n        dom.style.color = this.__color.getValue();\n        return isUpdated;\n    }\n\n    getColorStyle() {\n        return {\n            color: this.__color.getValue(),\n            themeColor: this.__color.getName()\n        };\n    }\n\n    override createDOM(config: EditorConfig): HTMLElement {\n        const element = super.createDOM(config);\n        return this.addColorValueToHTMLElement(element, config.theme as EditorTheme);\n    }\n}\n\nexport const $createFontColorNode = (text: string, color: ThemeColorValue): FontColorNode => {\n    return new FontColorNode(text, color);\n};\n\nexport const $isFontColorNode = (node: LexicalNode): node is FontColorNode => {\n    return node instanceof FontColorNode;\n};\n\nexport function $applyStylesToNode(node: TextNode, source: TextNode) {\n    node.setFormat(source.getFormat());\n    node.setStyle(source.getStyle());\n}\n"],"mappings":"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","ignoreList":[]}

package/HeadingNode.d.ts

@@ -1,28 +1,40 @@
-import { EditorConfig, LexicalNode, NodeKey, RangeSelection, Spread } from "lexical";
-import { HeadingNode as BaseHeadingNode, HeadingTagType, SerializedHeadingNode as BaseSerializedHeadingNode } from "@lexical/rich-text";
-import { EditorTheme } from "@webiny/lexical-theme";
-import { ParagraphNode } from "./ParagraphNode";
-import { TypographyStylesNode, ThemeStyleValue, TextNodeThemeStyles } from "./types";
+import type { EditorConfig, LexicalNode, NodeKey, RangeSelection, Spread, LexicalEditor, DOMExportOutput, DOMConversionMap } from "lexical";
+import type { HeadingTagType, SerializedHeadingNode as BaseSerializedHeadingNode } from "@lexical/rich-text";
+import { HeadingNode as BaseHeadingNode } from "@lexical/rich-text";
+import type { EditorTheme } from "@webiny/lexical-theme";
+import type { ParagraphNode } from "./ParagraphNode";
+import type { TypographyStylesNode, ThemeStyleValue } from "./types";
 export type SerializeHeadingNode = Spread<{
-    styles: ThemeStyleValue[];
-    type: "heading-element";
+    styles?: ThemeStyleValue[];
+    styleId?: string;
+    className?: string;
+    type: "wby-heading";
 }, BaseSerializedHeadingNode>;
-export declare class HeadingNode extends BaseHeadingNode implements TextNodeThemeStyles, TypographyStylesNode {
-    __styles: ThemeStyleValue[];
-    constructor(tag: HeadingTagType, typographyStyleId?: string, key?: NodeKey);
-    private setDefaultTypography;
-    getTypographyStyleId(): string | undefined;
-    private hasTypographyStyle;
-    getThemeStyles(): ThemeStyleValue[];
-    setThemeStyles(styles: ThemeStyleValue[]): this;
+interface HeadingNodeOptions {
+    className?: string;
+    styleId?: string;
+    key?: NodeKey;
+}
+export declare class HeadingNode extends BaseHeadingNode implements TypographyStylesNode {
+    private __styleId;
+    private __className;
+    constructor(tag: HeadingTagType, options?: HeadingNodeOptions);
+    getStyleId(): string | undefined;
+    setStyleId(styleId: string | undefined): void;
+    setClassName(className: string | undefined): void;
+    getClassName(): string | undefined;
     static getType(): string;
     static clone(node: HeadingNode): HeadingNode;
-    protected updateElementWithThemeClasses(element: HTMLElement, theme: EditorTheme): HTMLElement;
     createDOM(config: EditorConfig): HTMLElement;
+    exportDOM(editor: LexicalEditor): DOMExportOutput;
+    static importDOM(): DOMConversionMap | null;
     static importJSON(serializedNode: SerializeHeadingNode): BaseHeadingNode;
     exportJSON(): SerializeHeadingNode;
     insertNewAfter(selection?: RangeSelection, restoreSelection?: boolean): ParagraphNode | HeadingNode;
     collapseAtStart(): true;
+    protected updateElementWithThemeClasses(element: HTMLElement, theme: EditorTheme): HTMLElement;
+    private setDefaultTypography;
 }
-export declare function $createHeadingNode(tag: HeadingTagType, typographyStyleId?: string): HeadingNode;
+export declare function $createHeadingNode(tag: HeadingTagType, styleId?: string): HeadingNode;
 export declare function $isHeadingNode(node: LexicalNode | null | undefined): node is HeadingNode;
+export {};

package/HeadingNode.js

@@ -1,89 +1,149 @@
-import { $applyNodeReplacement } from "lexical";
+import { $applyNodeReplacement, setNodeIndentFromDOM } from "lexical";
 import { addClassNamesToElement } from "@lexical/utils";
 import { HeadingNode as BaseHeadingNode } from "@lexical/rich-text";
 import { findTypographyStyleByHtmlTag } from "@webiny/lexical-theme";
-export class HeadingNode extends BaseHeadingNode {
-  __styles = [];
-  constructor(tag, typographyStyleId, key) {
-    super(tag, key);
-    if (typographyStyleId) {
-      this.__styles.push({
-        styleId: typographyStyleId,
-        type: "typography"
-      });
-    }
+import { getStyleId } from "./utils/getStyleId";
+function isGoogleDocsTitle(domNode) {
+  if (domNode.nodeName.toLowerCase() === "span") {
+    return domNode.style.fontSize === "26pt";
   }
-  setDefaultTypography(themeEmotionMap) {
-    const typographyStyle = findTypographyStyleByHtmlTag(this.__tag, themeEmotionMap);
-    if (typographyStyle) {
-      this.__styles.push({
-        styleId: typographyStyle.id,
-        type: "typography"
-      });
+  return false;
+}
+function $convertHeadingElement(element) {
+  const nodeName = element.nodeName.toLowerCase();
+  let node = null;
+  if (nodeName === "h1" || nodeName === "h2" || nodeName === "h3" || nodeName === "h4" || nodeName === "h5" || nodeName === "h6") {
+    node = $createHeadingNode(nodeName);
+    if (element.style !== null) {
+      setNodeIndentFromDOM(element, node);
+      node.setFormat(element.style.textAlign);
     }
   }
-  getTypographyStyleId() {
-    const style = this.__styles.find(x => x.type === "typography");
-    return style?.styleId || undefined;
+  return {
+    node
+  };
+}
+export class HeadingNode extends BaseHeadingNode {
+  constructor(tag, options = {}) {
+    const {
+      styleId,
+      key,
+      className
+    } = options;
+    super(tag, key);
+    this.__styleId = styleId;
+    this.__className = className;
   }
-  hasTypographyStyle() {
-    return !!this.getTypographyStyleId();
+  getStyleId() {
+    return this.__styleId;
   }
-  getThemeStyles() {
-    const self = super.getLatest();
-    return self.__styles;
+  setStyleId(styleId) {
+    this.__styleId = styleId;
   }
-  setThemeStyles(styles) {
-    const self = super.getWritable();
-    self.__styles = [...styles];
-    return self;
+  setClassName(className) {
+    this.__className = className;
+  }
+  getClassName() {
+    return this.__className;
   }
   static getType() {
-    return "heading-element";
+    return "wby-heading";
   }
   static clone(node) {
-    return new HeadingNode(node.getTag(), node.getTypographyStyleId(), node.__key);
-  }
-  updateElementWithThemeClasses(element, theme) {
-    if (!theme?.emotionMap) {
-      return element;
-    }
-    if (!this.hasTypographyStyle()) {
-      this.setDefaultTypography(theme.emotionMap);
-    }
-    const typoStyleId = this.getTypographyStyleId();
-    let themeClasses;
-
-    // Typography css class
-    if (typoStyleId) {
-      const typographyStyle = theme.emotionMap[typoStyleId];
-      if (typographyStyle) {
-        themeClasses = typographyStyle.className;
-      }
-    }
-    if (themeClasses) {
-      addClassNamesToElement(element, themeClasses);
-    }
-    return element;
+    return new HeadingNode(node.getTag(), {
+      key: node.getKey(),
+      styleId: node.getStyleId(),
+      className: node.getClassName()
+    });
   }
   createDOM(config) {
     const element = super.createDOM(config);
     return this.updateElementWithThemeClasses(element, config.theme);
   }
+  exportDOM(editor) {
+    const base = super.exportDOM(editor);
+    const element = base.element;
+    if (element && this.__className) {
+      element.classList.add(this.__className);
+    }
+    return {
+      ...base,
+      element
+    };
+  }
+  static importDOM() {
+    return {
+      h1: () => ({
+        conversion: $convertHeadingElement,
+        priority: 0
+      }),
+      h2: () => ({
+        conversion: $convertHeadingElement,
+        priority: 0
+      }),
+      h3: () => ({
+        conversion: $convertHeadingElement,
+        priority: 0
+      }),
+      h4: () => ({
+        conversion: $convertHeadingElement,
+        priority: 0
+      }),
+      h5: () => ({
+        conversion: $convertHeadingElement,
+        priority: 0
+      }),
+      h6: () => ({
+        conversion: $convertHeadingElement,
+        priority: 0
+      }),
+      p: node => {
+        // domNode is a <p> since we matched it by nodeName
+        const firstChild = node.firstChild;
+        if (firstChild !== null && isGoogleDocsTitle(firstChild)) {
+          return {
+            conversion: () => ({
+              node: null
+            }),
+            priority: 3
+          };
+        }
+        return null;
+      },
+      span: node => {
+        if (isGoogleDocsTitle(node)) {
+          return {
+            conversion: () => {
+              return {
+                node: $createHeadingNode("h1")
+              };
+            },
+            priority: 3
+          };
+        }
+        return null;
+      }
+    };
+  }
   static importJSON(serializedNode) {
     const node = $createHeadingNode(serializedNode.tag);
     node.setFormat(serializedNode.format);
     node.setIndent(serializedNode.indent);
     node.setDirection(serializedNode.direction);
-    node.setThemeStyles(serializedNode.styles);
+    const styleId = getStyleId({
+      styleId: serializedNode.styleId,
+      styles: serializedNode.styles
+    });
+    node.setStyleId(styleId);
+    node.setClassName(serializedNode.className);
     return node;
   }
   exportJSON() {
     return {
       ...super.exportJSON(),
-      styles: this.__styles,
-      type: "heading-element",
-      version: 1
+      type: "wby-heading",
+      styleId: this.__styleId,
+      className: this.__className
     };
   }
 
@@ -103,9 +163,30 @@ export class HeadingNode extends BaseHeadingNode {
     this.replace(newElement);
     return true;
   }
+  updateElementWithThemeClasses(element, theme) {
+    if (!theme?.emotionMap) {
+      return element;
+    }
+    if (!this.__styleId || !this.__className) {
+      this.setDefaultTypography(theme.emotionMap);
+    }
+    if (this.__className) {
+      addClassNamesToElement(element, this.__className);
+    }
+    return element;
+  }
+  setDefaultTypography(themeEmotionMap) {
+    const typographyStyle = findTypographyStyleByHtmlTag(this.getTag(), themeEmotionMap);
+    if (typographyStyle) {
+      this.__styleId = typographyStyle.id;
+      this.__className = typographyStyle.className;
+    }
+  }
 }
-export function $createHeadingNode(tag, typographyStyleId) {
-  return $applyNodeReplacement(new HeadingNode(tag, typographyStyleId));
+export function $createHeadingNode(tag, styleId) {
+  return $applyNodeReplacement(new HeadingNode(tag, {
+    styleId
+  }));
 }
 export function $isHeadingNode(node) {
   return node instanceof HeadingNode;

package/HeadingNode.js.map

@@ -1 +1 @@
-{"version":3,"names":["$applyNodeReplacement","addClassNamesToElement","HeadingNode","BaseHeadingNode","findTypographyStyleByHtmlTag","__styles","constructor","tag","typographyStyleId","key","push","styleId","type","setDefaultTypography","themeEmotionMap","typographyStyle","__tag","id","getTypographyStyleId","style","find","x","undefined","hasTypographyStyle","getThemeStyles","self","getLatest","setThemeStyles","styles","getWritable","getType","clone","node","getTag","__key","updateElementWithThemeClasses","element","theme","emotionMap","typoStyleId","themeClasses","className","createDOM","config","importJSON","serializedNode","$createHeadingNode","setFormat","format","setIndent","indent","setDirection","direction","exportJSON","version","insertNewAfter","selection","restoreSelection","newElement","getDirection","insertAfter","collapseAtStart","children","getChildren","forEach","child","append","replace","$isHeadingNode"],"sources":["HeadingNode.ts"],"sourcesContent":["import {\n    EditorConfig,\n    $applyNodeReplacement,\n    LexicalNode,\n    NodeKey,\n    RangeSelection,\n    Spread\n} from \"lexical\";\nimport { addClassNamesToElement } from \"@lexical/utils\";\nimport {\n    HeadingNode as BaseHeadingNode,\n    HeadingTagType,\n    SerializedHeadingNode as BaseSerializedHeadingNode\n} from \"@lexical/rich-text\";\nimport { EditorTheme, ThemeEmotionMap, findTypographyStyleByHtmlTag } from \"@webiny/lexical-theme\";\nimport { ParagraphNode } from \"~/ParagraphNode\";\nimport { TypographyStylesNode, ThemeStyleValue, TextNodeThemeStyles } from \"~/types\";\n\nexport type SerializeHeadingNode = Spread<\n    {\n        styles: ThemeStyleValue[];\n        type: \"heading-element\";\n    },\n    BaseSerializedHeadingNode\n>;\n\nexport class HeadingNode\n    extends BaseHeadingNode\n    implements TextNodeThemeStyles, TypographyStylesNode\n{\n    __styles: ThemeStyleValue[] = [];\n\n    constructor(tag: HeadingTagType, typographyStyleId?: string, key?: NodeKey) {\n        super(tag, key);\n\n        if (typographyStyleId) {\n            this.__styles.push({ styleId: typographyStyleId, type: \"typography\" });\n        }\n    }\n\n    private setDefaultTypography(themeEmotionMap: ThemeEmotionMap) {\n        const typographyStyle = findTypographyStyleByHtmlTag(this.__tag, themeEmotionMap);\n        if (typographyStyle) {\n            this.__styles.push({ styleId: typographyStyle.id, type: \"typography\" });\n        }\n    }\n\n    getTypographyStyleId(): string | undefined {\n        const style = this.__styles.find(x => x.type === \"typography\");\n        return style?.styleId || undefined;\n    }\n\n    private hasTypographyStyle(): boolean {\n        return !!this.getTypographyStyleId();\n    }\n\n    getThemeStyles(): ThemeStyleValue[] {\n        const self = super.getLatest();\n        return self.__styles;\n    }\n\n    setThemeStyles(styles: ThemeStyleValue[]) {\n        const self = super.getWritable();\n        self.__styles = [...styles];\n        return self;\n    }\n\n    static override getType(): string {\n        return \"heading-element\";\n    }\n\n    static override clone(node: HeadingNode): HeadingNode {\n        return new HeadingNode(node.getTag(), node.getTypographyStyleId(), node.__key);\n    }\n\n    protected updateElementWithThemeClasses(element: HTMLElement, theme: EditorTheme): HTMLElement {\n        if (!theme?.emotionMap) {\n            return element;\n        }\n\n        if (!this.hasTypographyStyle()) {\n            this.setDefaultTypography(theme.emotionMap);\n        }\n\n        const typoStyleId = this.getTypographyStyleId();\n\n        let themeClasses;\n\n        // Typography css class\n        if (typoStyleId) {\n            const typographyStyle = theme.emotionMap[typoStyleId];\n            if (typographyStyle) {\n                themeClasses = typographyStyle.className;\n            }\n        }\n\n        if (themeClasses) {\n            addClassNamesToElement(element, themeClasses);\n        }\n\n        return element;\n    }\n\n    override createDOM(config: EditorConfig): HTMLElement {\n        const element = super.createDOM(config);\n        return this.updateElementWithThemeClasses(element, config.theme as EditorTheme);\n    }\n\n    static override importJSON(serializedNode: SerializeHeadingNode): BaseHeadingNode {\n        const node = $createHeadingNode(serializedNode.tag);\n        node.setFormat(serializedNode.format);\n        node.setIndent(serializedNode.indent);\n        node.setDirection(serializedNode.direction);\n        node.setThemeStyles(serializedNode.styles);\n        return node;\n    }\n\n    override exportJSON(): SerializeHeadingNode {\n        return {\n            ...super.exportJSON(),\n            styles: this.__styles,\n            type: \"heading-element\",\n            version: 1\n        };\n    }\n\n    // Mutation\n    override insertNewAfter(\n        selection?: RangeSelection,\n        restoreSelection = true\n    ): ParagraphNode | HeadingNode {\n        // Next line for headings are always headings with the same tag\n        const newElement = $createHeadingNode(this.getTag());\n        const direction = this.getDirection();\n        newElement.setDirection(direction);\n        this.insertAfter(newElement, restoreSelection);\n        return newElement;\n    }\n\n    override collapseAtStart(): true {\n        const newElement = $createHeadingNode(this.getTag());\n        const children = this.getChildren();\n        children.forEach(child => newElement.append(child));\n        this.replace(newElement);\n        return true;\n    }\n}\n\nexport function $createHeadingNode(tag: HeadingTagType, typographyStyleId?: string): HeadingNode {\n    return $applyNodeReplacement(new HeadingNode(tag, typographyStyleId));\n}\n\nexport function $isHeadingNode(node: LexicalNode | null | undefined): node is HeadingNode {\n    return node instanceof HeadingNode;\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["$applyNodeReplacement","setNodeIndentFromDOM","addClassNamesToElement","HeadingNode","BaseHeadingNode","findTypographyStyleByHtmlTag","getStyleId","isGoogleDocsTitle","domNode","nodeName","toLowerCase","style","fontSize","$convertHeadingElement","element","node","$createHeadingNode","setFormat","textAlign","constructor","tag","options","styleId","key","className","__styleId","__className","setStyleId","setClassName","getClassName","getType","clone","getTag","getKey","createDOM","config","updateElementWithThemeClasses","theme","exportDOM","editor","base","classList","add","importDOM","h1","conversion","priority","h2","h3","h4","h5","h6","p","firstChild","span","importJSON","serializedNode","format","setIndent","indent","setDirection","direction","styles","exportJSON","type","insertNewAfter","selection","restoreSelection","newElement","getDirection","insertAfter","collapseAtStart","children","getChildren","forEach","child","append","replace","emotionMap","setDefaultTypography","themeEmotionMap","typographyStyle","id","$isHeadingNode"],"sources":["HeadingNode.ts"],"sourcesContent":["import type {\n    EditorConfig,\n    LexicalNode,\n    NodeKey,\n    RangeSelection,\n    Spread,\n    LexicalEditor,\n    DOMExportOutput,\n    DOMConversionMap\n} from \"lexical\";\nimport { $applyNodeReplacement, setNodeIndentFromDOM } from \"lexical\";\nimport { addClassNamesToElement } from \"@lexical/utils\";\nimport type {\n    HeadingTagType,\n    SerializedHeadingNode as BaseSerializedHeadingNode\n} from \"@lexical/rich-text\";\nimport { HeadingNode as BaseHeadingNode } from \"@lexical/rich-text\";\nimport type { EditorTheme, ThemeEmotionMap } from \"@webiny/lexical-theme\";\nimport { findTypographyStyleByHtmlTag } from \"@webiny/lexical-theme\";\nimport type { ParagraphNode } from \"~/ParagraphNode\";\nimport type { TypographyStylesNode, ThemeStyleValue } from \"~/types\";\nimport { getStyleId } from \"~/utils/getStyleId\";\n\nexport type SerializeHeadingNode = Spread<\n    {\n        styles?: ThemeStyleValue[];\n        styleId?: string;\n        className?: string;\n        type: \"wby-heading\";\n    },\n    BaseSerializedHeadingNode\n>;\n\ninterface HeadingNodeOptions {\n    className?: string;\n    styleId?: string;\n    key?: NodeKey;\n}\n\nfunction isGoogleDocsTitle(domNode: HTMLElement) {\n    if (domNode.nodeName.toLowerCase() === \"span\") {\n        return domNode.style.fontSize === \"26pt\";\n    }\n    return false;\n}\nfunction $convertHeadingElement(element: HTMLElement) {\n    const nodeName = element.nodeName.toLowerCase();\n    let node = null;\n    if (\n        nodeName === \"h1\" ||\n        nodeName === \"h2\" ||\n        nodeName === \"h3\" ||\n        nodeName === \"h4\" ||\n        nodeName === \"h5\" ||\n        nodeName === \"h6\"\n    ) {\n        node = $createHeadingNode(nodeName);\n        if (element.style !== null) {\n            setNodeIndentFromDOM(element, node);\n            node.setFormat(element.style.textAlign as any);\n        }\n    }\n    return {\n        node\n    };\n}\n\nexport class HeadingNode extends BaseHeadingNode implements TypographyStylesNode {\n    private __styleId: string | undefined;\n    private __className: string | undefined;\n\n    constructor(tag: HeadingTagType, options: HeadingNodeOptions = {}) {\n        const { styleId, key, className } = options;\n\n        super(tag, key);\n\n        this.__styleId = styleId;\n        this.__className = className;\n    }\n\n    getStyleId(): string | undefined {\n        return this.__styleId;\n    }\n\n    setStyleId(styleId: string | undefined) {\n        this.__styleId = styleId;\n    }\n\n    setClassName(className: string | undefined) {\n        this.__className = className;\n    }\n\n    getClassName(): string | undefined {\n        return this.__className;\n    }\n\n    static override getType(): string {\n        return \"wby-heading\";\n    }\n\n    static override clone(node: HeadingNode): HeadingNode {\n        return new HeadingNode(node.getTag(), {\n            key: node.getKey(),\n            styleId: node.getStyleId(),\n            className: node.getClassName()\n        });\n    }\n\n    override createDOM(config: EditorConfig): HTMLElement {\n        const element = super.createDOM(config);\n        return this.updateElementWithThemeClasses(element, config.theme as EditorTheme);\n    }\n\n    override exportDOM(editor: LexicalEditor): DOMExportOutput {\n        const base = super.exportDOM(editor);\n\n        const element = base.element as HTMLElement;\n        if (element && this.__className) {\n            element.classList.add(this.__className);\n        }\n\n        return { ...base, element };\n    }\n\n    static override importDOM(): DOMConversionMap | null {\n        return {\n            h1: () => ({\n                conversion: $convertHeadingElement,\n                priority: 0\n            }),\n            h2: () => ({\n                conversion: $convertHeadingElement,\n                priority: 0\n            }),\n            h3: () => ({\n                conversion: $convertHeadingElement,\n                priority: 0\n            }),\n            h4: () => ({\n                conversion: $convertHeadingElement,\n                priority: 0\n            }),\n            h5: () => ({\n                conversion: $convertHeadingElement,\n                priority: 0\n            }),\n            h6: () => ({\n                conversion: $convertHeadingElement,\n                priority: 0\n            }),\n            p: node => {\n                // domNode is a <p> since we matched it by nodeName\n                const firstChild = node.firstChild as HTMLElement;\n                if (firstChild !== null && isGoogleDocsTitle(firstChild)) {\n                    return {\n                        conversion: () => ({\n                            node: null\n                        }),\n                        priority: 3\n                    };\n                }\n                return null;\n            },\n            span: node => {\n                if (isGoogleDocsTitle(node)) {\n                    return {\n                        conversion: () => {\n                            return {\n                                node: $createHeadingNode(\"h1\")\n                            };\n                        },\n                        priority: 3\n                    };\n                }\n                return null;\n            }\n        };\n    }\n\n    static override importJSON(serializedNode: SerializeHeadingNode): BaseHeadingNode {\n        const node = $createHeadingNode(serializedNode.tag);\n        node.setFormat(serializedNode.format);\n        node.setIndent(serializedNode.indent);\n        node.setDirection(serializedNode.direction);\n\n        const styleId = getStyleId({\n            styleId: serializedNode.styleId,\n            styles: serializedNode.styles\n        });\n\n        node.setStyleId(styleId);\n        node.setClassName(serializedNode.className);\n\n        return node;\n    }\n\n    override exportJSON(): SerializeHeadingNode {\n        return {\n            ...super.exportJSON(),\n            type: \"wby-heading\",\n            styleId: this.__styleId,\n            className: this.__className\n        };\n    }\n\n    // Mutation\n    override insertNewAfter(\n        selection?: RangeSelection,\n        restoreSelection = true\n    ): ParagraphNode | HeadingNode {\n        // Next line for headings are always headings with the same tag\n        const newElement = $createHeadingNode(this.getTag());\n        const direction = this.getDirection();\n        newElement.setDirection(direction);\n        this.insertAfter(newElement, restoreSelection);\n        return newElement;\n    }\n\n    override collapseAtStart(): true {\n        const newElement = $createHeadingNode(this.getTag());\n        const children = this.getChildren();\n        children.forEach(child => newElement.append(child));\n        this.replace(newElement);\n        return true;\n    }\n\n    protected updateElementWithThemeClasses(element: HTMLElement, theme: EditorTheme): HTMLElement {\n        if (!theme?.emotionMap) {\n            return element;\n        }\n\n        if (!this.__styleId || !this.__className) {\n            this.setDefaultTypography(theme.emotionMap);\n        }\n\n        if (this.__className) {\n            addClassNamesToElement(element, this.__className);\n        }\n\n        return element;\n    }\n\n    private setDefaultTypography(themeEmotionMap: ThemeEmotionMap) {\n        const typographyStyle = findTypographyStyleByHtmlTag(this.getTag(), themeEmotionMap);\n        if (typographyStyle) {\n            this.__styleId = typographyStyle.id;\n            this.__className = typographyStyle.className;\n        }\n    }\n}\n\nexport function $createHeadingNode(tag: HeadingTagType, styleId?: string): HeadingNode {\n    return $applyNodeReplacement(new HeadingNode(tag, { styleId }));\n}\n\nexport function $isHeadingNode(node: LexicalNode | null | undefined): node is HeadingNode {\n    return node instanceof HeadingNode;\n}\n"],"mappings":"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","ignoreList":[]}

package/ImageNode.js

@@ -7,12 +7,14 @@
  */
 import React, { Suspense } from "react";
 import { $applyNodeReplacement, createEditor, DecoratorNode } from "lexical";
-const ImageComponent = /*#__PURE__*/React.lazy(() => import(/* webpackChunkName: "LexicalNodesComponentsImageNodeImageComponent" */"./components/ImageNode/ImageComponent"));
+const ImageComponent = /*#__PURE__*/React.lazy(() => {
+  return import(/* webpackChunkName: "LexicalNodesComponentsImageNodeImageComponent" */"./components/ImageNode/ImageComponent");
+});
 export class ImageNode extends DecoratorNode {
   // Captions cannot yet be used within editor cells
 
   static getType() {
-    return "image";
+    return "wby-image";
   }
   static clone(node) {
     return new ImageNode({
@@ -100,9 +102,9 @@ export class ImageNode extends DecoratorNode {
       maxWidth: this.__maxWidth,
       showCaption: this.__showCaption,
       src: this.getSrc(),
-      type: "image",
-      version: 1,
-      width: this.__width === "inherit" ? 0 : this.__width
+      type: "wby-image",
+      width: this.__width === "inherit" ? 0 : this.__width,
+      version: 1
     };
   }
   setWidthAndHeight(width, height) {

package/ImageNode.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Suspense","$applyNodeReplacement","createEditor","DecoratorNode","ImageComponent","lazy","ImageNode","getType","clone","node","id","__id","src","__src","altText","__altText","maxWidth","__maxWidth","width","__width","height","__height","showCaption","__showCaption","caption","__caption","captionsEnabled","__captionsEnabled","__key","importJSON","serializedNode","$createImageNode","nestedEditor","editorState","parseEditorState","isEmpty","setEditorState","exportDOM","element","document","createElement","setAttribute","toString","importDOM","constructor","props","key","undefined","exportJSON","getAltText","toJSON","getSrc","type","version","setWidthAndHeight","writable","getWritable","setShowCaption","createDOM","config","span","theme","className","image","updateDOM","decorate","fallback","nodeKey","getKey","resizable","$isImageNode"],"sources":["ImageNode.tsx"],"sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\nimport React, { Suspense } from \"react\";\nimport type {\n    DOMConversionMap,\n    DOMExportOutput,\n    EditorConfig,\n    LexicalEditor,\n    LexicalNode,\n    NodeKey,\n    SerializedEditor,\n    SerializedLexicalNode,\n    Spread\n} from \"lexical\";\nimport { $applyNodeReplacement, createEditor, DecoratorNode } from \"lexical\";\n\nconst ImageComponent = React.lazy(\n    () =>\n        import(\n            /* webpackChunkName: \"LexicalNodesComponentsImageNodeImageComponent\" */\n            \"./components/ImageNode/ImageComponent\"\n        )\n);\n\nexport type SerializedImageNode = Spread<\n    {\n        id: string;\n        altText: string;\n        caption: SerializedEditor;\n        height?: number;\n        maxWidth: number;\n        showCaption: boolean;\n        src: string;\n        width?: number;\n    },\n    SerializedLexicalNode\n>;\n\nexport interface ImageNodeProps {\n    id: string;\n    src: string;\n    altText: string;\n    maxWidth: number;\n    width?: \"inherit\" | number;\n    height?: \"inherit\" | number;\n    showCaption?: boolean;\n    caption?: LexicalEditor;\n    captionsEnabled?: boolean;\n}\n\nexport class ImageNode extends DecoratorNode<JSX.Element> {\n    __id: string;\n    __src: string;\n    __altText: string;\n    __width: \"inherit\" | number;\n    __height: \"inherit\" | number;\n    __maxWidth: number;\n    __showCaption: boolean;\n    __caption: LexicalEditor;\n    // Captions cannot yet be used within editor cells\n    __captionsEnabled: boolean;\n\n    static override getType(): string {\n        return \"image\";\n    }\n\n    static override clone(node: ImageNode): ImageNode {\n        return new ImageNode(\n            {\n                id: node.__id,\n                src: node.__src,\n                altText: node.__altText,\n                maxWidth: node.__maxWidth,\n                width: node.__width,\n                height: node.__height,\n                showCaption: node.__showCaption,\n                caption: node.__caption,\n                captionsEnabled: node.__captionsEnabled\n            },\n            node.__key\n        );\n    }\n\n    static override importJSON(serializedNode: SerializedImageNode): ImageNode {\n        const { id, altText, height, width, maxWidth, caption, src, showCaption } = serializedNode;\n        const node = $createImageNode({\n            id,\n            altText,\n            height,\n            maxWidth,\n            showCaption,\n            src,\n            width\n        });\n        const nestedEditor = node.__caption;\n        const editorState = nestedEditor.parseEditorState(caption.editorState);\n        if (!editorState.isEmpty()) {\n            nestedEditor.setEditorState(editorState);\n        }\n        return node;\n    }\n\n    override exportDOM(): DOMExportOutput {\n        const element = document.createElement(\"img\");\n        element.setAttribute(\"id\", this.__id);\n        element.setAttribute(\"src\", this.__src);\n        element.setAttribute(\"alt\", this.__altText);\n        element.setAttribute(\"width\", this.__width.toString());\n        element.setAttribute(\"height\", this.__height.toString());\n        return { element };\n    }\n\n    /**\n     * Control how an HTMLElement is represented in Lexical.\n     * DOM data comes from clipboard or parsing HTML to nodes with the available lexical functions.\n     * (@see @lexical/html package: https://github.com/facebook/lexical/blob/main/packages/lexical-html/README.md).\n     */\n    static override importDOM(): DOMConversionMap | null {\n        /**\n         * By returning 'null' value, we are preventing image node to be created.\n         * Example of how to implement and create the node:\n         * https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/nodes/ImageNode.tsx#L94\n         */\n        return null;\n    }\n\n    constructor(props: ImageNodeProps, key?: NodeKey) {\n        super(key);\n        this.__id = props.id;\n        this.__src = props.src;\n        this.__altText = props.altText;\n        this.__maxWidth = props.maxWidth;\n        this.__width = props.width || \"inherit\";\n        this.__height = props.height || \"inherit\";\n        this.__showCaption = props.showCaption || false;\n        this.__caption = props.caption || createEditor();\n        this.__captionsEnabled = props.captionsEnabled || props.captionsEnabled === undefined;\n    }\n\n    override exportJSON(): SerializedImageNode {\n        return {\n            id: this.__id,\n            altText: this.getAltText(),\n            caption: this.__caption.toJSON(),\n            height: this.__height === \"inherit\" ? 0 : this.__height,\n            maxWidth: this.__maxWidth,\n            showCaption: this.__showCaption,\n            src: this.getSrc(),\n            type: \"image\",\n            version: 1,\n            width: this.__width === \"inherit\" ? 0 : this.__width\n        };\n    }\n\n    setWidthAndHeight(width: \"inherit\" | number, height: \"inherit\" | number): void {\n        const writable = this.getWritable();\n        writable.__width = width;\n        writable.__height = height;\n    }\n\n    setShowCaption(showCaption: boolean): void {\n        const writable = this.getWritable();\n        writable.__showCaption = showCaption;\n    }\n\n    // View\n    override createDOM(config: EditorConfig): HTMLElement {\n        const span = document.createElement(\"span\");\n        const theme = config.theme;\n        const className = theme.image;\n        if (className !== undefined) {\n            span.className = className;\n        }\n        return span;\n    }\n\n    override updateDOM(): false {\n        return false;\n    }\n\n    getSrc(): string {\n        return this.__src;\n    }\n\n    getAltText(): string {\n        return this.__altText;\n    }\n\n    override decorate(): JSX.Element {\n        return (\n            <Suspense fallback={null}>\n                <ImageComponent\n                    id={this.__id}\n                    src={this.__src}\n                    altText={this.__altText}\n                    width={this.__width}\n                    height={this.__height}\n                    maxWidth={this.__maxWidth}\n                    nodeKey={this.getKey()}\n                    showCaption={this.__showCaption}\n                    caption={this.__caption}\n                    captionsEnabled={this.__captionsEnabled}\n                    resizable={true}\n                />\n            </Suspense>\n        );\n    }\n}\n\nexport function $createImageNode(props: ImageNodeProps, key?: string): ImageNode {\n    return $applyNodeReplacement(new ImageNode(props, key));\n}\n\nexport function $isImageNode(node: LexicalNode | null | undefined): node is ImageNode {\n    return node instanceof ImageNode;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAYvC,SAASC,qBAAqB,EAAEC,YAAY,EAAEC,aAAa,QAAQ,SAAS;AAE5E,MAAMC,cAAc,gBAAGL,KAAK,CAACM,IAAI,CAC7B,MACI,MAAM,CACF,8GAEJ,CACR,CAAC;AA4BD,OAAO,MAAMC,SAAS,SAASH,aAAa,CAAc;EAStD;;EAGA,OAAgBI,OAAOA,CAAA,EAAW;IAC9B,OAAO,OAAO;EAClB;EAEA,OAAgBC,KAAKA,CAACC,IAAe,EAAa;IAC9C,OAAO,IAAIH,SAAS,CAChB;MACII,EAAE,EAAED,IAAI,CAACE,IAAI;MACbC,GAAG,EAAEH,IAAI,CAACI,KAAK;MACfC,OAAO,EAAEL,IAAI,CAACM,SAAS;MACvBC,QAAQ,EAAEP,IAAI,CAACQ,UAAU;MACzBC,KAAK,EAAET,IAAI,CAACU,OAAO;MACnBC,MAAM,EAAEX,IAAI,CAACY,QAAQ;MACrBC,WAAW,EAAEb,IAAI,CAACc,aAAa;MAC/BC,OAAO,EAAEf,IAAI,CAACgB,SAAS;MACvBC,eAAe,EAAEjB,IAAI,CAACkB;IAC1B,CAAC,EACDlB,IAAI,CAACmB,KACT,CAAC;EACL;EAEA,OAAgBC,UAAUA,CAACC,cAAmC,EAAa;IACvE,MAAM;MAAEpB,EAAE;MAAEI,OAAO;MAAEM,MAAM;MAAEF,KAAK;MAAEF,QAAQ;MAAEQ,OAAO;MAAEZ,GAAG;MAAEU;IAAY,CAAC,GAAGQ,cAAc;IAC1F,MAAMrB,IAAI,GAAGsB,gBAAgB,CAAC;MAC1BrB,EAAE;MACFI,OAAO;MACPM,MAAM;MACNJ,QAAQ;MACRM,WAAW;MACXV,GAAG;MACHM;IACJ,CAAC,CAAC;IACF,MAAMc,YAAY,GAAGvB,IAAI,CAACgB,SAAS;IACnC,MAAMQ,WAAW,GAAGD,YAAY,CAACE,gBAAgB,CAACV,OAAO,CAACS,WAAW,CAAC;IACtE,IAAI,CAACA,WAAW,CAACE,OAAO,CAAC,CAAC,EAAE;MACxBH,YAAY,CAACI,cAAc,CAACH,WAAW,CAAC;IAC5C;IACA,OAAOxB,IAAI;EACf;EAES4B,SAASA,CAAA,EAAoB;IAClC,MAAMC,OAAO,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;IAC7CF,OAAO,CAACG,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC9B,IAAI,CAAC;IACrC2B,OAAO,CAACG,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC5B,KAAK,CAAC;IACvCyB,OAAO,CAACG,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC1B,SAAS,CAAC;IAC3CuB,OAAO,CAACG,YAAY,CAAC,OAAO,EAAE,IAAI,CAACtB,OAAO,CAACuB,QAAQ,CAAC,CAAC,CAAC;IACtDJ,OAAO,CAACG,YAAY,CAAC,QAAQ,EAAE,IAAI,CAACpB,QAAQ,CAACqB,QAAQ,CAAC,CAAC,CAAC;IACxD,OAAO;MAAEJ;IAAQ,CAAC;EACtB;;EAEA;AACJ;AACA;AACA;AACA;EACI,OAAgBK,SAASA,CAAA,EAA4B;IACjD;AACR;AACA;AACA;AACA;IACQ,OAAO,IAAI;EACf;EAEAC,WAAWA,CAACC,KAAqB,EAAEC,GAAa,EAAE;IAC9C,KAAK,CAACA,GAAG,CAAC;IACV,IAAI,CAACnC,IAAI,GAAGkC,KAAK,CAACnC,EAAE;IACpB,IAAI,CAACG,KAAK,GAAGgC,KAAK,CAACjC,GAAG;IACtB,IAAI,CAACG,SAAS,GAAG8B,KAAK,CAAC/B,OAAO;IAC9B,IAAI,CAACG,UAAU,GAAG4B,KAAK,CAAC7B,QAAQ;IAChC,IAAI,CAACG,OAAO,GAAG0B,KAAK,CAAC3B,KAAK,IAAI,SAAS;IACvC,IAAI,CAACG,QAAQ,GAAGwB,KAAK,CAACzB,MAAM,IAAI,SAAS;IACzC,IAAI,CAACG,aAAa,GAAGsB,KAAK,CAACvB,WAAW,IAAI,KAAK;IAC/C,IAAI,CAACG,SAAS,GAAGoB,KAAK,CAACrB,OAAO,IAAItB,YAAY,CAAC,CAAC;IAChD,IAAI,CAACyB,iBAAiB,GAAGkB,KAAK,CAACnB,eAAe,IAAImB,KAAK,CAACnB,eAAe,KAAKqB,SAAS;EACzF;EAESC,UAAUA,CAAA,EAAwB;IACvC,OAAO;MACHtC,EAAE,EAAE,IAAI,CAACC,IAAI;MACbG,OAAO,EAAE,IAAI,CAACmC,UAAU,CAAC,CAAC;MAC1BzB,OAAO,EAAE,IAAI,CAACC,SAAS,CAACyB,MAAM,CAAC,CAAC;MAChC9B,MAAM,EAAE,IAAI,CAACC,QAAQ,KAAK,SAAS,GAAG,CAAC,GAAG,IAAI,CAACA,QAAQ;MACvDL,QAAQ,EAAE,IAAI,CAACC,UAAU;MACzBK,WAAW,EAAE,IAAI,CAACC,aAAa;MAC/BX,GAAG,EAAE,IAAI,CAACuC,MAAM,CAAC,CAAC;MAClBC,IAAI,EAAE,OAAO;MACbC,OAAO,EAAE,CAAC;MACVnC,KAAK,EAAE,IAAI,CAACC,OAAO,KAAK,SAAS,GAAG,CAAC,GAAG,IAAI,CAACA;IACjD,CAAC;EACL;EAEAmC,iBAAiBA,CAACpC,KAAyB,EAAEE,MAA0B,EAAQ;IAC3E,MAAMmC,QAAQ,GAAG,IAAI,CAACC,WAAW,CAAC,CAAC;IACnCD,QAAQ,CAACpC,OAAO,GAAGD,KAAK;IACxBqC,QAAQ,CAAClC,QAAQ,GAAGD,MAAM;EAC9B;EAEAqC,cAAcA,CAACnC,WAAoB,EAAQ;IACvC,MAAMiC,QAAQ,GAAG,IAAI,CAACC,WAAW,CAAC,CAAC;IACnCD,QAAQ,CAAChC,aAAa,GAAGD,WAAW;EACxC;;EAEA;EACSoC,SAASA,CAACC,MAAoB,EAAe;IAClD,MAAMC,IAAI,GAAGrB,QAAQ,CAACC,aAAa,CAAC,MAAM,CAAC;IAC3C,MAAMqB,KAAK,GAAGF,MAAM,CAACE,KAAK;IAC1B,MAAMC,SAAS,GAAGD,KAAK,CAACE,KAAK;IAC7B,IAAID,SAAS,KAAKf,SAAS,EAAE;MACzBa,IAAI,CAACE,SAAS,GAAGA,SAAS;IAC9B;IACA,OAAOF,IAAI;EACf;EAESI,SAASA,CAAA,EAAU;IACxB,OAAO,KAAK;EAChB;EAEAb,MAAMA,CAAA,EAAW;IACb,OAAO,IAAI,CAACtC,KAAK;EACrB;EAEAoC,UAAUA,CAAA,EAAW;IACjB,OAAO,IAAI,CAAClC,SAAS;EACzB;EAESkD,QAAQA,CAAA,EAAgB;IAC7B,oBACIlE,KAAA,CAAAyC,aAAA,CAACxC,QAAQ;MAACkE,QAAQ,EAAE;IAAK,gBACrBnE,KAAA,CAAAyC,aAAA,CAACpC,cAAc;MACXM,EAAE,EAAE,IAAI,CAACC,IAAK;MACdC,GAAG,EAAE,IAAI,CAACC,KAAM;MAChBC,OAAO,EAAE,IAAI,CAACC,SAAU;MACxBG,KAAK,EAAE,IAAI,CAACC,OAAQ;MACpBC,MAAM,EAAE,IAAI,CAACC,QAAS;MACtBL,QAAQ,EAAE,IAAI,CAACC,UAAW;MAC1BkD,OAAO,EAAE,IAAI,CAACC,MAAM,CAAC,CAAE;MACvB9C,WAAW,EAAE,IAAI,CAACC,aAAc;MAChCC,OAAO,EAAE,IAAI,CAACC,SAAU;MACxBC,eAAe,EAAE,IAAI,CAACC,iBAAkB;MACxC0C,SAAS,EAAE;IAAK,CACnB,CACK,CAAC;EAEnB;AACJ;AAEA,OAAO,SAAStC,gBAAgBA,CAACc,KAAqB,EAAEC,GAAY,EAAa;EAC7E,OAAO7C,qBAAqB,CAAC,IAAIK,SAAS,CAACuC,KAAK,EAAEC,GAAG,CAAC,CAAC;AAC3D;AAEA,OAAO,SAASwB,YAAYA,CAAC7D,IAAoC,EAAqB;EAClF,OAAOA,IAAI,YAAYH,SAAS;AACpC","ignoreList":[]}
+{"version":3,"names":["React","Suspense","$applyNodeReplacement","createEditor","DecoratorNode","ImageComponent","lazy","ImageNode","getType","clone","node","id","__id","src","__src","altText","__altText","maxWidth","__maxWidth","width","__width","height","__height","showCaption","__showCaption","caption","__caption","captionsEnabled","__captionsEnabled","__key","importJSON","serializedNode","$createImageNode","nestedEditor","editorState","parseEditorState","isEmpty","setEditorState","exportDOM","element","document","createElement","setAttribute","toString","importDOM","constructor","props","key","undefined","exportJSON","getAltText","toJSON","getSrc","type","version","setWidthAndHeight","writable","getWritable","setShowCaption","createDOM","config","span","theme","className","image","updateDOM","decorate","fallback","nodeKey","getKey","resizable","$isImageNode"],"sources":["ImageNode.tsx"],"sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\nimport React, { Suspense } from \"react\";\nimport type {\n    DOMConversionMap,\n    DOMExportOutput,\n    EditorConfig,\n    LexicalEditor,\n    LexicalNode,\n    NodeKey,\n    SerializedEditor,\n    SerializedLexicalNode,\n    Spread\n} from \"lexical\";\nimport { $applyNodeReplacement, createEditor, DecoratorNode } from \"lexical\";\n\nconst ImageComponent = React.lazy(() => {\n    return import(\n        /* webpackChunkName: \"LexicalNodesComponentsImageNodeImageComponent\" */\n        \"./components/ImageNode/ImageComponent\"\n    );\n});\n\nexport type SerializedImageNode = Spread<\n    {\n        id: string;\n        altText: string;\n        caption: SerializedEditor;\n        height?: number;\n        maxWidth: number;\n        showCaption: boolean;\n        src: string;\n        width?: number;\n    },\n    SerializedLexicalNode\n>;\n\nexport interface ImageNodeProps {\n    id: string;\n    src: string;\n    altText: string;\n    maxWidth: number;\n    width?: \"inherit\" | number;\n    height?: \"inherit\" | number;\n    showCaption?: boolean;\n    caption?: LexicalEditor;\n    captionsEnabled?: boolean;\n}\n\nexport class ImageNode extends DecoratorNode<JSX.Element> {\n    __id: string;\n    __src: string;\n    __altText: string;\n    __width: \"inherit\" | number;\n    __height: \"inherit\" | number;\n    __maxWidth: number;\n    __showCaption: boolean;\n    __caption: LexicalEditor;\n    // Captions cannot yet be used within editor cells\n    __captionsEnabled: boolean;\n\n    static override getType(): string {\n        return \"wby-image\";\n    }\n\n    static override clone(node: ImageNode): ImageNode {\n        return new ImageNode(\n            {\n                id: node.__id,\n                src: node.__src,\n                altText: node.__altText,\n                maxWidth: node.__maxWidth,\n                width: node.__width,\n                height: node.__height,\n                showCaption: node.__showCaption,\n                caption: node.__caption,\n                captionsEnabled: node.__captionsEnabled\n            },\n            node.__key\n        );\n    }\n\n    static override importJSON(serializedNode: SerializedImageNode): ImageNode {\n        const { id, altText, height, width, maxWidth, caption, src, showCaption } = serializedNode;\n        const node = $createImageNode({\n            id,\n            altText,\n            height,\n            maxWidth,\n            showCaption,\n            src,\n            width\n        });\n        const nestedEditor = node.__caption;\n        const editorState = nestedEditor.parseEditorState(caption.editorState);\n        if (!editorState.isEmpty()) {\n            nestedEditor.setEditorState(editorState);\n        }\n        return node;\n    }\n\n    override exportDOM(): DOMExportOutput {\n        const element = document.createElement(\"img\");\n        element.setAttribute(\"id\", this.__id);\n        element.setAttribute(\"src\", this.__src);\n        element.setAttribute(\"alt\", this.__altText);\n        element.setAttribute(\"width\", this.__width.toString());\n        element.setAttribute(\"height\", this.__height.toString());\n        return { element };\n    }\n\n    /**\n     * Control how an HTMLElement is represented in Lexical.\n     * DOM data comes from clipboard or parsing HTML to nodes with the available lexical functions.\n     * (@see @lexical/html package: https://github.com/facebook/lexical/blob/main/packages/lexical-html/README.md).\n     */\n    static override importDOM(): DOMConversionMap | null {\n        /**\n         * By returning 'null' value, we are preventing image node to be created.\n         * Example of how to implement and create the node:\n         * https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/nodes/ImageNode.tsx#L94\n         */\n        return null;\n    }\n\n    constructor(props: ImageNodeProps, key?: NodeKey) {\n        super(key);\n        this.__id = props.id;\n        this.__src = props.src;\n        this.__altText = props.altText;\n        this.__maxWidth = props.maxWidth;\n        this.__width = props.width || \"inherit\";\n        this.__height = props.height || \"inherit\";\n        this.__showCaption = props.showCaption || false;\n        this.__caption = props.caption || createEditor();\n        this.__captionsEnabled = props.captionsEnabled || props.captionsEnabled === undefined;\n    }\n\n    override exportJSON(): SerializedImageNode {\n        return {\n            id: this.__id,\n            altText: this.getAltText(),\n            caption: this.__caption.toJSON(),\n            height: this.__height === \"inherit\" ? 0 : this.__height,\n            maxWidth: this.__maxWidth,\n            showCaption: this.__showCaption,\n            src: this.getSrc(),\n            type: \"wby-image\",\n            width: this.__width === \"inherit\" ? 0 : this.__width,\n            version: 1\n        };\n    }\n\n    setWidthAndHeight(width: \"inherit\" | number, height: \"inherit\" | number): void {\n        const writable = this.getWritable();\n        writable.__width = width;\n        writable.__height = height;\n    }\n\n    setShowCaption(showCaption: boolean): void {\n        const writable = this.getWritable();\n        writable.__showCaption = showCaption;\n    }\n\n    // View\n    override createDOM(config: EditorConfig): HTMLElement {\n        const span = document.createElement(\"span\");\n        const theme = config.theme;\n        const className = theme.image;\n        if (className !== undefined) {\n            span.className = className;\n        }\n        return span;\n    }\n\n    override updateDOM(): false {\n        return false;\n    }\n\n    getSrc(): string {\n        return this.__src;\n    }\n\n    getAltText(): string {\n        return this.__altText;\n    }\n\n    override decorate(): JSX.Element {\n        return (\n            <Suspense fallback={null}>\n                <ImageComponent\n                    id={this.__id}\n                    src={this.__src}\n                    altText={this.__altText}\n                    width={this.__width}\n                    height={this.__height}\n                    maxWidth={this.__maxWidth}\n                    nodeKey={this.getKey()}\n                    showCaption={this.__showCaption}\n                    caption={this.__caption}\n                    captionsEnabled={this.__captionsEnabled}\n                    resizable={true}\n                />\n            </Suspense>\n        );\n    }\n}\n\nexport function $createImageNode(props: ImageNodeProps, key?: string): ImageNode {\n    return $applyNodeReplacement(new ImageNode(props, key));\n}\n\nexport function $isImageNode(node: LexicalNode | null | undefined): node is ImageNode {\n    return node instanceof ImageNode;\n}\n"],"mappings":"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","ignoreList":[]}

package/LinkNode.d.ts

@@ -6,8 +6,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type { DOMConversionMap, EditorConfig, RangeSelection, LexicalCommand, LexicalNode, NodeKey, SerializedElementNode } from "lexical";
-import { ElementNode, Spread } from "lexical";
+import type { DOMConversionMap, EditorConfig, RangeSelection, LexicalCommand, LexicalNode, NodeKey, SerializedElementNode, Spread } from "lexical";
+import { ElementNode } from "lexical";
 export type LinkAttributes = {
     rel?: null | string;
     target?: null | string;

package/LinkNode.js

@@ -24,7 +24,7 @@ export class LinkNode extends ElementNode {
   /** @internal */
 
   static getType() {
-    return "link";
+    return "wby-link";
   }
   static clone(node) {
     return new LinkNode(node.__url, {
@@ -144,9 +144,8 @@ export class LinkNode extends ElementNode {
       target: this.getTarget(),
       title: this.getTitle(),
       alt: this.getAlt(),
-      type: "link",
-      url: this.getURL(),
-      version: 1
+      type: "wby-link",
+      url: this.getURL()
     };
   }
   getURL() {
@@ -286,8 +285,7 @@ export class AutoLinkNode extends LinkNode {
   exportJSON() {
     return {
       ...super.exportJSON(),
-      type: "autolink",
-      version: 1
+      type: "autolink"
     };
   }
   insertNewAfter(selection, restoreSelection = true) {