@webiny/lexical-editor 0.0.0-unstable.d65ec29d44

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Webiny
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,17 @@
+# @webiny/lexical-editor
+[![](https://img.shields.io/npm/dw/@webiny/app-page-builder.svg)](https://www.npmjs.com/package/@webiny/lexical-editor) 
+[![](https://img.shields.io/npm/v/@webiny/app-page-builder.svg)](https://www.npmjs.com/package/@webiny/lexical-editor)
+[![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)
+
+
+## About
+
+This package provides a web text editor with rich text editing features. It's built on top of the Lexical framework.
+
+
+To find more about the Lexical framework go to their website [lexical.dev](https://lexical.dev/)
+
+## Where is it used?
+
+Currently, this packaged is used in [@webiny/app-pagebuilder](../app-page-builder).

package/components/AddRichTextEditorNodeType.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+import { Klass, LexicalNode } from "lexical";
+export interface AddRichTextEditorNodeTypeProps {
+    type: Klass<LexicalNode>;
+}
+export declare const AddRichTextEditorNodeType: FC<AddRichTextEditorNodeTypeProps>;

package/components/AddRichTextEditorNodeType.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AddRichTextEditorNodeType = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _reactComposition = require("@webiny/react-composition");
+var _RichTextEditor = require("./Editor/RichTextEditor");
+var _excluded = ["nodes", "children"];
+var AddRichTextEditorNodeType = function AddRichTextEditorNodeType(_ref) {
+  var type = _ref.type;
+  var NodePlugin = (0, _reactComposition.createComponentPlugin)(_RichTextEditor.RichTextEditor, function (Original) {
+    return function RichTextEditor(_ref2) {
+      var nodes = _ref2.nodes,
+        children = _ref2.children,
+        rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+      return /*#__PURE__*/_react.default.createElement(Original, Object.assign({}, rest, {
+        nodes: [].concat((0, _toConsumableArray2.default)(nodes || []), [type])
+      }), children);
+    };
+  });
+  return /*#__PURE__*/_react.default.createElement(NodePlugin, null);
+};
+exports.AddRichTextEditorNodeType = AddRichTextEditorNodeType;

package/components/AddRichTextEditorNodeType.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactComposition","_RichTextEditor","_excluded","AddRichTextEditorNodeType","_ref","type","NodePlugin","createComponentPlugin","RichTextEditor","Original","_ref2","nodes","children","rest","_objectWithoutProperties2","default","createElement","Object","assign","concat","_toConsumableArray2","exports"],"sources":["AddRichTextEditorNodeType.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { Klass, LexicalNode } from \"lexical\";\nimport { createComponentPlugin } from \"@webiny/react-composition\";\nimport { RichTextEditor } from \"~/components/Editor/RichTextEditor\";\n\nexport interface AddRichTextEditorNodeTypeProps {\n    type: Klass<LexicalNode>;\n}\n\nexport const AddRichTextEditorNodeType: FC<AddRichTextEditorNodeTypeProps> = ({ type }) => {\n    const NodePlugin = createComponentPlugin(RichTextEditor, Original => {\n        return function RichTextEditor({ nodes, children, ...rest }): JSX.Element {\n            return (\n                <Original {...rest} nodes={[...(nodes || []), type]}>\n                    {children}\n                </Original>\n            );\n        };\n    });\n\n    return <NodePlugin />;\n};\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,eAAA,GAAAF,OAAA;AAAoE,IAAAG,SAAA;AAM7D,IAAMC,yBAA6D,GAAG,SAAhEA,yBAA6DA,CAAAC,IAAA,EAAiB;EAAA,IAAXC,IAAI,GAAAD,IAAA,CAAJC,IAAI;EAChF,IAAMC,UAAU,GAAG,IAAAC,uCAAqB,EAACC,8BAAc,EAAE,UAAAC,QAAQ,EAAI;IACjE,OAAO,SAASD,cAAcA,CAAAE,KAAA,EAA4C;MAAA,IAAzCC,KAAK,GAAAD,KAAA,CAALC,KAAK;QAAEC,QAAQ,GAAAF,KAAA,CAARE,QAAQ;QAAKC,IAAI,OAAAC,yBAAA,CAAAC,OAAA,EAAAL,KAAA,EAAAR,SAAA;MACrD,oBACIL,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACP,QAAQ,EAAAQ,MAAA,CAAAC,MAAA,KAAKL,IAAI;QAAEF,KAAK,KAAAQ,MAAA,KAAAC,mBAAA,CAAAL,OAAA,EAAOJ,KAAK,IAAI,EAAE,IAAGN,IAAI;MAAE,IAC/CO,QAAQ,CACF;IAEnB,CAAC;EACL,CAAC,CAAC;EAEF,oBAAOf,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACV,UAAU,OAAG;AACzB,CAAC;AAACe,OAAA,CAAAlB,yBAAA,GAAAA,yBAAA"}

package/components/AddRichTextEditorPlugin.d.ts

@@ -0,0 +1,10 @@
+import React, { FC } from "react";
+import { LexicalValue } from "../types";
+interface AddRichTextEditorProps {
+    toolbar: React.ReactNode;
+    placeholder?: string;
+    value: LexicalValue;
+    children?: React.ReactNode;
+}
+export declare const AddRichTextEditorPlugin: FC<AddRichTextEditorProps>;
+export {};

package/components/AddRichTextEditorPlugin.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AddRichTextEditorPlugin = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactComposition = require("@webiny/react-composition");
+var _RichTextEditor = require("./Editor/RichTextEditor");
+var AddRichTextEditorPlugin = function AddRichTextEditorPlugin(_ref) {
+  var toolbar = _ref.toolbar,
+    placeholder = _ref.placeholder,
+    children = _ref.children;
+  var RichTextEditorPlugin = /*#__PURE__*/_react.default.memo((0, _reactComposition.createComponentPlugin)(_RichTextEditor.RichTextEditor, function (Original) {
+    return function RichTextEditorElem(_ref2) {
+      var tag = _ref2.tag,
+        value = _ref2.value,
+        onChange = _ref2.onChange;
+      return /*#__PURE__*/_react.default.createElement(Original, {
+        toolbar: toolbar,
+        tag: tag,
+        placeholder: placeholder,
+        value: value,
+        onChange: onChange
+      }, children);
+    };
+  }));
+  return /*#__PURE__*/_react.default.createElement(RichTextEditorPlugin, null);
+};
+exports.AddRichTextEditorPlugin = AddRichTextEditorPlugin;

package/components/AddRichTextEditorPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactComposition","_RichTextEditor","AddRichTextEditorPlugin","_ref","toolbar","placeholder","children","RichTextEditorPlugin","React","memo","createComponentPlugin","RichTextEditor","Original","RichTextEditorElem","_ref2","tag","value","onChange","default","createElement","exports"],"sources":["AddRichTextEditorPlugin.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { createComponentPlugin } from \"@webiny/react-composition\";\nimport { RichTextEditor } from \"~/components/Editor/RichTextEditor\";\nimport { LexicalValue } from \"~/types\";\n\ninterface AddRichTextEditorProps {\n    toolbar: React.ReactNode;\n    placeholder?: string;\n    value: LexicalValue;\n    children?: React.ReactNode;\n}\n\nexport const AddRichTextEditorPlugin: FC<AddRichTextEditorProps> = ({\n    toolbar,\n    placeholder,\n    children\n}) => {\n    const RichTextEditorPlugin = React.memo(\n        createComponentPlugin(RichTextEditor, Original => {\n            return function RichTextEditorElem({ tag, value, onChange }): JSX.Element {\n                return (\n                    <Original\n                        toolbar={toolbar}\n                        tag={tag}\n                        placeholder={placeholder}\n                        value={value}\n                        onChange={onChange}\n                    >\n                        {children}\n                    </Original>\n                );\n            };\n        })\n    );\n\n    return <RichTextEditorPlugin />;\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,eAAA,GAAAF,OAAA;AAUO,IAAMG,uBAAmD,GAAG,SAAtDA,uBAAmDA,CAAAC,IAAA,EAI1D;EAAA,IAHFC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IACPC,WAAW,GAAAF,IAAA,CAAXE,WAAW;IACXC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;EAER,IAAMC,oBAAoB,gBAAGC,cAAK,CAACC,IAAI,CACnC,IAAAC,uCAAqB,EAACC,8BAAc,EAAE,UAAAC,QAAQ,EAAI;IAC9C,OAAO,SAASC,kBAAkBA,CAAAC,KAAA,EAAwC;MAAA,IAArCC,GAAG,GAAAD,KAAA,CAAHC,GAAG;QAAEC,KAAK,GAAAF,KAAA,CAALE,KAAK;QAAEC,QAAQ,GAAAH,KAAA,CAARG,QAAQ;MACrD,oBACIpB,MAAA,CAAAqB,OAAA,CAAAC,aAAA,CAACP,QAAQ;QACLR,OAAO,EAAEA,OAAQ;QACjBW,GAAG,EAAEA,GAAI;QACTV,WAAW,EAAEA,WAAY;QACzBW,KAAK,EAAEA,KAAM;QACbC,QAAQ,EAAEA;MAAS,GAElBX,QAAQ,CACF;IAEnB,CAAC;EACL,CAAC,CAAC,CACL;EAED,oBAAOT,MAAA,CAAAqB,OAAA,CAAAC,aAAA,CAACZ,oBAAoB,OAAG;AACnC,CAAC;AAACa,OAAA,CAAAlB,uBAAA,GAAAA,uBAAA"}

package/components/AddToolbarAction.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+interface AddToolbarActionProps {
+    type?: "heading" | "paragraph" | string;
+    element: JSX.Element;
+}
+export declare const AddToolbarAction: FC<AddToolbarActionProps>;
+export {};

package/components/AddToolbarAction.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AddToolbarAction = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactComposition = require("@webiny/react-composition");
+var _Toolbar = require("./Toolbar/Toolbar");
+var AddToolbarAction = function AddToolbarAction(_ref) {
+  var element = _ref.element,
+    targetType = _ref.type;
+  var ToolbarPlugin = /*#__PURE__*/_react.default.memo((0, _reactComposition.createComponentPlugin)(_Toolbar.Toolbar, function (Original) {
+    return function Toolbar(_ref2) {
+      var type = _ref2.type,
+        children = _ref2.children,
+        anchorElem = _ref2.anchorElem;
+      if (!targetType || targetType === type) {
+        return /*#__PURE__*/_react.default.createElement(Original, {
+          type: type,
+          anchorElem: anchorElem
+        }, element, children);
+      }
+      return /*#__PURE__*/_react.default.createElement(Original, {
+        anchorElem: anchorElem,
+        type: type
+      }, children);
+    };
+  }));
+  return /*#__PURE__*/_react.default.createElement(ToolbarPlugin, null);
+};
+exports.AddToolbarAction = AddToolbarAction;

package/components/AddToolbarAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactComposition","_Toolbar","AddToolbarAction","_ref","element","targetType","type","ToolbarPlugin","React","memo","createComponentPlugin","Toolbar","Original","_ref2","children","anchorElem","default","createElement","exports"],"sources":["AddToolbarAction.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { createComponentPlugin } from \"@webiny/react-composition\";\nimport { Toolbar } from \"~/components/Toolbar/Toolbar\";\ninterface AddToolbarActionProps {\n    type?: \"heading\" | \"paragraph\" | string;\n    element: JSX.Element;\n}\n\nexport const AddToolbarAction: FC<AddToolbarActionProps> = ({ element, type: targetType }) => {\n    const ToolbarPlugin = React.memo(\n        createComponentPlugin(Toolbar, Original => {\n            return function Toolbar({ type, children, anchorElem }): JSX.Element {\n                if (!targetType || targetType === type) {\n                    return (\n                        <Original type={type} anchorElem={anchorElem}>\n                            {element}\n                            {children}\n                        </Original>\n                    );\n                }\n\n                return (\n                    <Original anchorElem={anchorElem} type={type}>\n                        {children}\n                    </Original>\n                );\n            };\n        })\n    );\n\n    return <ToolbarPlugin />;\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAMO,IAAMG,gBAA2C,GAAG,SAA9CA,gBAA2CA,CAAAC,IAAA,EAAsC;EAAA,IAAhCC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IAAQC,UAAU,GAAAF,IAAA,CAAhBG,IAAI;EACvE,IAAMC,aAAa,gBAAGC,cAAK,CAACC,IAAI,CAC5B,IAAAC,uCAAqB,EAACC,gBAAO,EAAE,UAAAC,QAAQ,EAAI;IACvC,OAAO,SAASD,OAAOA,CAAAE,KAAA,EAA8C;MAAA,IAA3CP,IAAI,GAAAO,KAAA,CAAJP,IAAI;QAAEQ,QAAQ,GAAAD,KAAA,CAARC,QAAQ;QAAEC,UAAU,GAAAF,KAAA,CAAVE,UAAU;MAChD,IAAI,CAACV,UAAU,IAAIA,UAAU,KAAKC,IAAI,EAAE;QACpC,oBACIT,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAACL,QAAQ;UAACN,IAAI,EAAEA,IAAK;UAACS,UAAU,EAAEA;QAAW,GACxCX,OAAO,EACPU,QAAQ,CACF;MAEnB;MAEA,oBACIjB,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAACL,QAAQ;QAACG,UAAU,EAAEA,UAAW;QAACT,IAAI,EAAEA;MAAK,GACxCQ,QAAQ,CACF;IAEnB,CAAC;EACL,CAAC,CAAC,CACL;EAED,oBAAOjB,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAACV,aAAa,OAAG;AAC5B,CAAC;AAACW,OAAA,CAAAhB,gBAAA,GAAAA,gBAAA"}

package/components/Editor/HeadingEditor.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { RichTextEditorProps } from "./RichTextEditor";
+interface HeadingEditorProps extends RichTextEditorProps {
+    tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+}
+export declare const HeadingEditor: React.FC<HeadingEditorProps>;
+export {};

package/components/Editor/HeadingEditor.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HeadingEditor = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _LexicalLinkPlugin = require("@lexical/react/LexicalLinkPlugin");
+var _ClickableLinkPlugin = require("../../plugins/ClickableLinkPlugin/ClickableLinkPlugin");
+var _FloatingLinkEditorPlugin = require("../../plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin");
+var _HeadingToolbar = require("../Toolbar/HeadingToolbar");
+var _RichTextEditor = require("./RichTextEditor");
+var _excluded = ["tag", "placeholder"];
+var HeadingEditor = function HeadingEditor(_ref) {
+  var tag = _ref.tag,
+    placeholder = _ref.placeholder,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_RichTextEditor.RichTextEditor, Object.assign({
+    toolbar: /*#__PURE__*/_react.default.createElement(_HeadingToolbar.HeadingToolbar, null),
+    tag: tag !== null && tag !== void 0 ? tag : "h1",
+    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "Enter your heading text here..."
+  }, rest), /*#__PURE__*/_react.default.createElement(_LexicalLinkPlugin.LinkPlugin, null), /*#__PURE__*/_react.default.createElement(_ClickableLinkPlugin.ClickableLinkPlugin, null), /*#__PURE__*/_react.default.createElement(_FloatingLinkEditorPlugin.FloatingLinkEditorPlugin, {
+    anchorElem: document.body
+  }));
+};
+exports.HeadingEditor = HeadingEditor;

package/components/Editor/HeadingEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_LexicalLinkPlugin","_ClickableLinkPlugin","_FloatingLinkEditorPlugin","_HeadingToolbar","_RichTextEditor","_excluded","HeadingEditor","_ref","tag","placeholder","rest","_objectWithoutProperties2","default","createElement","RichTextEditor","Object","assign","toolbar","HeadingToolbar","LinkPlugin","ClickableLinkPlugin","FloatingLinkEditorPlugin","anchorElem","document","body","exports"],"sources":["HeadingEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { LinkPlugin } from \"@lexical/react/LexicalLinkPlugin\";\nimport { ClickableLinkPlugin } from \"~/plugins/ClickableLinkPlugin/ClickableLinkPlugin\";\nimport { FloatingLinkEditorPlugin } from \"~/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin\";\nimport { HeadingToolbar } from \"~/components/Toolbar/HeadingToolbar\";\nimport { RichTextEditor, RichTextEditorProps } from \"~/components/Editor/RichTextEditor\";\n\ninterface HeadingEditorProps extends RichTextEditorProps {\n    tag?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n}\n\nexport const HeadingEditor: React.FC<HeadingEditorProps> = ({ tag, placeholder, ...rest }) => {\n    return (\n        <RichTextEditor\n            toolbar={<HeadingToolbar />}\n            tag={tag ?? \"h1\"}\n            placeholder={placeholder ?? \"Enter your heading text here...\"}\n            {...rest}\n        >\n            <LinkPlugin />\n            <ClickableLinkPlugin />\n            <FloatingLinkEditorPlugin anchorElem={document.body} />\n        </RichTextEditor>\n    );\n};\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,kBAAA,GAAAD,OAAA;AACA,IAAAE,oBAAA,GAAAF,OAAA;AACA,IAAAG,yBAAA,GAAAH,OAAA;AACA,IAAAI,eAAA,GAAAJ,OAAA;AACA,IAAAK,eAAA,GAAAL,OAAA;AAAyF,IAAAM,SAAA;AAMlF,IAAMC,aAA2C,GAAG,SAA9CA,aAA2CA,CAAAC,IAAA,EAAsC;EAAA,IAAhCC,GAAG,GAAAD,IAAA,CAAHC,GAAG;IAAEC,WAAW,GAAAF,IAAA,CAAXE,WAAW;IAAKC,IAAI,OAAAC,yBAAA,CAAAC,OAAA,EAAAL,IAAA,EAAAF,SAAA;EACnF,oBACIR,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACT,eAAA,CAAAU,cAAc,EAAAC,MAAA,CAAAC,MAAA;IACXC,OAAO,eAAEpB,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACV,eAAA,CAAAe,cAAc,OAAI;IAC5BV,GAAG,EAAEA,GAAG,aAAHA,GAAG,cAAHA,GAAG,GAAI,IAAK;IACjBC,WAAW,EAAEA,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAI;EAAkC,GAC1DC,IAAI,gBAERb,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACb,kBAAA,CAAAmB,UAAU,OAAG,eACdtB,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACZ,oBAAA,CAAAmB,mBAAmB,OAAG,eACvBvB,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACX,yBAAA,CAAAmB,wBAAwB;IAACC,UAAU,EAAEC,QAAQ,CAACC;EAAK,EAAG,CAC1C;AAEzB,CAAC;AAACC,OAAA,CAAAnB,aAAA,GAAAA,aAAA"}

package/components/Editor/ParagraphEditor.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { RichTextEditorProps } from "./RichTextEditor";
+interface ParagraphLexicalEditorProps extends RichTextEditorProps {
+    tag?: "p";
+}
+declare const ParagraphEditor: React.FC<ParagraphLexicalEditorProps>;
+export { ParagraphEditor };

package/components/Editor/ParagraphEditor.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ParagraphEditor = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _LexicalListPlugin = require("@lexical/react/LexicalListPlugin");
+var _CodeHighlightPlugin = require("../../plugins/CodeHighlightPlugin/CodeHighlightPlugin");
+var _LexicalLinkPlugin = require("@lexical/react/LexicalLinkPlugin");
+var _FloatingLinkEditorPlugin = require("../../plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin");
+var _ClickableLinkPlugin = require("../../plugins/ClickableLinkPlugin/ClickableLinkPlugin");
+var _ParagraphToolbar = require("../Toolbar/ParagraphToolbar");
+var _RichTextEditor = require("./RichTextEditor");
+var _excluded = ["placeholder", "tag"];
+var ParagraphEditor = function ParagraphEditor(_ref) {
+  var placeholder = _ref.placeholder,
+    tag = _ref.tag,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_RichTextEditor.RichTextEditor, Object.assign({
+    toolbar: /*#__PURE__*/_react.default.createElement(_ParagraphToolbar.ParagraphToolbar, null),
+    tag: tag !== null && tag !== void 0 ? tag : "p",
+    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "Enter your text here..."
+  }, rest), /*#__PURE__*/_react.default.createElement(_LexicalLinkPlugin.LinkPlugin, null), /*#__PURE__*/_react.default.createElement(_CodeHighlightPlugin.CodeHighlightPlugin, null), /*#__PURE__*/_react.default.createElement(_ClickableLinkPlugin.ClickableLinkPlugin, null), /*#__PURE__*/_react.default.createElement(_FloatingLinkEditorPlugin.FloatingLinkEditorPlugin, {
+    anchorElem: document.body
+  }), /*#__PURE__*/_react.default.createElement(_LexicalListPlugin.ListPlugin, null));
+};
+exports.ParagraphEditor = ParagraphEditor;

