@webiny/lexical-nodes 0.0.0-unstable.06b2ede40f

package/FontColorNode.d.ts

@@ -0,0 +1,43 @@
+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;
+    constructor(value: string, name?: string);
+    getValue(): string;
+    getName(): string;
+    updateFromTheme(theme: EditorTheme): void;
+}
+export declare const ADD_FONT_COLOR_COMMAND: import("lexical").LexicalCommand<FontColorPayload>;
+export interface FontColorPayload {
+    color: ThemeColorValue;
+}
+export type SerializedFontColorNode = Spread<{
+    themeColor: string;
+    color: string;
+    type: "wby-font-color";
+}, SerializedTextNode>;
+/**
+ * Main responsibility of this node is to apply custom or Webiny theme color to selected text.
+ * Extends the original TextNode node to add additional transformation and support for webiny theme font color.
+ */
+export declare class FontColorNode extends TextNode {
+    private readonly __color;
+    constructor(text: string, color: ThemeColorValue, key?: string);
+    static getType(): string;
+    static clone(node: FontColorNode): FontColorNode;
+    static importJSON(serializedNode: SerializedFontColorNode): TextNode;
+    splitText(...splitOffsets: Array<number>): Array<FontColorNode>;
+    exportJSON(): SerializedFontColorNode;
+    private addColorValueToHTMLElement;
+    updateDOM(prevNode: this, dom: HTMLElement, config: EditorConfig): boolean;
+    getColorStyle(): {
+        color: string;
+        themeColor: string;
+    };
+    createDOM(config: EditorConfig): HTMLElement;
+}
+export declare const $createFontColorNode: (text: string, color: ThemeColorValue) => FontColorNode;
+export declare const $isFontColorNode: (node: LexicalNode) => node is FontColorNode;
+export declare function $applyStylesToNode(node: TextNode, source: TextNode): void;

package/FontColorNode.js

