@webiny/lexical-editor 0.0.0-unstable.13771d80a8

package/index.js

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

package/index.js.map

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

package/nodes/FontColorNode.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+/// <reference types="web" />
+import { EditorConfig, LexicalCommand, LexicalEditor, LexicalNode, NodeKey, RangeSelection, SerializedTextNode, Spread, TextNode } from "lexical";
+import { WebinyEditorTheme } from "../themes/webinyLexicalTheme";
+export declare const ADD_FONT_COLOR_COMMAND: LexicalCommand<FontColorPayload>;
+export interface FontColorPayload {
+    color: string;
+    themeColorName: string | undefined;
+    caption?: LexicalEditor;
+    key?: NodeKey;
+}
+declare type ThemeStyleColorName = string;
+declare type ThemeColor = "custom" | ThemeStyleColorName;
+export declare type SerializedFontColorNode = Spread<{
+    themeColor: ThemeColor;
+    color: string;
+    type: "font-color-node";
+    version: 1;
+}, SerializedTextNode>;
+/**
+ * Main responsibility of this node is to apply custom or Webiny theme color to selected text.
+ * Extends the original TextNode node to add additional transformation and support for webiny theme font color.
+ */
+export declare class FontColorNode extends TextNode {
+    __themeColor: ThemeColor;
+    __color: string;
+    constructor(text: string, color: string, themeColor?: ThemeColor, key?: NodeKey);
+    static getType(): string;
+    static clone(node: FontColorNode): FontColorNode;
+    static importJSON(serializedNode: SerializedFontColorNode): TextNode;
+    exportJSON(): SerializedFontColorNode;
+    addColorValueToHTMLElement(element: HTMLElement, theme: WebinyEditorTheme): HTMLElement;
+    updateDOM(prevNode: FontColorNode, dom: HTMLElement, config: EditorConfig): boolean;
+    getColorStyle(): {
+        color: string;
+        themeColor: ThemeColor;
+    };
+    createDOM(config: EditorConfig): HTMLElement;
+}
+export declare const $createFontColorNode: (text: string, color: string, themeColor?: ThemeColor, key?: NodeKey) => FontColorNode;
+export declare const $isFontColorNode: (node: LexicalNode) => boolean;
+export declare function $applyStylesToNode(node: FontColorNode, nodeStyleProvider: RangeSelection): void;
+export {};

package/nodes/FontColorNode.js

