@webiny/lexical-editor 0.0.0-unstable.1145e7667f

package/index.js

@@ -0,0 +1,281 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AddRichTextEditorNodeType", {
+  enumerable: true,
+  get: function get() {
+    return _AddRichTextEditorNodeType.AddRichTextEditorNodeType;
+  }
+});
+Object.defineProperty(exports, "AddRichTextEditorPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _AddRichTextEditorPlugin.AddRichTextEditorPlugin;
+  }
+});
+Object.defineProperty(exports, "AddToolbarAction", {
+  enumerable: true,
+  get: function get() {
+    return _AddToolbarAction.AddToolbarAction;
+  }
+});
+Object.defineProperty(exports, "BlurEventPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _BlurEventPlugin.BlurEventPlugin;
+  }
+});
+Object.defineProperty(exports, "BoldAction", {
+  enumerable: true,
+  get: function get() {
+    return _BoldAction.BoldAction;
+  }
+});
+Object.defineProperty(exports, "BulletListAction", {
+  enumerable: true,
+  get: function get() {
+    return _BulletListAction.BulletListAction;
+  }
+});
+Object.defineProperty(exports, "ClickableLinkPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _ClickableLinkPlugin.ClickableLinkPlugin;
+  }
+});
+Object.defineProperty(exports, "CodeHighlightAction", {
+  enumerable: true,
+  get: function get() {
+    return _CodeHighlightAction.CodeHighlightAction;
+  }
+});
+Object.defineProperty(exports, "CodeHighlightPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _CodeHighlightPlugin.CodeHighlightPlugin;
+  }
+});
+Object.defineProperty(exports, "Divider", {
+  enumerable: true,
+  get: function get() {
+    return _Divider.Divider;
+  }
+});
+Object.defineProperty(exports, "DropDown", {
+  enumerable: true,
+  get: function get() {
+    return _DropDown.DropDown;
+  }
+});
+Object.defineProperty(exports, "DropDownItem", {
+  enumerable: true,
+  get: function get() {
+    return _DropDown.DropDownItem;
+  }
+});
+Object.defineProperty(exports, "FloatingLinkEditorPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _FloatingLinkEditorPlugin.FloatingLinkEditorPlugin;
+  }
+});
+Object.defineProperty(exports, "FontColorAction", {
+  enumerable: true,
+  get: function get() {
+    return _FontColorAction.FontColorAction;
+  }
+});
+Object.defineProperty(exports, "FontSizeAction", {
+  enumerable: true,
+  get: function get() {
+    return _FontSizeAction.FontSizeAction;
+  }
+});
+Object.defineProperty(exports, "HeadingEditor", {
+  enumerable: true,
+  get: function get() {
+    return _HeadingEditor.HeadingEditor;
+  }
+});
+Object.defineProperty(exports, "HeadingToolbar", {
+  enumerable: true,
+  get: function get() {
+    return _HeadingToolbar.HeadingToolbar;
+  }
+});
+Object.defineProperty(exports, "HeadingToolbarPreset", {
+  enumerable: true,
+  get: function get() {
+    return _HeadingToolbarPreset.HeadingToolbarPreset;
+  }
+});
+Object.defineProperty(exports, "ItalicAction", {
+  enumerable: true,
+  get: function get() {
+    return _ItalicAction.ItalicAction;
+  }
+});
+Object.defineProperty(exports, "LexicalEditorConfig", {
+  enumerable: true,
+  get: function get() {
+    return _LexicalEditorConfig.LexicalEditorConfig;
+  }
+});
+Object.defineProperty(exports, "LexicalHtmlRenderer", {
+  enumerable: true,
+  get: function get() {
+    return _LexicalHtmlRenderer.LexicalHtmlRenderer;
+  }
+});
+Object.defineProperty(exports, "LexicalUpdateStatePlugin", {
+  enumerable: true,
+  get: function get() {
+    return _LexicalUpdateStatePlugin.LexicalUpdateStatePlugin;
+  }
+});
+Object.defineProperty(exports, "LinkAction", {
+  enumerable: true,
+  get: function get() {
+    return _LinkAction.LinkAction;
+  }
+});
+Object.defineProperty(exports, "LinkPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _LexicalLinkPlugin.LinkPlugin;
+  }
+});
+Object.defineProperty(exports, "NumberedListAction", {
+  enumerable: true,
+  get: function get() {
+    return _NumberedListAction.NumberedListAction;
+  }
+});
+Object.defineProperty(exports, "ParagraphEditor", {
+  enumerable: true,
+  get: function get() {
+    return _ParagraphEditor.ParagraphEditor;
+  }
+});
+Object.defineProperty(exports, "ParagraphToolbar", {
+  enumerable: true,
+  get: function get() {
+    return _ParagraphToolbar.ParagraphToolbar;
+  }
+});
+Object.defineProperty(exports, "ParagraphToolbarPreset", {
+  enumerable: true,
+  get: function get() {
+    return _ParagraphToolbarPreset.ParagraphToolbarPreset;
+  }
+});
+Object.defineProperty(exports, "QuoteAction", {
+  enumerable: true,
+  get: function get() {
+    return _QuoteAction.QuoteAction;
+  }
+});
+Object.defineProperty(exports, "RichTextEditor", {
+  enumerable: true,
+  get: function get() {
+    return _RichTextEditor.RichTextEditor;
+  }
+});
+Object.defineProperty(exports, "Toolbar", {
+  enumerable: true,
+  get: function get() {
+    return _Toolbar.Toolbar;
+  }
+});
+Object.defineProperty(exports, "TypographyAction", {
+  enumerable: true,
+  get: function get() {
+    return _TypographyAction.TypographyAction;
+  }
+});
+Object.defineProperty(exports, "UnderlineAction", {
+  enumerable: true,
+  get: function get() {
+    return _UnderlineAction.UnderlineAction;
+  }
+});
+Object.defineProperty(exports, "clearNodeFormatting", {
+  enumerable: true,
+  get: function get() {
+    return _clearNodeFormating.clearNodeFormatting;
+  }
+});
+Object.defineProperty(exports, "generateInitialLexicalValue", {
+  enumerable: true,
+  get: function get() {
+    return _generateInitialLexicalValue.generateInitialLexicalValue;
+  }
+});
+Object.defineProperty(exports, "isValidLexicalData", {
+  enumerable: true,
+  get: function get() {
+    return _isValidLexicalData.isValidLexicalData;
+  }
+});
+exports.types = void 0;
+Object.defineProperty(exports, "useFontColorPicker", {
+  enumerable: true,
+  get: function get() {
+    return _useFontColorPicker.useFontColorPicker;
+  }
+});
+Object.defineProperty(exports, "useRichTextEditor", {
+  enumerable: true,
+  get: function get() {
+    return _useRichTextEditor.useRichTextEditor;
+  }
+});
+Object.defineProperty(exports, "useTypographyAction", {
+  enumerable: true,
+  get: function get() {
+    return _useTypographyAction.useTypographyAction;
+  }
+});
+var _LexicalHtmlRenderer = require("./components/LexicalHtmlRenderer");
+var _useRichTextEditor = require("./hooks/useRichTextEditor");
+var _useFontColorPicker = require("./hooks/useFontColorPicker");
+var _useTypographyAction = require("./hooks/useTypographyAction");
+var _Divider = require("./ui/Divider");
+var _DropDown = require("./ui/DropDown");
+var _BoldAction = require("./components/ToolbarActions/BoldAction");
+var _BulletListAction = require("./components/ToolbarActions/BulletListAction");
+var _CodeHighlightAction = require("./components/ToolbarActions/CodeHighlightAction");
+var _FontSizeAction = require("./components/ToolbarActions/FontSizeAction");
+var _FontColorAction = require("./components/ToolbarActions/FontColorAction");
+var _ItalicAction = require("./components/ToolbarActions/ItalicAction");
+var _LinkAction = require("./components/ToolbarActions/LinkAction");
+var _NumberedListAction = require("./components/ToolbarActions/NumberedListAction");
+var _QuoteAction = require("./components/ToolbarActions/QuoteAction");
+var _UnderlineAction = require("./components/ToolbarActions/UnderlineAction");
+var _TypographyAction = require("./components/ToolbarActions/TypographyAction");
+var _HeadingToolbar = require("./components/Toolbar/HeadingToolbar");
+var _ParagraphToolbar = require("./components/Toolbar/ParagraphToolbar");
+var _Toolbar = require("./components/Toolbar/Toolbar");
+var _ParagraphToolbarPreset = require("./components/ToolbarPresets/ParagraphToolbarPreset");
+var _HeadingToolbarPreset = require("./components/ToolbarPresets/HeadingToolbarPreset");
+var _RichTextEditor = require("./components/Editor/RichTextEditor");
+var _HeadingEditor = require("./components/Editor/HeadingEditor");
+var _ParagraphEditor = require("./components/Editor/ParagraphEditor");
+var _LexicalLinkPlugin = require("@lexical/react/LexicalLinkPlugin");
+var _FloatingLinkEditorPlugin = require("./plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin");
+var _CodeHighlightPlugin = require("./plugins/CodeHighlightPlugin/CodeHighlightPlugin");
+var _ClickableLinkPlugin = require("./plugins/ClickableLinkPlugin/ClickableLinkPlugin");
+var _BlurEventPlugin = require("./plugins/BlurEventPlugin/BlurEventPlugin");
+var _LexicalUpdateStatePlugin = require("./plugins/LexicalUpdateStatePlugin/LexicalUpdateStatePlugin");
+var _AddToolbarAction = require("./components/AddToolbarAction");
+var _AddRichTextEditorPlugin = require("./components/AddRichTextEditorPlugin");
+var _AddRichTextEditorNodeType = require("./components/AddRichTextEditorNodeType");
+var _generateInitialLexicalValue = require("./utils/generateInitialLexicalValue");
+var _isValidLexicalData = require("./utils/isValidLexicalData");
+var _clearNodeFormating = require("./utils/nodes/clearNodeFormating");
+var _types = _interopRequireWildcard(require("./types"));
+exports.types = _types;
+var _LexicalEditorConfig = require("./components/LexicalEditorConfig/LexicalEditorConfig");

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.tsx"],"sourcesContent":["// render\nexport { LexicalHtmlRenderer } from \"~/components/LexicalHtmlRenderer\";\n// hooks\nexport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nexport { useFontColorPicker } from \"~/hooks/useFontColorPicker\";\nexport { useTypographyAction } from \"~/hooks/useTypographyAction\";\n// UI elements\nexport { Divider } from \"~/ui/Divider\";\nexport { DropDownItem } from \"~/ui/DropDown\";\nexport { DropDown } from \"~/ui/DropDown\";\n// actions\nexport { BoldAction } from \"~/components/ToolbarActions/BoldAction\";\nexport { BulletListAction } from \"~/components/ToolbarActions/BulletListAction\";\nexport { CodeHighlightAction } from \"~/components/ToolbarActions/CodeHighlightAction\";\nexport { FontSizeAction } from \"~/components/ToolbarActions/FontSizeAction\";\nexport { FontColorAction } from \"~/components/ToolbarActions/FontColorAction\";\nexport { ItalicAction } from \"~/components/ToolbarActions/ItalicAction\";\nexport { LinkAction } from \"~/components/ToolbarActions/LinkAction\";\nexport { NumberedListAction } from \"~/components/ToolbarActions/NumberedListAction\";\nexport { QuoteAction } from \"~/components/ToolbarActions/QuoteAction\";\nexport { UnderlineAction } from \"~/components/ToolbarActions/UnderlineAction\";\nexport { TypographyAction } from \"~/components/ToolbarActions/TypographyAction\";\n// toolbars\nexport { HeadingToolbar } from \"~/components/Toolbar/HeadingToolbar\";\nexport { ParagraphToolbar } from \"~/components/Toolbar/ParagraphToolbar\";\nexport { Toolbar } from \"~/components/Toolbar/Toolbar\";\n// presets\nexport { ParagraphToolbarPreset } from \"~/components/ToolbarPresets/ParagraphToolbarPreset\";\nexport { HeadingToolbarPreset } from \"./components/ToolbarPresets/HeadingToolbarPreset\";\n// editor\nexport { RichTextEditor } from \"~/components/Editor/RichTextEditor\";\nexport { HeadingEditor } from \"~/components/Editor/HeadingEditor\";\nexport { ParagraphEditor } from \"~/components/Editor/ParagraphEditor\";\n// plugins\nexport { LinkPlugin } from \"@lexical/react/LexicalLinkPlugin\";\nexport { FloatingLinkEditorPlugin } from \"~/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin\";\nexport { CodeHighlightPlugin } from \"~/plugins/CodeHighlightPlugin/CodeHighlightPlugin\";\nexport { ClickableLinkPlugin } from \"~/plugins/ClickableLinkPlugin/ClickableLinkPlugin\";\nexport { BlurEventPlugin } from \"~/plugins/BlurEventPlugin/BlurEventPlugin\";\nexport { LexicalUpdateStatePlugin } from \"~/plugins/LexicalUpdateStatePlugin/LexicalUpdateStatePlugin\";\n// composition\nexport { AddToolbarAction } from \"~/components/AddToolbarAction\";\nexport { AddRichTextEditorPlugin } from \"~/components/AddRichTextEditorPlugin\";\nexport { AddRichTextEditorNodeType } from \"~/components/AddRichTextEditorNodeType\";\n// utils\nexport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\nexport { isValidLexicalData } from \"~/utils/isValidLexicalData\";\nexport { clearNodeFormatting } from \"~/utils/nodes/clearNodeFormating\";\n// types\nexport * as types from \"./types\";\n// config\nexport { LexicalEditorConfig } from \"~/components/LexicalEditorConfig/LexicalEditorConfig\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA;AAEA;AACA;AACA;AAEA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AAAuE;AAAA;AAIvE"}