@@ -0,0 +1,122 @@
+import { $getSelection, $isRangeSelection, createCommand, TextNode } from "lexical";
+export class ThemeColorValue {
+  // Webiny theme color variable, like color1, color2, etc.
+
+  // This can be a HEX value or a CSS variable.
+
+  constructor(value, name) {
+    this.value = value;
+    this.name = name ?? "custom";
+  }
+  getValue() {
+    return this.value;
+  }
+  getName() {
+    return this.name;
+  }
+  updateFromTheme(theme) {
+    if (theme?.styles?.colors && this.name !== "custom") {
+      this.value = theme.styles?.colors[this.name];
+    }
+  }
+}
+export const ADD_FONT_COLOR_COMMAND = createCommand("ADD_FONT_COLOR_COMMAND");
+const FontColorNodeAttrName = "data-theme-font-color-name";
+/**
+ * Main responsibility of this node is to apply custom or Webiny theme color to selected text.
+ * Extends the original TextNode node to add additional transformation and support for webiny theme font color.
+ */
+export class FontColorNode extends TextNode {
+  constructor(text, color, key) {
+    super(text, key);
+    this.__color = color;
+  }
+  static getType() {
+    return "wby-font-color";
+  }
+  static clone(node) {
+    return new FontColorNode(node.__text, node.__color, node.__key);
+  }
+  static importJSON(serializedNode) {
+    const node = new FontColorNode(serializedNode.text, new ThemeColorValue(serializedNode.color, serializedNode.themeColor));
+    node.setTextContent(serializedNode.text);
+    node.setFormat(serializedNode.format);
+    node.setDetail(serializedNode.detail);
+    node.setMode(serializedNode.mode);
+    node.setStyle(serializedNode.style);
+    return node;
+  }
+  splitText(...splitOffsets) {
+    const newNodes = super.splitText(...splitOffsets);
+    const selection = $getSelection();
+
+    // After splitting, we need to re-apply styling to the new TextNodes.
+    const fontColorNodes = newNodes.map(node => {
+      if (node instanceof FontColorNode) {
+        return node;
+      }
+      const fontColorNode = $createFontColorNode(node.getTextContent(), this.__color);
+      $applyStylesToNode(fontColorNode, this);
+      const newNode = node.replace(fontColorNode);
+
+      // Since we're replacing the existing node, we need to update the selection keys.
+      // This is very important to not break the editor functionality!
+      if ($isRangeSelection(selection)) {
+        const anchor = selection.anchor;
+        const focus = selection.focus;
+        if (anchor.key === node.getKey()) {
+          anchor.key = newNode.getKey();
+        }
+        if (focus.key === node.getKey()) {
+          focus.key = newNode.getKey();
+        }
+      }
+      return newNode;
+    });
+    return fontColorNodes;
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      themeColor: this.__color.getName(),
+      color: this.__color.getValue(),
+      type: "wby-font-color"
+    };
+  }
+  addColorValueToHTMLElement(element, theme) {
+    // Update color from webiny theme
+    this.__color.updateFromTheme(theme);
+    element.setAttribute(FontColorNodeAttrName, this.__color.getName());
+    element.style.color = this.__color.getValue();
+    return element;
+  }
+  updateDOM(prevNode, dom, config) {
+    const isUpdated = super.updateDOM(prevNode, dom, config);
+    this.__color.updateFromTheme(config.theme);
+    dom.setAttribute(FontColorNodeAttrName, this.__color.getName());
+    dom.style.color = this.__color.getValue();
+    return isUpdated;
+  }
+  getColorStyle() {
+    return {
+      color: this.__color.getValue(),
+      themeColor: this.__color.getName()
+    };
+  }
+  createDOM(config) {
+    const element = super.createDOM(config);
+    return this.addColorValueToHTMLElement(element, config.theme);
+  }
+}
+export const $createFontColorNode = (text, color) => {
+  return new FontColorNode(text, color);
+};
+export const $isFontColorNode = node => {
+  return node instanceof FontColorNode;
+};
+export function $applyStylesToNode(node, source) {
+  node.setFormat(source.getFormat());
+  node.setStyle(source.getStyle());
+}
+
+//# sourceMappingURL=FontColorNode.js.map

package/FontColorNode.js.map

@@ -0,0 +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","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

@@ -0,0 +1,40 @@
+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[];
+    styleId?: string;
+    className?: string;
+    type: "wby-heading";
+}, BaseSerializedHeadingNode>;
+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;
+    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, styleId?: string): HeadingNode;
+export declare function $isHeadingNode(node: LexicalNode | null | undefined): node is HeadingNode;
+export {};

package/HeadingNode.js

@@ -0,0 +1,195 @@
+import { $applyNodeReplacement, setNodeIndentFromDOM } from "lexical";
+import { addClassNamesToElement } from "@lexical/utils";
+import { HeadingNode as BaseHeadingNode } from "@lexical/rich-text";
+import { findTypographyStyleByHtmlTag } from "@webiny/lexical-theme";
+import { getStyleId } from "./utils/getStyleId";
+function isGoogleDocsTitle(domNode) {
+  if (domNode.nodeName.toLowerCase() === "span") {
+    return domNode.style.fontSize === "26pt";
+  }
+  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);
+    }
+  }
+  return {
+    node
+  };
+}
+export class HeadingNode extends BaseHeadingNode {
+  constructor(tag, options = {}) {
+    const {
+      styleId,
+      key,
+      className
+    } = options;
+    super(tag, key);
+    this.__styleId = styleId;
+    this.__className = className;
+  }
+  getStyleId() {
+    return this.__styleId;
+  }
+  setStyleId(styleId) {
+    this.__styleId = styleId;
+  }
+  setClassName(className) {
+    this.__className = className;
+  }
+  getClassName() {
+    return this.__className;
+  }
+  static getType() {
+    return "wby-heading";
+  }
+  static clone(node) {
+    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);
+    const styleId = getStyleId({
+      styleId: serializedNode.styleId,
+      styles: serializedNode.styles
+    });
+    node.setStyleId(styleId);
+    node.setClassName(serializedNode.className);
+    return node;
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: "wby-heading",
+      styleId: this.__styleId,
+      className: this.__className
+    };
+  }
+
+  // Mutation
+  insertNewAfter(selection, restoreSelection = true) {
+    // Next line for headings are always headings with the same tag
+    const newElement = $createHeadingNode(this.getTag());
+    const direction = this.getDirection();
+    newElement.setDirection(direction);
+    this.insertAfter(newElement, restoreSelection);
+    return newElement;
+  }
+  collapseAtStart() {
+    const newElement = $createHeadingNode(this.getTag());
+    const children = this.getChildren();
+    children.forEach(child => newElement.append(child));
+    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, styleId) {
+  return $applyNodeReplacement(new HeadingNode(tag, {
+    styleId
+  }));
+}
+export function $isHeadingNode(node) {
+  return node instanceof HeadingNode;
+}
+
+//# sourceMappingURL=HeadingNode.js.map

