@webiny/lexical-nodes 5.38.0-beta.0

package/ListNode.js

@@ -0,0 +1,290 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.$createListNode = $createListNode;
+exports.$isListNode = $isListNode;
+exports.ListNode = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+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 _lexicalTheme = require("@webiny/lexical-theme");
+var _utils = require("@lexical/utils");
+var _listNode = require("./utils/listNode");
+var _ListItemNode = require("./ListItemNode");
+var TypographyStyleAttrName = "data-theme-list-style-id";
+var ListNode = /*#__PURE__*/function (_ElementNode) {
+  (0, _inherits2.default)(ListNode, _ElementNode);
+  var _super = (0, _createSuper2.default)(ListNode);
+  /** @internal */
+
+  /** @internal */
+
+  /** @internal */
+
+  function ListNode(listType, themeStyleId, start, key) {
+    var _this;
+    (0, _classCallCheck2.default)(this, ListNode);
+    _this = _super.call(this, key);
+    _this.__themeStyleId = themeStyleId || "";
+    var _listType = TAG_TO_WEBINY_LIST_TYPE[listType] || listType;
+    _this.__listType = _listType;
+    _this.__tag = _listType === "number" ? "ol" : "ul";
+    _this.__start = start || 1;
+    return _this;
+  }
+  (0, _createClass2.default)(ListNode, [{
+    key: "isStyleExistInTheme",
+    value: function isStyleExistInTheme(theme) {
+      return theme !== null && theme !== void 0 && theme.emotionMap ? !!(theme !== null && theme !== void 0 && theme.emotionMap[this.__themeStyleId]) : false;
+    }
+  }, {
+    key: "createDOM",
+    value: function createDOM(config) {
+      var tag = this.__tag;
+      var dom = document.createElement(tag);
+      var wTheme = config.theme;
+      if (this.__start !== 1) {
+        dom.setAttribute("start", String(this.__start));
+      }
+
+      // If styleId is not set or user removed from theme, set default style
+      if (!this.hasThemeStyle() || !this.isStyleExistInTheme(wTheme)) {
+        this.setDefaultThemeListStyleByTag(this.__tag, wTheme);
+      }
+
+      // @ts-expect-error Internal field.
+      dom.__lexicalListType = this.__listType;
+      var theme = config.theme;
+      setListThemeClassNames(dom, theme, this, this.__themeStyleId);
+      dom.setAttribute(TypographyStyleAttrName, this.__themeStyleId);
+      return dom;
+    }
+  }, {
+    key: "getTag",
+    value: function getTag() {
+      return this.__tag;
+    }
+  }, {
+    key: "getListType",
+    value: function getListType() {
+      return this.__listType;
+    }
+  }, {
+    key: "getStart",
+    value: function getStart() {
+      return this.__start;
+    }
+  }, {
+    key: "getStyleId",
+    value: function getStyleId() {
+      return this.__themeStyleId;
+    }
+  }, {
+    key: "exportJSON",
+    value:
+    // @ts-ignore
+    function exportJSON() {
+      var _this$__themeStyleId;
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _get2.default)((0, _getPrototypeOf2.default)(ListNode.prototype), "exportJSON", this).call(this)), {}, {
+        themeStyleId: (_this$__themeStyleId = this.__themeStyleId) !== null && _this$__themeStyleId !== void 0 ? _this$__themeStyleId : "",
+        listType: this.getListType(),
+        start: this.getStart(),
+        tag: this.getTag(),
+        type: "webiny-list",
+        version: 1
+      });
+    }
+  }, {
+    key: "setDefaultThemeListStyleByTag",
+    value:
+    /*
+     * Set default styleId from first style that is found in the theme that contains current ul or ol tag
+     */
+    function setDefaultThemeListStyleByTag(tag, theme) {
+      if (!tag) {
+        return;
+      }
+      var themeEmotionMap = theme === null || theme === void 0 ? void 0 : theme.emotionMap;
+      if (!themeEmotionMap) {
+        return;
+      }
+      var style = (0, _lexicalTheme.findTypographyStyleByHtmlTag)(tag, themeEmotionMap);
+      if (style) {
+        this.__themeStyleId = style.id;
+      }
+    }
+  }, {
+    key: "hasThemeStyle",
+    value: function hasThemeStyle() {
+      return !!this.__themeStyleId;
+    }
+  }, {
+    key: "updateDOM",
+    value: function updateDOM(prevNode, dom, config) {
+      var wTheme = config.theme;
+      if (prevNode.__tag !== this.__tag) {
+        return true;
+      }
+
+      // if styleId is not set or user removed from theme, set default style.
+      if (!this.hasThemeStyle() || !this.isStyleExistInTheme(wTheme)) {
+        this.setDefaultThemeListStyleByTag(this.__tag, wTheme);
+      }
+      setListThemeClassNames(dom, config.theme, this, this.__themeStyleId);
+      dom.setAttribute(TypographyStyleAttrName, this.__themeStyleId);
+      return false;
+    }
+  }, {
+    key: "extractWithChild",
+    value: function extractWithChild(child) {
+      return (0, _ListItemNode.$isListItemNode)(child);
+    }
+  }], [{
+    key: "getType",
+    value: function getType() {
+      return "webiny-list";
+    }
+  }, {
+    key: "clone",
+    value: function clone(node) {
+      return new ListNode(node.getListType(), node.getStyleId(), node.getStart(), node.__key);
+    }
+  }, {
+    key: "importJSON",
+    value: function importJSON(serializedNode) {
+      var node = $createListNode(serializedNode.listType, serializedNode.themeStyleId, serializedNode.start);
+      node.setFormat(serializedNode.format);
+      node.setIndent(serializedNode.indent);
+      node.setDirection(serializedNode.direction);
+      return node;
+    }
+  }, {
+    key: "importDomConversionMap",
+    value: function importDomConversionMap() {
+      return {
+        conversion: convertListNode,
+        priority: 0
+      };
+    }
+  }, {
+    key: "importDOM",
+    value: function importDOM() {
+      var _this2 = this;
+      return {
+        ol: function ol() {
+          return _this2.importDomConversionMap();
+        },
+        ul: function ul() {
+          return _this2.importDomConversionMap();
+        }
+      };
+    }
+  }]);
+  return ListNode;
+}(_lexical.ElementNode);
+exports.ListNode = ListNode;
+function setListThemeClassNames(dom, editorTheme, node, themeStyleId) {
+  var editorThemeClasses = editorTheme;
+  var classesToAdd = [];
+  var classesToRemove = [];
+  var listTheme = editorThemeClasses.list;
+  var emotionMap = (editorTheme === null || editorTheme === void 0 ? void 0 : editorTheme.emotionMap) || {};
+  if (listTheme !== undefined) {
+    var _emotionMap$themeStyl, _emotionMap$themeStyl2;
+    var listLevelsClassNames = listTheme["".concat(node.__tag, "Depth")] || [];
+    var listDepth = (0, _listNode.$getListDepth)(node) - 1;
+    var normalizedListDepth = listDepth % listLevelsClassNames.length;
+    var listLevelClassName = listLevelsClassNames[normalizedListDepth];
+    var listClassName = "".concat(listTheme[node.__tag], " ").concat((_emotionMap$themeStyl = (_emotionMap$themeStyl2 = emotionMap[themeStyleId]) === null || _emotionMap$themeStyl2 === void 0 ? void 0 : _emotionMap$themeStyl2.className) !== null && _emotionMap$themeStyl !== void 0 ? _emotionMap$themeStyl : "");
+    var nestedListClassName;
+    var nestedListTheme = listTheme.nested;
+    if (nestedListTheme !== undefined && nestedListTheme.list) {
+      nestedListClassName = nestedListTheme.list;
+    }
+    if (listClassName) {
+      classesToAdd.push(listClassName);
+    }
+    if (listLevelClassName !== undefined) {
+      var listItemClasses = listLevelClassName.split(" ");
+      classesToAdd.push.apply(classesToAdd, (0, _toConsumableArray2.default)(listItemClasses));
+      for (var i = 0; i < listLevelsClassNames.length; i++) {
+        if (i !== normalizedListDepth) {
+          classesToRemove.push(node.__tag + i);
+        }
+      }
+    }
+    if (nestedListClassName !== undefined) {
+      var nestedListItemClasses = nestedListClassName.split(" ");
+      if (listDepth > 1) {
+        classesToAdd.push.apply(classesToAdd, (0, _toConsumableArray2.default)(nestedListItemClasses));
+      } else {
+        classesToRemove.push.apply(classesToRemove, (0, _toConsumableArray2.default)(nestedListItemClasses));
+      }
+    }
+  }
+  if (classesToRemove.length > 0) {
+    _utils.removeClassNamesFromElement.apply(void 0, [dom].concat(classesToRemove));
+  }
+  if (classesToAdd.length > 0) {
+    _utils.addClassNamesToElement.apply(void 0, [dom].concat(classesToAdd));
+  }
+}
+
+/*
+ * This function normalizes the children of a ListNode after the conversion from HTML,
+ * ensuring that they are all ListItemNodes and contain either a single nested ListNode
+ * or some other inline content.
+ */
+function normalizeChildren(nodes) {
+  var normalizedListItems = [];
+  for (var i = 0; i < nodes.length; i++) {
+    var node = nodes[i];
+    if ((0, _ListItemNode.$isListItemNode)(node)) {
+      normalizedListItems.push(node);
+      node.getChildren().forEach(function (child) {
+        if ($isListNode(child)) {
+          normalizedListItems.push((0, _listNode.wrapInListItem)(child));
+        }
+      });
+    } else {
+      normalizedListItems.push((0, _listNode.wrapInListItem)(node));
+    }
+  }
+  return normalizedListItems;
+}
+function convertListNode(domNode) {
+  var nodeName = domNode.nodeName.toLowerCase();
+  var node = null;
+  if (nodeName === "ol") {
+    node = $createListNode("number");
+  } else if (nodeName === "ul") {
+    node = $createListNode("bullet");
+  }
+  return {
+    // @ts-ignore
+    after: normalizeChildren,
+    node: node
+  };
+}
+var TAG_TO_WEBINY_LIST_TYPE = {
+  ol: "number",
+  ul: "bullet"
+};
+function $createListNode(listType, themeStyleId) {
+  var start = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  return new ListNode(listType, themeStyleId, start);
+}
+function $isListNode(node) {
+  return node instanceof ListNode;
+}
+
+//# sourceMappingURL=ListNode.js.map

