@webiny/lexical-editor 0.0.0-unstable.ecd8734205 → 5.35.0-beta.0

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;

package/nodes/TypographyElementNode.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ADD_TYPOGRAPHY_ELEMENT_COMMAND","createCommand","TypographyNodeAttrName","TypographyElementNode","value","key","__tag","tag","__styleId","id","__name","name","__css","css","element","theme","typographyStyleValue","emotionMap","undefined","styles","addClassNamesToElement","className","setAttribute","typographyStyles","styleId","type","version","config","document","createElement","addStylesHTMLElement","newElement","$createTypographyNode","direction","getDirection","setDirection","insertAfter","paragraph","$createParagraphNode","children","getChildren","forEach","child","append","replace","node","__key","serializedNode","setFormat","format","setIndent","indent","ElementNode","$isTypographyElementNode"],"sources":["TypographyElementNode.ts"],"sourcesContent":["import {\n    $createParagraphNode,\n    createCommand,\n    EditorConfig,\n    ElementNode,\n    LexicalCommand,\n    LexicalEditor,\n    LexicalNode,\n    NodeKey,\n    SerializedElementNode,\n    Spread\n} from \"lexical\";\nimport { WebinyEditorTheme } from \"~/themes/webinyLexicalTheme\";\nimport { TypographyHTMLTag, TypographyValue } from \"~/types\";\nimport { addClassNamesToElement } from \"@lexical/utils\";\n\n// Command and payload\nexport const ADD_TYPOGRAPHY_ELEMENT_COMMAND: LexicalCommand<TypographyPayload> = createCommand(\n    \"ADD_TYPOGRAPHY_ELEMENT_COMMAND\"\n);\nconst TypographyNodeAttrName = \"data-typography-style-id\";\n\nexport interface TypographyPayload {\n    value: TypographyValue;\n    caption?: LexicalEditor;\n    key?: NodeKey;\n}\n\n// Node\nexport type SerializedTypographyNode = Spread<\n    {\n        tag: TypographyHTMLTag;\n        styleId: string;\n        name: string;\n        typographyStyles: Record<string, any>;\n        type: \"typography-el-node\";\n        version: 1;\n    },\n    SerializedElementNode\n>;\n\n/**\n * Main responsibility of this node is to apply custom or Webiny theme typography to selected text.\n * Extends the original ElementNode node to add additional transformation and support for webiny theme typography.\n */\nexport class TypographyElementNode extends ElementNode {\n    __styleId: string;\n    __tag: TypographyHTMLTag;\n    __name: string;\n    __css: Record<string, any>;\n\n    constructor(value: TypographyValue, key?: NodeKey) {\n        super(key);\n        this.__tag = value.tag;\n        this.__styleId = value.id;\n        this.__name = value.name;\n        this.__css = value.css;\n    }\n\n    static override getType(): string {\n        return \"typography-el-node\";\n    }\n\n    static override clone(node: TypographyElementNode): TypographyElementNode {\n        return new TypographyElementNode(\n            {\n                css: node.__css,\n                id: node.__styleId,\n                name: node.__name,\n                tag: node.__tag\n            },\n            node.__key\n        );\n    }\n    getTypographyValue(): TypographyValue {\n        return {\n            tag: this.__tag,\n            css: this.__css,\n            id: this.__styleId,\n            name: this.__name\n        };\n    }\n\n    addStylesHTMLElement(element: HTMLElement, theme: WebinyEditorTheme): HTMLElement {\n        const typographyStyleValue = theme?.emotionMap\n            ? theme?.emotionMap[this.__styleId]\n            : undefined;\n        if (typographyStyleValue) {\n            this.__css = typographyStyleValue.styles;\n            addClassNamesToElement(element, typographyStyleValue.className);\n        }\n        element.setAttribute(TypographyNodeAttrName, this.__styleId);\n\n        return element;\n    }\n\n    override exportJSON(): SerializedTypographyNode {\n        return {\n            ...super.exportJSON(),\n            tag: this.__tag,\n            typographyStyles: this.__css,\n            name: this.__name,\n            styleId: this.__styleId,\n            type: \"typography-el-node\",\n            version: 1\n        };\n    }\n\n    static override importJSON(serializedNode: SerializedTypographyNode): TypographyElementNode {\n        const node = new TypographyElementNode({\n            id: serializedNode.styleId,\n            css: serializedNode.typographyStyles,\n            tag: serializedNode.tag,\n            name: serializedNode.name\n        });\n        node.setFormat(serializedNode.format);\n        node.setIndent(serializedNode.indent);\n        node.setDirection(serializedNode.direction);\n        return node;\n    }\n\n    override createDOM(config: EditorConfig): HTMLElement {\n        const tag = this.__tag;\n        const element = document.createElement(tag);\n        return this.addStylesHTMLElement(element, config.theme);\n    }\n\n    override updateDOM(): boolean {\n        return false;\n    }\n\n    override insertNewAfter(): TypographyElementNode {\n        const newElement = $createTypographyNode({\n            tag: this.__tag,\n            name: this.__name,\n            css: this.__css,\n            id: this.__styleId\n        });\n        const direction = this.getDirection();\n        newElement.setDirection(direction);\n        this.insertAfter(newElement);\n        return newElement;\n    }\n\n    override collapseAtStart(): true {\n        const paragraph = $createParagraphNode();\n        const children = this.getChildren();\n        children.forEach(child => paragraph.append(child));\n        this.replace(paragraph);\n        return true;\n    }\n}\n\nexport const $createTypographyNode = (\n    value: TypographyValue,\n    key?: NodeKey\n): TypographyElementNode => {\n    return new TypographyElementNode(value, key);\n};\n\nexport const $isTypographyElementNode = (node: ElementNode | LexicalNode | null): boolean => {\n    return node instanceof TypographyElementNode;\n};\n"],"mappings":"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"}