package/HeadingNode.js.map

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1,56 @@
+/// <reference types="react" />
+import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalEditor, LexicalNode, NodeKey, SerializedEditor, SerializedLexicalNode, Spread } from "lexical";
+import { DecoratorNode } from "lexical";
+export type SerializedImageNode = Spread<{
+    id: string;
+    altText: string;
+    caption: SerializedEditor;
+    height?: number;
+    maxWidth: number;
+    showCaption: boolean;
+    src: string;
+    width?: number;
+}, SerializedLexicalNode>;
+export interface ImageNodeProps {
+    id: string;
+    src: string;
+    altText: string;
+    maxWidth: number;
+    width?: "inherit" | number;
+    height?: "inherit" | number;
+    showCaption?: boolean;
+    caption?: LexicalEditor;
+    captionsEnabled?: boolean;
+}
+export declare class ImageNode extends DecoratorNode<JSX.Element> {
+    __id: string;
+    __src: string;
+    __altText: string;
+    __width: "inherit" | number;
+    __height: "inherit" | number;
+    __maxWidth: number;
+    __showCaption: boolean;
+    __caption: LexicalEditor;
+    __captionsEnabled: boolean;
+    static getType(): string;
+    static clone(node: ImageNode): ImageNode;
+    static importJSON(serializedNode: SerializedImageNode): ImageNode;
+    exportDOM(): DOMExportOutput;
+    /**
+     * Control how an HTMLElement is represented in Lexical.
+     * DOM data comes from clipboard or parsing HTML to nodes with the available lexical functions.
+     * (@see @lexical/html package: https://github.com/facebook/lexical/blob/main/packages/lexical-html/README.md).
+     */
+    static importDOM(): DOMConversionMap | null;
+    constructor(props: ImageNodeProps, key?: NodeKey);
+    exportJSON(): SerializedImageNode;
+    setWidthAndHeight(width: "inherit" | number, height: "inherit" | number): void;
+    setShowCaption(showCaption: boolean): void;
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(): false;
+    getSrc(): string;
+    getAltText(): string;
+    decorate(): JSX.Element;
+}
+export declare function $createImageNode(props: ImageNodeProps, key?: string): ImageNode;
+export declare function $isImageNode(node: LexicalNode | null | undefined): node is ImageNode;

package/ImageNode.js