package/ListNode.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_lexical","require","_lexicalTheme","_utils","_listNode","_ListItemNode","TypographyStyleAttrName","ListNode","_ElementNode","_inherits2","default","_super","_createSuper2","listType","themeStyleId","start","key","_this","_classCallCheck2","call","__themeStyleId","_listType","TAG_TO_WEBINY_LIST_TYPE","__listType","__tag","__start","_createClass2","value","isStyleExistInTheme","theme","emotionMap","createDOM","config","tag","dom","document","createElement","wTheme","setAttribute","String","hasThemeStyle","setDefaultThemeListStyleByTag","__lexicalListType","setListThemeClassNames","getTag","getListType","getStart","getStyleId","exportJSON","_this$__themeStyleId","_objectSpread2","_get2","_getPrototypeOf2","prototype","type","version","themeEmotionMap","style","findTypographyStyleByHtmlTag","id","updateDOM","prevNode","extractWithChild","child","$isListItemNode","getType","clone","node","__key","importJSON","serializedNode","$createListNode","setFormat","format","setIndent","indent","setDirection","direction","importDomConversionMap","conversion","convertListNode","priority","importDOM","_this2","ol","ul","ElementNode","exports","editorTheme","editorThemeClasses","classesToAdd","classesToRemove","listTheme","list","undefined","_emotionMap$themeStyl","_emotionMap$themeStyl2","listLevelsClassNames","concat","listDepth","$getListDepth","normalizedListDepth","length","listLevelClassName","listClassName","className","nestedListClassName","nestedListTheme","nested","push","listItemClasses","split","apply","_toConsumableArray2","i","nestedListItemClasses","removeClassNamesFromElement","addClassNamesToElement","normalizeChildren","nodes","normalizedListItems","getChildren","forEach","$isListNode","wrapInListItem","domNode","nodeName","toLowerCase","after","arguments"],"sources":["ListNode.ts"],"sourcesContent":["import {\n    DOMConversion,\n    DOMConversionMap,\n    DOMConversionOutput,\n    EditorConfig,\n    ElementNode,\n    LexicalNode,\n    NodeKey,\n    SerializedElementNode,\n    Spread\n} from \"lexical\";\nimport { EditorTheme, WebinyTheme, findTypographyStyleByHtmlTag } from \"@webiny/lexical-theme\";\nimport { addClassNamesToElement, removeClassNamesFromElement } from \"@lexical/utils\";\nimport { ListNodeTagType } from \"@lexical/list/LexicalListNode\";\nimport { $getListDepth, wrapInListItem } from \"~/utils/listNode\";\nimport { $isListItemNode, ListItemNode } from \"./ListItemNode\";\nimport { ListType } from \"@lexical/list\";\n\nconst TypographyStyleAttrName = \"data-theme-list-style-id\";\n\nexport type SerializedWebinyListNode = Spread<\n    {\n        themeStyleId: string;\n        listType: ListType;\n        start: number;\n        tag: ListNodeTagType;\n        type: \"webiny-list\";\n        version: 1;\n    },\n    SerializedElementNode\n>;\n\nexport class ListNode extends ElementNode {\n    /** @internal */\n    __tag: ListNodeTagType;\n    /** @internal */\n    __start: number;\n    /** @internal */\n    __listType: ListType;\n\n    __themeStyleId: string;\n\n    constructor(listType: ListType, themeStyleId?: string, start?: number, key?: NodeKey) {\n        super(key);\n        this.__themeStyleId = themeStyleId || \"\";\n        const _listType = TAG_TO_WEBINY_LIST_TYPE[listType] || listType;\n        this.__listType = _listType;\n        this.__tag = _listType === \"number\" ? \"ol\" : \"ul\";\n        this.__start = start || 1;\n    }\n\n    static override getType() {\n        return \"webiny-list\";\n    }\n\n    isStyleExistInTheme(theme: WebinyTheme): boolean {\n        return theme?.emotionMap ? !!theme?.emotionMap[this.__themeStyleId] : false;\n    }\n\n    override createDOM(config: EditorConfig): HTMLElement {\n        const tag = this.__tag;\n        const dom = document.createElement(tag);\n        const wTheme = config.theme as WebinyTheme;\n\n        if (this.__start !== 1) {\n            dom.setAttribute(\"start\", String(this.__start));\n        }\n\n        // If styleId is not set or user removed from theme, set default style\n        if (!this.hasThemeStyle() || !this.isStyleExistInTheme(wTheme)) {\n            this.setDefaultThemeListStyleByTag(this.__tag, wTheme);\n        }\n\n        // @ts-expect-error Internal field.\n        dom.__lexicalListType = this.__listType;\n        const theme = config.theme as EditorTheme;\n        setListThemeClassNames(dom, theme, this, this.__themeStyleId);\n        dom.setAttribute(TypographyStyleAttrName, this.__themeStyleId);\n        return dom;\n    }\n\n    static override clone(node: ListNode): ListNode {\n        return new ListNode(node.getListType(), node.getStyleId(), node.getStart(), node.__key);\n    }\n\n    getTag(): ListNodeTagType {\n        return this.__tag;\n    }\n\n    getListType(): ListType {\n        return this.__listType;\n    }\n\n    getStart(): number {\n        return this.__start;\n    }\n\n    getStyleId(): string {\n        return this.__themeStyleId;\n    }\n\n    static override importJSON(serializedNode: SerializedWebinyListNode): ListNode {\n        const node = $createListNode(\n            serializedNode.listType,\n            serializedNode.themeStyleId,\n            serializedNode.start\n        );\n        node.setFormat(serializedNode.format);\n        node.setIndent(serializedNode.indent);\n        node.setDirection(serializedNode.direction);\n        return node;\n    }\n\n    // @ts-ignore\n    override exportJSON(): SerializedWebinyListNode {\n        return {\n            ...super.exportJSON(),\n            themeStyleId: this.__themeStyleId ?? \"\",\n            listType: this.getListType(),\n            start: this.getStart(),\n            tag: this.getTag(),\n            type: \"webiny-list\",\n            version: 1\n        };\n    }\n\n    static importDomConversionMap(): DOMConversion<HTMLElement> | null {\n        return {\n            conversion: convertListNode,\n            priority: 0\n        };\n    }\n\n    static importDOM(): DOMConversionMap | null {\n        return {\n            ol: () => {\n                return this.importDomConversionMap();\n            },\n            ul: () => {\n                return this.importDomConversionMap();\n            }\n        };\n    }\n\n    /*\n     * Set default styleId from first style that is found in the theme that contains current ul or ol tag\n     */\n    setDefaultThemeListStyleByTag(tag: string, theme: WebinyTheme) {\n        if (!tag) {\n            return;\n        }\n\n        const themeEmotionMap = theme?.emotionMap;\n        if (!themeEmotionMap) {\n            return;\n        }\n\n        const style = findTypographyStyleByHtmlTag(tag, themeEmotionMap);\n\n        if (style) {\n            this.__themeStyleId = style.id;\n        }\n    }\n\n    hasThemeStyle(): boolean {\n        return !!this.__themeStyleId;\n    }\n\n    override updateDOM(prevNode: ListNode, dom: HTMLElement, config: EditorConfig): boolean {\n        const wTheme = config.theme as WebinyTheme;\n\n        if (prevNode.__tag !== this.__tag) {\n            return true;\n        }\n\n        // if styleId is not set or user removed from theme, set default style.\n        if (!this.hasThemeStyle() || !this.isStyleExistInTheme(wTheme)) {\n            this.setDefaultThemeListStyleByTag(this.__tag, wTheme);\n        }\n\n        setListThemeClassNames(dom, config.theme, this, this.__themeStyleId);\n        dom.setAttribute(TypographyStyleAttrName, this.__themeStyleId);\n        return false;\n    }\n\n    override extractWithChild(child: LexicalNode): boolean {\n        return $isListItemNode(child);\n    }\n}\n\nfunction setListThemeClassNames(\n    dom: HTMLElement,\n    editorTheme: EditorTheme,\n    node: ListNode,\n    themeStyleId: string\n): void {\n    const editorThemeClasses = editorTheme;\n    const classesToAdd = [];\n    const classesToRemove = [];\n    const listTheme = editorThemeClasses.list;\n    const emotionMap = editorTheme?.emotionMap || {};\n    if (listTheme !== undefined) {\n        const listLevelsClassNames = listTheme[`${node.__tag}Depth`] || [];\n        const listDepth = $getListDepth(node) - 1;\n        const normalizedListDepth = listDepth % listLevelsClassNames.length;\n        const listLevelClassName = listLevelsClassNames[normalizedListDepth];\n        const listClassName = `${listTheme[node.__tag]} ${\n            emotionMap[themeStyleId]?.className ?? \"\"\n        }`;\n        let nestedListClassName;\n        const nestedListTheme = listTheme.nested;\n\n        if (nestedListTheme !== undefined && nestedListTheme.list) {\n            nestedListClassName = nestedListTheme.list;\n        }\n\n        if (listClassName) {\n            classesToAdd.push(listClassName);\n        }\n\n        if (listLevelClassName !== undefined) {\n            const listItemClasses = listLevelClassName.split(\" \");\n            classesToAdd.push(...listItemClasses);\n            for (let i = 0; i < listLevelsClassNames.length; i++) {\n                if (i !== normalizedListDepth) {\n                    classesToRemove.push(node.__tag + i);\n                }\n            }\n        }\n\n        if (nestedListClassName !== undefined) {\n            const nestedListItemClasses = nestedListClassName.split(\" \");\n\n            if (listDepth > 1) {\n                classesToAdd.push(...nestedListItemClasses);\n            } else {\n                classesToRemove.push(...nestedListItemClasses);\n            }\n        }\n    }\n\n    if (classesToRemove.length > 0) {\n        removeClassNamesFromElement(dom, ...classesToRemove);\n    }\n\n    if (classesToAdd.length > 0) {\n        addClassNamesToElement(dom, ...classesToAdd);\n    }\n}\n\n/*\n * This function normalizes the children of a ListNode after the conversion from HTML,\n * ensuring that they are all ListItemNodes and contain either a single nested ListNode\n * or some other inline content.\n */\nfunction normalizeChildren(nodes: Array<ListNode>): Array<ListItemNode> {\n    const normalizedListItems: Array<ListItemNode> = [];\n    for (let i = 0; i < nodes.length; i++) {\n        const node = nodes[i];\n        if ($isListItemNode(node)) {\n            normalizedListItems.push(node);\n            node.getChildren().forEach(child => {\n                if ($isListNode(child)) {\n                    normalizedListItems.push(wrapInListItem(child));\n                }\n            });\n        } else {\n            normalizedListItems.push(wrapInListItem(node));\n        }\n    }\n    return normalizedListItems;\n}\n\nfunction convertListNode(domNode: Node): DOMConversionOutput {\n    const nodeName = domNode.nodeName.toLowerCase();\n    let node = null;\n\n    if (nodeName === \"ol\") {\n        node = $createListNode(\"number\");\n    } else if (nodeName === \"ul\") {\n        node = $createListNode(\"bullet\");\n    }\n\n    return {\n        // @ts-ignore\n        after: normalizeChildren,\n        node\n    };\n}\n\nconst TAG_TO_WEBINY_LIST_TYPE: Record<string, ListType> = {\n    ol: \"number\",\n    ul: \"bullet\"\n};\n\nexport function $createListNode(listType: ListType, themeStyleId?: string, start = 1): ListNode {\n    return new ListNode(listType, themeStyleId, start);\n}\n\nexport function $isListNode(node: LexicalNode | null | undefined): node is ListNode {\n    return node instanceof ListNode;\n}\n"],"mappings":"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"}