package/components/Editor/ParagraphEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_LexicalListPlugin","_CodeHighlightPlugin","_LexicalLinkPlugin","_FloatingLinkEditorPlugin","_ClickableLinkPlugin","_ParagraphToolbar","_RichTextEditor","_excluded","ParagraphEditor","_ref","placeholder","tag","rest","_objectWithoutProperties2","default","createElement","RichTextEditor","Object","assign","toolbar","ParagraphToolbar","LinkPlugin","CodeHighlightPlugin","ClickableLinkPlugin","FloatingLinkEditorPlugin","anchorElem","document","body","ListPlugin","exports"],"sources":["ParagraphEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { ListPlugin } from \"@lexical/react/LexicalListPlugin\";\nimport { CodeHighlightPlugin } from \"~/plugins/CodeHighlightPlugin/CodeHighlightPlugin\";\nimport { LinkPlugin } from \"@lexical/react/LexicalLinkPlugin\";\nimport { FloatingLinkEditorPlugin } from \"~/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin\";\nimport { ClickableLinkPlugin } from \"~/plugins/ClickableLinkPlugin/ClickableLinkPlugin\";\nimport { ParagraphToolbar } from \"~/components/Toolbar/ParagraphToolbar\";\nimport { RichTextEditor, RichTextEditorProps } from \"~/components/Editor/RichTextEditor\";\n\ninterface ParagraphLexicalEditorProps extends RichTextEditorProps {\n    tag?: \"p\";\n}\n\nconst ParagraphEditor: React.FC<ParagraphLexicalEditorProps> = ({ placeholder, tag, ...rest }) => {\n    return (\n        <RichTextEditor\n            toolbar={<ParagraphToolbar />}\n            tag={tag ?? \"p\"}\n            placeholder={placeholder ?? \"Enter your text here...\"}\n            {...rest}\n        >\n            <LinkPlugin />\n            <CodeHighlightPlugin />\n            <ClickableLinkPlugin />\n            <FloatingLinkEditorPlugin anchorElem={document.body} />\n            <ListPlugin />\n        </RichTextEditor>\n    );\n};\n\nexport { ParagraphEditor };\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,kBAAA,GAAAD,OAAA;AACA,IAAAE,oBAAA,GAAAF,OAAA;AACA,IAAAG,kBAAA,GAAAH,OAAA;AACA,IAAAI,yBAAA,GAAAJ,OAAA;AACA,IAAAK,oBAAA,GAAAL,OAAA;AACA,IAAAM,iBAAA,GAAAN,OAAA;AACA,IAAAO,eAAA,GAAAP,OAAA;AAAyF,IAAAQ,SAAA;AAMzF,IAAMC,eAAsD,GAAG,SAAzDA,eAAsDA,CAAAC,IAAA,EAAsC;EAAA,IAAhCC,WAAW,GAAAD,IAAA,CAAXC,WAAW;IAAEC,GAAG,GAAAF,IAAA,CAAHE,GAAG;IAAKC,IAAI,OAAAC,yBAAA,CAAAC,OAAA,EAAAL,IAAA,EAAAF,SAAA;EACvF,oBACIV,MAAA,CAAAiB,OAAA,CAAAC,aAAA,CAACT,eAAA,CAAAU,cAAc,EAAAC,MAAA,CAAAC,MAAA;IACXC,OAAO,eAAEtB,MAAA,CAAAiB,OAAA,CAAAC,aAAA,CAACV,iBAAA,CAAAe,gBAAgB,OAAI;IAC9BT,GAAG,EAAEA,GAAG,aAAHA,GAAG,cAAHA,GAAG,GAAI,GAAI;IAChBD,WAAW,EAAEA,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAI;EAA0B,GAClDE,IAAI,gBAERf,MAAA,CAAAiB,OAAA,CAAAC,aAAA,CAACb,kBAAA,CAAAmB,UAAU,OAAG,eACdxB,MAAA,CAAAiB,OAAA,CAAAC,aAAA,CAACd,oBAAA,CAAAqB,mBAAmB,OAAG,eACvBzB,MAAA,CAAAiB,OAAA,CAAAC,aAAA,CAACX,oBAAA,CAAAmB,mBAAmB,OAAG,eACvB1B,MAAA,CAAAiB,OAAA,CAAAC,aAAA,CAACZ,yBAAA,CAAAqB,wBAAwB;IAACC,UAAU,EAAEC,QAAQ,CAACC;EAAK,EAAG,eACvD9B,MAAA,CAAAiB,OAAA,CAAAC,aAAA,CAACf,kBAAA,CAAA4B,UAAU,OAAG,CACD;AAEzB,CAAC;AAACC,OAAA,CAAArB,eAAA,GAAAA,eAAA"}