@@ -0,0 +1,127 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.$applyStylesToNode = $applyStylesToNode;
+exports.FontColorNode = exports.ADD_FONT_COLOR_COMMAND = exports.$isFontColorNode = exports.$createFontColorNode = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _lexical = require("lexical");
+var ADD_FONT_COLOR_COMMAND = (0, _lexical.createCommand)("ADD_FONT_COLOR_COMMAND");
+exports.ADD_FONT_COLOR_COMMAND = ADD_FONT_COLOR_COMMAND;
+var FontColorNodeAttrName = "font-color-theme";
+/**
+ * Main responsibility of this node is to apply custom or Webiny theme color to selected text.
+ * Extends the original TextNode node to add additional transformation and support for webiny theme font color.
+ */
+var FontColorNode = /*#__PURE__*/function (_TextNode) {
+  (0, _inherits2.default)(FontColorNode, _TextNode);
+  var _super = (0, _createSuper2.default)(FontColorNode);
+  function FontColorNode(text, color, themeColor, key) {
+    var _this;
+    (0, _classCallCheck2.default)(this, FontColorNode);
+    _this = _super.call(this, text, key);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "__themeColor", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "__color", void 0);
+    _this.__themeColor = themeColor || "custom";
+    _this.__color = color;
+    return _this;
+  }
+  (0, _createClass2.default)(FontColorNode, [{
+    key: "exportJSON",
+    value: function exportJSON() {
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _get2.default)((0, _getPrototypeOf2.default)(FontColorNode.prototype), "exportJSON", this).call(this)), {}, {
+        themeColor: this.__themeColor,
+        color: this.__color,
+        type: "font-color-node",
+        version: 1
+      });
+    }
+  }, {
+    key: "addColorValueToHTMLElement",
+    value: function addColorValueToHTMLElement(element, theme) {
+      var _theme$styles;
+      var hasThemeColor = this.__themeColor !== "custom";
+      // get the updated color from webiny theme
+      if (hasThemeColor && theme !== null && theme !== void 0 && (_theme$styles = theme.styles) !== null && _theme$styles !== void 0 && _theme$styles.colors) {
+        this.__color = theme.styles.colors[this.__themeColor];
+      }
+      element.setAttribute(FontColorNodeAttrName, this.__themeColor);
+      element.style.color = this.__color;
+      return element;
+    }
+  }, {
+    key: "updateDOM",
+    value: function updateDOM(prevNode, dom, config) {
+      var _theme$styles2;
+      var theme = config.theme;
+      var isUpdated = (0, _get2.default)((0, _getPrototypeOf2.default)(FontColorNode.prototype), "updateDOM", this).call(this, prevNode, dom, config);
+      var hasThemeColor = this.__themeColor !== "custom";
+      // get the updated color from webiny theme
+      if (hasThemeColor && theme !== null && theme !== void 0 && (_theme$styles2 = theme.styles) !== null && _theme$styles2 !== void 0 && _theme$styles2.colors) {
+        this.__color = theme.styles.colors[this.__themeColor];
+      }
+      dom.setAttribute(FontColorNodeAttrName, this.__themeColor);
+      dom.style.color = this.__color;
+      return isUpdated;
+    }
+  }, {
+    key: "getColorStyle",
+    value: function getColorStyle() {
+      return {
+        color: this.__color,
+        themeColor: this.__themeColor
+      };
+    }
+  }, {
+    key: "createDOM",
+    value: function createDOM(config) {
+      var element = (0, _get2.default)((0, _getPrototypeOf2.default)(FontColorNode.prototype), "createDOM", this).call(this, config);
+      return this.addColorValueToHTMLElement(element, config.theme);
+    }
+  }], [{
+    key: "getType",
+    value: function getType() {
+      return "font-color-node";
+    }
+  }, {
+    key: "clone",
+    value: function clone(node) {
+      return new FontColorNode(node.__text, node.__color, node.__themeColor, node.__key);
+    }
+  }, {
+    key: "importJSON",
+    value: function importJSON(serializedNode) {
+      var node = new FontColorNode(serializedNode.text, serializedNode.color, serializedNode.themeColor);
+      node.setTextContent(serializedNode.text);
+      node.setFormat(serializedNode.format);
+      node.setDetail(serializedNode.detail);
+      node.setMode(serializedNode.mode);
+      node.setStyle(serializedNode.style);
+      return node;
+    }
+  }]);
+  return FontColorNode;
+}(_lexical.TextNode);
+exports.FontColorNode = FontColorNode;
+var $createFontColorNode = function $createFontColorNode(text, color, themeColor, key) {
+  return new FontColorNode(text, color, themeColor, key);
+};
+exports.$createFontColorNode = $createFontColorNode;
+var $isFontColorNode = function $isFontColorNode(node) {
+  return node instanceof FontColorNode;
+};
+exports.$isFontColorNode = $isFontColorNode;
+function $applyStylesToNode(node, nodeStyleProvider) {
+  node.setFormat(nodeStyleProvider.format);
+  node.setStyle(nodeStyleProvider.style);
+}