package/ParagraphNode.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+/// <reference types="web" />
+import { DOMConversionMap, LexicalNode, NodeKey, ParagraphNode as BaseParagraphNode, SerializedParagraphNode as SerializedBaseParagraphNode, Spread } from "lexical";
+import { EditorConfig } from "lexical";
+import { WebinyTheme, ThemeEmotionMap } from "@webiny/lexical-theme";
+import { TypographyStylesNode, ThemeStyleValue, TextNodeThemeStyles } from "./types";
+export declare type SerializeParagraphNode = Spread<{
+    styles: ThemeStyleValue[];
+    type: "paragraph-element";
+}, SerializedBaseParagraphNode>;
+export declare class ParagraphNode extends BaseParagraphNode implements TextNodeThemeStyles, TypographyStylesNode {
+    __styles: ThemeStyleValue[];
+    constructor(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;
+    static getType(): string;
+    static clone(node: ParagraphNode): ParagraphNode;
+    protected updateElementWithThemeClasses(element: HTMLElement, theme: WebinyTheme): HTMLElement;
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(prevNode: BaseParagraphNode, dom: HTMLElement, config: EditorConfig): boolean;
+    static importDOM(): DOMConversionMap | null;
+    static importJSON(serializedNode: SerializeParagraphNode): BaseParagraphNode;
+    exportJSON(): SerializeParagraphNode;
+}
+export declare function $createParagraphNode(typographyStyleId?: string): ParagraphNode;
+export declare function $isParagraphNode(node: LexicalNode | null | undefined): node is ParagraphNode;

package/ParagraphNode.js

@@ -0,0 +1,220 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.$createParagraphNode = $createParagraphNode;
+exports.$isParagraphNode = $isParagraphNode;
+exports.ParagraphNode = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+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 _lexicalTheme = require("@webiny/lexical-theme");
+var _utils = require("@lexical/utils");
+var ParagraphNode = /*#__PURE__*/function (_BaseParagraphNode) {
+  (0, _inherits2.default)(ParagraphNode, _BaseParagraphNode);
+  var _super = (0, _createSuper2.default)(ParagraphNode);
+  function ParagraphNode(typographyStyleId, key) {
+    var _this;
+    (0, _classCallCheck2.default)(this, ParagraphNode);
+    _this = _super.call(this, key);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "__styles", []);
+    if (typographyStyleId) {
+      _this.__styles.push({
+        styleId: typographyStyleId,
+        type: "typography"
+      });
+    }
+    return _this;
+  }
+  (0, _createClass2.default)(ParagraphNode, [{
+    key: "setDefaultTypography",
+    value: function setDefaultTypography(themeEmotionMap) {
+      var typographyStyle = (0, _lexicalTheme.findTypographyStyleByHtmlTag)("p", themeEmotionMap);
+      if (typographyStyle) {
+        this.__styles.push({
+          styleId: typographyStyle.id,
+          type: "typography"
+        });
+      }
+    }
+  }, {
+    key: "setTypography",
+    value: function setTypography(typographyStyleId) {
+      var self = (0, _get2.default)((0, _getPrototypeOf2.default)(ParagraphNode.prototype), "getWritable", this).call(this);
+      var themeStyle = {
+        styleId: typographyStyleId,
+        type: "typography"
+      };
+      self.__styles.push(themeStyle);
+      return self;
+    }
+  }, {
+    key: "getTypographyStyleId",
+    value: function getTypographyStyleId() {
+      var style = this.__styles.find(function (x) {
+        return x.type === "typography";
+      });
+      return (style === null || style === void 0 ? void 0 : style.styleId) || undefined;
+    }
+  }, {
+    key: "clearTypographyStyle",
+    value: function clearTypographyStyle() {
+      var self = (0, _get2.default)((0, _getPrototypeOf2.default)(ParagraphNode.prototype), "getWritable", this).call(this);
+      self.__styles = self.__styles.filter(function (s) {
+        return s.type !== "typography";
+      });
+      return self;
+    }
+  }, {
+    key: "hasTypographyStyle",
+    value: function hasTypographyStyle() {
+      return !!this.getTypographyStyleId();
+    }
+  }, {
+    key: "getThemeStyles",
+    value: function getThemeStyles() {
+      // getLatest() ensures we are getting the most
+      // up-to-date value from the EditorState.
+      var self = (0, _get2.default)((0, _getPrototypeOf2.default)(ParagraphNode.prototype), "getLatest", this).call(this);
+      return self.__styles;
+    }
+  }, {
+    key: "setThemeStyles",
+    value: function setThemeStyles(styles) {
+      // getWritable() creates a clone of the node
+      // if needed, to ensure we don't try and mutate
+      // a stale version of this node.
+      var self = (0, _get2.default)((0, _getPrototypeOf2.default)(ParagraphNode.prototype), "getWritable", this).call(this);
+      self.__styles = (0, _toConsumableArray2.default)(styles);
+      return self;
+    }
+  }, {
+    key: "updateElementWithThemeClasses",
+    value: function updateElementWithThemeClasses(element, theme) {
+      if (!(theme !== null && theme !== void 0 && theme.emotionMap)) {
+        return element;
+      }
+      if (!this.hasTypographyStyle()) {
+        this.setDefaultTypography(theme.emotionMap);
+      }
+      var typoStyleId = this.getTypographyStyleId();
+      var themeClasses;
+
+      // Typography css class
+      if (typoStyleId) {
+        var typographyStyle = theme.emotionMap[typoStyleId];
+        if (typographyStyle) {
+          themeClasses = typographyStyle.className;
+        }
+      }
+      if (themeClasses) {
+        (0, _utils.addClassNamesToElement)(element, themeClasses);
+      }
+      return element;
+    }
+  }, {
+    key: "createDOM",
+    value: function createDOM(config) {
+      var element = (0, _get2.default)((0, _getPrototypeOf2.default)(ParagraphNode.prototype), "createDOM", this).call(this, config);
+      return this.updateElementWithThemeClasses(element, config.theme);
+    }
+  }, {
+    key: "updateDOM",
+    value: function updateDOM(prevNode, dom, config) {
+      var prevTypoStyleId = prevNode.getTypographyStyleId();
+      var nextTypoStyleId = this.getTypographyStyleId();
+      if (!nextTypoStyleId) {
+        this.updateElementWithThemeClasses(dom, config.theme);
+        return false;
+      }
+      if (prevTypoStyleId !== nextTypoStyleId && nextTypoStyleId) {
+        this.updateElementWithThemeClasses(dom, config.theme);
+      }
+      // Returning false tells Lexical that this node does not need its
+      // DOM element replacing with a new copy from createDOM.
+      return false;
+    }
+
+    /*
+     * On copy/paste event this method will be executed in and create a node
+     * */
+  }, {
+    key: "exportJSON",
+    value:
+    /*
+     * Serialize the node to JSON data representation.
+     * */
+    function exportJSON() {
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _get2.default)((0, _getPrototypeOf2.default)(ParagraphNode.prototype), "exportJSON", this).call(this)), {}, {
+        styles: this.__styles,
+        type: "paragraph-element",
+        version: 1
+      });
+    }
+  }], [{
+    key: "getType",
+    value: function getType() {
+      return "paragraph-element";
+    }
+  }, {
+    key: "clone",
+    value: function clone(node) {
+      return new ParagraphNode(node.getTypographyStyleId(), node.__key);
+    }
+  }, {
+    key: "importDOM",
+    value: function importDOM() {
+      return {
+        p: function p() {
+          return {
+            conversion: convertParagraphElement,
+            priority: 0
+          };
+        }
+      };
+    }
+
+    /*
+     * Serialize the JSON data back into a node
+     */
+  }, {
+    key: "importJSON",
+    value: function importJSON(serializedNode) {
+      var node = $createParagraphNode();
+      node.setFormat(serializedNode.format);
+      node.setIndent(serializedNode.indent);
+      node.setDirection(serializedNode.direction);
+      node.setThemeStyles(serializedNode.styles);
+      return node;
+    }
+  }]);
+  return ParagraphNode;
+}(_lexical.ParagraphNode);
+exports.ParagraphNode = ParagraphNode;
+function convertParagraphElement(element) {
+  var node = $createParagraphNode();
+  if (element.style) {
+    node.setFormat(element.style.textAlign);
+  }
+  return {
+    node: node
+  };
+}
+function $createParagraphNode(typographyStyleId) {
+  return (0, _lexical.$applyNodeReplacement)(new ParagraphNode(typographyStyleId));
+}
+function $isParagraphNode(node) {
+  return node instanceof ParagraphNode;
+}
+
+//# sourceMappingURL=ParagraphNode.js.map

