@webiny/lexical-nodes 0.0.0-unstable.a9593f74dd → 0.0.0-unstable.e0bfc55d5a

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

package/HeadingNode.d.ts

@@ -1,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 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>;
-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: EditorTheme): HTMLElement;
+    private setDefaultTypography;
 }
-export declare function $createHeadingNode(tag: HeadingTagType, typographyStyleId?: string): HeadingNode;
+export declare function $createHeadingNode(tag: HeadingTagType, styleId?: string): HeadingNode;
 export declare function $isHeadingNode(node: LexicalNode | null | undefined): node is HeadingNode;
+export {};