package/components/Editor/RichTextEditor.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { LexicalValue } from "../../types";
+import { Klass, LexicalNode } from "lexical";
+export interface RichTextEditorProps {
+    toolbar?: React.ReactNode;
+    tag?: string;
+    onChange?: (json: LexicalValue) => void;
+    value: LexicalValue | null;
+    focus?: boolean;
+    placeholder?: string;
+    nodes?: Klass<LexicalNode>[];
+    /**
+     * @description Lexical plugins
+     */
+    children?: React.ReactNode | React.ReactNode[];
+    onBlur?: (editorState: LexicalValue) => void;
+    height?: number | string;
+    width?: number | string;
+}
+/**
+ * @description Main editor container
+ */
+export declare const RichTextEditor: import("@webiny/react-composition").ComposableFC<RichTextEditorProps>;

package/components/Editor/RichTextEditor.js

@@ -0,0 +1,107 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RichTextEditor = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _Placeholder = require("../../ui/Placeholder");
+var _generateInitialLexicalValue = require("../../utils/generateInitialLexicalValue");
+var _webinyNodes = require("../../nodes/webinyNodes");
+var _webinyLexicalTheme = require("../../themes/webinyLexicalTheme");
+var _LexicalComposer = require("@lexical/react/LexicalComposer");
+var _LexicalOnChangePlugin = require("@lexical/react/LexicalOnChangePlugin");
+var _LexicalAutoFocusPlugin = require("@lexical/react/LexicalAutoFocusPlugin");
+var _LexicalClearEditorPlugin = require("@lexical/react/LexicalClearEditorPlugin");
+var _LexicalRichTextPlugin = require("@lexical/react/LexicalRichTextPlugin");
+var _LexicalErrorBoundary = _interopRequireDefault(require("@lexical/react/LexicalErrorBoundary"));
+var _reactComposition = require("@webiny/react-composition");
+var _LexicalContentEditable = require("@lexical/react/LexicalContentEditable");
+var _RichTextEditorContext = require("../../context/RichTextEditorContext");
+var _isValidLexicalData = require("../../utils/isValidLexicalData");
+var _LexicalUpdateStatePlugin = require("../../plugins/LexicalUpdateStatePlugin");
+var _BlurEventPlugin = require("../../plugins/BlurEventPlugin/BlurEventPlugin");
+var BaseRichTextEditor = function BaseRichTextEditor(_ref) {
+  var toolbar = _ref.toolbar,
+    onChange = _ref.onChange,
+    value = _ref.value,
+    nodes = _ref.nodes,
+    placeholder = _ref.placeholder,
+    children = _ref.children,
+    onBlur = _ref.onBlur,
+    focus = _ref.focus,
+    width = _ref.width,
+    height = _ref.height;
+  var placeholderElem = /*#__PURE__*/_react.default.createElement(_Placeholder.Placeholder, null, placeholder || "Enter text...");
+  var scrollRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(undefined),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    floatingAnchorElem = _useState2[0],
+    setFloatingAnchorElem = _useState2[1];
+  var onRef = function onRef(_floatingAnchorElem) {
+    if (_floatingAnchorElem !== null) {
+      setFloatingAnchorElem(_floatingAnchorElem);
+    }
+  };
+  var sizeStyle = {
+    height: height || "",
+    width: width || ""
+  };
+  var initialConfig = {
+    editorState: (0, _isValidLexicalData.isValidLexicalData)(value) ? value : (0, _generateInitialLexicalValue.generateInitialLexicalValue)(),
+    namespace: "webiny",
+    onError: function onError(error) {
+      throw error;
+    },
+    nodes: [].concat((0, _toConsumableArray2.default)(_webinyNodes.WebinyNodes), (0, _toConsumableArray2.default)(nodes || [])),
+    theme: _webinyLexicalTheme.theme
+  };
+  function handleOnChange(editorState, editor) {
+    editorState.read(function () {
+      if (typeof onChange === "function") {
+        var _editorState = editor.getEditorState();
+        onChange(JSON.stringify(_editorState.toJSON()));
+      }
+    });
+  }
+  return /*#__PURE__*/_react.default.createElement(_LexicalComposer.LexicalComposer, {
+    initialConfig: initialConfig
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: scrollRef,
+    style: (0, _objectSpread2.default)({}, sizeStyle)
+  }, /*#__PURE__*/_react.default.createElement(_LexicalOnChangePlugin.OnChangePlugin, {
+    onChange: handleOnChange
+  }), value && /*#__PURE__*/_react.default.createElement(_LexicalUpdateStatePlugin.LexicalUpdateStatePlugin, {
+    value: value
+  }), /*#__PURE__*/_react.default.createElement(_LexicalClearEditorPlugin.ClearEditorPlugin, null), onBlur && /*#__PURE__*/_react.default.createElement(_BlurEventPlugin.BlurEventPlugin, {
+    onBlur: onBlur
+  }), focus && /*#__PURE__*/_react.default.createElement(_LexicalAutoFocusPlugin.AutoFocusPlugin, null), children, /*#__PURE__*/_react.default.createElement(_LexicalRichTextPlugin.RichTextPlugin, {
+    contentEditable: /*#__PURE__*/_react.default.createElement("div", {
+      className: "editor-scroller",
+      style: (0, _objectSpread2.default)({}, sizeStyle)
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "editor",
+      ref: onRef,
+      style: (0, _objectSpread2.default)({}, sizeStyle)
+    }, /*#__PURE__*/_react.default.createElement(_LexicalContentEditable.ContentEditable, {
+      style: (0, _objectSpread2.default)({
+        outline: 0
+      }, sizeStyle)
+    }))),
+    placeholder: placeholderElem,
+    ErrorBoundary: _LexicalErrorBoundary.default
+  }), floatingAnchorElem && toolbar));
+};
+
+/**
+ * @description Main editor container
+ */
+var RichTextEditor = (0, _reactComposition.makeComposable)("RichTextEditor", function (props) {
+  return /*#__PURE__*/_react.default.createElement(_RichTextEditorContext.RichTextEditorProvider, null, /*#__PURE__*/_react.default.createElement(BaseRichTextEditor, props));
+});
+exports.RichTextEditor = RichTextEditor;

