@webiny/lexical-nodes 5.43.2-beta.0 → 6.0.0-alpha.0

package/QuoteNode.js

@@ -1,201 +1,147 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.$createQuoteNode = $createQuoteNode;
-exports.$isQuoteNode = $isQuoteNode;
-exports.QuoteNode = 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 _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _superPropGet2 = _interopRequireDefault(require("@babel/runtime/helpers/superPropGet"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _lexicalTheme = require("@webiny/lexical-theme");
-var _utils = require("@lexical/utils");
-var _richText = require("@lexical/rich-text");
-var QuoteNode = exports.QuoteNode = /*#__PURE__*/function (_BaseQuoteNode) {
-  function QuoteNode(themeStyleId, key) {
-    var _this;
-    (0, _classCallCheck2.default)(this, QuoteNode);
-    _this = (0, _callSuper2.default)(this, QuoteNode, [key]);
-    (0, _defineProperty2.default)(_this, "__styles", []);
-    _this.__themeStyleId = themeStyleId || "";
+import { findTypographyStyleByHtmlTag } from "@webiny/lexical-theme";
+import { addClassNamesToElement } from "@lexical/utils";
+import { QuoteNode as BaseQuoteNode } from "@lexical/rich-text";
+export class QuoteNode extends BaseQuoteNode {
+  __styles = [];
+  constructor(themeStyleId, key) {
+    super(key);
+    this.__themeStyleId = themeStyleId || "";
     if (themeStyleId) {
-      _this.__styles.push({
+      this.__styles.push({
         styleId: themeStyleId,
         type: "typography"
       });
     }
-    return _this;
   }
-  (0, _inherits2.default)(QuoteNode, _BaseQuoteNode);
-  return (0, _createClass2.default)(QuoteNode, [{
-    key: "getStyleId",
-    value: function getStyleId() {
-      return this.__themeStyleId;
-    }
+  getStyleId() {
+    return this.__themeStyleId;
+  }
 
-    /*
-     * Find the first occurrence of the quoteblock in the theme styles and set as default.
-     */
-  }, {
-    key: "setDefaultTypography",
-    value: function setDefaultTypography(themeEmotionMap) {
-      var typographyStyle = (0, _lexicalTheme.findTypographyStyleByHtmlTag)("quoteblock", themeEmotionMap);
-      if (typographyStyle) {
-        this.__styles.push({
-          styleId: typographyStyle.id,
-          type: "typography"
-        });
-      }
-    }
-  }, {
-    key: "typographyStyleExist",
-    value: function typographyStyleExist(themeEmotionMap) {
-      var styleId = this.getTypographyStyleId();
-      if (!styleId) {
-        return false;
-      }
-      var style = themeEmotionMap[styleId];
-      return !!style;
-    }
-  }, {
-    key: "getTypographyStyleId",
-    value: function getTypographyStyleId() {
-      var style = this.__styles.find(function (x) {
-        return x.type === "typography";
+  /*
+   * Find the first occurrence of the quoteblock in the theme styles and set as default.
+   */
+  setDefaultTypography(themeEmotionMap) {
+    const typographyStyle = findTypographyStyleByHtmlTag("quoteblock", themeEmotionMap);
+    if (typographyStyle) {
+      this.__styles.push({
+        styleId: typographyStyle.id,
+        type: "typography"
       });
-      return style?.styleId || undefined;
-    }
-  }, {
-    key: "hasTypographyStyle",
-    value: function hasTypographyStyle() {
-      return !!this.getTypographyStyleId();
     }
-  }, {
-    key: "getThemeStyles",
-    value: function getThemeStyles() {
-      var self = (0, _superPropGet2.default)(QuoteNode, "getLatest", this, 3)([]);
-      return self.__styles;
-    }
-  }, {
-    key: "setThemeStyles",
-    value: function setThemeStyles(styles) {
-      var self = (0, _superPropGet2.default)(QuoteNode, "getWritable", this, 3)([]);
-      self.__styles = (0, _toConsumableArray2.default)(styles);
-      return self;
+  }
+  typographyStyleExist(themeEmotionMap) {
+    const styleId = this.getTypographyStyleId();
+    if (!styleId) {
+      return false;
     }
-  }, {
-    key: "addThemeStylesToHTMLElement",
-    value: function addThemeStylesToHTMLElement(element, theme) {
-      var themeEmotionMap = theme?.emotionMap;
-      if (!themeEmotionMap) {
-        return element;
-      }
-
-      // style exist and is in active use
-      if (this.hasTypographyStyle() && this.typographyStyleExist(themeEmotionMap)) {
-        var styleId = this.getTypographyStyleId();
-        if (styleId) {
-          var typographyValue = themeEmotionMap[styleId];
-          (0, _utils.addClassNamesToElement)(element, typographyValue?.className);
-          return element;
-        }
-      }
+    const style = themeEmotionMap[styleId];
+    return !!style;
+  }
+  getTypographyStyleId() {
+    const style = this.__styles.find(x => x.type === "typography");
+    return style?.styleId || undefined;
+  }
+  hasTypographyStyle() {
+    return !!this.getTypographyStyleId();
+  }
+  getThemeStyles() {
+    const self = super.getLatest();
+    return self.__styles;
+  }
+  setThemeStyles(styles) {
+    const self = super.getWritable();
+    self.__styles = [...styles];
+    return self;
+  }
+  static getType() {
+    return "webiny-quote";
+  }
+  static clone(node) {
+    return new QuoteNode(node.getTypographyStyleId(), node.__key);
+  }
+  addThemeStylesToHTMLElement(element, theme) {
+    const themeEmotionMap = theme?.emotionMap;
+    if (!themeEmotionMap) {
       return element;
     }
-  }, {
-    key: "createDOM",
-    value: function createDOM(config) {
-      var element = (0, _superPropGet2.default)(QuoteNode, "createDOM", this, 3)([config]);
-      var wTheme = config.theme;
-      var emotionThemeMap = wTheme?.emotionMap;
-      if (!emotionThemeMap) {
-        return element;
-      }
 
-      // if styleId is not set or user removed the style from theme, set default style
-      if (!this.hasTypographyStyle() || !this.typographyStyleExist(emotionThemeMap)) {
-        this.setDefaultTypography(emotionThemeMap);
+    // style exist and is in active use
+    if (this.hasTypographyStyle() && this.typographyStyleExist(themeEmotionMap)) {
+      const styleId = this.getTypographyStyleId();
+      if (styleId) {
+        const typographyValue = themeEmotionMap[styleId];
+        addClassNamesToElement(element, typographyValue?.className);
+        return element;
       }
-      this.addThemeStylesToHTMLElement(element, config.theme);
-      return element;
     }
-  }, {
-    key: "exportJSON",
-    value: function exportJSON() {
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _superPropGet2.default)(QuoteNode, "exportJSON", this, 3)([])), {}, {
-        type: "webiny-quote",
-        styles: this.__styles,
-        styleId: this.getTypographyStyleId()
-      });
-    }
-  }], [{
-    key: "getType",
-    value: function getType() {
-      return "webiny-quote";
-    }
-  }, {
-    key: "clone",
-    value: function clone(node) {
-      return new QuoteNode(node.getTypographyStyleId(), node.__key);
-    }
-  }, {
-    key: "importDomConversionMap",
-    value: function importDomConversionMap() {
-      return {
-        conversion: convertBlockquoteElement,
-        priority: 0
-      };
+    return element;
+  }
+  createDOM(config) {
+    const element = super.createDOM(config);
+    const wTheme = config.theme;
+    const emotionThemeMap = wTheme?.emotionMap;
+    if (!emotionThemeMap) {
+      return element;
     }
-  }, {
-    key: "importDOM",
-    value: function importDOM() {
-      var _this2 = this;
-      return {
-        blockquote: function blockquote() {
-          return _this2.importDomConversionMap();
-        }
-      };
+
+    // if styleId is not set or user removed the style from theme, set default style
+    if (!this.hasTypographyStyle() || !this.typographyStyleExist(emotionThemeMap)) {
+      this.setDefaultTypography(emotionThemeMap);
     }
-  }, {
-    key: "importJSON",
-    value: function importJSON(serializedNode) {
-      var node = $createQuoteNode();
-      node.setFormat(serializedNode.format);
-      node.setIndent(serializedNode.indent);
-      node.setDirection(serializedNode.direction);
-      if (!!serializedNode?.styles?.length) {
-        node.setThemeStyles(serializedNode.styles);
-        return node;
-      }
-      // for old nodes data migrate the style id into the list
-      if (!!serializedNode?.styleId) {
-        var styles = [{
-          styleId: serializedNode.styleId,
-          type: "typography"
-        }];
-        node.setThemeStyles(styles);
+    this.addThemeStylesToHTMLElement(element, config.theme);
+    return element;
+  }
+  static importDomConversionMap() {
+    return {
+      conversion: convertBlockquoteElement,
+      priority: 0
+    };
+  }
+  static importDOM() {
+    return {
+      blockquote: () => {
+        return this.importDomConversionMap();
       }
+    };
+  }
+  static importJSON(serializedNode) {
+    const node = $createQuoteNode();
+    node.setFormat(serializedNode.format);
+    node.setIndent(serializedNode.indent);
+    node.setDirection(serializedNode.direction);
+    if (!!serializedNode?.styles?.length) {
+      node.setThemeStyles(serializedNode.styles);
       return node;
     }
-  }]);
-}(_richText.QuoteNode);
+    // for old nodes data migrate the style id into the list
+    if (!!serializedNode?.styleId) {
+      const styles = [{
+        styleId: serializedNode.styleId,
+        type: "typography"
+      }];
+      node.setThemeStyles(styles);
+    }
+    return node;
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: "webiny-quote",
+      styles: this.__styles,
+      styleId: this.getTypographyStyleId()
+    };
+  }
+}
 function convertBlockquoteElement() {
-  var node = $createQuoteNode();
+  const node = $createQuoteNode();
   return {
-    node: node
+    node
   };
 }
-function $createQuoteNode(themeStyleId, key) {
+export function $createQuoteNode(themeStyleId, key) {
   return new QuoteNode(themeStyleId, key);
 }
-function $isQuoteNode(node) {
+export function $isQuoteNode(node) {
   return node instanceof QuoteNode;
 }
 

package/QuoteNode.js.map

@@ -1 +1 @@
-{"version":3,"names":["_lexicalTheme","require","_utils","_richText","QuoteNode","exports","_BaseQuoteNode","themeStyleId","key","_this","_classCallCheck2","default","_callSuper2","_defineProperty2","__themeStyleId","__styles","push","styleId","type","_inherits2","_createClass2","value","getStyleId","setDefaultTypography","themeEmotionMap","typographyStyle","findTypographyStyleByHtmlTag","id","typographyStyleExist","getTypographyStyleId","style","find","x","undefined","hasTypographyStyle","getThemeStyles","self","_superPropGet2","setThemeStyles","styles","_toConsumableArray2","addThemeStylesToHTMLElement","element","theme","emotionMap","typographyValue","addClassNamesToElement","className","createDOM","config","wTheme","emotionThemeMap","exportJSON","_objectSpread2","getType","clone","node","__key","importDomConversionMap","conversion","convertBlockquoteElement","priority","importDOM","_this2","blockquote","importJSON","serializedNode","$createQuoteNode","setFormat","format","setIndent","indent","setDirection","direction","length","BaseQuoteNode","$isQuoteNode"],"sources":["QuoteNode.ts"],"sourcesContent":["import {\n    DOMConversion,\n    DOMConversionMap,\n    EditorConfig,\n    LexicalNode,\n    NodeKey,\n    Spread\n} from \"lexical\";\nimport { EditorTheme, ThemeEmotionMap, findTypographyStyleByHtmlTag } from \"@webiny/lexical-theme\";\nimport { addClassNamesToElement } from \"@lexical/utils\";\nimport {\n    QuoteNode as BaseQuoteNode,\n    SerializedQuoteNode as BaseSerializedQuoteNode\n} from \"@lexical/rich-text\";\nimport { TextNodeThemeStyles, ThemeStyleValue, TypographyStylesNode } from \"~/types\";\n\nexport type SerializedQuoteNode = Spread<\n    {\n        styleId?: string;\n        styles: ThemeStyleValue[];\n        type: \"webiny-quote\";\n    },\n    BaseSerializedQuoteNode\n>;\n\nexport class QuoteNode extends BaseQuoteNode implements TextNodeThemeStyles, TypographyStylesNode {\n    private __themeStyleId: string;\n    private __styles: ThemeStyleValue[] = [];\n\n    constructor(themeStyleId?: string, key?: NodeKey) {\n        super(key);\n        this.__themeStyleId = themeStyleId || \"\";\n\n        if (themeStyleId) {\n            this.__styles.push({ styleId: themeStyleId, type: \"typography\" });\n        }\n    }\n\n    getStyleId(): string {\n        return this.__themeStyleId;\n    }\n\n    /*\n     * Find the first occurrence of the quoteblock in the theme styles and set as default.\n     */\n    protected setDefaultTypography(themeEmotionMap: ThemeEmotionMap) {\n        const typographyStyle = findTypographyStyleByHtmlTag(\"quoteblock\", themeEmotionMap);\n        if (typographyStyle) {\n            this.__styles.push({ styleId: typographyStyle.id, type: \"typography\" });\n        }\n    }\n\n    protected typographyStyleExist(themeEmotionMap: ThemeEmotionMap): boolean {\n        const styleId = this.getTypographyStyleId();\n        if (!styleId) {\n            return false;\n        }\n        const style = themeEmotionMap[styleId];\n        return !!style;\n    }\n\n    getTypographyStyleId(): string | undefined {\n        const style = this.__styles.find(x => x.type === \"typography\");\n        return style?.styleId || undefined;\n    }\n\n    private hasTypographyStyle(): boolean {\n        return !!this.getTypographyStyleId();\n    }\n\n    getThemeStyles(): ThemeStyleValue[] {\n        const self = super.getLatest();\n        return self.__styles;\n    }\n\n    setThemeStyles(styles: ThemeStyleValue[]) {\n        const self = super.getWritable();\n        self.__styles = [...styles];\n        return self;\n    }\n\n    static override getType(): string {\n        return \"webiny-quote\";\n    }\n\n    static override clone(node: QuoteNode): QuoteNode {\n        return new QuoteNode(node.getTypographyStyleId(), node.__key);\n    }\n\n    addThemeStylesToHTMLElement(element: HTMLElement, theme: EditorTheme): HTMLElement {\n        const themeEmotionMap = theme?.emotionMap;\n\n        if (!themeEmotionMap) {\n            return element;\n        }\n\n        // style exist and is in active use\n        if (this.hasTypographyStyle() && this.typographyStyleExist(themeEmotionMap)) {\n            const styleId = this.getTypographyStyleId();\n            if (styleId) {\n                const typographyValue = themeEmotionMap[styleId];\n                addClassNamesToElement(element, typographyValue?.className);\n                return element;\n            }\n        }\n\n        return element;\n    }\n\n    override createDOM(config: EditorConfig): HTMLElement {\n        const element = super.createDOM(config);\n        const wTheme = config.theme as EditorTheme;\n        const emotionThemeMap = wTheme?.emotionMap;\n\n        if (!emotionThemeMap) {\n            return element;\n        }\n\n        // if styleId is not set or user removed the style from theme, set default style\n        if (!this.hasTypographyStyle() || !this.typographyStyleExist(emotionThemeMap)) {\n            this.setDefaultTypography(emotionThemeMap);\n        }\n\n        this.addThemeStylesToHTMLElement(element, config.theme as EditorTheme);\n        return element;\n    }\n\n    static importDomConversionMap(): DOMConversion<HTMLElement> | null {\n        return {\n            conversion: convertBlockquoteElement,\n            priority: 0\n        };\n    }\n\n    static override importDOM(): DOMConversionMap | null {\n        return {\n            blockquote: () => {\n                return this.importDomConversionMap();\n            }\n        };\n    }\n\n    static override importJSON(serializedNode: SerializedQuoteNode): QuoteNode {\n        const node = $createQuoteNode();\n        node.setFormat(serializedNode.format);\n        node.setIndent(serializedNode.indent);\n        node.setDirection(serializedNode.direction);\n        if (!!serializedNode?.styles?.length) {\n            node.setThemeStyles(serializedNode.styles);\n            return node;\n        }\n        // for old nodes data migrate the style id into the list\n        if (!!serializedNode?.styleId) {\n            const styles = [\n                { styleId: serializedNode.styleId, type: \"typography\" }\n            ] as ThemeStyleValue[];\n            node.setThemeStyles(styles);\n        }\n        return node;\n    }\n\n    override exportJSON(): SerializedQuoteNode {\n        return {\n            ...super.exportJSON(),\n            type: \"webiny-quote\",\n            styles: this.__styles,\n            styleId: this.getTypographyStyleId()\n        };\n    }\n}\n\nfunction convertBlockquoteElement() {\n    const node = $createQuoteNode();\n    return {\n        node\n    };\n}\n\nexport function $createQuoteNode(themeStyleId?: string, key?: NodeKey): QuoteNode {\n    return new QuoteNode(themeStyleId, key);\n}\n\nexport function $isQuoteNode(node: LexicalNode | null | undefined): node is QuoteNode {\n    return node instanceof QuoteNode;\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["findTypographyStyleByHtmlTag","addClassNamesToElement","QuoteNode","BaseQuoteNode","__styles","constructor","themeStyleId","key","__themeStyleId","push","styleId","type","getStyleId","setDefaultTypography","themeEmotionMap","typographyStyle","id","typographyStyleExist","getTypographyStyleId","style","find","x","undefined","hasTypographyStyle","getThemeStyles","self","getLatest","setThemeStyles","styles","getWritable","getType","clone","node","__key","addThemeStylesToHTMLElement","element","theme","emotionMap","typographyValue","className","createDOM","config","wTheme","emotionThemeMap","importDomConversionMap","conversion","convertBlockquoteElement","priority","importDOM","blockquote","importJSON","serializedNode","$createQuoteNode","setFormat","format","setIndent","indent","setDirection","direction","length","exportJSON","$isQuoteNode"],"sources":["QuoteNode.ts"],"sourcesContent":["import {\n    DOMConversion,\n    DOMConversionMap,\n    EditorConfig,\n    LexicalNode,\n    NodeKey,\n    Spread\n} from \"lexical\";\nimport { EditorTheme, ThemeEmotionMap, findTypographyStyleByHtmlTag } from \"@webiny/lexical-theme\";\nimport { addClassNamesToElement } from \"@lexical/utils\";\nimport {\n    QuoteNode as BaseQuoteNode,\n    SerializedQuoteNode as BaseSerializedQuoteNode\n} from \"@lexical/rich-text\";\nimport { TextNodeThemeStyles, ThemeStyleValue, TypographyStylesNode } from \"~/types\";\n\nexport type SerializedQuoteNode = Spread<\n    {\n        styleId?: string;\n        styles: ThemeStyleValue[];\n        type: \"webiny-quote\";\n    },\n    BaseSerializedQuoteNode\n>;\n\nexport class QuoteNode extends BaseQuoteNode implements TextNodeThemeStyles, TypographyStylesNode {\n    private __themeStyleId: string;\n    private __styles: ThemeStyleValue[] = [];\n\n    constructor(themeStyleId?: string, key?: NodeKey) {\n        super(key);\n        this.__themeStyleId = themeStyleId || \"\";\n\n        if (themeStyleId) {\n            this.__styles.push({ styleId: themeStyleId, type: \"typography\" });\n        }\n    }\n\n    getStyleId(): string {\n        return this.__themeStyleId;\n    }\n\n    /*\n     * Find the first occurrence of the quoteblock in the theme styles and set as default.\n     */\n    protected setDefaultTypography(themeEmotionMap: ThemeEmotionMap) {\n        const typographyStyle = findTypographyStyleByHtmlTag(\"quoteblock\", themeEmotionMap);\n        if (typographyStyle) {\n            this.__styles.push({ styleId: typographyStyle.id, type: \"typography\" });\n        }\n    }\n\n    protected typographyStyleExist(themeEmotionMap: ThemeEmotionMap): boolean {\n        const styleId = this.getTypographyStyleId();\n        if (!styleId) {\n            return false;\n        }\n        const style = themeEmotionMap[styleId];\n        return !!style;\n    }\n\n    getTypographyStyleId(): string | undefined {\n        const style = this.__styles.find(x => x.type === \"typography\");\n        return style?.styleId || undefined;\n    }\n\n    private hasTypographyStyle(): boolean {\n        return !!this.getTypographyStyleId();\n    }\n\n    getThemeStyles(): ThemeStyleValue[] {\n        const self = super.getLatest();\n        return self.__styles;\n    }\n\n    setThemeStyles(styles: ThemeStyleValue[]) {\n        const self = super.getWritable();\n        self.__styles = [...styles];\n        return self;\n    }\n\n    static override getType(): string {\n        return \"webiny-quote\";\n    }\n\n    static override clone(node: QuoteNode): QuoteNode {\n        return new QuoteNode(node.getTypographyStyleId(), node.__key);\n    }\n\n    addThemeStylesToHTMLElement(element: HTMLElement, theme: EditorTheme): HTMLElement {\n        const themeEmotionMap = theme?.emotionMap;\n\n        if (!themeEmotionMap) {\n            return element;\n        }\n\n        // style exist and is in active use\n        if (this.hasTypographyStyle() && this.typographyStyleExist(themeEmotionMap)) {\n            const styleId = this.getTypographyStyleId();\n            if (styleId) {\n                const typographyValue = themeEmotionMap[styleId];\n                addClassNamesToElement(element, typographyValue?.className);\n                return element;\n            }\n        }\n\n        return element;\n    }\n\n    override createDOM(config: EditorConfig): HTMLElement {\n        const element = super.createDOM(config);\n        const wTheme = config.theme as EditorTheme;\n        const emotionThemeMap = wTheme?.emotionMap;\n\n        if (!emotionThemeMap) {\n            return element;\n        }\n\n        // if styleId is not set or user removed the style from theme, set default style\n        if (!this.hasTypographyStyle() || !this.typographyStyleExist(emotionThemeMap)) {\n            this.setDefaultTypography(emotionThemeMap);\n        }\n\n        this.addThemeStylesToHTMLElement(element, config.theme as EditorTheme);\n        return element;\n    }\n\n    static importDomConversionMap(): DOMConversion<HTMLElement> | null {\n        return {\n            conversion: convertBlockquoteElement,\n            priority: 0\n        };\n    }\n\n    static override importDOM(): DOMConversionMap | null {\n        return {\n            blockquote: () => {\n                return this.importDomConversionMap();\n            }\n        };\n    }\n\n    static override importJSON(serializedNode: SerializedQuoteNode): QuoteNode {\n        const node = $createQuoteNode();\n        node.setFormat(serializedNode.format);\n        node.setIndent(serializedNode.indent);\n        node.setDirection(serializedNode.direction);\n        if (!!serializedNode?.styles?.length) {\n            node.setThemeStyles(serializedNode.styles);\n            return node;\n        }\n        // for old nodes data migrate the style id into the list\n        if (!!serializedNode?.styleId) {\n            const styles = [\n                { styleId: serializedNode.styleId, type: \"typography\" }\n            ] as ThemeStyleValue[];\n            node.setThemeStyles(styles);\n        }\n        return node;\n    }\n\n    override exportJSON(): SerializedQuoteNode {\n        return {\n            ...super.exportJSON(),\n            type: \"webiny-quote\",\n            styles: this.__styles,\n            styleId: this.getTypographyStyleId()\n        };\n    }\n}\n\nfunction convertBlockquoteElement() {\n    const node = $createQuoteNode();\n    return {\n        node\n    };\n}\n\nexport function $createQuoteNode(themeStyleId?: string, key?: NodeKey): QuoteNode {\n    return new QuoteNode(themeStyleId, key);\n}\n\nexport function $isQuoteNode(node: LexicalNode | null | undefined): node is QuoteNode {\n    return node instanceof QuoteNode;\n}\n"],"mappings":"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","ignoreList":[]}

package/TypographyNode.js

@@ -1,145 +1,108 @@
-"use strict";
+import { createCommand, ElementNode } from "lexical";
+import { addClassNamesToElement } from "@lexical/utils";
+import { $createParagraphNode } from "./ParagraphNode";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TypographyNode = exports.ADD_TYPOGRAPHY_COMMAND = exports.$isTypographyNode = 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 _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _superPropGet2 = _interopRequireDefault(require("@babel/runtime/helpers/superPropGet"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _lexical = require("lexical");
-var _utils = require("@lexical/utils");
-var _ParagraphNode = require("./ParagraphNode");
 // Command and payload
-var ADD_TYPOGRAPHY_COMMAND = exports.ADD_TYPOGRAPHY_COMMAND = (0, _lexical.createCommand)("ADD_TYPOGRAPHY_COMMAND");
-var TypographyNodeAttrName = "data-typography-style-id";
+export const ADD_TYPOGRAPHY_COMMAND = createCommand("ADD_TYPOGRAPHY_COMMAND");
+const TypographyNodeAttrName = "data-typography-style-id";
 
 // Node
+
 /**
  * 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 TypographyNode = exports.TypographyNode = /*#__PURE__*/function (_ElementNode) {
-  function TypographyNode(value, key) {
-    var _this;
-    (0, _classCallCheck2.default)(this, TypographyNode);
-    _this = (0, _callSuper2.default)(this, TypographyNode, [key]);
-    _this.__tag = value.tag;
-    _this.__styleId = value.id;
-    _this.__name = value.name;
-    _this.__css = value.css;
-    return _this;
+export class TypographyNode extends ElementNode {
+  constructor(value, key) {
+    super(key);
+    this.__tag = value.tag;
+    this.__styleId = value.id;
+    this.__name = value.name;
+    this.__css = value.css;
   }
-  (0, _inherits2.default)(TypographyNode, _ElementNode);
-  return (0, _createClass2.default)(TypographyNode, [{
-    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.emotionMap ? 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, _superPropGet2.default)(TypographyNode, "exportJSON", this, 3)([])), {}, {
-        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, _ParagraphNode.$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 TypographyNode({
-        css: node.__css,
-        id: node.__styleId,
-        name: node.__name,
-        tag: node.__tag
-      }, node.__key);
-    }
-  }, {
-    key: "importJSON",
-    value: function importJSON(serializedNode) {
-      var node = new TypographyNode({
-        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;
+  static getType() {
+    return "typography-el-node";
+  }
+  static clone(node) {
+    return new TypographyNode({
+      css: node.__css,
+      id: node.__styleId,
+      name: node.__name,
+      tag: node.__tag
+    }, node.__key);
+  }
+  getTypographyValue() {
+    return {
+      tag: this.__tag,
+      css: this.__css,
+      id: this.__styleId,
+      name: this.__name
+    };
+  }
+  addStylesHTMLElement(element, theme) {
+    const typographyStyleValue = theme.emotionMap ? theme.emotionMap[this.__styleId] : undefined;
+    if (typographyStyleValue) {
+      this.__css = typographyStyleValue.styles;
+      addClassNamesToElement(element, typographyStyleValue.className);
     }
-  }]);
-}(_lexical.ElementNode);
-var $createTypographyNode = exports.$createTypographyNode = function $createTypographyNode(value, key) {
+    element.setAttribute(TypographyNodeAttrName, this.__styleId);
+    return element;
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      tag: this.__tag,
+      typographyStyles: this.__css,
+      name: this.__name,
+      styleId: this.__styleId,
+      type: "typography-el-node",
+      version: 1
+    };
+  }
+  static importJSON(serializedNode) {
+    const node = new TypographyNode({
+      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;
+  }
+  createDOM(config) {
+    const tag = this.__tag;
+    const element = document.createElement(tag);
+    return this.addStylesHTMLElement(element, config.theme);
+  }
+  updateDOM() {
+    return false;
+  }
+  insertNewAfter() {
+    const newElement = $createTypographyNode({
+      tag: this.__tag,
+      name: this.__name,
+      css: this.__css,
+      id: this.__styleId
+    });
+    const direction = this.getDirection();
+    newElement.setDirection(direction);
+    this.insertAfter(newElement);
+    return newElement;
+  }
+  collapseAtStart() {
+    const paragraph = $createParagraphNode();
+    const children = this.getChildren();
+    children.forEach(child => paragraph.append(child));
+    this.replace(paragraph);
+    return true;
+  }
+}
+export const $createTypographyNode = (value, key) => {
   return new TypographyNode(value, key);
 };
-var $isTypographyNode = exports.$isTypographyNode = function $isTypographyNode(node) {
+export const $isTypographyNode = node => {
   return node instanceof TypographyNode;
 };