@webiny/lexical-editor 0.0.0-unstable.c59b9cc5b9 → 0.0.0-unstable.c7dec08bb0

package/commands/insertFiles.d.ts

@@ -0,0 +1,14 @@
+import { LexicalCommand, LexicalEditor, NodeKey } from "lexical";
+export interface ImagePayload {
+    id: string;
+    altText: string;
+    caption?: LexicalEditor;
+    height?: number;
+    key?: NodeKey;
+    maxWidth?: number;
+    showCaption?: boolean;
+    src: string;
+    width?: number;
+    captionsEnabled?: boolean;
+}
+export declare const INSERT_IMAGE_COMMAND: LexicalCommand<ImagePayload>;

package/commands/insertFiles.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.INSERT_IMAGE_COMMAND = void 0;
+var _lexical = require("lexical");
+var INSERT_IMAGE_COMMAND = (0, _lexical.createCommand)("INSERT_IMAGE_COMMAND");
+exports.INSERT_IMAGE_COMMAND = INSERT_IMAGE_COMMAND;

package/commands/insertFiles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["INSERT_IMAGE_COMMAND","createCommand"],"sources":["insertFiles.ts"],"sourcesContent":["import { createCommand, LexicalCommand, LexicalEditor, NodeKey } from \"lexical\";\n\nexport interface ImagePayload {\n    id: string;\n    altText: string;\n    caption?: LexicalEditor;\n    height?: number;\n    key?: NodeKey;\n    maxWidth?: number;\n    showCaption?: boolean;\n    src: string;\n    width?: number;\n    captionsEnabled?: boolean;\n}\n\nexport const INSERT_IMAGE_COMMAND: LexicalCommand<ImagePayload> =\n    createCommand(\"INSERT_IMAGE_COMMAND\");\n"],"mappings":";;;;;;AAAA;AAeO,IAAMA,oBAAkD,GAC3D,IAAAC,sBAAa,EAAC,sBAAsB,CAAC;AAAC"}

package/commands/webiny-list.d.ts

@@ -1,6 +1,6 @@
 import { LexicalCommand } from "lexical";
 export declare type WebinyListCommandPayload = {
-    themeStyleId: string;
+    themeStyleId?: string;
 };
 export declare const INSERT_UNORDERED_WEBINY_LIST_COMMAND: LexicalCommand<WebinyListCommandPayload>;
 export declare const INSERT_ORDERED_WEBINY_LIST_COMMAND: LexicalCommand<WebinyListCommandPayload>;

package/commands/webiny-list.js.map

@@ -1 +1 @@
-{"version":3,"names":["INSERT_UNORDERED_WEBINY_LIST_COMMAND","createCommand","INSERT_ORDERED_WEBINY_LIST_COMMAND","REMOVE_WEBINY_LIST_COMMAND"],"sources":["webiny-list.ts"],"sourcesContent":["import { createCommand, LexicalCommand } from \"lexical\";\n\nexport type WebinyListCommandPayload = {\n    themeStyleId: string;\n};\n\nexport const INSERT_UNORDERED_WEBINY_LIST_COMMAND: LexicalCommand<WebinyListCommandPayload> =\n    createCommand(\"INSERT_UNORDERED_WEBINY_LIST_COMMAND\");\nexport const INSERT_ORDERED_WEBINY_LIST_COMMAND: LexicalCommand<WebinyListCommandPayload> =\n    createCommand(\"INSERT_ORDERED_WEBINY_LIST_COMMAND\");\n\nexport const REMOVE_WEBINY_LIST_COMMAND: LexicalCommand<void> = createCommand(\n    \"REMOVE_WEBINY_LIST_COMMAND\"\n);\n"],"mappings":";;;;;;AAAA;AAMO,IAAMA,oCAA8E,GACvF,IAAAC,sBAAa,EAAC,sCAAsC,CAAC;AAAC;AACnD,IAAMC,kCAA4E,GACrF,IAAAD,sBAAa,EAAC,oCAAoC,CAAC;AAAC;AAEjD,IAAME,0BAAgD,GAAG,IAAAF,sBAAa,EACzE,4BAA4B,CAC/B;AAAC"}
+{"version":3,"names":["INSERT_UNORDERED_WEBINY_LIST_COMMAND","createCommand","INSERT_ORDERED_WEBINY_LIST_COMMAND","REMOVE_WEBINY_LIST_COMMAND"],"sources":["webiny-list.ts"],"sourcesContent":["import { createCommand, LexicalCommand } from \"lexical\";\n\nexport type WebinyListCommandPayload = {\n    themeStyleId?: string;\n};\n\nexport const INSERT_UNORDERED_WEBINY_LIST_COMMAND: LexicalCommand<WebinyListCommandPayload> =\n    createCommand(\"INSERT_UNORDERED_WEBINY_LIST_COMMAND\");\nexport const INSERT_ORDERED_WEBINY_LIST_COMMAND: LexicalCommand<WebinyListCommandPayload> =\n    createCommand(\"INSERT_ORDERED_WEBINY_LIST_COMMAND\");\n\nexport const REMOVE_WEBINY_LIST_COMMAND: LexicalCommand<void> = createCommand(\n    \"REMOVE_WEBINY_LIST_COMMAND\"\n);\n"],"mappings":";;;;;;AAAA;AAMO,IAAMA,oCAA8E,GACvF,IAAAC,sBAAa,EAAC,sCAAsC,CAAC;AAAC;AACnD,IAAMC,kCAA4E,GACrF,IAAAD,sBAAa,EAAC,oCAAoC,CAAC;AAAC;AAEjD,IAAME,0BAAgD,GAAG,IAAAF,sBAAa,EACzE,4BAA4B,CAC/B;AAAC"}