package/components/Editor/RichTextEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_Placeholder","_generateInitialLexicalValue","_webinyNodes","_webinyLexicalTheme","_LexicalComposer","_LexicalOnChangePlugin","_LexicalAutoFocusPlugin","_LexicalClearEditorPlugin","_LexicalRichTextPlugin","_LexicalErrorBoundary","_interopRequireDefault","_reactComposition","_LexicalContentEditable","_RichTextEditorContext","_isValidLexicalData","_LexicalUpdateStatePlugin","_BlurEventPlugin","BaseRichTextEditor","_ref","toolbar","onChange","value","nodes","placeholder","children","onBlur","focus","width","height","placeholderElem","default","createElement","Placeholder","scrollRef","useRef","_useState","useState","undefined","_useState2","_slicedToArray2","floatingAnchorElem","setFloatingAnchorElem","onRef","_floatingAnchorElem","sizeStyle","initialConfig","editorState","isValidLexicalData","generateInitialLexicalValue","namespace","onError","error","concat","_toConsumableArray2","WebinyNodes","theme","handleOnChange","editor","read","getEditorState","JSON","stringify","toJSON","LexicalComposer","ref","style","_objectSpread2","OnChangePlugin","LexicalUpdateStatePlugin","ClearEditorPlugin","BlurEventPlugin","AutoFocusPlugin","RichTextPlugin","contentEditable","className","ContentEditable","outline","ErrorBoundary","LexicalErrorBoundary","RichTextEditor","makeComposable","props","RichTextEditorProvider","exports"],"sources":["RichTextEditor.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport { LexicalValue } from \"~/types\";\nimport { Placeholder } from \"~/ui/Placeholder\";\nimport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\nimport { WebinyNodes } from \"~/nodes/webinyNodes\";\nimport { theme } from \"~/themes/webinyLexicalTheme\";\nimport { EditorState } from \"lexical/LexicalEditorState\";\nimport { Klass, LexicalEditor, LexicalNode } from \"lexical\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\nimport { OnChangePlugin } from \"@lexical/react/LexicalOnChangePlugin\";\nimport { AutoFocusPlugin } from \"@lexical/react/LexicalAutoFocusPlugin\";\nimport { ClearEditorPlugin } from \"@lexical/react/LexicalClearEditorPlugin\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport LexicalErrorBoundary from \"@lexical/react/LexicalErrorBoundary\";\nimport { makeComposable } from \"@webiny/react-composition\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport { RichTextEditorProvider } from \"~/context/RichTextEditorContext\";\nimport { isValidLexicalData } from \"~/utils/isValidLexicalData\";\nimport { LexicalUpdateStatePlugin } from \"~/plugins/LexicalUpdateStatePlugin\";\nimport { BlurEventPlugin } from \"~/plugins/BlurEventPlugin/BlurEventPlugin\";\n\nexport interface RichTextEditorProps {\n    toolbar?: React.ReactNode;\n    tag?: string;\n    onChange?: (json: LexicalValue) => void;\n    value: LexicalValue | null;\n    focus?: boolean;\n    placeholder?: string;\n    nodes?: Klass<LexicalNode>[];\n    /**\n     * @description Lexical plugins\n     */\n    children?: React.ReactNode | React.ReactNode[];\n    onBlur?: (editorState: LexicalValue) => void;\n    height?: number | string;\n    width?: number | string;\n}\n\nconst BaseRichTextEditor: React.FC<RichTextEditorProps> = ({\n    toolbar,\n    onChange,\n    value,\n    nodes,\n    placeholder,\n    children,\n    onBlur,\n    focus,\n    width,\n    height\n}: RichTextEditorProps) => {\n    const placeholderElem = <Placeholder>{placeholder || \"Enter text...\"}</Placeholder>;\n    const scrollRef = useRef(null);\n    const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLElement | undefined>(\n        undefined\n    );\n\n    const onRef = (_floatingAnchorElem: HTMLDivElement) => {\n        if (_floatingAnchorElem !== null) {\n            setFloatingAnchorElem(_floatingAnchorElem);\n        }\n    };\n\n    const sizeStyle = {\n        height: height || \"\",\n        width: width || \"\"\n    };\n\n    const initialConfig = {\n        editorState: isValidLexicalData(value) ? value : generateInitialLexicalValue(),\n        namespace: \"webiny\",\n        onError: (error: Error) => {\n            throw error;\n        },\n        nodes: [...WebinyNodes, ...(nodes || [])],\n        theme: theme\n    };\n\n    function handleOnChange(editorState: EditorState, editor: LexicalEditor) {\n        editorState.read(() => {\n            if (typeof onChange === \"function\") {\n                const editorState = editor.getEditorState();\n                onChange(JSON.stringify(editorState.toJSON()));\n            }\n        });\n    }\n\n    return (\n        <LexicalComposer initialConfig={initialConfig}>\n            <div ref={scrollRef} style={{ ...sizeStyle }}>\n                {/* data */}\n                <OnChangePlugin onChange={handleOnChange} />\n                {value && <LexicalUpdateStatePlugin value={value} />}\n                <ClearEditorPlugin />\n                {/* Events */}\n                {onBlur && <BlurEventPlugin onBlur={onBlur} />}\n                {focus && <AutoFocusPlugin />}\n                {/* External plugins and components */}\n                {children}\n                <RichTextPlugin\n                    contentEditable={\n                        <div className=\"editor-scroller\" style={{ ...sizeStyle }}>\n                            <div className=\"editor\" ref={onRef} style={{ ...sizeStyle }}>\n                                <ContentEditable style={{ outline: 0, ...sizeStyle }} />\n                            </div>\n                        </div>\n                    }\n                    placeholder={placeholderElem}\n                    ErrorBoundary={LexicalErrorBoundary}\n                />\n                {/* Toolbar */}\n                {floatingAnchorElem && toolbar}\n            </div>\n        </LexicalComposer>\n    );\n};\n\n/**\n * @description Main editor container\n */\nexport const RichTextEditor = makeComposable<RichTextEditorProps>(\"RichTextEditor\", props => {\n    return (\n        <RichTextEditorProvider>\n            <BaseRichTextEditor {...props} />\n        </RichTextEditorProvider>\n    );\n});\n"],"mappings":"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"}