package/ParagraphNode.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_lexical","require","_lexicalTheme","_utils","ParagraphNode","_BaseParagraphNode","_inherits2","default","_super","_createSuper2","typographyStyleId","key","_this","_classCallCheck2","call","_defineProperty2","_assertThisInitialized2","__styles","push","styleId","type","_createClass2","value","setDefaultTypography","themeEmotionMap","typographyStyle","findTypographyStyleByHtmlTag","id","setTypography","self","_get2","_getPrototypeOf2","prototype","themeStyle","getTypographyStyleId","style","find","x","undefined","clearTypographyStyle","filter","s","hasTypographyStyle","getThemeStyles","setThemeStyles","styles","_toConsumableArray2","updateElementWithThemeClasses","element","theme","emotionMap","typoStyleId","themeClasses","className","addClassNamesToElement","createDOM","config","updateDOM","prevNode","dom","prevTypoStyleId","nextTypoStyleId","exportJSON","_objectSpread2","version","getType","clone","node","__key","importDOM","p","conversion","convertParagraphElement","priority","importJSON","serializedNode","$createParagraphNode","setFormat","format","setIndent","indent","setDirection","direction","BaseParagraphNode","exports","textAlign","$applyNodeReplacement","$isParagraphNode"],"sources":["ParagraphNode.ts"],"sourcesContent":["import {\n    $applyNodeReplacement,\n    DOMConversionMap,\n    DOMConversionOutput,\n    ElementFormatType,\n    LexicalNode,\n    NodeKey,\n    ParagraphNode as BaseParagraphNode,\n    SerializedParagraphNode as SerializedBaseParagraphNode,\n    Spread\n} from \"lexical\";\nimport { EditorConfig } from \"lexical\";\nimport { WebinyTheme, ThemeEmotionMap, findTypographyStyleByHtmlTag } from \"@webiny/lexical-theme\";\nimport { addClassNamesToElement } from \"@lexical/utils\";\nimport { TypographyStylesNode, ThemeStyleValue, TextNodeThemeStyles } from \"~/types\";\n\nexport type SerializeParagraphNode = Spread<\n    {\n        styles: ThemeStyleValue[];\n        type: \"paragraph-element\";\n    },\n    SerializedBaseParagraphNode\n>;\n\nexport class ParagraphNode\n    extends BaseParagraphNode\n    implements TextNodeThemeStyles, TypographyStylesNode\n{\n    __styles: ThemeStyleValue[] = [];\n\n    constructor(typographyStyleId?: string, key?: NodeKey) {\n        super(key);\n\n        if (typographyStyleId) {\n            this.__styles.push({ styleId: typographyStyleId, type: \"typography\" });\n        }\n    }\n\n    protected setDefaultTypography(themeEmotionMap: ThemeEmotionMap) {\n        const typographyStyle = findTypographyStyleByHtmlTag(\"p\", themeEmotionMap);\n        if (typographyStyle) {\n            this.__styles.push({ styleId: typographyStyle.id, type: \"typography\" });\n        }\n    }\n\n    setTypography(typographyStyleId: string): this {\n        const self = super.getWritable();\n        const themeStyle = {\n            styleId: typographyStyleId,\n            type: \"typography\"\n        } as ThemeStyleValue;\n        self.__styles.push(themeStyle);\n        return self;\n    }\n\n    getTypographyStyleId(): string | undefined {\n        const style = this.__styles.find(x => x.type === \"typography\");\n        return style?.styleId || undefined;\n    }\n\n    clearTypographyStyle(): this {\n        const self = super.getWritable();\n        self.__styles = self.__styles.filter(s => s.type !== \"typography\");\n        return self;\n    }\n\n    hasTypographyStyle(): boolean {\n        return !!this.getTypographyStyleId();\n    }\n\n    getThemeStyles(): ThemeStyleValue[] {\n        // getLatest() ensures we are getting the most\n        // up-to-date value from the EditorState.\n        const self = super.getLatest();\n        return self.__styles;\n    }\n\n    setThemeStyles(styles: ThemeStyleValue[]) {\n        // getWritable() creates a clone of the node\n        // if needed, to ensure we don't try and mutate\n        // a stale version of this node.\n        const self = super.getWritable();\n        self.__styles = [...styles];\n        return self;\n    }\n\n    static override getType(): string {\n        return \"paragraph-element\";\n    }\n\n    static override clone(node: ParagraphNode): ParagraphNode {\n        return new ParagraphNode(node.getTypographyStyleId(), node.__key);\n    }\n\n    protected updateElementWithThemeClasses(element: HTMLElement, theme: WebinyTheme): HTMLElement {\n        if (!theme?.emotionMap) {\n            return element;\n        }\n\n        if (!this.hasTypographyStyle()) {\n            this.setDefaultTypography(theme.emotionMap);\n        }\n\n        const typoStyleId = this.getTypographyStyleId();\n\n        let themeClasses;\n\n        // Typography css class\n        if (typoStyleId) {\n            const typographyStyle = theme.emotionMap[typoStyleId];\n            if (typographyStyle) {\n                themeClasses = typographyStyle.className;\n            }\n        }\n\n        if (themeClasses) {\n            addClassNamesToElement(element, themeClasses);\n        }\n\n        return element;\n    }\n\n    override createDOM(config: EditorConfig): HTMLElement {\n        const element = super.createDOM(config);\n        return this.updateElementWithThemeClasses(element, config.theme as WebinyTheme);\n    }\n\n    override updateDOM(\n        prevNode: BaseParagraphNode,\n        dom: HTMLElement,\n        config: EditorConfig\n    ): boolean {\n        const prevTypoStyleId = prevNode.getTypographyStyleId();\n        const nextTypoStyleId = this.getTypographyStyleId();\n\n        if (!nextTypoStyleId) {\n            this.updateElementWithThemeClasses(dom, config.theme as WebinyTheme);\n            return false;\n        }\n\n        if (prevTypoStyleId !== nextTypoStyleId && nextTypoStyleId) {\n            this.updateElementWithThemeClasses(dom, config.theme as WebinyTheme);\n        }\n        // Returning false tells Lexical that this node does not need its\n        // DOM element replacing with a new copy from createDOM.\n        return false;\n    }\n\n    /*\n     * On copy/paste event this method will be executed in and create a node\n     * */\n    static override importDOM(): DOMConversionMap | null {\n        return {\n            p: () => ({\n                conversion: convertParagraphElement,\n                priority: 0\n            })\n        };\n    }\n\n    /*\n     * Serialize the JSON data back into a node\n     */\n    static override importJSON(serializedNode: SerializeParagraphNode): BaseParagraphNode {\n        const node = $createParagraphNode();\n        node.setFormat(serializedNode.format);\n        node.setIndent(serializedNode.indent);\n        node.setDirection(serializedNode.direction);\n        node.setThemeStyles(serializedNode.styles);\n        return node;\n    }\n\n    /*\n     * Serialize the node to JSON data representation.\n     * */\n    override exportJSON(): SerializeParagraphNode {\n        return {\n            ...super.exportJSON(),\n            styles: this.__styles,\n            type: \"paragraph-element\",\n            version: 1\n        };\n    }\n}\n\nfunction convertParagraphElement(element: HTMLElement): DOMConversionOutput {\n    const node = $createParagraphNode();\n    if (element.style) {\n        node.setFormat(element.style.textAlign as ElementFormatType);\n    }\n\n    return { node };\n}\n\nexport function $createParagraphNode(typographyStyleId?: string): ParagraphNode {\n    return $applyNodeReplacement(new ParagraphNode(typographyStyleId));\n}\n\nexport function $isParagraphNode(node: LexicalNode | null | undefined): node is ParagraphNode {\n    return node instanceof ParagraphNode;\n}\n"],"mappings":"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"}