package/components/Editor/HeadingEditor.js

@@ -7,23 +7,21 @@ Object.defineProperty(exports, "__esModule", {
 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 _WebinyQuoteNodePlugin = require("../../plugins/WebinyQuoteNodePlugin/WebinyQuoteNodePlugin");
+var _Toolbar = require("../Toolbar/Toolbar");
 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),
+    toolbar: /*#__PURE__*/_react.default.createElement(_Toolbar.Toolbar, 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(_WebinyQuoteNodePlugin.QuotePlugin, null), /*#__PURE__*/_react.default.createElement(_ClickableLinkPlugin.ClickableLinkPlugin, null), /*#__PURE__*/_react.default.createElement(_FloatingLinkEditorPlugin.FloatingLinkEditorPlugin, {
-    anchorElem: document.body
-  }));
+  }, rest, {
+    styles: {
+      padding: 5
+    }
+  }), rest === null || rest === void 0 ? void 0 : rest.children);
 };
 exports.HeadingEditor = HeadingEditor;

package/components/Editor/HeadingEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["HeadingEditor","tag","placeholder","rest","document","body"],"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\";\nimport { QuotePlugin } from \"~/plugins/WebinyQuoteNodePlugin/WebinyQuoteNodePlugin\";\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            <QuotePlugin />\n            <ClickableLinkPlugin />\n            <FloatingLinkEditorPlugin anchorElem={document.body} />\n        </RichTextEditor>\n    );\n};\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAAoF;AAM7E,IAAMA,aAA2C,GAAG,SAA9CA,aAA2C,OAAsC;EAAA,IAAhCC,GAAG,QAAHA,GAAG;IAAEC,WAAW,QAAXA,WAAW;IAAKC,IAAI;EACnF,oBACI,6BAAC,8BAAc;IACX,OAAO,eAAE,6BAAC,8BAAc,OAAI;IAC5B,GAAG,EAAEF,GAAG,aAAHA,GAAG,cAAHA,GAAG,GAAI,IAAK;IACjB,WAAW,EAAEC,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAI;EAAkC,GAC1DC,IAAI,gBAER,6BAAC,6BAAU,OAAG,eACd,6BAAC,kCAAW,OAAG,eACf,6BAAC,wCAAmB,OAAG,eACvB,6BAAC,kDAAwB;IAAC,UAAU,EAAEC,QAAQ,CAACC;EAAK,EAAG,CAC1C;AAEzB,CAAC;AAAC"}
+{"version":3,"names":["HeadingEditor","tag","placeholder","rest","padding","children"],"sources":["HeadingEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { RichTextEditor, RichTextEditorProps } from \"~/components/Editor/RichTextEditor\";\nimport { Toolbar } from \"~/components/Toolbar/Toolbar\";\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={<Toolbar />}\n            tag={tag ?? \"h1\"}\n            placeholder={placeholder ?? \"Enter your heading text here...\"}\n            {...rest}\n            styles={{ padding: 5 }}\n        >\n            {rest?.children}\n        </RichTextEditor>\n    );\n};\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AAAuD;AAMhD,IAAMA,aAA2C,GAAG,SAA9CA,aAA2C,OAAsC;EAAA,IAAhCC,GAAG,QAAHA,GAAG;IAAEC,WAAW,QAAXA,WAAW;IAAKC,IAAI;EACnF,oBACI,6BAAC,8BAAc;IACX,OAAO,eAAE,6BAAC,gBAAO,OAAI;IACrB,GAAG,EAAEF,GAAG,aAAHA,GAAG,cAAHA,GAAG,GAAI,IAAK;IACjB,WAAW,EAAEC,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAI;EAAkC,GAC1DC,IAAI;IACR,MAAM,EAAE;MAAEC,OAAO,EAAE;IAAE;EAAE,IAEtBD,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEE,QAAQ,CACF;AAEzB,CAAC;AAAC"}

package/components/Editor/ParagraphEditor.js

@@ -7,24 +7,21 @@ Object.defineProperty(exports, "__esModule", {
 exports.ParagraphEditor = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
-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 _WebinyListPlugin = require("../../plugins/WebinyListPLugin/WebinyListPlugin");
+var _Toolbar = require("../Toolbar/Toolbar");
 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),
+    toolbar: /*#__PURE__*/_react.default.createElement(_Toolbar.Toolbar, 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(_WebinyListPlugin.WebinyListPlugin, null), /*#__PURE__*/_react.default.createElement(_CodeHighlightPlugin.CodeHighlightPlugin, null), /*#__PURE__*/_react.default.createElement(_ClickableLinkPlugin.ClickableLinkPlugin, null), /*#__PURE__*/_react.default.createElement(_FloatingLinkEditorPlugin.FloatingLinkEditorPlugin, {
-    anchorElem: document.body
-  }));
+  }, rest, {
+    styles: {
+      padding: 5
+    }
+  }), rest === null || rest === void 0 ? void 0 : rest.children);
 };
 exports.ParagraphEditor = ParagraphEditor;

