@webiny/lexical-nodes 5.38.0-beta.0

package/QuoteNode.js

@@ -0,0 +1,227 @@
+"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 _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 _lexicalTheme = require("@webiny/lexical-theme");
+var _utils = require("@lexical/utils");
+var _richText = require("@lexical/rich-text");
+var QuoteNode = /*#__PURE__*/function (_BaseQuoteNode) {
+  (0, _inherits2.default)(QuoteNode, _BaseQuoteNode);
+  var _super = (0, _createSuper2.default)(QuoteNode);
+  function QuoteNode(themeStyleId, key) {
+    var _this;
+    (0, _classCallCheck2.default)(this, QuoteNode);
+    _this = _super.call(this, key);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "__styles", []);
+    if (themeStyleId) {
+      _this.__styles.push({
+        styleId: themeStyleId,
+        type: "typography"
+      });
+    }
+    return _this;
+  }
+
+  /*
+   * Find the first occurrence of the quoteblock in the theme styles and set as default.
+   */
+  (0, _createClass2.default)(QuoteNode, [{
+    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: "setTypography",
+    value: function setTypography(typographyStyleId) {
+      var self = (0, _get2.default)((0, _getPrototypeOf2.default)(QuoteNode.prototype), "getWritable", this).call(this);
+      if (!typographyStyleId) {
+        return self;
+      }
+      if (!this.hasTypographyStyle()) {
+        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)(QuoteNode.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() {
+      var self = (0, _get2.default)((0, _getPrototypeOf2.default)(QuoteNode.prototype), "getLatest", this).call(this);
+      return self.__styles;
+    }
+  }, {
+    key: "setThemeStyles",
+    value: function setThemeStyles(styles) {
+      var self = (0, _get2.default)((0, _getPrototypeOf2.default)(QuoteNode.prototype), "getWritable", this).call(this);
+      self.__styles = (0, _toConsumableArray2.default)(styles);
+      return self;
+    }
+  }, {
+    key: "addThemeStylesToHTMLElement",
+    value: function addThemeStylesToHTMLElement(element, theme) {
+      var themeEmotionMap = theme === null || theme === void 0 ? void 0 : 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 === null || typographyValue === void 0 ? void 0 : typographyValue.className);
+          return element;
+        }
+      }
+      return element;
+    }
+  }, {
+    key: "createDOM",
+    value: function createDOM(config) {
+      var element = (0, _get2.default)((0, _getPrototypeOf2.default)(QuoteNode.prototype), "createDOM", this).call(this, config);
+      var wTheme = config.theme;
+      var emotionThemeMap = wTheme === null || wTheme === void 0 ? void 0 : 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);
+      }
+      this.addThemeStylesToHTMLElement(element, config.theme);
+      return element;
+    }
+  }, {
+    key: "exportJSON",
+    value: function exportJSON() {
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _get2.default)((0, _getPrototypeOf2.default)(QuoteNode.prototype), "exportJSON", this).call(this)), {}, {
+        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
+      };
+    }
+  }, {
+    key: "importDOM",
+    value: function importDOM() {
+      var _this2 = this;
+      return {
+        blockquote: function blockquote() {
+          return _this2.importDomConversionMap();
+        }
+      };
+    }
+  }, {
+    key: "importJSON",
+    value: function importJSON(serializedNode) {
+      var _serializedNode$style;
+      var node = $createQuoteNode();
+      node.setFormat(serializedNode.format);
+      node.setIndent(serializedNode.indent);
+      node.setDirection(serializedNode.direction);
+      if (!!(serializedNode !== null && serializedNode !== void 0 && (_serializedNode$style = serializedNode.styles) !== null && _serializedNode$style !== void 0 && _serializedNode$style.length)) {
+        node.setThemeStyles(serializedNode.styles);
+        return node;
+      }
+      // for old nodes data migrate the style id into the list
+      if (!!(serializedNode !== null && serializedNode !== void 0 && serializedNode.styleId)) {
+        var styles = [{
+          styleId: serializedNode.styleId,
+          type: "typography"
+        }];
+        node.setThemeStyles(styles);
+      }
+      return node;
+    }
+  }]);
+  return QuoteNode;
+}(_richText.QuoteNode);
+exports.QuoteNode = QuoteNode;
+function convertBlockquoteElement() {
+  var node = $createQuoteNode();
+  return {
+    node: node
+  };
+}
+function $createQuoteNode(themeStyleId, key) {
+  return new QuoteNode(themeStyleId, key);
+}
+function $isQuoteNode(node) {
+  return node instanceof QuoteNode;
+}
+
+//# sourceMappingURL=QuoteNode.js.map