package/QuoteNode.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+/// <reference types="web" />
+import { DOMConversion, DOMConversionMap, EditorConfig, LexicalNode, NodeKey, Spread } from "lexical";
+import { EditorTheme, ThemeEmotionMap } from "@webiny/lexical-theme";
+import { QuoteNode as BaseQuoteNode, SerializedQuoteNode as BaseSerializedQuoteNode } from "@lexical/rich-text";
+import { TextNodeThemeStyles, ThemeStyleValue, TypographyStylesNode } from "./types";
+export declare type SerializedQuoteNode = Spread<{
+    styleId?: string;
+    styles: ThemeStyleValue[];
+    type: "webiny-quote";
+}, BaseSerializedQuoteNode>;
+export declare class QuoteNode extends BaseQuoteNode implements TextNodeThemeStyles, TypographyStylesNode {
+    __styles: ThemeStyleValue[];
+    constructor(themeStyleId?: string, key?: NodeKey);
+    protected setDefaultTypography(themeEmotionMap: ThemeEmotionMap): void;
+    protected typographyStyleExist(themeEmotionMap: ThemeEmotionMap): boolean;
+    setTypography(typographyStyleId: string): this;
+    getTypographyStyleId(): string | undefined;
+    clearTypographyStyle(): this;
+    hasTypographyStyle(): boolean;
+    getThemeStyles(): ThemeStyleValue[];
+    setThemeStyles(styles: ThemeStyleValue[]): this;
+    static getType(): string;
+    static clone(node: QuoteNode): QuoteNode;
+    addThemeStylesToHTMLElement(element: HTMLElement, theme: EditorTheme): HTMLElement;
+    createDOM(config: EditorConfig): HTMLElement;
+    static importDomConversionMap(): DOMConversion<HTMLElement> | null;
+    static importDOM(): DOMConversionMap | null;
+    static importJSON(serializedNode: SerializedQuoteNode): QuoteNode;
+    exportJSON(): SerializedQuoteNode;
+}
+export declare function $createQuoteNode(themeStyleId?: string, key?: NodeKey): QuoteNode;
+export declare function $isQuoteNode(node: LexicalNode | null | undefined): node is QuoteNode;