package/components/Editor/ParagraphEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["ParagraphEditor","placeholder","tag","rest","document","body"],"sources":["ParagraphEditor.tsx"],"sourcesContent":["import React from \"react\";\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\";\nimport { WebinyListPlugin } from \"~/plugins/WebinyListPLugin/WebinyListPlugin\";\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            <WebinyListPlugin />\n            <CodeHighlightPlugin />\n            <ClickableLinkPlugin />\n            <FloatingLinkEditorPlugin anchorElem={document.body} />\n        </RichTextEditor>\n    );\n};\n\nexport { ParagraphEditor };\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAA+E;AAM/E,IAAMA,eAAsD,GAAG,SAAzDA,eAAsD,OAAsC;EAAA,IAAhCC,WAAW,QAAXA,WAAW;IAAEC,GAAG,QAAHA,GAAG;IAAKC,IAAI;EACvF,oBACI,6BAAC,8BAAc;IACX,OAAO,eAAE,6BAAC,kCAAgB,OAAI;IAC9B,GAAG,EAAED,GAAG,aAAHA,GAAG,cAAHA,GAAG,GAAI,GAAI;IAChB,WAAW,EAAED,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAI;EAA0B,GAClDE,IAAI,gBAER,6BAAC,6BAAU,OAAG,eACd,6BAAC,kCAAgB,OAAG,eACpB,6BAAC,wCAAmB,OAAG,eACvB,6BAAC,wCAAmB,OAAG,eACvB,6BAAC,kDAAwB;IAAC,UAAU,EAAEC,QAAQ,CAACC;EAAK,EAAG,CAC1C;AAEzB,CAAC;AAAC"}
+{"version":3,"names":["ParagraphEditor","placeholder","tag","rest","padding","children"],"sources":["ParagraphEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { RichTextEditor, RichTextEditorProps } from \"~/components/Editor/RichTextEditor\";\nimport { Toolbar } from \"~/components/Toolbar/Toolbar\";\n\ninterface ParagraphLexicalEditorProps extends RichTextEditorProps {\n    tag?: \"p\";\n}\n\nconst ParagraphEditor: React.FC<ParagraphLexicalEditorProps> = ({ placeholder, tag, ...rest }) => {\n    return (\n        <RichTextEditor\n            toolbar={<Toolbar />}\n            tag={tag ?? \"p\"}\n            placeholder={placeholder ?? \"Enter your text here...\"}\n            {...rest}\n            styles={{ padding: 5 }}\n        >\n            {rest?.children}\n        </RichTextEditor>\n    );\n};\n\nexport { ParagraphEditor };\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AAAuD;AAMvD,IAAMA,eAAsD,GAAG,SAAzDA,eAAsD,OAAsC;EAAA,IAAhCC,WAAW,QAAXA,WAAW;IAAEC,GAAG,QAAHA,GAAG;IAAKC,IAAI;EACvF,oBACI,6BAAC,8BAAc;IACX,OAAO,eAAE,6BAAC,gBAAO,OAAI;IACrB,GAAG,EAAED,GAAG,aAAHA,GAAG,cAAHA,GAAG,GAAI,GAAI;IAChB,WAAW,EAAED,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAI;EAA0B,GAClDE,IAAI;IACR,MAAM,EAAE;MAAEC,OAAO,EAAE;IAAE;EAAE,IAEtBD,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEE,QAAQ,CACF;AAEzB,CAAC;AAAC"}

package/components/Editor/RichTextEditor.d.ts

@@ -1,9 +1,11 @@
 import React from "react";
-import { LexicalValue, ThemeEmotionMap } from "../../types";
+import { LexicalValue, ThemeEmotionMap, ToolbarActionPlugin } from "../../types";
 import { Klass, LexicalNode } from "lexical";
 import { WebinyTheme } from "../../themes/webinyLexicalTheme";
 export interface RichTextEditorProps {
     toolbar?: React.ReactNode;
+    staticToolbar?: React.ReactNode;
+    toolbarActionPlugins?: ToolbarActionPlugin[];
     tag?: string;
     onChange?: (json: LexicalValue) => void;
     value: LexicalValue | null;
@@ -19,6 +21,10 @@ export interface RichTextEditorProps {
     width?: number | string;
     theme: WebinyTheme;
     themeEmotionMap?: ThemeEmotionMap;
+    placeholderStyles?: React.CSSProperties;
+    styles?: React.CSSProperties;
+    contentEditableStyles?: React.CSSProperties;
+    classes?: string;
 }
 /**
  * @description Main editor container

package/components/Editor/RichTextEditor.js

@@ -24,18 +24,17 @@ var _RichTextEditorContext = require("../../context/RichTextEditorContext");
 var _isValidLexicalData = require("../../utils/isValidLexicalData");
 var _LexicalUpdateStatePlugin = require("../../plugins/LexicalUpdateStatePlugin");
 var _BlurEventPlugin = require("../../plugins/BlurEventPlugin/BlurEventPlugin");
-var _FontColorPlugin = require("../../plugins/FontColorPlugin/FontColorPlugin");
 var _webinyLexicalTheme = require("../../themes/webinyLexicalTheme");
 var _webinyNodes = require("../../nodes/webinyNodes");
-var _TypographyPlugin = require("../../plugins/TypographyPlugin/TypographyPlugin");
-var _WebinyQuoteNodePlugin = require("../../plugins/WebinyQuoteNodePlugin/WebinyQuoteNodePlugin");
 var _LexicalHistoryPlugin = require("@lexical/react/LexicalHistoryPlugin");
 var _SharedHistoryContext = require("../../context/SharedHistoryContext");
 var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
 var _react2 = require("@emotion/react");
 var _toTypographyEmotionMap = require("../../utils/toTypographyEmotionMap");
+var _LexicalEditorConfig = require("../LexicalEditorConfig/LexicalEditorConfig");
 var BaseRichTextEditor = function BaseRichTextEditor(_ref) {
   var toolbar = _ref.toolbar,
+    staticToolbar = _ref.staticToolbar,
     onChange = _ref.onChange,
     value = _ref.value,
     nodes = _ref.nodes,
@@ -43,13 +42,20 @@ var BaseRichTextEditor = function BaseRichTextEditor(_ref) {
     children = _ref.children,
     onBlur = _ref.onBlur,
     focus = _ref.focus,
+    styles = _ref.styles,
     width = _ref.width,
     height = _ref.height,
     theme = _ref.theme,
-    themeEmotionMap = _ref.themeEmotionMap;
+    themeEmotionMap = _ref.themeEmotionMap,
+    toolbarActionPlugins = _ref.toolbarActionPlugins,
+    contentEditableStyles = _ref.contentEditableStyles,
+    placeholderStyles = _ref.placeholderStyles;
+  var config = (0, _LexicalEditorConfig.useLexicalEditorConfig)();
   var _useSharedHistoryCont = (0, _SharedHistoryContext.useSharedHistoryContext)(),
     historyState = _useSharedHistoryCont.historyState;
-  var placeholderElem = /*#__PURE__*/_react.default.createElement(_Placeholder.Placeholder, null, placeholder || "Enter text...");
+  var placeholderElem = /*#__PURE__*/_react.default.createElement(_Placeholder.Placeholder, {
+    styles: placeholderStyles
+  }, placeholder || "Enter text...");
   var scrollRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(undefined),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -57,11 +63,17 @@ var BaseRichTextEditor = function BaseRichTextEditor(_ref) {
     setFloatingAnchorElem = _useState2[1];
   var _useRichTextEditor = (0, _useRichTextEditor2.useRichTextEditor)(),
     setTheme = _useRichTextEditor.setTheme,
-    setThemeEmotionMap = _useRichTextEditor.setThemeEmotionMap;
+    setThemeEmotionMap = _useRichTextEditor.setThemeEmotionMap,
+    setToolbarActionPlugins = _useRichTextEditor.setToolbarActionPlugins;
   (0, _react.useEffect)(function () {
     setTheme(theme);
     setThemeEmotionMap(themeEmotionMap);
-  }, [themeEmotionMap]);
+  }, [themeEmotionMap, theme]);
+  (0, _react.useEffect)(function () {
+    if (toolbarActionPlugins) {
+      setToolbarActionPlugins(toolbarActionPlugins || []);
+    }
+  }, [toolbarActionPlugins]);
   var onRef = function onRef(_floatingAnchorElem) {
     if (_floatingAnchorElem !== null) {
       setFloatingAnchorElem(_floatingAnchorElem);
@@ -71,13 +83,21 @@ var BaseRichTextEditor = function BaseRichTextEditor(_ref) {
     height: height || "",
     width: width || ""
   };
+  var configNodes = config.nodes.map(function (node) {
+    return node.node;
+  });
+  var configPlugins = config.plugins.map(function (plugin) {
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+      key: plugin.name
+    }, plugin.element);
+  });
   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 || [])),