package/nodes/FontColorNode.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+/// <reference types="web" />
+import { EditorConfig, LexicalCommand, LexicalEditor, LexicalNode, NodeKey, RangeSelection, SerializedTextNode, Spread, TextNode } from "lexical";
+import { WebinyEditorTheme } from "../themes/webinyLexicalTheme";
+export declare const ADD_FONT_COLOR_COMMAND: LexicalCommand<FontColorPayload>;
+export interface FontColorPayload {
+    color: string;
+    themeColorName: string | undefined;
+    caption?: LexicalEditor;
+    key?: NodeKey;
+}
+declare type ThemeStyleColorName = string;
+declare type ThemeColor = "custom" | ThemeStyleColorName;
+export declare type SerializedFontColorNode = Spread<{
+    themeColor: ThemeColor;
+    color: string;
+    type: "font-color-node";
+    version: 1;
+}, 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);
+    static getType(): string;
+    static clone(node: FontColorNode): FontColorNode;
+    static importJSON(serializedNode: SerializedFontColorNode): TextNode;
+    exportJSON(): SerializedFontColorNode;
+    addColorValueToHTMLElement(element: HTMLElement, theme: WebinyEditorTheme): HTMLElement;
+    updateDOM(prevNode: FontColorNode, dom: HTMLElement, config: EditorConfig): boolean;
+    getColorStyle(): {
+        color: string;
+        themeColor: ThemeColor;
+    };
+    createDOM(config: EditorConfig): HTMLElement;
+}
+export declare const $createFontColorNode: (text: string, color: string, themeColor?: ThemeColor, key?: NodeKey) => FontColorNode;
+export declare const $isFontColorNode: (node: LexicalNode) => boolean;
+export declare function $applyStylesToNode(node: FontColorNode, nodeStyleProvider: RangeSelection): void;
+export {};