package/nodes/WebinyQuoteNode.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+/// <reference types="web" />
+import { DOMConversionMap, EditorConfig, ElementNode, LexicalNode, NodeKey, ParagraphNode, SerializedElementNode, Spread } from "lexical";
+import { WebinyEditorTheme } from "../themes/webinyLexicalTheme";
+import { QuoteBlockHtmlTag, WebinyThemeNode } from "../types";
+export declare type SerializedWebinyQuoteNode = Spread<{
+    tag: QuoteBlockHtmlTag;
+    styleId: string;
+    type: "webiny-quote";
+    version: 1;
+}, SerializedElementNode>;
+export declare class WebinyQuoteNode extends ElementNode implements WebinyThemeNode {
+    __themeStyleId: string;
+    constructor(themeStyleId?: string, key?: NodeKey);
+    getStyleId: () => string;
+    static getType(): string;
+    getTag(): QuoteBlockHtmlTag;
+    static clone(node: WebinyQuoteNode): WebinyQuoteNode;
+    addThemeStylesToHTMLElement(element: HTMLElement, theme: WebinyEditorTheme): HTMLElement;
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(): boolean;
+    static importDOM(): DOMConversionMap | null;
+    static importJSON(serializedNode: SerializedWebinyQuoteNode): WebinyQuoteNode;
+    exportJSON(): SerializedWebinyQuoteNode;
+    insertNewAfter(): ParagraphNode;
+    collapseAtStart(): true;
+}
+export declare function $createWebinyQuoteNode(themeStyleId?: string, key?: NodeKey): WebinyQuoteNode;
+export declare function $isWebinyQuoteNode(node: LexicalNode | null | undefined): node is WebinyQuoteNode;

package/nodes/WebinyQuoteNode.js