package/QuoteNode.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_lexicalTheme","require","_utils","_richText","QuoteNode","_BaseQuoteNode","_inherits2","default","_super","_createSuper2","themeStyleId","key","_this","_classCallCheck2","call","_defineProperty2","_assertThisInitialized2","__styles","push","styleId","type","_createClass2","value","setDefaultTypography","themeEmotionMap","typographyStyle","findTypographyStyleByHtmlTag","id","typographyStyleExist","getTypographyStyleId","style","setTypography","typographyStyleId","self","_get2","_getPrototypeOf2","prototype","hasTypographyStyle","themeStyle","find","x","undefined","clearTypographyStyle","filter","s","getThemeStyles","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","_serializedNode$style","$createQuoteNode","setFormat","format","setIndent","indent","setDirection","direction","length","BaseQuoteNode","exports","$isQuoteNode"],"sources":["QuoteNode.ts"],"sourcesContent":["import {\n    DOMConversion,\n    DOMConversionMap,\n    EditorConfig,\n    LexicalNode,\n    NodeKey,\n    Spread\n} from \"lexical\";\nimport {\n    EditorTheme,\n    ThemeEmotionMap,\n    WebinyTheme,\n    findTypographyStyleByHtmlTag\n} 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    __styles: ThemeStyleValue[] = [];\n\n    constructor(themeStyleId?: string, key?: NodeKey) {\n        super(key);\n        if (themeStyleId) {\n            this.__styles.push({ styleId: themeStyleId, type: \"typography\" });\n        }\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    setTypography(typographyStyleId: string): this {\n        const self = super.getWritable();\n        if (!typographyStyleId) {\n            return self;\n        }\n\n        if (!this.hasTypographyStyle()) {\n            const themeStyle = {\n                styleId: typographyStyleId,\n                type: \"typography\"\n            } as ThemeStyleValue;\n            self.__styles.push(themeStyle);\n        }\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        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 WebinyTheme;\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);\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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"}

package/README.md