+    nodes: [].concat((0, _toConsumableArray2.default)(_webinyNodes.WebinyNodes), (0, _toConsumableArray2.default)(configNodes), (0, _toConsumableArray2.default)(nodes || [])),
     theme: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _webinyLexicalTheme.webinyEditorTheme), {}, {
       emotionMap: themeEmotionMap
     })
@@ -86,53 +106,54 @@ var BaseRichTextEditor = function BaseRichTextEditor(_ref) {
     editorState.read(function () {
       if (typeof onChange === "function") {
         var _editorState = editor.getEditorState();
-        //TODO: send plain JSON object
         onChange(JSON.stringify(_editorState.toJSON()));
       }
     });
   }
   return /*#__PURE__*/_react.default.createElement(_LexicalComposer.LexicalComposer, {
     initialConfig: initialConfig
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, staticToolbar && staticToolbar, /*#__PURE__*/_react.default.createElement("div", {
+    className: "editor-shell",
     ref: scrollRef,
-    style: (0, _objectSpread2.default)({}, sizeStyle)
+    style: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles), sizeStyle), {}, {
+      overflow: "auto"
+    })
   }, /*#__PURE__*/_react.default.createElement(_LexicalOnChangePlugin.OnChangePlugin, {
     onChange: handleOnChange
   }), value && /*#__PURE__*/_react.default.createElement(_LexicalUpdateStatePlugin.LexicalUpdateStatePlugin, {
     value: value
-  }), /*#__PURE__*/_react.default.createElement(_LexicalClearEditorPlugin.ClearEditorPlugin, null), /*#__PURE__*/_react.default.createElement(_FontColorPlugin.FontColorPlugin, null), /*#__PURE__*/_react.default.createElement(_TypographyPlugin.TypographyPlugin, null), /*#__PURE__*/_react.default.createElement(_WebinyQuoteNodePlugin.QuotePlugin, null), /*#__PURE__*/_react.default.createElement(_LexicalHistoryPlugin.HistoryPlugin, {
+  }), /*#__PURE__*/_react.default.createElement(_LexicalClearEditorPlugin.ClearEditorPlugin, null), /*#__PURE__*/_react.default.createElement(_LexicalHistoryPlugin.HistoryPlugin, {
     externalHistoryState: historyState
   }), onBlur && /*#__PURE__*/_react.default.createElement(_BlurEventPlugin.BlurEventPlugin, {
     onBlur: onBlur
-  }), focus && /*#__PURE__*/_react.default.createElement(_LexicalAutoFocusPlugin.AutoFocusPlugin, null), children, /*#__PURE__*/_react.default.createElement(_LexicalRichTextPlugin.RichTextPlugin, {
+  }), focus && /*#__PURE__*/_react.default.createElement(_LexicalAutoFocusPlugin.AutoFocusPlugin, null), configPlugins, 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)
+      ref: onRef
     }, /*#__PURE__*/_react.default.createElement(_LexicalContentEditable.ContentEditable, {
       style: (0, _objectSpread2.default)({
         outline: 0
-      }, sizeStyle)
+      }, contentEditableStyles)
     }))),
     placeholder: placeholderElem,
     ErrorBoundary: _LexicalErrorBoundary.default