package/nodes/FontColorNode.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ADD_FONT_COLOR_COMMAND","createCommand","FontColorNodeAttrName","FontColorNode","text","color","themeColor","key","__themeColor","__color","type","version","element","theme","hasThemeColor","styles","colors","setAttribute","style","prevNode","dom","config","isUpdated","addColorValueToHTMLElement","node","__text","__key","serializedNode","setTextContent","setFormat","format","setDetail","detail","setMode","mode","setStyle","TextNode","$createFontColorNode","$isFontColorNode","$applyStylesToNode","nodeStyleProvider"],"sources":["FontColorNode.ts"],"sourcesContent":["import {\n    createCommand,\n    EditorConfig,\n    LexicalCommand,\n    LexicalEditor,\n    LexicalNode,\n    NodeKey,\n    RangeSelection,\n    SerializedTextNode,\n    Spread,\n    TextNode\n} from \"lexical\";\nimport { WebinyEditorTheme } from \"~/themes/webinyLexicalTheme\";\n\nexport const ADD_FONT_COLOR_COMMAND: LexicalCommand<FontColorPayload> =\n    createCommand(\"ADD_FONT_COLOR_COMMAND\");\nconst FontColorNodeAttrName = \"font-color-theme\";\n\nexport interface FontColorPayload {\n    // This color can be hex string\n    color: string;\n    // webiny theme color variable like color1, color2...\n    themeColorName: string | undefined;\n    caption?: LexicalEditor;\n    key?: NodeKey;\n}\n\ntype ThemeStyleColorName = string;\ntype ThemeColor = \"custom\" | ThemeStyleColorName;\n\nexport type SerializedFontColorNode = Spread<\n    {\n        themeColor: ThemeColor;\n        color: string;\n        type: \"font-color-node\";\n        version: 1;\n    },\n    SerializedTextNode\n>;\n\n/**\n * Main responsibility of this node is to apply custom or Webiny theme color to selected text.\n * Extends the original TextNode node to add additional transformation and support for webiny theme font color.\n */\nexport class FontColorNode extends TextNode {\n    __themeColor: ThemeColor;\n    __color: string;\n\n    constructor(text: string, color: string, themeColor?: ThemeColor, key?: NodeKey) {\n        super(text, key);\n        this.__themeColor = themeColor || \"custom\";\n        this.__color = color;\n    }\n\n    static override getType(): string {\n        return \"font-color-node\";\n    }\n\n    static override clone(node: FontColorNode): FontColorNode {\n        return new FontColorNode(node.__text, node.__color, node.__themeColor, node.__key);\n    }\n\n    static override importJSON(serializedNode: SerializedFontColorNode): TextNode {\n        const node = new FontColorNode(\n            serializedNode.text,\n            serializedNode.color,\n            serializedNode.themeColor\n        );\n        node.setTextContent(serializedNode.text);\n        node.setFormat(serializedNode.format);\n        node.setDetail(serializedNode.detail);\n        node.setMode(serializedNode.mode);\n        node.setStyle(serializedNode.style);\n        return node;\n    }\n\n    override exportJSON(): SerializedFontColorNode {\n        return {\n            ...super.exportJSON(),\n            themeColor: this.__themeColor,\n            color: this.__color,\n            type: \"font-color-node\",\n            version: 1\n        };\n    }\n\n    addColorValueToHTMLElement(element: HTMLElement, theme: WebinyEditorTheme): HTMLElement {\n        const hasThemeColor = this.__themeColor !== \"custom\";\n        // get the updated color from webiny theme\n        if (hasThemeColor && theme?.styles?.colors) {\n            this.__color = theme.styles.colors[this.__themeColor];\n        }\n\n        element.setAttribute(FontColorNodeAttrName, this.__themeColor);\n        element.style.color = this.__color;\n        return element;\n    }\n\n    override updateDOM(prevNode: FontColorNode, dom: HTMLElement, config: EditorConfig): boolean {\n        const theme = config.theme;\n        const isUpdated = super.updateDOM(prevNode, dom, config);\n        const hasThemeColor = this.__themeColor !== \"custom\";\n        // get the updated color from webiny theme\n        if (hasThemeColor && theme?.styles?.colors) {\n            this.__color = theme.styles.colors[this.__themeColor];\n        }\n\n        dom.setAttribute(FontColorNodeAttrName, this.__themeColor);\n        dom.style.color = this.__color;\n        return isUpdated;\n    }\n\n    getColorStyle(): { color: string; themeColor: ThemeColor } {\n        return {\n            color: this.__color,\n            themeColor: this.__themeColor\n        };\n    }\n\n    override createDOM(config: EditorConfig): HTMLElement {\n        const element = super.createDOM(config);\n        return this.addColorValueToHTMLElement(element, config.theme);\n    }\n}\n\nexport const $createFontColorNode = (\n    text: string,\n    color: string,\n    themeColor?: ThemeColor,\n    key?: NodeKey\n): FontColorNode => {\n    return new FontColorNode(text, color, themeColor, key);\n};\n\nexport const $isFontColorNode = (node: LexicalNode): boolean => {\n    return node instanceof FontColorNode;\n};\n\nexport function $applyStylesToNode(node: FontColorNode, nodeStyleProvider: RangeSelection) {\n    node.setFormat(nodeStyleProvider.format);\n    node.setStyle(nodeStyleProvider.style);\n}\n"],"mappings":"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"}