@@ -0,0 +1,148 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.$createWebinyQuoteNode = $createWebinyQuoteNode;
+exports.$isWebinyQuoteNode = $isWebinyQuoteNode;
+exports.WebinyQuoteNode = 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 _styleObjectToString = require("../utils/styleObjectToString");
+var _utils = require("@lexical/utils");
+function convertBlockquoteElement() {
+  var node = $createWebinyQuoteNode();
+  return {
+    node: node
+  };
+}
+var QuoteNodeAttrName = "data-quote-style-id";
+var WebinyQuoteNode = /*#__PURE__*/function (_ElementNode) {
+  (0, _inherits2.default)(WebinyQuoteNode, _ElementNode);
+  var _super = (0, _createSuper2.default)(WebinyQuoteNode);
+  function WebinyQuoteNode(themeStyleId, key) {
+    var _this;
+    (0, _classCallCheck2.default)(this, WebinyQuoteNode);
+    _this = _super.call(this, key);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "__themeStyleId", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getStyleId", function () {
+      return _this.__themeStyleId;
+    });
+    _this.__themeStyleId = themeStyleId || "";
+    return _this;
+  }
+  (0, _createClass2.default)(WebinyQuoteNode, [{
+    key: "getTag",
+    value: function getTag() {
+      return "quoteblock";
+    }
+  }, {
+    key: "addThemeStylesToHTMLElement",
+    value: function addThemeStylesToHTMLElement(element, theme) {
+      var styles = {};
+      var typographyValue = theme !== null && theme !== void 0 && theme.emotionMap ? theme.emotionMap[this.__themeStyleId] : undefined;
+      if (this.__themeStyleId && typographyValue) {
+        styles = typographyValue.styles;
+        (0, _utils.addClassNamesToElement)(element, typographyValue === null || typographyValue === void 0 ? void 0 : typographyValue.className);
+      }
+      element.setAttribute(QuoteNodeAttrName, this.__themeStyleId || "");
+      element.style.cssText = (0, _styleObjectToString.styleObjectToString)(styles);
+      return element;
+    }
+
+    // View
+  }, {
+    key: "createDOM",
+    value: function createDOM(config) {
+      var element = document.createElement("blockquote");
+      (0, _utils.addClassNamesToElement)(element, config.theme.quote);
+      this.addThemeStylesToHTMLElement(element, config.theme);
+      return element;
+    }
+  }, {
+    key: "updateDOM",
+    value: function updateDOM() {
+      return false;
+    }
+  }, {
+    key: "exportJSON",
+    value: function exportJSON() {
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _get2.default)((0, _getPrototypeOf2.default)(WebinyQuoteNode.prototype), "exportJSON", this).call(this)), {}, {
+        tag: "quoteblock",
+        type: "webiny-quote",
+        styleId: this.__themeStyleId,
+        version: 1
+      });
+    }
+
+    // Mutation
+  }, {
+    key: "insertNewAfter",
+    value: function insertNewAfter() {
+      var newBlock = (0, _lexical.$createParagraphNode)();
+      var direction = this.getDirection();
+      newBlock.setDirection(direction);
+      this.insertAfter(newBlock);
+      return newBlock;
+    }
+  }, {
+    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 "webiny-quote";
+    }
+  }, {
+    key: "clone",
+    value: function clone(node) {
+      return new WebinyQuoteNode(node.__themeStyleId, node.__key);
+    }
+  }, {
+    key: "importDOM",
+    value: function importDOM() {
+      return {
+        blockquote: function blockquote() {
+          return {
+            conversion: convertBlockquoteElement,
+            priority: 0
+          };
+        }
+      };
+    }
+  }, {
+    key: "importJSON",
+    value: function importJSON(serializedNode) {
+      var node = $createWebinyQuoteNode(serializedNode.styleId);
+      node.setFormat(serializedNode.format);
+      node.setIndent(serializedNode.indent);
+      node.setDirection(serializedNode.direction);
+      return node;
+    }
+  }]);
+  return WebinyQuoteNode;
+}(_lexical.ElementNode);
+exports.WebinyQuoteNode = WebinyQuoteNode;
+function $createWebinyQuoteNode(themeStyleId, key) {
+  return new WebinyQuoteNode(themeStyleId, key);
+}
+function $isWebinyQuoteNode(node) {
+  return node instanceof WebinyQuoteNode;
+}

