@webiny/lexical-nodes 6.0.0-beta.0 → 6.0.0-rc.1

package/FontColorNode.d.ts

@@ -1,41 +1,43 @@
-import { EditorConfig, LexicalCommand, LexicalEditor, LexicalNode, NodeKey, RangeSelection, SerializedTextNode, Spread, TextNode } from "lexical";
-import { EditorTheme } from "@webiny/lexical-theme";
-export declare const ADD_FONT_COLOR_COMMAND: LexicalCommand<FontColorPayload>;
+import type { EditorConfig, LexicalNode, SerializedTextNode, Spread } from "lexical";
+import { TextNode } from "lexical";
+import { Theme } from "@webiny/lexical-theme";
+export declare class ThemeColorValue {
+    private readonly id;
+    private value;
+    constructor(value: string, name?: string);
+    getValue(): string;
+    getName(): string;
+    updateFromTheme(theme: Theme): void;
+}
+export declare const ADD_FONT_COLOR_COMMAND: import("lexical").LexicalCommand<FontColorPayload>;
 export interface FontColorPayload {
-    color: string;
-    themeColorName: string | undefined;
-    caption?: LexicalEditor;
-    key?: NodeKey;
+    color: ThemeColorValue;
 }
-declare type ThemeStyleColorName = string;
-declare type ThemeColor = "custom" | ThemeStyleColorName;
-export declare type SerializedFontColorNode = Spread<{
-    themeColor: ThemeColor;
+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.
  * Extends the original TextNode node to add additional transformation and support for webiny theme font color.
  */
 export declare class FontColorNode extends TextNode {
-    __themeColor: ThemeColor;
-    __color: string;
-    constructor(text: string, color: string, themeColor?: ThemeColor, key?: NodeKey);
+    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;
-    addColorValueToHTMLElement(element: HTMLElement, theme: EditorTheme): HTMLElement;
-    updateDOM(prevNode: FontColorNode, dom: HTMLElement, config: EditorConfig): boolean;
+    private addColorValueToHTMLElement;
+    updateDOM(prevNode: this, dom: HTMLElement, config: EditorConfig): boolean;
     getColorStyle(): {
         color: string;
-        themeColor: ThemeColor;
+        themeColor: string;
     };
     createDOM(config: EditorConfig): HTMLElement;
 }
-export declare const $createFontColorNode: (text: string, color: string, themeColor?: ThemeColor, key?: NodeKey) => FontColorNode;
+export declare const $createFontColorNode: (text: string, color: ThemeColorValue) => FontColorNode;
 export declare const $isFontColorNode: (node: LexicalNode) => node is FontColorNode;
-export declare function $applyStylesToNode(node: FontColorNode, nodeStyleProvider: RangeSelection): void;
-export {};
+export declare function $applyStylesToNode(node: TextNode, source: TextNode): void;

package/FontColorNode.js

@@ -1,117 +1,128 @@
-"use strict";
+import { $getSelection, $isRangeSelection, createCommand, TextNode } from "lexical";
+import { Theme } from "@webiny/lexical-theme";
+export class ThemeColorValue {
+  // Webiny theme color variable, like color1, color2, etc.
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.$applyStylesToNode = $applyStylesToNode;
-exports.FontColorNode = exports.ADD_FONT_COLOR_COMMAND = exports.$isFontColorNode = exports.$createFontColorNode = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _lexical = require("lexical");
-var ADD_FONT_COLOR_COMMAND = exports.ADD_FONT_COLOR_COMMAND = (0, _lexical.createCommand)("ADD_FONT_COLOR_COMMAND");
-var FontColorNodeAttrName = "data-theme-font-color-name";
+  // This can be a HEX value or a CSS variable.
+
+  constructor(value, name) {
+    this.value = value;
+    this.id = name ?? "custom";
+  }
+  getValue() {
+    return this.value;
+  }
+  getName() {
+    return this.id;
+  }
+  updateFromTheme(theme) {
+    if (theme.colors && this.id !== "custom") {
+      const color = theme.colors.find(color => color.id === this.id);
+      if (color) {
+        this.value = color.value;
+      }
+    }
+  }
+}
+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.
  */
-var FontColorNode = exports.FontColorNode = /*#__PURE__*/function (_TextNode) {
-  function FontColorNode(text, color, themeColor, key) {
-    var _this;
-    (0, _classCallCheck2.default)(this, FontColorNode);
-    _this = (0, _callSuper2.default)(this, FontColorNode, [text, key]);
-    _this.__themeColor = themeColor || "custom";
-    _this.__color = color;
-    return _this;
+export class FontColorNode extends TextNode {
+  constructor(text, color, key) {
+    super(text, key);
+    this.__color = color;
   }
-  (0, _inherits2.default)(FontColorNode, _TextNode);
-  return (0, _createClass2.default)(FontColorNode, [{
-    key: "exportJSON",
-    value: function exportJSON() {
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _get2.default)((0, _getPrototypeOf2.default)(FontColorNode.prototype), "exportJSON", this).call(this)), {}, {
-        themeColor: this.__themeColor,
-        color: this.__color,
-        type: "font-color-node",
-        version: 1
-      });
-    }
-  }, {
-    key: "addColorValueToHTMLElement",
-    value: function addColorValueToHTMLElement(element, theme) {
-      var hasThemeColor = this.__themeColor !== "custom";
-      // get the updated color from webiny theme
-      if (hasThemeColor && theme?.styles?.colors) {
-        this.__color = theme.styles.colors[this.__themeColor];
+  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;
       }
-      element.setAttribute(FontColorNodeAttrName, this.__themeColor);
-      element.style.color = this.__color;
-      return element;
-    }
-  }, {
-    key: "updateDOM",
-    value: function updateDOM(prevNode, dom, config) {
-      var theme = config.theme;
-      var isUpdated = (0, _get2.default)((0, _getPrototypeOf2.default)(FontColorNode.prototype), "updateDOM", this).call(this, prevNode, dom, config);
-      var hasThemeColor = this.__themeColor !== "custom";
-      // get the updated color from webiny theme
-      if (hasThemeColor && theme?.styles?.colors) {
-        this.__color = theme.styles.colors[this.__themeColor];
+      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();
+        }
       }
-      dom.setAttribute(FontColorNodeAttrName, this.__themeColor);
-      dom.style.color = this.__color;
-      return isUpdated;
-    }
-  }, {
-    key: "getColorStyle",
-    value: function getColorStyle() {
-      return {
-        color: this.__color,
-        themeColor: this.__themeColor
-      };
-    }
-  }, {
-    key: "createDOM",
-    value: function createDOM(config) {
-      var element = (0, _get2.default)((0, _getPrototypeOf2.default)(FontColorNode.prototype), "createDOM", this).call(this, config);
-      return this.addColorValueToHTMLElement(element, config.theme);
-    }
-  }], [{
-    key: "getType",
-    value: function getType() {
-      return "font-color-node";
-    }
-  }, {
-    key: "clone",
-    value: function clone(node) {
-      return new FontColorNode(node.__text, node.__color, node.__themeColor, node.__key);
-    }
-  }, {
-    key: "importJSON",
-    value: function importJSON(serializedNode) {
-      var node = new FontColorNode(serializedNode.text, 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;
-    }
-  }]);
-}(_lexical.TextNode);
-var $createFontColorNode = exports.$createFontColorNode = function $createFontColorNode(text, color, themeColor, key) {
-  return new FontColorNode(text, color, themeColor, key);
+      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);
+    const theme = Theme.from(config.theme);
+    this.__color.updateFromTheme(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);
+    const theme = Theme.from(config.theme);
+    return this.addColorValueToHTMLElement(element, theme);
+  }
+}
+export const $createFontColorNode = (text, color) => {
+  return new FontColorNode(text, color);
 };