package/components/LexicalHtmlRenderer.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { LexicalValue } from "../types";
+import { Klass, LexicalNode } from "lexical";
+interface LexicalHtmlRendererProps {
+    nodes?: Klass<LexicalNode>[];
+    value: LexicalValue | null;
+}
+export declare const LexicalHtmlRenderer: React.FC<LexicalHtmlRendererProps>;
+export {};

package/components/LexicalHtmlRenderer.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LexicalHtmlRenderer = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireDefault(require("react"));
+var _isValidLexicalData = require("../utils/isValidLexicalData");
+var _generateInitialLexicalValue = require("../utils/generateInitialLexicalValue");
+var _webinyNodes = require("../nodes/webinyNodes");
+var _webinyLexicalTheme = require("../themes/webinyLexicalTheme");
+var _LexicalComposer = require("@lexical/react/LexicalComposer");
+var _LexicalRichTextPlugin = require("@lexical/react/LexicalRichTextPlugin");
+var _LexicalContentEditable = require("@lexical/react/LexicalContentEditable");
+var _LexicalErrorBoundary = _interopRequireDefault(require("@lexical/react/LexicalErrorBoundary"));
+var _LexicalUpdateStatePlugin = require("../plugins/LexicalUpdateStatePlugin");
+var LexicalHtmlRenderer = function LexicalHtmlRenderer(_ref) {
+  var nodes = _ref.nodes,
+    value = _ref.value;
+  var initialConfig = {
+    editorState: (0, _isValidLexicalData.isValidLexicalData)(value) ? value : (0, _generateInitialLexicalValue.generateInitialLexicalValue)(),
+    namespace: "webiny",
+    onError: function onError(error) {
+      throw error;
+    },
+    editable: false,
+    nodes: [].concat((0, _toConsumableArray2.default)(_webinyNodes.WebinyNodes), (0, _toConsumableArray2.default)(nodes || [])),
+    theme: _webinyLexicalTheme.theme
+  };
+  return /*#__PURE__*/_react.default.createElement(_LexicalComposer.LexicalComposer, {
+    initialConfig: initialConfig
+  }, /*#__PURE__*/_react.default.createElement(_LexicalRichTextPlugin.RichTextPlugin, {
+    contentEditable: /*#__PURE__*/_react.default.createElement("div", {
+      className: "editor"
+    }, /*#__PURE__*/_react.default.createElement(_LexicalContentEditable.ContentEditable, null)),
+    ErrorBoundary: _LexicalErrorBoundary.default,
+    placeholder: null
+  }), /*#__PURE__*/_react.default.createElement(_LexicalUpdateStatePlugin.LexicalUpdateStatePlugin, {
+    value: value
+  }));
+};
+exports.LexicalHtmlRenderer = LexicalHtmlRenderer;