package/nodes/FontColorNode.js

@@ -0,0 +1,127 @@
+"use strict";
+
+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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+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";
+/**
+ * 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);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "__themeColor", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "__color", void 0);
+    _this.__themeColor = themeColor || "custom";
+    _this.__color = color;
+    return _this;
+  }
+  (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 _theme$styles;
+      var hasThemeColor = this.__themeColor !== "custom";
+      // get the updated color from webiny theme
+      if (hasThemeColor && theme !== null && theme !== void 0 && (_theme$styles = theme.styles) !== null && _theme$styles !== void 0 && _theme$styles.colors) {
+        this.__color = theme.styles.colors[this.__themeColor];
+      }
+      element.setAttribute(FontColorNodeAttrName, this.__themeColor);
+      element.style.color = this.__color;
+      return element;
+    }
+  }, {
+    key: "updateDOM",
+    value: function updateDOM(prevNode, dom, config) {
+      var _theme$styles2;
+      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 !== null && theme !== void 0 && (_theme$styles2 = theme.styles) !== null && _theme$styles2 !== void 0 && _theme$styles2.colors) {
+        this.__color = theme.styles.colors[this.__themeColor];
+      }
+      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);
+};
+exports.$createFontColorNode = $createFontColorNode;
+var $isFontColorNode = function $isFontColorNode(node) {
+  return node instanceof FontColorNode;
+};
+exports.$isFontColorNode = $isFontColorNode;
+function $applyStylesToNode(node, nodeStyleProvider) {
+  node.setFormat(nodeStyleProvider.format);
+  node.setStyle(nodeStyleProvider.style);
+}

package/nodes/FontColorNode.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ADD_FONT_COLOR_COMMAND","createCommand","FontColorNodeAttrName","FontColorNode","text","color","themeColor","key","__themeColor","__color","type","version","element","theme","hasThemeColor","styles","colors","setAttribute","style","prevNode","dom","config","isUpdated","addColorValueToHTMLElement","node","__text","__key","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 { WebinyEditorTheme } from \"~/themes/webinyLexicalTheme\";\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: WebinyEditorTheme): 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): boolean => {\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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"}

package/nodes/TypographyElementNode.d.ts

@@ -0,0 +1,42 @@
+/// <reference types="react" />
+/// <reference types="web" />
+import { EditorConfig, ElementNode, LexicalCommand, LexicalEditor, LexicalNode, NodeKey, SerializedElementNode, Spread } from "lexical";
+import { WebinyEditorTheme } from "../themes/webinyLexicalTheme";
+import { TypographyHTMLTag, TypographyValue } from "../types";
+export declare const ADD_TYPOGRAPHY_ELEMENT_COMMAND: LexicalCommand<TypographyPayload>;
+export interface TypographyPayload {
+    value: TypographyValue;
+    caption?: LexicalEditor;
+    key?: NodeKey;
+}
+export declare type SerializedTypographyNode = Spread<{
+    tag: TypographyHTMLTag;
+    styleId: string;
+    name: string;
+    typographyStyles: Record<string, any>;
+    type: "typography-el-node";
+    version: 1;
+}, SerializedElementNode>;
+/**
+ * Main responsibility of this node is to apply custom or Webiny theme typography to selected text.
+ * Extends the original ElementNode node to add additional transformation and support for webiny theme typography.
+ */
+export declare class TypographyElementNode extends ElementNode {
+    __styleId: string;
+    __tag: TypographyHTMLTag;
+    __name: string;
+    __css: Record<string, any>;
+    constructor(value: TypographyValue, key?: NodeKey);
+    static getType(): string;
+    static clone(node: TypographyElementNode): TypographyElementNode;
+    getTypographyValue(): TypographyValue;
+    addStylesHTMLElement(element: HTMLElement, theme: WebinyEditorTheme): HTMLElement;
+    exportJSON(): SerializedTypographyNode;
+    static importJSON(serializedNode: SerializedTypographyNode): TypographyElementNode;
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(): boolean;
+    insertNewAfter(): TypographyElementNode;
+    collapseAtStart(): true;
+}
+export declare const $createTypographyNode: (value: TypographyValue, key?: NodeKey) => TypographyElementNode;
+export declare const $isTypographyElementNode: (node: ElementNode | LexicalNode | null) => boolean;