package/nodes/webinyNodes.d.ts

@@ -0,0 +1,2 @@
+import type { Klass, LexicalNode } from "lexical";
+export declare const WebinyNodes: Array<Klass<LexicalNode>>;

package/nodes/webinyNodes.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WebinyNodes = void 0;
+var _code = require("@lexical/code");
+var _hashtag = require("@lexical/hashtag");
+var _link = require("@lexical/link");
+var _list = require("@lexical/list");
+var _mark = require("@lexical/mark");
+var _overflow = require("@lexical/overflow");
+var _richText = require("@lexical/rich-text");
+var _FontColorNode = require("./FontColorNode");
+var WebinyNodes = [_richText.HeadingNode, _list.ListNode, _list.ListItemNode, _richText.QuoteNode, _code.CodeNode, _hashtag.HashtagNode, _code.CodeHighlightNode, _link.AutoLinkNode, _link.LinkNode, _overflow.OverflowNode, _mark.MarkNode, _FontColorNode.FontColorNode];
+exports.WebinyNodes = WebinyNodes;

package/nodes/webinyNodes.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["WebinyNodes","HeadingNode","ListNode","ListItemNode","QuoteNode","CodeNode","HashtagNode","CodeHighlightNode","AutoLinkNode","LinkNode","OverflowNode","MarkNode","FontColorNode"],"sources":["webinyNodes.ts"],"sourcesContent":["import type { Klass, LexicalNode } from \"lexical\";\n\nimport { CodeHighlightNode, CodeNode } from \"@lexical/code\";\nimport { HashtagNode } from \"@lexical/hashtag\";\nimport { AutoLinkNode, LinkNode } from \"@lexical/link\";\nimport { ListItemNode, ListNode } from \"@lexical/list\";\nimport { MarkNode } from \"@lexical/mark\";\nimport { OverflowNode } from \"@lexical/overflow\";\nimport { HeadingNode, QuoteNode } from \"@lexical/rich-text\";\nimport { FontColorNode } from \"~/nodes/FontColorNode\";\n\nexport const WebinyNodes: Array<Klass<LexicalNode>> = [\n    HeadingNode,\n    ListNode,\n    ListItemNode,\n    QuoteNode,\n    CodeNode,\n    HashtagNode,\n    CodeHighlightNode,\n    AutoLinkNode,\n    LinkNode,\n    OverflowNode,\n    MarkNode,\n    FontColorNode\n];\n"],"mappings":";;;;;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,IAAMA,WAAsC,GAAG,CAClDC,qBAAW,EACXC,cAAQ,EACRC,kBAAY,EACZC,mBAAS,EACTC,cAAQ,EACRC,oBAAW,EACXC,uBAAiB,EACjBC,kBAAY,EACZC,cAAQ,EACRC,sBAAY,EACZC,cAAQ,EACRC,4BAAa,CAChB;AAAC"}

package/package.json