package/components/LexicalHtmlRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_isValidLexicalData","_generateInitialLexicalValue","_webinyNodes","_webinyLexicalTheme","_LexicalComposer","_LexicalRichTextPlugin","_LexicalContentEditable","_LexicalErrorBoundary","_LexicalUpdateStatePlugin","LexicalHtmlRenderer","_ref","nodes","value","initialConfig","editorState","isValidLexicalData","generateInitialLexicalValue","namespace","onError","error","editable","concat","_toConsumableArray2","default","WebinyNodes","theme","createElement","LexicalComposer","RichTextPlugin","contentEditable","className","ContentEditable","ErrorBoundary","LexicalErrorBoundary","placeholder","LexicalUpdateStatePlugin","exports"],"sources":["LexicalHtmlRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { LexicalValue } from \"~/types\";\nimport { isValidLexicalData } from \"~/utils/isValidLexicalData\";\nimport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\nimport { WebinyNodes } from \"~/nodes/webinyNodes\";\nimport { theme } from \"~/themes/webinyLexicalTheme\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport LexicalErrorBoundary from \"@lexical/react/LexicalErrorBoundary\";\nimport { LexicalUpdateStatePlugin } from \"~/plugins/LexicalUpdateStatePlugin\";\nimport { Klass, LexicalNode } from \"lexical\";\n\ninterface LexicalHtmlRendererProps {\n    nodes?: Klass<LexicalNode>[];\n    value: LexicalValue | null;\n}\n\nexport const LexicalHtmlRenderer: React.FC<LexicalHtmlRendererProps> = ({ nodes, value }) => {\n    const initialConfig = {\n        editorState: isValidLexicalData(value) ? value : generateInitialLexicalValue(),\n        namespace: \"webiny\",\n        onError: (error: Error) => {\n            throw error;\n        },\n        editable: false,\n        nodes: [...WebinyNodes, ...(nodes || [])],\n        theme: theme\n    };\n\n    return (\n        <LexicalComposer initialConfig={initialConfig}>\n            <RichTextPlugin\n                contentEditable={\n                    <div className=\"editor\">\n                        <ContentEditable />\n                    </div>\n                }\n                ErrorBoundary={LexicalErrorBoundary}\n                placeholder={null}\n            />\n            <LexicalUpdateStatePlugin value={value} />\n        </LexicalComposer>\n    );\n};\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,mBAAA,GAAAD,OAAA;AACA,IAAAE,4BAAA,GAAAF,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AACA,IAAAI,mBAAA,GAAAJ,OAAA;AACA,IAAAK,gBAAA,GAAAL,OAAA;AACA,IAAAM,sBAAA,GAAAN,OAAA;AACA,IAAAO,uBAAA,GAAAP,OAAA;AACA,IAAAQ,qBAAA,GAAAT,sBAAA,CAAAC,OAAA;AACA,IAAAS,yBAAA,GAAAT,OAAA;AAQO,IAAMU,mBAAuD,GAAG,SAA1DA,mBAAuDA,CAAAC,IAAA,EAAyB;EAAA,IAAnBC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,KAAK,GAAAF,IAAA,CAALE,KAAK;EAClF,IAAMC,aAAa,GAAG;IAClBC,WAAW,EAAE,IAAAC,sCAAkB,EAACH,KAAK,CAAC,GAAGA,KAAK,GAAG,IAAAI,wDAA2B,GAAE;IAC9EC,SAAS,EAAE,QAAQ;IACnBC,OAAO,EAAE,SAAAA,QAACC,KAAY,EAAK;MACvB,MAAMA,KAAK;IACf,CAAC;IACDC,QAAQ,EAAE,KAAK;IACfT,KAAK,KAAAU,MAAA,KAAAC,mBAAA,CAAAC,OAAA,EAAMC,wBAAW,OAAAF,mBAAA,CAAAC,OAAA,EAAMZ,KAAK,IAAI,EAAE,EAAE;IACzCc,KAAK,EAAEA;EACX,CAAC;EAED,oBACI5B,MAAA,CAAA0B,OAAA,CAAAG,aAAA,CAACtB,gBAAA,CAAAuB,eAAe;IAACd,aAAa,EAAEA;EAAc,gBAC1ChB,MAAA,CAAA0B,OAAA,CAAAG,aAAA,CAACrB,sBAAA,CAAAuB,cAAc;IACXC,eAAe,eACXhC,MAAA,CAAA0B,OAAA,CAAAG,aAAA;MAAKI,SAAS,EAAC;IAAQ,gBACnBjC,MAAA,CAAA0B,OAAA,CAAAG,aAAA,CAACpB,uBAAA,CAAAyB,eAAe,OAAG,CAE1B;IACDC,aAAa,EAAEC,6BAAqB;IACpCC,WAAW,EAAE;EAAK,EACpB,eACFrC,MAAA,CAAA0B,OAAA,CAAAG,aAAA,CAAClB,yBAAA,CAAA2B,wBAAwB;IAACvB,KAAK,EAAEA;EAAM,EAAG,CAC5B;AAE1B,CAAC;AAACwB,OAAA,CAAA3B,mBAAA,GAAAA,mBAAA"}