@@ -0,0 +1,6 @@
+# @webiny/lexical-nodes
+
+[![](https://img.shields.io/npm/dw/@webiny/lexical-nodes.svg)](https://www.npmjs.com/package/@webiny/llexical-lexical-nodes)
+[![](https://img.shields.io/npm/v/@webiny/lexical-nodes.svg)](https://www.npmjs.com/package/@webiny/lexical-nodes)
+[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

package/TypographyNode.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+/// <reference types="web" />
+import { EditorConfig, ElementNode, LexicalCommand, LexicalEditor, LexicalNode, NodeKey, SerializedElementNode, Spread } from "lexical";
+import { EditorTheme, TypographyHTMLTag, TypographyValue } from "@webiny/lexical-theme";
+export declare const ADD_TYPOGRAPHY_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 TypographyNode extends ElementNode {
+    __styleId: string;
+    __tag: TypographyHTMLTag;
+    __name: string;
+    __css: Record<string, any>;
+    constructor(value: TypographyValue, key?: NodeKey);
+    static getType(): string;
+    static clone(node: TypographyNode): TypographyNode;
+    getTypographyValue(): TypographyValue;
+    addStylesHTMLElement(element: HTMLElement, theme: EditorTheme): HTMLElement;
+    exportJSON(): SerializedTypographyNode;
+    static importJSON(serializedNode: SerializedTypographyNode): TypographyNode;
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(): boolean;
+    insertNewAfter(): TypographyNode;
+    collapseAtStart(): true;
+}
+export declare const $createTypographyNode: (value: TypographyValue, key?: NodeKey) => TypographyNode;
+export declare const $isTypographyNode: (node: ElementNode | LexicalNode | null) => node is TypographyNode;

package/TypographyNode.js

@@ -0,0 +1,153 @@
+"use strict";
+
+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 _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 _utils = require("@lexical/utils");
+var _ParagraphNode = require("./ParagraphNode");
+// Command and payload
+var ADD_TYPOGRAPHY_COMMAND = (0, _lexical.createCommand)("ADD_TYPOGRAPHY_COMMAND");
+exports.ADD_TYPOGRAPHY_COMMAND = ADD_TYPOGRAPHY_COMMAND;
+var 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 = /*#__PURE__*/function (_ElementNode) {
+  (0, _inherits2.default)(TypographyNode, _ElementNode);
+  var _super = (0, _createSuper2.default)(TypographyNode);
+  function TypographyNode(value, key) {
+    var _this;
+    (0, _classCallCheck2.default)(this, TypographyNode);
+    _this = _super.call(this, key);
+    _this.__tag = value.tag;
+    _this.__styleId = value.id;
+    _this.__name = value.name;
+    _this.__css = value.css;
+    return _this;
+  }
+  (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 !== 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)(TypographyNode.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, _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;
+    }
+  }]);
+  return TypographyNode;
+}(_lexical.ElementNode);
+exports.TypographyNode = TypographyNode;
+var $createTypographyNode = function $createTypographyNode(value, key) {
+  return new TypographyNode(value, key);
+};
+exports.$createTypographyNode = $createTypographyNode;
+var $isTypographyNode = function $isTypographyNode(node) {
+  return node instanceof TypographyNode;
+};
+exports.$isTypographyNode = $isTypographyNode;
+
+//# sourceMappingURL=TypographyNode.js.map

package/TypographyNode.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_lexical","require","_utils","_ParagraphNode","ADD_TYPOGRAPHY_COMMAND","createCommand","exports","TypographyNodeAttrName","TypographyNode","_ElementNode","_inherits2","default","_super","_createSuper2","value","key","_this","_classCallCheck2","call","__tag","tag","__styleId","id","__name","name","__css","css","_createClass2","getTypographyValue","addStylesHTMLElement","element","theme","typographyStyleValue","emotionMap","undefined","styles","addClassNamesToElement","className","setAttribute","exportJSON","_objectSpread2","_get2","_getPrototypeOf2","prototype","typographyStyles","styleId","type","version","createDOM","config","document","createElement","updateDOM","insertNewAfter","newElement","$createTypographyNode","direction","getDirection","setDirection","insertAfter","collapseAtStart","paragraph","$createParagraphNode","children","getChildren","forEach","child","append","replace","getType","clone","node","__key","importJSON","serializedNode","setFormat","format","setIndent","indent","ElementNode","$isTypographyNode"],"sources":["TypographyNode.ts"],"sourcesContent":["import {\n    createCommand,\n    EditorConfig,\n    ElementNode,\n    LexicalCommand,\n    LexicalEditor,\n    LexicalNode,\n    NodeKey,\n    SerializedElementNode,\n    Spread\n} from \"lexical\";\nimport { addClassNamesToElement } from \"@lexical/utils\";\nimport { EditorTheme, TypographyHTMLTag, TypographyValue } from \"@webiny/lexical-theme\";\nimport { $createParagraphNode } from \"~/ParagraphNode\";\n\n// Command and payload\nexport const ADD_TYPOGRAPHY_COMMAND: LexicalCommand<TypographyPayload> =\n    createCommand(\"ADD_TYPOGRAPHY_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 TypographyNode 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: TypographyNode): TypographyNode {\n        return new TypographyNode(\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: EditorTheme): 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): TypographyNode {\n        const node = new TypographyNode({\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(): TypographyNode {\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 = (value: TypographyValue, key?: NodeKey): TypographyNode => {\n    return new TypographyNode(value, key);\n};\n\nexport const $isTypographyNode = (\n    node: ElementNode | LexicalNode | null\n): node is TypographyNode => {\n    return node instanceof TypographyNode;\n};\n"],"mappings":"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"}