package/nodes/WebinyQuoteNode.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["convertBlockquoteElement","node","$createWebinyQuoteNode","QuoteNodeAttrName","WebinyQuoteNode","themeStyleId","key","__themeStyleId","element","theme","styles","typographyValue","emotionMap","undefined","addClassNamesToElement","className","setAttribute","style","cssText","styleObjectToString","config","document","createElement","quote","addThemeStylesToHTMLElement","tag","type","styleId","version","newBlock","$createParagraphNode","direction","getDirection","setDirection","insertAfter","paragraph","children","getChildren","forEach","child","append","replace","__key","blockquote","conversion","priority","serializedNode","setFormat","format","setIndent","indent","ElementNode","$isWebinyQuoteNode"],"sources":["WebinyQuoteNode.ts"],"sourcesContent":["import {\n    $createParagraphNode,\n    DOMConversionMap,\n    EditorConfig,\n    ElementNode,\n    LexicalNode,\n    NodeKey,\n    ParagraphNode,\n    SerializedElementNode,\n    Spread\n} from \"lexical\";\nimport { WebinyEditorTheme } from \"~/themes/webinyLexicalTheme\";\nimport { styleObjectToString } from \"~/utils/styleObjectToString\";\nimport { QuoteBlockHtmlTag, WebinyThemeNode } from \"~/types\";\nimport { addClassNamesToElement } from \"@lexical/utils\";\nimport { CSSObject } from \"@emotion/react\";\n\nfunction convertBlockquoteElement() {\n    const node = $createWebinyQuoteNode();\n    return {\n        node\n    };\n}\n\nconst QuoteNodeAttrName = \"data-quote-style-id\";\n\nexport type SerializedWebinyQuoteNode = Spread<\n    {\n        tag: QuoteBlockHtmlTag;\n        styleId: string;\n        type: \"webiny-quote\";\n        version: 1;\n    },\n    SerializedElementNode\n>;\n\nexport class WebinyQuoteNode extends ElementNode implements WebinyThemeNode {\n    __themeStyleId: string;\n\n    constructor(themeStyleId?: string, key?: NodeKey) {\n        super(key);\n        this.__themeStyleId = themeStyleId || \"\";\n    }\n\n    getStyleId = (): string => {\n        return this.__themeStyleId;\n    };\n\n    static override getType(): string {\n        return \"webiny-quote\";\n    }\n\n    getTag(): QuoteBlockHtmlTag {\n        return \"quoteblock\";\n    }\n\n    static override clone(node: WebinyQuoteNode): WebinyQuoteNode {\n        return new WebinyQuoteNode(node.__themeStyleId, node.__key);\n    }\n\n    addThemeStylesToHTMLElement(element: HTMLElement, theme: WebinyEditorTheme): HTMLElement {\n        let styles: CSSObject = {};\n        const typographyValue = theme?.emotionMap\n            ? theme.emotionMap[this.__themeStyleId]\n            : undefined;\n        if (this.__themeStyleId && typographyValue) {\n            styles = typographyValue.styles;\n            addClassNamesToElement(element, typographyValue?.className);\n        }\n\n        element.setAttribute(QuoteNodeAttrName, this.__themeStyleId || \"\");\n        element.style.cssText = styleObjectToString(styles);\n        return element;\n    }\n\n    // View\n    override createDOM(config: EditorConfig): HTMLElement {\n        const element = document.createElement(\"blockquote\");\n        addClassNamesToElement(element, config.theme.quote);\n        this.addThemeStylesToHTMLElement(element, config.theme);\n        return element;\n    }\n    override updateDOM(): boolean {\n        return false;\n    }\n\n    static importDOM(): DOMConversionMap | null {\n        return {\n            blockquote: () => ({\n                conversion: convertBlockquoteElement,\n                priority: 0\n            })\n        };\n    }\n\n    static override importJSON(serializedNode: SerializedWebinyQuoteNode): WebinyQuoteNode {\n        const node = $createWebinyQuoteNode(serializedNode.styleId);\n        node.setFormat(serializedNode.format);\n        node.setIndent(serializedNode.indent);\n        node.setDirection(serializedNode.direction);\n        return node;\n    }\n\n    override exportJSON(): SerializedWebinyQuoteNode {\n        return {\n            ...super.exportJSON(),\n            tag: \"quoteblock\",\n            type: \"webiny-quote\",\n            styleId: this.__themeStyleId,\n            version: 1\n        };\n    }\n\n    // Mutation\n\n    override insertNewAfter(): ParagraphNode {\n        const newBlock = $createParagraphNode();\n        const direction = this.getDirection();\n        newBlock.setDirection(direction);\n        this.insertAfter(newBlock);\n        return newBlock;\n    }\n\n    override collapseAtStart(): true {\n        const paragraph = $createParagraphNode();\n        const children = this.getChildren();\n        children.forEach(child => paragraph.append(child));\n        this.replace(paragraph);\n        return true;\n    }\n}\n\nexport function $createWebinyQuoteNode(themeStyleId?: string, key?: NodeKey): WebinyQuoteNode {\n    return new WebinyQuoteNode(themeStyleId, key);\n}\n\nexport function $isWebinyQuoteNode(node: LexicalNode | null | undefined): node is WebinyQuoteNode {\n    return node instanceof WebinyQuoteNode;\n}\n"],"mappings":"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"}