@@ -0,0 +1,164 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import React, { Suspense } from "react";
+import { $applyNodeReplacement, createEditor, DecoratorNode } from "lexical";
+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 "wby-image";
+  }
+  static clone(node) {
+    return new ImageNode({
+      id: node.__id,
+      src: node.__src,
+      altText: node.__altText,
+      maxWidth: node.__maxWidth,
+      width: node.__width,
+      height: node.__height,
+      showCaption: node.__showCaption,
+      caption: node.__caption,
+      captionsEnabled: node.__captionsEnabled
+    }, node.__key);
+  }
+  static importJSON(serializedNode) {
+    const {
+      id,
+      altText,
+      height,
+      width,
+      maxWidth,
+      caption,
+      src,
+      showCaption
+    } = serializedNode;
+    const node = $createImageNode({
+      id,
+      altText,
+      height,
+      maxWidth,
+      showCaption,
+      src,
+      width
+    });
+    const nestedEditor = node.__caption;
+    const editorState = nestedEditor.parseEditorState(caption.editorState);
+    if (!editorState.isEmpty()) {
+      nestedEditor.setEditorState(editorState);
+    }
+    return node;
+  }
+  exportDOM() {
+    const element = document.createElement("img");
+    element.setAttribute("id", this.__id);
+    element.setAttribute("src", this.__src);
+    element.setAttribute("alt", this.__altText);
+    element.setAttribute("width", this.__width.toString());
+    element.setAttribute("height", this.__height.toString());
+    return {
+      element
+    };
+  }
+
+  /**
+   * Control how an HTMLElement is represented in Lexical.
+   * DOM data comes from clipboard or parsing HTML to nodes with the available lexical functions.
+   * (@see @lexical/html package: https://github.com/facebook/lexical/blob/main/packages/lexical-html/README.md).
+   */
+  static importDOM() {
+    /**
+     * By returning 'null' value, we are preventing image node to be created.
+     * Example of how to implement and create the node:
+     * https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/nodes/ImageNode.tsx#L94
+     */
+    return null;
+  }
+  constructor(props, key) {
+    super(key);
+    this.__id = props.id;
+    this.__src = props.src;
+    this.__altText = props.altText;
+    this.__maxWidth = props.maxWidth;
+    this.__width = props.width || "inherit";
+    this.__height = props.height || "inherit";
+    this.__showCaption = props.showCaption || false;
+    this.__caption = props.caption || createEditor();
+    this.__captionsEnabled = props.captionsEnabled || props.captionsEnabled === undefined;
+  }
+  exportJSON() {
+    return {
+      id: this.__id,
+      altText: this.getAltText(),
+      caption: this.__caption.toJSON(),
+      height: this.__height === "inherit" ? 0 : this.__height,
+      maxWidth: this.__maxWidth,
+      showCaption: this.__showCaption,
+      src: this.getSrc(),
+      type: "wby-image",
+      width: this.__width === "inherit" ? 0 : this.__width,
+      version: 1
+    };
+  }
+  setWidthAndHeight(width, height) {
+    const writable = this.getWritable();
+    writable.__width = width;
+    writable.__height = height;
+  }
+  setShowCaption(showCaption) {
+    const writable = this.getWritable();
+    writable.__showCaption = showCaption;
+  }
+
+  // View
+  createDOM(config) {
+    const span = document.createElement("span");
+    const theme = config.theme;
+    const className = theme.image;
+    if (className !== undefined) {
+      span.className = className;
+    }
+    return span;
+  }
+  updateDOM() {
+    return false;
+  }
+  getSrc() {
+    return this.__src;
+  }
+  getAltText() {
+    return this.__altText;
+  }
+  decorate() {
+    return /*#__PURE__*/React.createElement(Suspense, {
+      fallback: null
+    }, /*#__PURE__*/React.createElement(ImageComponent, {
+      id: this.__id,
+      src: this.__src,
+      altText: this.__altText,
+      width: this.__width,
+      height: this.__height,
+      maxWidth: this.__maxWidth,
+      nodeKey: this.getKey(),
+      showCaption: this.__showCaption,
+      caption: this.__caption,
+      captionsEnabled: this.__captionsEnabled,
+      resizable: true
+    }));
+  }
+}
+export function $createImageNode(props, key) {
+  return $applyNodeReplacement(new ImageNode(props, key));
+}
+export function $isImageNode(node) {
+  return node instanceof ImageNode;
+}
+
+//# sourceMappingURL=ImageNode.js.map