-var $isFontColorNode = exports.$isFontColorNode = function $isFontColorNode(node) {
+export const $isFontColorNode = node => {
   return node instanceof FontColorNode;
 };
-function $applyStylesToNode(node, nodeStyleProvider) {
-  node.setFormat(nodeStyleProvider.format);
-  node.setStyle(nodeStyleProvider.style);
+export function $applyStylesToNode(node, source) {
+  node.setFormat(source.getFormat());
+  node.setStyle(source.getStyle());
 }
 
 //# sourceMappingURL=FontColorNode.js.map

package/FontColorNode.js.map

@@ -1 +1 @@
-{"version":3,"names":["_lexical","require","ADD_FONT_COLOR_COMMAND","exports","createCommand","FontColorNodeAttrName","FontColorNode","_TextNode","text","color","themeColor","key","_this","_classCallCheck2","default","_callSuper2","__themeColor","__color","_inherits2","_createClass2","value","exportJSON","_objectSpread2","_get2","_getPrototypeOf2","prototype","call","type","version","addColorValueToHTMLElement","element","theme","hasThemeColor","styles","colors","setAttribute","style","updateDOM","prevNode","dom","config","isUpdated","getColorStyle","createDOM","getType","clone","node","__text","__key","importJSON","serializedNode","setTextContent","setFormat","format","setDetail","detail","setMode","mode","setStyle","TextNode","$createFontColorNode","$isFontColorNode","$applyStylesToNode","nodeStyleProvider"],"sources":["FontColorNode.ts"],"sourcesContent":["import {\n    createCommand,\n    EditorConfig,\n    LexicalCommand,\n    LexicalEditor,\n    LexicalNode,\n    NodeKey,\n    RangeSelection,\n    SerializedTextNode,\n    Spread,\n    TextNode\n} from \"lexical\";\nimport { EditorTheme } from \"@webiny/lexical-theme\";\n\nexport const ADD_FONT_COLOR_COMMAND: LexicalCommand<FontColorPayload> =\n    createCommand(\"ADD_FONT_COLOR_COMMAND\");\nconst FontColorNodeAttrName = \"data-theme-font-color-name\";\n\nexport interface FontColorPayload {\n    // This color can be hex string\n    color: string;\n    // webiny theme color variable like color1, color2...\n    themeColorName: string | undefined;\n    caption?: LexicalEditor;\n    key?: NodeKey;\n}\n\ntype ThemeStyleColorName = string;\ntype ThemeColor = \"custom\" | ThemeStyleColorName;\n\nexport type SerializedFontColorNode = Spread<\n    {\n        themeColor: ThemeColor;\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    __themeColor: ThemeColor;\n    __color: string;\n\n    constructor(text: string, color: string, themeColor?: ThemeColor, key?: NodeKey) {\n        super(text, key);\n        this.__themeColor = themeColor || \"custom\";\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.__themeColor, node.__key);\n    }\n\n    static override importJSON(serializedNode: SerializedFontColorNode): TextNode {\n        const node = new FontColorNode(\n            serializedNode.text,\n            serializedNode.color,\n            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 exportJSON(): SerializedFontColorNode {\n        return {\n            ...super.exportJSON(),\n            themeColor: this.__themeColor,\n            color: this.__color,\n            type: \"font-color-node\",\n            version: 1\n        };\n    }\n\n    addColorValueToHTMLElement(element: HTMLElement, theme: EditorTheme): HTMLElement {\n        const hasThemeColor = this.__themeColor !== \"custom\";\n        // get the updated color from webiny theme\n        if (hasThemeColor && theme?.styles?.colors) {\n            this.__color = theme.styles.colors[this.__themeColor];\n        }\n\n        element.setAttribute(FontColorNodeAttrName, this.__themeColor);\n        element.style.color = this.__color;\n        return element;\n    }\n\n    override updateDOM(prevNode: FontColorNode, dom: HTMLElement, config: EditorConfig): boolean {\n        const theme = config.theme;\n        const isUpdated = super.updateDOM(prevNode, dom, config);\n        const hasThemeColor = this.__themeColor !== \"custom\";\n        // get the updated color from webiny theme\n        if (hasThemeColor && theme?.styles?.colors) {\n            this.__color = theme.styles.colors[this.__themeColor];\n        }\n\n        dom.setAttribute(FontColorNodeAttrName, this.__themeColor);\n        dom.style.color = this.__color;\n        return isUpdated;\n    }\n\n    getColorStyle(): { color: string; themeColor: ThemeColor } {\n        return {\n            color: this.__color,\n            themeColor: this.__themeColor\n        };\n    }\n\n    override createDOM(config: EditorConfig): HTMLElement {\n        const element = super.createDOM(config);\n        return this.addColorValueToHTMLElement(element, config.theme);\n    }\n}\n\nexport const $createFontColorNode = (\n    text: string,\n    color: string,\n    themeColor?: ThemeColor,\n    key?: NodeKey\n): FontColorNode => {\n    return new FontColorNode(text, color, themeColor, key);\n};\n\nexport const $isFontColorNode = (node: LexicalNode): node is FontColorNode => {\n    return node instanceof FontColorNode;\n};\n\nexport function $applyStylesToNode(node: FontColorNode, nodeStyleProvider: RangeSelection) {\n    node.setFormat(nodeStyleProvider.format);\n    node.setStyle(nodeStyleProvider.style);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["$getSelection","$isRangeSelection","createCommand","TextNode","Theme","ThemeColorValue","constructor","value","name","id","getValue","getName","updateFromTheme","theme","colors","color","find","ADD_FONT_COLOR_COMMAND","FontColorNodeAttrName","FontColorNode","text","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","from","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 { Theme } from \"@webiny/lexical-theme\";\n\nexport class ThemeColorValue {\n    // Webiny theme color variable, like color1, color2, etc.\n    private readonly id: 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.id = name ?? \"custom\";\n    }\n\n    getValue() {\n        return this.value;\n    }\n\n    getName() {\n        return this.id;\n    }\n\n    updateFromTheme(theme: Theme) {\n        if (theme.colors && this.id !== \"custom\") {\n            const color = theme.colors.find(color => color.id === this.id);\n            if (color) {\n                this.value = color.value;\n            }\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: Theme): 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        const theme = Theme.from(config.theme);\n        this.__color.updateFromTheme(theme);\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        const theme = Theme.from(config.theme);\n        return this.addColorValueToHTMLElement(element, theme);\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,30 +1,40 @@
-import { EditorConfig, LexicalNode, NodeKey, RangeSelection, Spread } from "lexical";
-import { HeadingNode as BaseHeadingNode, HeadingTagType, SerializedHeadingNode as BaseSerializedHeadingNode } from "@lexical/rich-text";
-import { WebinyTheme, ThemeEmotionMap } from "@webiny/lexical-theme";
-import { ParagraphNode } from "./ParagraphNode";
-import { TypographyStylesNode, ThemeStyleValue, TextNodeThemeStyles } from "./types";
-export declare type SerializeHeadingNode = Spread<{
-    styles: ThemeStyleValue[];
-    type: "heading-element";
+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 { Theme } from "@webiny/lexical-theme";
+import type { ParagraphNode } from "./ParagraphNode.js";
+import type { TypographyStylesNode, ThemeStyleValue } from "./types.js";
+export type SerializeHeadingNode = Spread<{
+    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);
-    protected setDefaultTypography(themeEmotionMap: ThemeEmotionMap): void;
-    setTypography(typographyStyleId: string): this;
-    getTypographyStyleId(): string | undefined;
-    clearTypographyStyle(): this;
-    hasTypographyStyle(): boolean;
-    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: WebinyTheme): 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: Theme): 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 {};