package/components/ImageNode/ContentEditable.css

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+.ContentEditable__root {
+    border: 0;
+    font-size: 15px;
+    display: block;
+    position: relative;
+    outline: 0;
+    padding: 8px 28px 40px;
+}
+@media (max-width: 1025px) {
+    .ContentEditable__root {
+        padding-left: 8px;
+        padding-right: 8px;
+    }
+}

package/components/ImageNode/ContentEditable.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import "./ContentEditable.css";
+export declare function LexicalContentEditable({ className }: {
+    className?: string;
+}): JSX.Element;

package/components/ImageNode/ContentEditable.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LexicalContentEditable = LexicalContentEditable;
+require("./ContentEditable.css");
+var _LexicalContentEditable = require("@lexical/react/LexicalContentEditable");
+var React = _interopRequireWildcard(require("react"));
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+function LexicalContentEditable(_ref) {
+  var className = _ref.className;
+  return /*#__PURE__*/React.createElement(_LexicalContentEditable.ContentEditable, {
+    className: className || "ContentEditable__root"
+  });
+}
+
+//# sourceMappingURL=ContentEditable.js.map

package/components/ImageNode/ContentEditable.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["require","_LexicalContentEditable","React","_interopRequireWildcard","LexicalContentEditable","_ref","className","createElement","ContentEditable"],"sources":["ContentEditable.tsx"],"sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\nimport \"./ContentEditable.css\";\n\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport * as React from \"react\";\n\nexport function LexicalContentEditable({ className }: { className?: string }): JSX.Element {\n    return <ContentEditable className={className || \"ContentEditable__root\"} />;\n}\n"],"mappings":";;;;;;;AAOAA,OAAA;AAEA,IAAAC,uBAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAC,uBAAA,CAAAH,OAAA;AAVA;AACA;AACA;AACA;AACA;AACA;AACA;;AAMO,SAASI,sBAAsBA,CAAAC,IAAA,EAAqD;EAAA,IAAlDC,SAAS,GAAAD,IAAA,CAATC,SAAS;EAC9C,oBAAOJ,KAAA,CAAAK,aAAA,CAACN,uBAAA,CAAAO,eAAe;IAACF,SAAS,EAAEA,SAAS,IAAI;EAAwB,CAAE,CAAC;AAC/E"}

package/components/ImageNode/ImageComponent.css

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+.ImageNode__contentEditable {
+    min-height: 20px;
+    border: 0px;
+    resize: none;
+    cursor: text;
+    caret-color: rgb(5, 5, 5);
+    display: block;
+    position: relative;
+    outline: 0px;
+    padding: 10px;
+    user-select: text;
+    font-size: 12px;
+    width: calc(100% - 20px);
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+.ImageNode__placeholder {
+    font-size: 12px;
+    color: #888;
+    overflow: hidden;
+    position: absolute;
+    text-overflow: ellipsis;
+    top: 10px;
+    left: 10px;
+    user-select: none;
+    white-space: nowrap;
+    display: inline-block;
+    pointer-events: none;
+}
+
+.image-control-wrapper--resizing {
+    touch-action: none;
+}

package/components/ImageNode/ImageComponent.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type { LexicalEditor, NodeKey } from "lexical";
+import "./ImageComponent.css";
+export default function ImageComponent({ id, src, altText, nodeKey, width, height, maxWidth, resizable, showCaption, caption, captionsEnabled }: {
+    id: string;
+    altText: string;
+    caption: LexicalEditor;
+    height: "inherit" | number;
+    maxWidth: number;
+    nodeKey: NodeKey;
+    resizable: boolean;
+    showCaption: boolean;
+    src: string;
+    width: "inherit" | number;
+    captionsEnabled: boolean;
+}): JSX.Element;