-  }), floatingAnchorElem && toolbar));
+  }), 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(_react2.ClassNames, null, function (_ref2) {
+  return /*#__PURE__*/_react.default.createElement(_LexicalEditorConfig.LexicalEditorWithConfig, null, /*#__PURE__*/_react.default.createElement(_RichTextEditorContext.RichTextEditorProvider, null, /*#__PURE__*/_react.default.createElement(_react2.ClassNames, null, function (_ref2) {
     var _props$themeEmotionMa;
     var css = _ref2.css;
     var themeEmotionMap = (_props$themeEmotionMa = props === null || props === void 0 ? void 0 : props.themeEmotionMap) !== null && _props$themeEmotionMa !== void 0 ? _props$themeEmotionMa : (0, _toTypographyEmotionMap.toTypographyEmotionMap)(css, props.theme);
     return /*#__PURE__*/_react.default.createElement(_SharedHistoryContext.SharedHistoryContext, null, /*#__PURE__*/_react.default.createElement(BaseRichTextEditor, Object.assign({}, props, {
       themeEmotionMap: themeEmotionMap
     })));
-  }));
+  })));
 });
 exports.RichTextEditor = RichTextEditor;

package/components/Editor/RichTextEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["BaseRichTextEditor","toolbar","onChange","value","nodes","placeholder","children","onBlur","focus","width","height","theme","themeEmotionMap","useSharedHistoryContext","historyState","placeholderElem","scrollRef","useRef","useState","undefined","floatingAnchorElem","setFloatingAnchorElem","useRichTextEditor","setTheme","setThemeEmotionMap","useEffect","onRef","_floatingAnchorElem","sizeStyle","initialConfig","editorState","isValidLexicalData","generateInitialLexicalValue","namespace","onError","error","WebinyNodes","webinyEditorTheme","emotionMap","handleOnChange","editor","read","getEditorState","JSON","stringify","toJSON","outline","LexicalErrorBoundary","RichTextEditor","makeComposable","props","css","toTypographyEmotionMap"],"sources":["RichTextEditor.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { LexicalValue, ThemeEmotionMap } from \"~/types\";\nimport { Placeholder } from \"~/ui/Placeholder\";\nimport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\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\";\nimport { FontColorPlugin } from \"~/plugins/FontColorPlugin/FontColorPlugin\";\nimport { webinyEditorTheme, WebinyTheme } from \"~/themes/webinyLexicalTheme\";\nimport { WebinyNodes } from \"~/nodes/webinyNodes\";\nimport { TypographyPlugin } from \"~/plugins/TypographyPlugin/TypographyPlugin\";\nimport { QuotePlugin } from \"~/plugins/WebinyQuoteNodePlugin/WebinyQuoteNodePlugin\";\nimport { HistoryPlugin } from \"@lexical/react/LexicalHistoryPlugin\";\nimport { SharedHistoryContext, useSharedHistoryContext } from \"~/context/SharedHistoryContext\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { ClassNames } from \"@emotion/react\";\nimport { toTypographyEmotionMap } from \"~/utils/toTypographyEmotionMap\";\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     * @description Theme to be injected into lexical editor\n     */\n    theme: WebinyTheme;\n    themeEmotionMap?: ThemeEmotionMap;\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    theme,\n    themeEmotionMap\n}: RichTextEditorProps) => {\n    const { historyState } = useSharedHistoryContext();\n    const placeholderElem = <Placeholder>{placeholder || \"Enter text...\"}</Placeholder>;\n    const scrollRef = useRef(null);\n    const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLElement | undefined>(\n        undefined\n    );\n    const { setTheme, setThemeEmotionMap } = useRichTextEditor();\n\n    useEffect(() => {\n        setTheme(theme);\n        setThemeEmotionMap(themeEmotionMap);\n    }, [themeEmotionMap]);\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: { ...webinyEditorTheme, emotionMap: themeEmotionMap }\n    };\n\n    function handleOnChange(editorState: EditorState, editor: LexicalEditor) {\n        editorState.read(() => {\n            if (typeof onChange === \"function\") {\n                const editorState = editor.getEditorState();\n                //TODO: send plain JSON object\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                <FontColorPlugin />\n                <TypographyPlugin />\n                <QuotePlugin />\n                <HistoryPlugin externalHistoryState={historyState} />\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            <ClassNames>\n                {({ css }) => {\n                    const themeEmotionMap =\n                        props?.themeEmotionMap ?? toTypographyEmotionMap(css, props.theme);\n                    return (\n                        <SharedHistoryContext>\n                            <BaseRichTextEditor {...props} themeEmotionMap={themeEmotionMap} />\n                        </SharedHistoryContext>\n                    );\n                }}\n            </ClassNames>\n        </RichTextEditorProvider>\n    );\n});\n"],"mappings":"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"}
+{"version":3,"names":["BaseRichTextEditor","toolbar","staticToolbar","onChange","value","nodes","placeholder","children","onBlur","focus","styles","width","height","theme","themeEmotionMap","toolbarActionPlugins","contentEditableStyles","placeholderStyles","config","useLexicalEditorConfig","useSharedHistoryContext","historyState","placeholderElem","scrollRef","useRef","useState","undefined","floatingAnchorElem","setFloatingAnchorElem","useRichTextEditor","setTheme","setThemeEmotionMap","setToolbarActionPlugins","useEffect","onRef","_floatingAnchorElem","sizeStyle","configNodes","map","node","configPlugins","plugins","plugin","name","element","initialConfig","editorState","isValidLexicalData","generateInitialLexicalValue","namespace","onError","error","WebinyNodes","webinyEditorTheme","emotionMap","handleOnChange","editor","read","getEditorState","JSON","stringify","toJSON","overflow","outline","LexicalErrorBoundary","RichTextEditor","makeComposable","props","css","toTypographyEmotionMap"],"sources":["RichTextEditor.tsx"],"sourcesContent":["import React, { Fragment, useEffect, useRef, useState } from \"react\";\nimport { LexicalValue, ThemeEmotionMap, ToolbarActionPlugin } from \"~/types\";\nimport { Placeholder } from \"~/ui/Placeholder\";\nimport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\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\";\nimport { webinyEditorTheme, WebinyTheme } from \"~/themes/webinyLexicalTheme\";\nimport { WebinyNodes } from \"~/nodes/webinyNodes\";\nimport { HistoryPlugin } from \"@lexical/react/LexicalHistoryPlugin\";\nimport { SharedHistoryContext, useSharedHistoryContext } from \"~/context/SharedHistoryContext\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { ClassNames } from \"@emotion/react\";\nimport { toTypographyEmotionMap } from \"~/utils/toTypographyEmotionMap\";\nimport {\n    LexicalEditorWithConfig,\n    useLexicalEditorConfig\n} from \"~/components/LexicalEditorConfig/LexicalEditorConfig\";\n\nexport interface RichTextEditorProps {\n    toolbar?: React.ReactNode;\n    staticToolbar?: React.ReactNode;\n    toolbarActionPlugins?: ToolbarActionPlugin[];\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     * @description Theme to be injected into lexical editor\n     */\n    theme: WebinyTheme;\n    themeEmotionMap?: ThemeEmotionMap;\n\n    placeholderStyles?: React.CSSProperties;\n    /*\n     * Set inline styles to lexical editor container\n     * */\n    styles?: React.CSSProperties;\n\n    /*\n     * Set inline styles to lexical editor editable content\n     * */\n    contentEditableStyles?: React.CSSProperties;\n\n    /*\n     * Set classes to lexical input container\n     * */\n    classes?: string;\n}\n\nconst BaseRichTextEditor: React.FC<RichTextEditorProps> = ({\n    toolbar,\n    staticToolbar,\n    onChange,\n    value,\n    nodes,\n    placeholder,\n    children,\n    onBlur,\n    focus,\n    styles,\n    width,\n    height,\n    theme,\n    themeEmotionMap,\n    toolbarActionPlugins,\n    contentEditableStyles,\n    placeholderStyles\n}: RichTextEditorProps) => {\n    const config = useLexicalEditorConfig();\n    const { historyState } = useSharedHistoryContext();\n    const placeholderElem = (\n        <Placeholder styles={placeholderStyles}>{placeholder || \"Enter text...\"}</Placeholder>\n    );\n    const scrollRef = useRef(null);\n    const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLElement | undefined>(\n        undefined\n    );\n    const { setTheme, setThemeEmotionMap, setToolbarActionPlugins } = useRichTextEditor();\n\n    useEffect(() => {\n        setTheme(theme);\n        setThemeEmotionMap(themeEmotionMap);\n    }, [themeEmotionMap, theme]);\n\n    useEffect(() => {\n        if (toolbarActionPlugins) {\n            setToolbarActionPlugins(toolbarActionPlugins || []);\n        }\n    }, [toolbarActionPlugins]);\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 configNodes = config.nodes.map(node => node.node);\n    const configPlugins = config.plugins.map(plugin => (\n        <Fragment key={plugin.name}>{plugin.element}</Fragment>\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, ...configNodes, ...(nodes || [])],\n        theme: { ...webinyEditorTheme, emotionMap: themeEmotionMap }\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            <>\n                {staticToolbar && staticToolbar}\n                <div\n                    className={\"editor-shell\"}\n                    ref={scrollRef}\n                    style={{ ...styles, ...sizeStyle, overflow: \"auto\" }}\n                >\n                    {/* data */}\n                    <OnChangePlugin onChange={handleOnChange} />\n                    {value && <LexicalUpdateStatePlugin value={value} />}\n                    <ClearEditorPlugin />\n                    <HistoryPlugin externalHistoryState={historyState} />\n                    {/* Events */}\n                    {onBlur && <BlurEventPlugin onBlur={onBlur} />}\n                    {focus && <AutoFocusPlugin />}\n                    {/* External plugins and components */}\n                    {configPlugins}\n                    {children}\n                    <RichTextPlugin\n                        contentEditable={\n                            <div className=\"editor-scroller\" style={{ ...sizeStyle }}>\n                                <div className=\"editor\" ref={onRef}>\n                                    <ContentEditable\n                                        style={{ outline: 0, ...contentEditableStyles }}\n                                    />\n                                </div>\n                            </div>\n                        }\n                        placeholder={placeholderElem}\n                        ErrorBoundary={LexicalErrorBoundary}\n                    />\n                    {/* Toolbar */}\n                    {floatingAnchorElem && toolbar}\n                </div>\n            </>\n        </LexicalComposer>\n    );\n};\n\n/**\n * @description Main editor container\n */\nexport const RichTextEditor = makeComposable<RichTextEditorProps>(\"RichTextEditor\", props => {\n    return (\n        <LexicalEditorWithConfig>\n            <RichTextEditorProvider>\n                <ClassNames>\n                    {({ css }) => {\n                        const themeEmotionMap =\n                            props?.themeEmotionMap ?? toTypographyEmotionMap(css, props.theme);\n                        return (\n                            <SharedHistoryContext>\n                                <BaseRichTextEditor {...props} themeEmotionMap={themeEmotionMap} />\n                            </SharedHistoryContext>\n                        );\n                    }}\n                </ClassNames>\n            </RichTextEditorProvider>\n        </LexicalEditorWithConfig>\n    );\n});\n"],"mappings":"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"}

package/components/ImageComponent.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 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" />
+import type { LexicalEditor, NodeKey } from "lexical";
+import "~/nodes/imageNode.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;