package/nodes/TypographyElementNode.js

@@ -0,0 +1,154 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TypographyElementNode = exports.ADD_TYPOGRAPHY_ELEMENT_COMMAND = exports.$isTypographyElementNode = exports.$createTypographyNode = 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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _lexical = require("lexical");
+var _utils = require("@lexical/utils");
+// Command and payload
+var ADD_TYPOGRAPHY_ELEMENT_COMMAND = (0, _lexical.createCommand)("ADD_TYPOGRAPHY_ELEMENT_COMMAND");
+exports.ADD_TYPOGRAPHY_ELEMENT_COMMAND = ADD_TYPOGRAPHY_ELEMENT_COMMAND;
+var TypographyNodeAttrName = "data-typography-style-id";
+/**
+ * Main responsibility of this node is to apply custom or Webiny theme typography to selected text.
+ * Extends the original ElementNode node to add additional transformation and support for webiny theme typography.
+ */
+var TypographyElementNode = /*#__PURE__*/function (_ElementNode) {
+  (0, _inherits2.default)(TypographyElementNode, _ElementNode);
+  var _super = (0, _createSuper2.default)(TypographyElementNode);
+  function TypographyElementNode(value, key) {
+    var _this;
+    (0, _classCallCheck2.default)(this, TypographyElementNode);
+    _this = _super.call(this, key);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "__styleId", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "__tag", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "__name", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "__css", void 0);
+    _this.__tag = value.tag;
+    _this.__styleId = value.id;
+    _this.__name = value.name;
+    _this.__css = value.css;
+    return _this;
+  }
+  (0, _createClass2.default)(TypographyElementNode, [{
+    key: "getTypographyValue",
+    value: function getTypographyValue() {
+      return {
+        tag: this.__tag,
+        css: this.__css,
+        id: this.__styleId,
+        name: this.__name
+      };
+    }
+  }, {
+    key: "addStylesHTMLElement",
+    value: function addStylesHTMLElement(element, theme) {
+      var typographyStyleValue = theme !== null && theme !== void 0 && theme.emotionMap ? theme === null || theme === void 0 ? void 0 : theme.emotionMap[this.__styleId] : undefined;
+      if (typographyStyleValue) {
+        this.__css = typographyStyleValue.styles;
+        (0, _utils.addClassNamesToElement)(element, typographyStyleValue.className);
+      }
+      element.setAttribute(TypographyNodeAttrName, this.__styleId);
+      return element;
+    }
+  }, {
+    key: "exportJSON",
+    value: function exportJSON() {
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _get2.default)((0, _getPrototypeOf2.default)(TypographyElementNode.prototype), "exportJSON", this).call(this)), {}, {
+        tag: this.__tag,
+        typographyStyles: this.__css,
+        name: this.__name,
+        styleId: this.__styleId,
+        type: "typography-el-node",
+        version: 1
+      });
+    }
+  }, {
+    key: "createDOM",
+    value: function createDOM(config) {
+      var tag = this.__tag;
+      var element = document.createElement(tag);
+      return this.addStylesHTMLElement(element, config.theme);
+    }
+  }, {
+    key: "updateDOM",
+    value: function updateDOM() {
+      return false;
+    }
+  }, {
+    key: "insertNewAfter",
+    value: function insertNewAfter() {
+      var newElement = $createTypographyNode({
+        tag: this.__tag,
+        name: this.__name,
+        css: this.__css,
+        id: this.__styleId
+      });
+      var direction = this.getDirection();
+      newElement.setDirection(direction);
+      this.insertAfter(newElement);
+      return newElement;
+    }
+  }, {
+    key: "collapseAtStart",
+    value: function collapseAtStart() {
+      var paragraph = (0, _lexical.$createParagraphNode)();
+      var children = this.getChildren();
+      children.forEach(function (child) {
+        return paragraph.append(child);
+      });
+      this.replace(paragraph);
+      return true;
+    }
+  }], [{
+    key: "getType",
+    value: function getType() {
+      return "typography-el-node";
+    }
+  }, {
+    key: "clone",
+    value: function clone(node) {
+      return new TypographyElementNode({
+        css: node.__css,
+        id: node.__styleId,
+        name: node.__name,
+        tag: node.__tag
+      }, node.__key);
+    }
+  }, {
+    key: "importJSON",
+    value: function importJSON(serializedNode) {
+      var node = new TypographyElementNode({
+        id: serializedNode.styleId,
+        css: serializedNode.typographyStyles,
+        tag: serializedNode.tag,
+        name: serializedNode.name
+      });
+      node.setFormat(serializedNode.format);
+      node.setIndent(serializedNode.indent);
+      node.setDirection(serializedNode.direction);
+      return node;
+    }
+  }]);
+  return TypographyElementNode;
+}(_lexical.ElementNode);
+exports.TypographyElementNode = TypographyElementNode;
+var $createTypographyNode = function $createTypographyNode(value, key) {
+  return new TypographyElementNode(value, key);
+};
+exports.$createTypographyNode = $createTypographyNode;
+var $isTypographyElementNode = function $isTypographyElementNode(node) {
+  return node instanceof TypographyElementNode;
+};
+exports.$isTypographyElementNode = $isTypographyElementNode;