@@ -0,0 +1,38 @@
+{
+	"name": "@webiny/lexical-editor",
+	"version": "0.0.0-unstable.13771d80a8",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/webiny/webiny-js.git"
+	},
+	"license": "MIT",
+	"dependencies": {
+		"@lexical/code": "0.8.1",
+		"@lexical/hashtag": "0.8.1",
+		"@lexical/link": "0.8.1",
+		"@lexical/list": "0.8.1",
+		"@lexical/mark": "0.8.1",
+		"@lexical/overflow": "0.8.1",
+		"@lexical/react": "0.8.1",
+		"@lexical/rich-text": "0.8.1",
+		"@lexical/selection": "0.8.1",
+		"@lexical/utils": "0.8.1",
+		"@webiny/react-composition": "0.0.0-unstable.13771d80a8",
+		"lexical": "0.8.1",
+		"react": "17.0.2",
+		"react-dom": "17.0.2"
+	},
+	"devDependencies": {
+		"@webiny/cli": "^0.0.0-unstable.13771d80a8",
+		"@webiny/project-utils": "^0.0.0-unstable.13771d80a8"
+	},
+	"publishConfig": {
+		"access": "public",
+		"directory": "dist"
+	},
+	"scripts": {
+		"build": "yarn webiny run build",
+		"watch": "yarn webiny run watch"
+	},
+	"gitHead": "13771d80a8ae3195c9ea1485bf8c01f6667a129e"
+}

package/plugins/AutoLinkPlugin/AutoLinkPlugin.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ *
+ */
+/// <reference types="react" />
+/// <reference types="react" />
+/// <reference types="web" />
+export declare const LexicalAutoLinkPlugin: () => JSX.Element;

package/plugins/AutoLinkPlugin/AutoLinkPlugin.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LexicalAutoLinkPlugin = void 0;
+var _LexicalAutoLinkPlugin = require("@lexical/react/LexicalAutoLinkPlugin");
+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.
+ *
+ */
+
+var URL_MATCHER = /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
+var EMAIL_MATCHER = /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
+var MATCHERS = [function (text) {
+  var match = URL_MATCHER.exec(text);
+  if (match === null) {
+    return null;
+  }
+  var fullMatch = match[0];
+  return {
+    index: match.index,
+    length: fullMatch.length,
+    text: fullMatch,
+    url: fullMatch.startsWith("http") ? fullMatch : "https://".concat(fullMatch)
+  };
+}, function (text) {
+  var match = EMAIL_MATCHER.exec(text);
+  return match && {
+    index: match.index,
+    length: match[0].length,
+    text: match[0],
+    url: "mailto:".concat(match[0])
+  };
+}];
+var LexicalAutoLinkPlugin = function LexicalAutoLinkPlugin() {
+  return /*#__PURE__*/React.createElement(_LexicalAutoLinkPlugin.AutoLinkPlugin, {
+    matchers: MATCHERS
+  });
+};
+exports.LexicalAutoLinkPlugin = LexicalAutoLinkPlugin;