package/nodes/list-node/WebinyListItemNode.d.ts

@@ -0,0 +1,46 @@
+/// <reference types="react" />
+/// <reference types="web" />
+import { DOMConversionMap, EditorConfig, ElementNode, GridSelection, LexicalNode, NodeKey, NodeSelection, ParagraphNode, RangeSelection, SerializedElementNode } from "lexical";
+import { Spread } from "lexical";
+export declare type SerializedWebinyListItemNode = Spread<{
+    checked: boolean | undefined;
+    type: "webiny-listitem";
+    value: number;
+    version: 1;
+}, SerializedElementNode>;
+/** @noInheritDoc */
+export declare class WebinyListItemNode extends ElementNode {
+    /** @internal */
+    __value: number;
+    /** @internal */
+    __checked?: boolean;
+    static getType(): string;
+    static clone(node: WebinyListItemNode): WebinyListItemNode;
+    constructor(value?: number, checked?: boolean, key?: NodeKey);
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(prevNode: WebinyListItemNode, dom: HTMLElement, config: EditorConfig): boolean;
+    static importDOM(): DOMConversionMap | null;
+    static importJSON(serializedNode: SerializedWebinyListItemNode): WebinyListItemNode;
+    exportJSON(): SerializedWebinyListItemNode;
+    append(...nodes: LexicalNode[]): this;
+    replace<N extends LexicalNode>(replaceWithNode: N): N;
+    insertAfter(node: LexicalNode): LexicalNode;
+    remove(preserveEmptyParent?: boolean): void;
+    insertNewAfter(): WebinyListItemNode | ParagraphNode;
+    collapseAtStart(selection: RangeSelection): true;
+    getValue(): number;
+    setValue(value: number): void;
+    getChecked(): boolean | undefined;
+    setChecked(checked?: boolean): void;
+    toggleChecked(): void;
+    getIndent(): number;
+    setIndent(indent: number): this;
+    canIndent(): false;
+    insertBefore(nodeToInsert: LexicalNode): LexicalNode;
+    canInsertAfter(node: LexicalNode): boolean;
+    canReplaceWith(replacement: LexicalNode): boolean;
+    canMergeWith(node: LexicalNode): boolean;
+    extractWithChild(child: LexicalNode, selection: RangeSelection | NodeSelection | GridSelection): boolean;
+}
+export declare function $createWebinyListItemNode(checked?: boolean): WebinyListItemNode;
+export declare function $isWebinyListItemNode(node: LexicalNode | null | undefined): node is WebinyListItemNode;