package/components/Toolbar/HeadingToolbar.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="web" />
+import { FC } from "react";
+interface HeadingToolbarProps {
+    anchorElem?: HTMLElement;
+}
+/**
+ * Toolbar with actions specific for the heading elements from H1-H6.
+ * @param anchorElem
+ * @constructor
+ */
+export declare const HeadingToolbar: FC<HeadingToolbarProps>;
+export {};

package/components/Toolbar/HeadingToolbar.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HeadingToolbar = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Toolbar = require("./Toolbar");
+/**
+ * Toolbar with actions specific for the heading elements from H1-H6.
+ * @param anchorElem
+ * @constructor
+ */
+var HeadingToolbar = function HeadingToolbar(_ref) {
+  var _ref$anchorElem = _ref.anchorElem,
+    anchorElem = _ref$anchorElem === void 0 ? document.body : _ref$anchorElem;
+  return /*#__PURE__*/_react.default.createElement(_Toolbar.Toolbar, {
+    type: "heading",
+    anchorElem: anchorElem
+  });
+};
+exports.HeadingToolbar = HeadingToolbar;

package/components/Toolbar/HeadingToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_Toolbar","HeadingToolbar","_ref","_ref$anchorElem","anchorElem","document","body","default","createElement","Toolbar","type","exports"],"sources":["HeadingToolbar.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { Toolbar } from \"~/components/Toolbar/Toolbar\";\n\ninterface HeadingToolbarProps {\n    anchorElem?: HTMLElement;\n}\n\n/**\n * Toolbar with actions specific for the heading elements from H1-H6.\n * @param anchorElem\n * @constructor\n */\nexport const HeadingToolbar: FC<HeadingToolbarProps> = ({ anchorElem = document.body }) => {\n    return <Toolbar type={\"heading\"} anchorElem={anchorElem} />;\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAMA;AACA;AACA;AACA;AACA;AACO,IAAME,cAAuC,GAAG,SAA1CA,cAAuCA,CAAAC,IAAA,EAAuC;EAAA,IAAAC,eAAA,GAAAD,IAAA,CAAjCE,UAAU;IAAVA,UAAU,GAAAD,eAAA,cAAGE,QAAQ,CAACC,IAAI,GAAAH,eAAA;EAChF,oBAAON,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACR,QAAA,CAAAS,OAAO;IAACC,IAAI,EAAE,SAAU;IAACN,UAAU,EAAEA;EAAW,EAAG;AAC/D,CAAC;AAACO,OAAA,CAAAV,cAAA,GAAAA,cAAA"}