package/plugins/AutoLinkPlugin/AutoLinkPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["URL_MATCHER","EMAIL_MATCHER","MATCHERS","text","match","exec","fullMatch","index","length","url","startsWith","LexicalAutoLinkPlugin"],"sources":["AutoLinkPlugin.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 */\n\nimport { AutoLinkPlugin } from \"@lexical/react/LexicalAutoLinkPlugin\";\nimport * as React from \"react\";\n\nconst URL_MATCHER =\n    /((https?:\\/\\/(www\\.)?)|(www\\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6}\\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;\n\nconst EMAIL_MATCHER =\n    /(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))/;\n\nconst MATCHERS = [\n    (text: string) => {\n        const match = URL_MATCHER.exec(text);\n        if (match === null) {\n            return null;\n        }\n        const fullMatch = match[0];\n        return {\n            index: match.index,\n            length: fullMatch.length,\n            text: fullMatch,\n            url: fullMatch.startsWith(\"http\") ? fullMatch : `https://${fullMatch}`\n        };\n    },\n    (text: string) => {\n        const match = EMAIL_MATCHER.exec(text);\n        return (\n            match && {\n                index: match.index,\n                length: match[0].length,\n                text: match[0],\n                url: `mailto:${match[0]}`\n            }\n        );\n    }\n];\n\nexport const LexicalAutoLinkPlugin = (): JSX.Element => {\n    return <AutoLinkPlugin matchers={MATCHERS} />;\n};\n"],"mappings":";;;;;;;AAQA;AACA;AATA;AACA;AACA;AACA;AACA;AACA;AACA;;AAKA,IAAMA,WAAW,GACb,iHAAiH;AAErH,IAAMC,aAAa,GACf,qJAAqJ;AAEzJ,IAAMC,QAAQ,GAAG,CACb,UAACC,IAAY,EAAK;EACd,IAAMC,KAAK,GAAGJ,WAAW,CAACK,IAAI,CAACF,IAAI,CAAC;EACpC,IAAIC,KAAK,KAAK,IAAI,EAAE;IAChB,OAAO,IAAI;EACf;EACA,IAAME,SAAS,GAAGF,KAAK,CAAC,CAAC,CAAC;EAC1B,OAAO;IACHG,KAAK,EAAEH,KAAK,CAACG,KAAK;IAClBC,MAAM,EAAEF,SAAS,CAACE,MAAM;IACxBL,IAAI,EAAEG,SAAS;IACfG,GAAG,EAAEH,SAAS,CAACI,UAAU,CAAC,MAAM,CAAC,GAAGJ,SAAS,qBAAcA,SAAS;EACxE,CAAC;AACL,CAAC,EACD,UAACH,IAAY,EAAK;EACd,IAAMC,KAAK,GAAGH,aAAa,CAACI,IAAI,CAACF,IAAI,CAAC;EACtC,OACIC,KAAK,IAAI;IACLG,KAAK,EAAEH,KAAK,CAACG,KAAK;IAClBC,MAAM,EAAEJ,KAAK,CAAC,CAAC,CAAC,CAACI,MAAM;IACvBL,IAAI,EAAEC,KAAK,CAAC,CAAC,CAAC;IACdK,GAAG,mBAAYL,KAAK,CAAC,CAAC,CAAC;EAC3B,CAAC;AAET,CAAC,CACJ;AAEM,IAAMO,qBAAqB,GAAG,SAAxBA,qBAAqB,GAAsB;EACpD,oBAAO,oBAAC,qCAAc;IAAC,QAAQ,EAAET;EAAS,EAAG;AACjD,CAAC;AAAC"}

package/plugins/AutoLinkPlugin/index.d.ts

@@ -0,0 +1 @@
+export * from "./AutoLinkPlugin";

package/plugins/AutoLinkPlugin/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _AutoLinkPlugin = require("./AutoLinkPlugin");
+Object.keys(_AutoLinkPlugin).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AutoLinkPlugin[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _AutoLinkPlugin[key];
+    }
+  });
+});

package/plugins/AutoLinkPlugin/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./AutoLinkPlugin\";\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/plugins/BlurEventPlugin/BlurEventPlugin.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+import { LexicalValue } from "../../types";
+interface BlurEventPlugin {
+    onBlur?: (editorState: LexicalValue) => void;
+}
+export declare const BlurEventPlugin: FC<BlurEventPlugin>;
+export {};

package/plugins/BlurEventPlugin/BlurEventPlugin.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BlurEventPlugin = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+var _lexical = require("lexical");
+var BlurEventPlugin = function BlurEventPlugin(_ref) {
+  var onBlur = _ref.onBlur;
+  var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
+    _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  (0, _react.useEffect)(function () {
+    return editor.registerCommand(_lexical.BLUR_COMMAND, function () {
+      if (typeof onBlur === "function") {
+        var _editorState = editor.getEditorState();
+        onBlur(JSON.stringify(_editorState.toJSON()));
+      }
+      return false;
+    }, _lexical.COMMAND_PRIORITY_LOW);
+  }, []);
+  return null;
+};
+exports.BlurEventPlugin = BlurEventPlugin;