@webiny/lexical-nodes 5.44.1-beta.1 → 5.45.0-beta.0

package/FontColorNode.d.ts

@@ -1,12 +1,13 @@
-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 { Theme } from "@webiny/lexical-theme";
 export declare class ThemeColorValue {
-    private readonly name;
+    private readonly id;
     private value;
     constructor(value: string, name?: string);
     getValue(): string;
     getName(): string;
-    updateFromTheme(theme: EditorTheme): void;
+    updateFromTheme(theme: Theme): void;
 }
 export declare const ADD_FONT_COLOR_COMMAND: import("lexical").LexicalCommand<FontColorPayload>;
 export interface FontColorPayload {
@@ -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

@@ -1,169 +1,126 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.$applyStylesToNode = $applyStylesToNode;
-exports.ThemeColorValue = exports.FontColorNode = exports.ADD_FONT_COLOR_COMMAND = exports.$isFontColorNode = exports.$createFontColorNode = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _superPropGet2 = _interopRequireDefault(require("@babel/runtime/helpers/superPropGet"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _lexical = require("lexical");
-var ThemeColorValue = exports.ThemeColorValue = /*#__PURE__*/function () {
+import { $getSelection, $isRangeSelection, createCommand, TextNode } from "lexical";
+import { Theme } from "@webiny/lexical-theme";
+export class ThemeColorValue {
   // Webiny theme color variable, like color1, color2, etc.
 
   // This can be a HEX value or a CSS variable.
 
-  function ThemeColorValue(value, name) {
-    (0, _classCallCheck2.default)(this, ThemeColorValue);
+  constructor(value, name) {
     this.value = value;
-    this.name = name ?? "custom";
+    this.id = name ?? "custom";
   }
-  return (0, _createClass2.default)(ThemeColorValue, [{
-    key: "getValue",
-    value: function getValue() {
-      return this.value;
-    }
-  }, {
-    key: "getName",
-    value: function getName() {
-      return this.name;
-    }
-  }, {
-    key: "updateFromTheme",
-    value: function updateFromTheme(theme) {
-      if (theme?.styles?.colors && this.name !== "custom") {
-        this.value = theme.styles?.colors[this.name];
+  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;
       }
     }
-  }]);
-}();
-var ADD_FONT_COLOR_COMMAND = exports.ADD_FONT_COLOR_COMMAND = (0, _lexical.createCommand)("ADD_FONT_COLOR_COMMAND");
-var FontColorNodeAttrName = "data-theme-font-color-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.
  */
-var FontColorNode = exports.FontColorNode = /*#__PURE__*/function (_TextNode) {
-  function FontColorNode(text, color, key) {
-    var _this;
-    (0, _classCallCheck2.default)(this, FontColorNode);
-    _this = (0, _callSuper2.default)(this, FontColorNode, [text, key]);
-    _this.__color = color;
-    return _this;
+export class FontColorNode extends TextNode {
+  constructor(text, color, key) {
+    super(text, key);
+    this.__color = color;
+  }
+  static getType() {
+    return "wby-font-color";
   }
-  (0, _inherits2.default)(FontColorNode, _TextNode);
-  return (0, _createClass2.default)(FontColorNode, [{
-    key: "splitText",
-    value: function splitText() {
-      var _this2 = this;
-      for (var _len = arguments.length, splitOffsets = new Array(_len), _key = 0; _key < _len; _key++) {
-        splitOffsets[_key] = arguments[_key];
+  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;
       }
-      var newNodes = (0, _superPropGet2.default)(FontColorNode, "splitText", this, 3)(splitOffsets);
-      var selection = (0, _lexical.$getSelection)();
+      const fontColorNode = $createFontColorNode(node.getTextContent(), this.__color);
+      $applyStylesToNode(fontColorNode, this);
+      const newNode = node.replace(fontColorNode);
 
-      // After splitting, we need to re-apply styling to the new TextNodes.
-      var fontColorNodes = newNodes.map(function (node) {
-        if (node instanceof FontColorNode) {
-          return node;
+      // 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();
         }
-        var fontColorNode = $createFontColorNode(node.getTextContent(), _this2.__color);
-        $applyStylesToNode(fontColorNode, _this2);
-        var 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 ((0, _lexical.$isRangeSelection)(selection)) {
-          var anchor = selection.anchor;
-          var focus = selection.focus;
-          if (anchor.key === node.getKey()) {
-            anchor.key = newNode.getKey();
-          }
-          if (focus.key === node.getKey()) {
-            focus.key = newNode.getKey();
-          }
+        if (focus.key === node.getKey()) {
+          focus.key = newNode.getKey();
         }
-        return newNode;
-      });
-      return fontColorNodes;
-    }
-  }, {
-    key: "exportJSON",
-    value: function exportJSON() {
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _superPropGet2.default)(FontColorNode, "exportJSON", this, 3)([])), {}, {
-        themeColor: this.__color.getName(),
-        color: this.__color.getValue(),
-        type: "font-color-node",
-        version: 1
-      });
-    }
-  }, {
-    key: "addColorValueToHTMLElement",
-    value: function 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;
-    }
-  }, {
-    key: "updateDOM",
-    value: function updateDOM(prevNode, dom, config) {
-      var isUpdated = (0, _superPropGet2.default)(FontColorNode, "updateDOM", this, 3)([prevNode, dom, config]);
-      this.__color.updateFromTheme(config.theme);
-      dom.setAttribute(FontColorNodeAttrName, this.__color.getName());
-      dom.style.color = this.__color.getValue();
-      return isUpdated;
-    }
-  }, {
-    key: "getColorStyle",
-    value: function getColorStyle() {
-      return {
-        color: this.__color.getValue(),
-        themeColor: this.__color.getName()
-      };
-    }
-  }, {
-    key: "createDOM",
-    value: function createDOM(config) {
-      var element = (0, _superPropGet2.default)(FontColorNode, "createDOM", this, 3)([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.__key);
-    }
-  }, {
-    key: "importJSON",
-    value: function importJSON(serializedNode) {
-      var 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;
-    }
-  }]);
-}(_lexical.TextNode);
-var $createFontColorNode = exports.$createFontColorNode = function $createFontColorNode(text, color) {
+      }
+      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, source) {
+export function $applyStylesToNode(node, source) {
   node.setFormat(source.getFormat());
   node.setStyle(source.getStyle());
 }

package/FontColorNode.js.map

@@ -1 +1 @@
-{"version":3,"names":["_lexical","require","ThemeColorValue","exports","value","name","_classCallCheck2","default","_createClass2","key","getValue","getName","updateFromTheme","theme","styles","colors","ADD_FONT_COLOR_COMMAND","createCommand","FontColorNodeAttrName","FontColorNode","_TextNode","text","color","_this","_callSuper2","__color","_inherits2","splitText","_this2","_len","arguments","length","splitOffsets","Array","_key","newNodes","_superPropGet2","selection","$getSelection","fontColorNodes","map","node","fontColorNode","$createFontColorNode","getTextContent","$applyStylesToNode","newNode","replace","$isRangeSelection","anchor","focus","getKey","exportJSON","_objectSpread2","themeColor","type","version","addColorValueToHTMLElement","element","setAttribute","style","updateDOM","prevNode","dom","config","isUpdated","getColorStyle","createDOM","getType","clone","__text","__key","importJSON","serializedNode","setTextContent","setFormat","format","setDetail","detail","setMode","mode","setStyle","TextNode","$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","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,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 { Theme } from "@webiny/lexical-theme";
+import type { ParagraphNode } from "./ParagraphNode.js";
+import type { TypographyStylesNode, ThemeStyleValue } from "./types.js";
 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: 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 {};