package/components/Toolbar/ParagraphToolbar.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="web" />
+import { FC } from "react";
+interface ParagraphToolbarProps {
+    anchorElem?: HTMLElement;
+}
+/**
+ * Toolbar with actions for rich text editing specific for the paragraph element <p>.
+ * @param anchorElem
+ * @constructor
+ */
+export declare const ParagraphToolbar: FC<ParagraphToolbarProps>;
+export {};

package/components/Toolbar/ParagraphToolbar.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ParagraphToolbar = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Toolbar = require("./Toolbar");
+/**
+ * Toolbar with actions for rich text editing specific for the paragraph element <p>.
+ * @param anchorElem
+ * @constructor
+ */
+var ParagraphToolbar = function ParagraphToolbar(_ref) {
+  var _ref$anchorElem = _ref.anchorElem,
+    anchorElem = _ref$anchorElem === void 0 ? document.body : _ref$anchorElem;
+  return /*#__PURE__*/_react.default.createElement(_Toolbar.Toolbar, {
+    type: "paragraph",
+    anchorElem: anchorElem
+  });
+};
+exports.ParagraphToolbar = ParagraphToolbar;

package/components/Toolbar/ParagraphToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_Toolbar","ParagraphToolbar","_ref","_ref$anchorElem","anchorElem","document","body","default","createElement","Toolbar","type","exports"],"sources":["ParagraphToolbar.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { Toolbar } from \"~/components/Toolbar/Toolbar\";\n\ninterface ParagraphToolbarProps {\n    anchorElem?: HTMLElement;\n}\n\n/**\n * Toolbar with actions for rich text editing specific for the paragraph element <p>.\n * @param anchorElem\n * @constructor\n */\nexport const ParagraphToolbar: FC<ParagraphToolbarProps> = ({ anchorElem = document.body }) => {\n    return <Toolbar type={\"paragraph\"} anchorElem={anchorElem} />;\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAMA;AACA;AACA;AACA;AACA;AACO,IAAME,gBAA2C,GAAG,SAA9CA,gBAA2CA,CAAAC,IAAA,EAAuC;EAAA,IAAAC,eAAA,GAAAD,IAAA,CAAjCE,UAAU;IAAVA,UAAU,GAAAD,eAAA,cAAGE,QAAQ,CAACC,IAAI,GAAAH,eAAA;EACpF,oBAAON,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACR,QAAA,CAAAS,OAAO;IAACC,IAAI,EAAE,WAAY;IAACN,UAAU,EAAEA;EAAW,EAAG;AACjE,CAAC;AAACO,OAAA,CAAAV,gBAAA,GAAAA,gBAAA"}