@webiny/lexical-editor 5.37.0-beta.0 → 5.37.0-beta.1

package/components/ImageComponent.js

@@ -0,0 +1,252 @@
+"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.default = ImageComponent;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+require("../nodes/imageNode.css");
+var _LexicalAutoFocusPlugin = require("@lexical/react/LexicalAutoFocusPlugin");
+var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+var _LexicalErrorBoundary = _interopRequireDefault(require("@lexical/react/LexicalErrorBoundary"));
+var _LexicalHistoryPlugin = require("@lexical/react/LexicalHistoryPlugin");
+var _LexicalNestedComposer = require("@lexical/react/LexicalNestedComposer");
+var _LexicalRichTextPlugin = require("@lexical/react/LexicalRichTextPlugin");
+var _useLexicalNodeSelection = require("@lexical/react/useLexicalNodeSelection");
+var _utils = require("@lexical/utils");
+var _lexical = require("lexical");
+var React = _interopRequireWildcard(require("react"));
+var _Placeholder = require("../ui/Placeholder");
+var _ImageResizer = require("../ui/ImageResizer");
+var _SharedHistoryContext = require("../context/SharedHistoryContext");
+var _ImageNode = require("../nodes/ImageNode");
+var _ContentEditable = require("../ui/ContentEditable");
+/**
+ * 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 imageCache = new Set();
+function useSuspenseImage(src) {
+  if (!imageCache.has(src)) {
+    throw new Promise(function (resolve) {
+      var img = new Image();
+      img.src = src;
+      img.onload = function () {
+        imageCache.add(src);
+        resolve(null);
+      };
+    });
+  }
+}
+function LazyImage(_ref) {
+  var id = _ref.id,
+    altText = _ref.altText,
+    className = _ref.className,
+    imageRef = _ref.imageRef,
+    src = _ref.src,
+    width = _ref.width,
+    height = _ref.height,
+    maxWidth = _ref.maxWidth;
+  useSuspenseImage(src);
+  return /*#__PURE__*/React.createElement("img", {
+    id: id,
+    className: className || undefined,
+    src: src,
+    alt: altText,
+    ref: imageRef,
+    style: {
+      height: height,
+      maxWidth: maxWidth,
+      width: width
+    },
+    draggable: "false"
+  });
+}
+function ImageComponent(_ref2) {
+  var id = _ref2.id,
+    src = _ref2.src,
+    altText = _ref2.altText,
+    nodeKey = _ref2.nodeKey,
+    width = _ref2.width,
+    height = _ref2.height,
+    maxWidth = _ref2.maxWidth,
+    resizable = _ref2.resizable,
+    showCaption = _ref2.showCaption,
+    caption = _ref2.caption,
+    captionsEnabled = _ref2.captionsEnabled;
+  var imageRef = (0, React.useRef)(null);
+  var buttonRef = (0, React.useRef)(null);
+  var _useLexicalNodeSelect = (0, _useLexicalNodeSelection.useLexicalNodeSelection)(nodeKey),
+    _useLexicalNodeSelect2 = (0, _slicedToArray2.default)(_useLexicalNodeSelect, 3),
+    isSelected = _useLexicalNodeSelect2[0],
+    setSelected = _useLexicalNodeSelect2[1],
+    clearSelection = _useLexicalNodeSelect2[2];
+  var _useState = (0, React.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isResizing = _useState2[0],
+    setIsResizing = _useState2[1];
+  var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
+    _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  var _useState3 = (0, React.useState)(null),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    selection = _useState4[0],
+    setSelection = _useState4[1];
+  var activeEditorRef = (0, React.useRef)(null);
+  var onDelete = (0, React.useCallback)(function (payload) {
+    if (isSelected && (0, _lexical.$isNodeSelection)((0, _lexical.$getSelection)())) {
+      var event = payload;
+      event.preventDefault();
+      var node = (0, _lexical.$getNodeByKey)(nodeKey);
+      if ((0, _ImageNode.$isImageNode)(node)) {
+        node.remove();
+      }
+      setSelected(false);
+    }
+    return false;
+  }, [isSelected, nodeKey, setSelected]);
+  var onEnter = (0, React.useCallback)(function (event) {
+    var latestSelection = (0, _lexical.$getSelection)();
+    var buttonElem = buttonRef.current;
+    if (isSelected && (0, _lexical.$isNodeSelection)(latestSelection) && latestSelection.getNodes().length === 1) {
+      if (showCaption) {
+        // Move focus into nested editor
+        (0, _lexical.$setSelection)(null);
+        event.preventDefault();
+        caption.focus();
+        return true;
+      } else if (buttonElem !== null && buttonElem !== document.activeElement) {
+        event.preventDefault();
+        buttonElem.focus();
+        return true;
+      }
+    }
+    return false;
+  }, [caption, isSelected, showCaption]);
+  var onEscape = (0, React.useCallback)(function (event) {
+    if (activeEditorRef.current === caption || buttonRef.current === event.target) {
+      (0, _lexical.$setSelection)(null);
+      editor.update(function () {
+        setSelected(true);
+        var parentRootElement = editor.getRootElement();
+        if (parentRootElement !== null) {
+          parentRootElement.focus();
+        }
+      });
+      return true;
+    }
+    return false;
+  }, [caption, editor, setSelected]);
+  (0, React.useEffect)(function () {
+    var isMounted = true;
+    var unregister = (0, _utils.mergeRegister)(editor.registerUpdateListener(function (_ref3) {
+      var editorState = _ref3.editorState;
+      if (isMounted) {
+        setSelection(editorState.read(function () {
+          return (0, _lexical.$getSelection)();
+        }));
+      }
+    }), editor.registerCommand(_lexical.SELECTION_CHANGE_COMMAND, function (_, activeEditor) {
+      activeEditorRef.current = activeEditor;
+      return false;
+    }, _lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(_lexical.CLICK_COMMAND, function (payload) {
+      var event = payload;
+      if (isResizing) {
+        return true;
+      }
+      if (event.target === imageRef.current) {
+        if (event.shiftKey) {
+          setSelected(!isSelected);
+        } else {
+          clearSelection();
+          setSelected(true);
+        }
+        return true;
+      }
+      return false;
+    }, _lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(_lexical.DRAGSTART_COMMAND, function (event) {
+      if (event.target === imageRef.current) {
+        // TODO This is just a temporary workaround for FF to behave like other browsers.
+        // Ideally, this handles drag & drop too (and all browsers).
+        event.preventDefault();
+        return true;
+      }
+      return false;
+    }, _lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(_lexical.KEY_DELETE_COMMAND, onDelete, _lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(_lexical.KEY_BACKSPACE_COMMAND, onDelete, _lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(_lexical.KEY_ENTER_COMMAND, onEnter, _lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(_lexical.KEY_ESCAPE_COMMAND, onEscape, _lexical.COMMAND_PRIORITY_LOW));
+    return function () {
+      isMounted = false;
+      unregister();
+    };
+  }, [clearSelection, editor, isResizing, isSelected, nodeKey, onDelete, onEnter, onEscape, setSelected]);
+  var setShowCaption = function setShowCaption() {
+    editor.update(function () {
+      var node = (0, _lexical.$getNodeByKey)(nodeKey);
+      if ((0, _ImageNode.$isImageNode)(node)) {
+        node.setShowCaption(true);
+      }
+    });
+  };
+  var onResizeEnd = function onResizeEnd(nextWidth, nextHeight) {
+    // Delay hiding the resize bars for click case
+    setTimeout(function () {
+      setIsResizing(false);
+    }, 200);
+    editor.update(function () {
+      var node = (0, _lexical.$getNodeByKey)(nodeKey);
+      if ((0, _ImageNode.$isImageNode)(node)) {
+        node.setWidthAndHeight(nextWidth, nextHeight);
+      }
+    });
+  };
+  var onResizeStart = function onResizeStart() {
+    setIsResizing(true);
+  };
+  var _useSharedHistoryCont = (0, _SharedHistoryContext.useSharedHistoryContext)(),
+    historyState = _useSharedHistoryCont.historyState;
+  var draggable = isSelected && (0, _lexical.$isNodeSelection)(selection) && !isResizing;
+  var isFocused = isSelected || isResizing;
+  return /*#__PURE__*/React.createElement(React.Suspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    draggable: draggable
+  }, /*#__PURE__*/React.createElement(LazyImage, {
+    id: id,
+    className: isFocused ? "focused ".concat((0, _lexical.$isNodeSelection)(selection) ? "draggable" : "") : null,
+    src: src,
+    altText: altText,
+    imageRef: imageRef,
+    width: width,
+    height: height,
+    maxWidth: maxWidth
+  })), showCaption && /*#__PURE__*/React.createElement("div", {
+    className: "image-caption-container"
+  }, /*#__PURE__*/React.createElement(_LexicalNestedComposer.LexicalNestedComposer, {
+    initialEditor: caption
+  }, /*#__PURE__*/React.createElement(_LexicalAutoFocusPlugin.AutoFocusPlugin, null), /*#__PURE__*/React.createElement(_LexicalHistoryPlugin.HistoryPlugin, {
+    externalHistoryState: historyState
+  }), /*#__PURE__*/React.createElement(_LexicalRichTextPlugin.RichTextPlugin, {
+    contentEditable: /*#__PURE__*/React.createElement(_ContentEditable.LexicalContentEditable, {
+      className: "ImageNode__contentEditable"
+    }),
+    placeholder: /*#__PURE__*/React.createElement(_Placeholder.Placeholder, {
+      className: "ImageNode__placeholder"
+    }, "Enter a caption..."),
+    ErrorBoundary: _LexicalErrorBoundary.default
+  }))), resizable && (0, _lexical.$isNodeSelection)(selection) && isFocused && /*#__PURE__*/React.createElement(_ImageResizer.ImageResizer, {
+    showCaption: showCaption,
+    setShowCaption: setShowCaption,
+    editor: editor,
+    buttonRef: buttonRef,
+    imageRef: imageRef,
+    maxWidth: maxWidth,
+    onResizeStart: onResizeStart,
+    onResizeEnd: onResizeEnd,
+    captionsEnabled: captionsEnabled
+  })));
+}

package/components/ImageComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["require","_LexicalAutoFocusPlugin","_LexicalComposerContext","_LexicalErrorBoundary","_interopRequireDefault","_LexicalHistoryPlugin","_LexicalNestedComposer","_LexicalRichTextPlugin","_useLexicalNodeSelection","_utils","_lexical","React","_interopRequireWildcard","_Placeholder","_ImageResizer","_SharedHistoryContext","_ImageNode","_ContentEditable","imageCache","Set","useSuspenseImage","src","has","Promise","resolve","img","Image","onload","add","LazyImage","_ref","id","altText","className","imageRef","width","height","maxWidth","createElement","undefined","alt","ref","style","draggable","ImageComponent","_ref2","nodeKey","resizable","showCaption","caption","captionsEnabled","useRef","buttonRef","_useLexicalNodeSelect","useLexicalNodeSelection","_useLexicalNodeSelect2","_slicedToArray2","default","isSelected","setSelected","clearSelection","_useState","useState","_useState2","isResizing","setIsResizing","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","editor","_useState3","_useState4","selection","setSelection","activeEditorRef","onDelete","useCallback","payload","$isNodeSelection","$getSelection","event","preventDefault","node","$getNodeByKey","$isImageNode","remove","onEnter","latestSelection","buttonElem","current","getNodes","length","$setSelection","focus","document","activeElement","onEscape","target","update","parentRootElement","getRootElement","useEffect","isMounted","unregister","mergeRegister","registerUpdateListener","_ref3","editorState","read","registerCommand","SELECTION_CHANGE_COMMAND","_","activeEditor","COMMAND_PRIORITY_LOW","CLICK_COMMAND","shiftKey","DRAGSTART_COMMAND","KEY_DELETE_COMMAND","KEY_BACKSPACE_COMMAND","KEY_ENTER_COMMAND","KEY_ESCAPE_COMMAND","setShowCaption","onResizeEnd","nextWidth","nextHeight","setTimeout","setWidthAndHeight","onResizeStart","_useSharedHistoryCont","useSharedHistoryContext","historyState","isFocused","Suspense","fallback","Fragment","concat","LexicalNestedComposer","initialEditor","AutoFocusPlugin","HistoryPlugin","externalHistoryState","RichTextPlugin","contentEditable","LexicalContentEditable","placeholder","Placeholder","ErrorBoundary","LexicalErrorBoundary","ImageResizer"],"sources":["ImageComponent.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 type { GridSelection, LexicalEditor, NodeKey, NodeSelection, RangeSelection } from \"lexical\";\n\nimport \"~/nodes/imageNode.css\";\n\nimport { AutoFocusPlugin } from \"@lexical/react/LexicalAutoFocusPlugin\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport LexicalErrorBoundary from \"@lexical/react/LexicalErrorBoundary\";\nimport { HistoryPlugin } from \"@lexical/react/LexicalHistoryPlugin\";\nimport { LexicalNestedComposer } from \"@lexical/react/LexicalNestedComposer\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport { useLexicalNodeSelection } from \"@lexical/react/useLexicalNodeSelection\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport {\n    $getNodeByKey,\n    $getSelection,\n    $isNodeSelection,\n    $setSelection,\n    CLICK_COMMAND,\n    COMMAND_PRIORITY_LOW,\n    DRAGSTART_COMMAND,\n    KEY_BACKSPACE_COMMAND,\n    KEY_DELETE_COMMAND,\n    KEY_ENTER_COMMAND,\n    KEY_ESCAPE_COMMAND,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport * as React from \"react\";\nimport { Suspense, useCallback, useEffect, useRef, useState } from \"react\";\nimport { Placeholder } from \"~/ui/Placeholder\";\nimport { ImageResizer } from \"~/ui/ImageResizer\";\nimport { useSharedHistoryContext } from \"~/context/SharedHistoryContext\";\nimport { $isImageNode } from \"~/nodes/ImageNode\";\nimport { LexicalContentEditable } from \"~/ui/ContentEditable\";\n\nconst imageCache = new Set();\n\nfunction useSuspenseImage(src: string) {\n    if (!imageCache.has(src)) {\n        throw new Promise(resolve => {\n            const img = new Image();\n            img.src = src;\n            img.onload = () => {\n                imageCache.add(src);\n                resolve(null);\n            };\n        });\n    }\n}\n\nfunction LazyImage({\n    id,\n    altText,\n    className,\n    imageRef,\n    src,\n    width,\n    height,\n    maxWidth\n}: {\n    id: string;\n    altText: string;\n    className: string | null;\n    height: \"inherit\" | number;\n    imageRef: { current: null | HTMLImageElement };\n    maxWidth: number;\n    src: string;\n    width: \"inherit\" | number;\n}): JSX.Element {\n    useSuspenseImage(src);\n    return (\n        <img\n            id={id}\n            className={className || undefined}\n            src={src}\n            alt={altText}\n            ref={imageRef}\n            style={{\n                height,\n                maxWidth,\n                width\n            }}\n            draggable=\"false\"\n        />\n    );\n}\n\nexport default function ImageComponent({\n    id,\n    src,\n    altText,\n    nodeKey,\n    width,\n    height,\n    maxWidth,\n    resizable,\n    showCaption,\n    caption,\n    captionsEnabled\n}: {\n    id: string;\n    altText: string;\n    caption: LexicalEditor;\n    height: \"inherit\" | number;\n    maxWidth: number;\n    nodeKey: NodeKey;\n    resizable: boolean;\n    showCaption: boolean;\n    src: string;\n    width: \"inherit\" | number;\n    captionsEnabled: boolean;\n}): JSX.Element {\n    const imageRef = useRef<null | HTMLImageElement>(null);\n    const buttonRef = useRef<HTMLButtonElement | null>(null);\n    const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);\n    const [isResizing, setIsResizing] = useState<boolean>(false);\n    const [editor] = useLexicalComposerContext();\n    const [selection, setSelection] = useState<\n        RangeSelection | NodeSelection | GridSelection | null\n    >(null);\n    const activeEditorRef = useRef<LexicalEditor | null>(null);\n\n    const onDelete = useCallback(\n        (payload: KeyboardEvent) => {\n            if (isSelected && $isNodeSelection($getSelection())) {\n                const event: KeyboardEvent = payload;\n                event.preventDefault();\n                const node = $getNodeByKey(nodeKey);\n                if ($isImageNode(node)) {\n                    node.remove();\n                }\n                setSelected(false);\n            }\n            return false;\n        },\n        [isSelected, nodeKey, setSelected]\n    );\n\n    const onEnter = useCallback(\n        (event: KeyboardEvent) => {\n            const latestSelection = $getSelection();\n            const buttonElem = buttonRef.current;\n            if (\n                isSelected &&\n                $isNodeSelection(latestSelection) &&\n                latestSelection.getNodes().length === 1\n            ) {\n                if (showCaption) {\n                    // Move focus into nested editor\n                    $setSelection(null);\n                    event.preventDefault();\n                    caption.focus();\n                    return true;\n                } else if (buttonElem !== null && buttonElem !== document.activeElement) {\n                    event.preventDefault();\n                    buttonElem.focus();\n                    return true;\n                }\n            }\n            return false;\n        },\n        [caption, isSelected, showCaption]\n    );\n\n    const onEscape = useCallback(\n        (event: KeyboardEvent) => {\n            if (activeEditorRef.current === caption || buttonRef.current === event.target) {\n                $setSelection(null);\n                editor.update(() => {\n                    setSelected(true);\n                    const parentRootElement = editor.getRootElement();\n                    if (parentRootElement !== null) {\n                        parentRootElement.focus();\n                    }\n                });\n                return true;\n            }\n            return false;\n        },\n        [caption, editor, setSelected]\n    );\n\n    useEffect(() => {\n        let isMounted = true;\n        const unregister = mergeRegister(\n            editor.registerUpdateListener(({ editorState }) => {\n                if (isMounted) {\n                    setSelection(editorState.read(() => $getSelection()));\n                }\n            }),\n            editor.registerCommand(\n                SELECTION_CHANGE_COMMAND,\n                (_, activeEditor) => {\n                    activeEditorRef.current = activeEditor;\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n            editor.registerCommand<MouseEvent>(\n                CLICK_COMMAND,\n                payload => {\n                    const event = payload;\n                    if (isResizing) {\n                        return true;\n                    }\n                    if (event.target === imageRef.current) {\n                        if (event.shiftKey) {\n                            setSelected(!isSelected);\n                        } else {\n                            clearSelection();\n                            setSelected(true);\n                        }\n                        return true;\n                    }\n\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n            editor.registerCommand(\n                DRAGSTART_COMMAND,\n                event => {\n                    if (event.target === imageRef.current) {\n                        // TODO This is just a temporary workaround for FF to behave like other browsers.\n                        // Ideally, this handles drag & drop too (and all browsers).\n                        event.preventDefault();\n                        return true;\n                    }\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n            editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW),\n            editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW),\n            editor.registerCommand(KEY_ENTER_COMMAND, onEnter, COMMAND_PRIORITY_LOW),\n            editor.registerCommand(KEY_ESCAPE_COMMAND, onEscape, COMMAND_PRIORITY_LOW)\n        );\n        return () => {\n            isMounted = false;\n            unregister();\n        };\n    }, [\n        clearSelection,\n        editor,\n        isResizing,\n        isSelected,\n        nodeKey,\n        onDelete,\n        onEnter,\n        onEscape,\n        setSelected\n    ]);\n\n    const setShowCaption = () => {\n        editor.update(() => {\n            const node = $getNodeByKey(nodeKey);\n            if ($isImageNode(node)) {\n                node.setShowCaption(true);\n            }\n        });\n    };\n\n    const onResizeEnd = (nextWidth: \"inherit\" | number, nextHeight: \"inherit\" | number) => {\n        // Delay hiding the resize bars for click case\n        setTimeout(() => {\n            setIsResizing(false);\n        }, 200);\n\n        editor.update(() => {\n            const node = $getNodeByKey(nodeKey);\n            if ($isImageNode(node)) {\n                node.setWidthAndHeight(nextWidth, nextHeight);\n            }\n        });\n    };\n\n    const onResizeStart = () => {\n        setIsResizing(true);\n    };\n\n    const { historyState } = useSharedHistoryContext();\n    const draggable = isSelected && $isNodeSelection(selection) && !isResizing;\n    const isFocused = isSelected || isResizing;\n    return (\n        <Suspense fallback={null}>\n            <>\n                <div draggable={draggable}>\n                    <LazyImage\n                        id={id}\n                        className={\n                            isFocused\n                                ? `focused ${$isNodeSelection(selection) ? \"draggable\" : \"\"}`\n                                : null\n                        }\n                        src={src}\n                        altText={altText}\n                        imageRef={imageRef}\n                        width={width}\n                        height={height}\n                        maxWidth={maxWidth}\n                    />\n                </div>\n                {showCaption && (\n                    <div className=\"image-caption-container\">\n                        <LexicalNestedComposer initialEditor={caption}>\n                            <AutoFocusPlugin />\n                            <HistoryPlugin externalHistoryState={historyState} />\n                            <RichTextPlugin\n                                contentEditable={\n                                    <LexicalContentEditable className=\"ImageNode__contentEditable\" />\n                                }\n                                placeholder={\n                                    <Placeholder className=\"ImageNode__placeholder\">\n                                        Enter a caption...\n                                    </Placeholder>\n                                }\n                                ErrorBoundary={LexicalErrorBoundary}\n                            />\n                        </LexicalNestedComposer>\n                    </div>\n                )}\n                {resizable && $isNodeSelection(selection) && isFocused && (\n                    <ImageResizer\n                        showCaption={showCaption}\n                        setShowCaption={setShowCaption}\n                        editor={editor}\n                        buttonRef={buttonRef}\n                        imageRef={imageRef}\n                        maxWidth={maxWidth}\n                        onResizeStart={onResizeStart}\n                        onResizeEnd={onResizeEnd}\n                        captionsEnabled={captionsEnabled}\n                    />\n                )}\n            </>\n        </Suspense>\n    );\n}\n"],"mappings":"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"}

package/components/LexicalEditorConfig/LexicalEditorConfig.d.ts

@@ -1,11 +1,20 @@
 import React from "react";
-import { FontColorAction } from "../ToolbarActions/FontColorAction";
-import { TypographyAction } from "../ToolbarActions/TypographyAction";
-import { TextAlignmentAction } from "../ToolbarActions/TextAlignmentAction";
-interface LexicalEditorConfig extends React.FC<unknown> {
-    FontColorAction: typeof FontColorAction;
-    TypographyAction: typeof TypographyAction;
-    TextAlignmentAction: typeof TextAlignmentAction;
-}
-export declare const LexicalEditorConfig: LexicalEditorConfig;
-export {};
+import { ToolbarElementConfig } from "./components/ToolbarElement";
+import { PluginConfig } from "./components/Plugin";
+import { NodeConfig } from "./components/Node";
+export declare const LexicalEditorConfig: {
+    ({ children }: {
+        children: React.ReactNode;
+    }): JSX.Element;
+    ToolbarElement: React.FC<import("./components/ToolbarElement").ToolbarElementProps>;
+    Plugin: React.FC<import("./components/Plugin").PluginProps>;
+    Node: React.FC<import("./components/Node").NodeProps>;
+};
+export declare const LexicalEditorWithConfig: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare function useLexicalEditorConfig(): {
+    toolbarElements: ToolbarElementConfig[];
+    plugins: PluginConfig[];
+    nodes: NodeConfig[];
+};

package/components/LexicalEditorConfig/LexicalEditorConfig.js

@@ -1,19 +1,73 @@
 "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.LexicalEditorConfig = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _FontColorAction = require("../ToolbarActions/FontColorAction");
-var _TypographyAction = require("../ToolbarActions/TypographyAction");
-var _TextAlignmentAction = require("../ToolbarActions/TextAlignmentAction");
-var LexicalEditorConfig = function LexicalEditorConfig(_ref) {
+exports.LexicalEditorWithConfig = exports.LexicalEditorConfig = void 0;
+exports.useLexicalEditorConfig = useLexicalEditorConfig;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactComposition = require("@webiny/react-composition");
+var _reactProperties = require("@webiny/react-properties");
+var _ToolbarElement = require("./components/ToolbarElement");
+var _Plugin = require("./components/Plugin");
+var _Node = require("./components/Node");
+var LexicalEditorConfigApply = (0, _reactComposition.makeComposable)("LexicalEditorConfigApply", function (_ref) {
   var children = _ref.children;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+});
+var createHOC = function createHOC(newChildren) {
+  return function (BaseComponent) {
+    return function ConfigHOC(_ref2) {
+      var children = _ref2.children;
+      return /*#__PURE__*/_react.default.createElement(BaseComponent, null, newChildren, children);
+    };
+  };
+};
+var LexicalEditorConfig = function LexicalEditorConfig(_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/_react.default.createElement(_reactComposition.Compose, {
+    component: LexicalEditorConfigApply,
+    with: createHOC(children)
+  });
 };
 exports.LexicalEditorConfig = LexicalEditorConfig;
-LexicalEditorConfig.FontColorAction = _FontColorAction.FontColorAction;
-LexicalEditorConfig.TypographyAction = _TypographyAction.TypographyAction;
-LexicalEditorConfig.TextAlignmentAction = _TextAlignmentAction.TextAlignmentAction;
+LexicalEditorConfig.ToolbarElement = _ToolbarElement.ToolbarElement;
+LexicalEditorConfig.Plugin = _Plugin.Plugin;
+LexicalEditorConfig.Node = _Node.Node;
+var ViewContext = /*#__PURE__*/_react.default.createContext({
+  properties: []
+});
+var LexicalEditorWithConfig = function LexicalEditorWithConfig(_ref4) {
+  var children = _ref4.children;
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    properties = _useState2[0],
+    setProperties = _useState2[1];
+  var context = {
+    properties: properties
+  };
+  var stateUpdater = function stateUpdater(properties) {
+    setProperties(properties);
+  };
+  return /*#__PURE__*/_react.default.createElement(ViewContext.Provider, {
+    value: context
+  }, /*#__PURE__*/_react.default.createElement(_reactProperties.Properties, {
+    onChange: stateUpdater
+  }, /*#__PURE__*/_react.default.createElement(LexicalEditorConfigApply, null), children));
+};
+exports.LexicalEditorWithConfig = LexicalEditorWithConfig;
+function useLexicalEditorConfig() {
+  var _useContext = (0, _react.useContext)(ViewContext),
+    properties = _useContext.properties;
+  var config = (0, _react.useMemo)(function () {
+    return (0, _reactProperties.toObject)(properties);
+  }, [properties]);
+  return {
+    toolbarElements: config.toolbarElements || [],
+    plugins: config.plugins || [],
+    nodes: config.nodes || []
+  };
+}

package/components/LexicalEditorConfig/LexicalEditorConfig.js.map

@@ -1 +1 @@
-{"version":3,"names":["LexicalEditorConfig","children","FontColorAction","TypographyAction","TextAlignmentAction"],"sources":["LexicalEditorConfig.tsx"],"sourcesContent":["import React from \"react\";\nimport { FontColorAction } from \"~/components/ToolbarActions/FontColorAction\";\nimport { TypographyAction } from \"~/components/ToolbarActions/TypographyAction\";\nimport { TextAlignmentAction } from \"../ToolbarActions/TextAlignmentAction\";\n\ninterface LexicalEditorConfig extends React.FC<unknown> {\n    FontColorAction: typeof FontColorAction;\n    TypographyAction: typeof TypographyAction;\n    TextAlignmentAction: typeof TextAlignmentAction;\n}\n\nexport const LexicalEditorConfig: LexicalEditorConfig = ({ children }) => {\n    return <>{children}</>;\n};\n\nLexicalEditorConfig.FontColorAction = FontColorAction;\nLexicalEditorConfig.TypographyAction = TypographyAction;\nLexicalEditorConfig.TextAlignmentAction = TextAlignmentAction;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AAQO,IAAMA,mBAAwC,GAAG,SAA3CA,mBAAwC,OAAqB;EAAA,IAAfC,QAAQ,QAARA,QAAQ;EAC/D,oBAAO,4DAAGA,QAAQ,CAAI;AAC1B,CAAC;AAAC;AAEFD,mBAAmB,CAACE,eAAe,GAAGA,gCAAe;AACrDF,mBAAmB,CAACG,gBAAgB,GAAGA,kCAAgB;AACvDH,mBAAmB,CAACI,mBAAmB,GAAGA,wCAAmB"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactComposition","_reactProperties","_ToolbarElement","_Plugin","_Node","LexicalEditorConfigApply","makeComposable","_ref","children","default","createElement","Fragment","createHOC","newChildren","BaseComponent","ConfigHOC","_ref2","LexicalEditorConfig","_ref3","Compose","component","with","exports","ToolbarElement","Plugin","Node","ViewContext","React","createContext","properties","LexicalEditorWithConfig","_ref4","_useState","useState","_useState2","_slicedToArray2","setProperties","context","stateUpdater","Provider","value","Properties","onChange","useLexicalEditorConfig","_useContext","useContext","config","useMemo","toObject","toolbarElements","plugins","nodes"],"sources":["LexicalEditorConfig.tsx"],"sourcesContent":["import React, { useContext, useMemo, useState } from \"react\";\nimport { makeComposable, Compose, HigherOrderComponent } from \"@webiny/react-composition\";\nimport { Property, Properties, toObject } from \"@webiny/react-properties\";\nimport { ToolbarElement, ToolbarElementConfig } from \"./components/ToolbarElement\";\nimport { Plugin, PluginConfig } from \"./components/Plugin\";\nimport { Node, NodeConfig } from \"./components/Node\";\n\nconst LexicalEditorConfigApply = makeComposable(\"LexicalEditorConfigApply\", ({ children }) => {\n    return <>{children}</>;\n});\n\nconst createHOC =\n    (newChildren: React.ReactNode): HigherOrderComponent =>\n    BaseComponent => {\n        return function ConfigHOC({ children }) {\n            return (\n                <BaseComponent>\n                    {newChildren}\n                    {children}\n                </BaseComponent>\n            );\n        };\n    };\n\nexport const LexicalEditorConfig = ({ children }: { children: React.ReactNode }) => {\n    return <Compose component={LexicalEditorConfigApply} with={createHOC(children)} />;\n};\n\nLexicalEditorConfig.ToolbarElement = ToolbarElement;\nLexicalEditorConfig.Plugin = Plugin;\nLexicalEditorConfig.Node = Node;\n\ninterface ViewContext {\n    properties: Property[];\n}\n\nconst ViewContext = React.createContext<ViewContext>({ properties: [] });\n\nexport const LexicalEditorWithConfig = ({ children }: { children: React.ReactNode }) => {\n    const [properties, setProperties] = useState<Property[]>([]);\n    const context = { properties };\n\n    const stateUpdater = (properties: Property[]) => {\n        setProperties(properties);\n    };\n\n    return (\n        <ViewContext.Provider value={context}>\n            <Properties onChange={stateUpdater}>\n                <LexicalEditorConfigApply />\n                {children}\n            </Properties>\n        </ViewContext.Provider>\n    );\n};\n\ninterface LexicalEditorConfigData {\n    toolbarElements: ToolbarElementConfig[];\n    plugins: PluginConfig[];\n    nodes: NodeConfig[];\n}\n\nexport function useLexicalEditorConfig() {\n    const { properties } = useContext(ViewContext);\n\n    const config = useMemo(() => {\n        return toObject<LexicalEditorConfigData>(properties);\n    }, [properties]);\n\n    return {\n        toolbarElements: config.toolbarElements || [],\n        plugins: config.plugins || [],\n        nodes: config.nodes || []\n    };\n}\n"],"mappings":"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"}

package/components/LexicalEditorConfig/components/Node.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { Klass, LexicalNode } from "lexical";
+export interface NodeConfig {
+    name: string;
+    node: Klass<LexicalNode>;
+}
+export interface NodeProps {
+    name: string;
+    node?: Klass<LexicalNode>;
+    remove?: boolean;
+    before?: string;
+    after?: string;
+}
+export declare const Node: React.FC<NodeProps>;

package/components/LexicalEditorConfig/components/Node.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Node = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactProperties = require("@webiny/react-properties");
+var Node = function Node(_ref) {
+  var name = _ref.name,
+    node = _ref.node,
+    _ref$after = _ref.after,
+    after = _ref$after === void 0 ? undefined : _ref$after,
+    _ref$before = _ref.before,
+    before = _ref$before === void 0 ? undefined : _ref$before,
+    _ref$remove = _ref.remove,
+    remove = _ref$remove === void 0 ? false : _ref$remove;
+  var placeBefore = before !== undefined ? "node:".concat(before) : undefined;
+  var placeAfter = after !== undefined ? "node:".concat(after) : undefined;
+  return /*#__PURE__*/_react.default.createElement(_reactProperties.Property, {
+    id: "nodes:".concat(name),
+    name: "nodes",
+    array: true,
+    before: placeBefore,
+    after: placeAfter,
+    remove: remove
+  }, /*#__PURE__*/_react.default.createElement(_reactProperties.Property, {
+    id: "node:".concat(name, ":name"),
+    name: "name",
+    value: name
+  }), node ? /*#__PURE__*/_react.default.createElement(_reactProperties.Property, {
+    id: "node:".concat(name, ":node"),
+    name: "node",
+    value: node
+  }) : null);
+};
+exports.Node = Node;

package/components/LexicalEditorConfig/components/Node.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactProperties","Node","_ref","name","node","_ref$after","after","undefined","_ref$before","before","_ref$remove","remove","placeBefore","concat","placeAfter","default","createElement","Property","id","array","value","exports"],"sources":["Node.tsx"],"sourcesContent":["import React from \"react\";\nimport { Property } from \"@webiny/react-properties\";\nimport { Klass, LexicalNode } from \"lexical\";\n\nexport interface NodeConfig {\n    name: string;\n    node: Klass<LexicalNode>;\n}\n\nexport interface NodeProps {\n    name: string;\n    node?: Klass<LexicalNode>;\n    remove?: boolean;\n    before?: string;\n    after?: string;\n}\n\nexport const Node: React.FC<NodeProps> = ({\n    name,\n    node,\n    after = undefined,\n    before = undefined,\n    remove = false\n}) => {\n    const placeBefore = before !== undefined ? `node:${before}` : undefined;\n    const placeAfter = after !== undefined ? `node:${after}` : undefined;\n\n    return (\n        <Property\n            id={`nodes:${name}`}\n            name={\"nodes\"}\n            array={true}\n            before={placeBefore}\n            after={placeAfter}\n            remove={remove}\n        >\n            <Property id={`node:${name}:name`} name={\"name\"} value={name} />\n            {node ? <Property id={`node:${name}:node`} name={\"node\"} value={node} /> : null}\n        </Property>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AAgBO,IAAME,IAAyB,GAAG,SAA5BA,IAAyBA,CAAAC,IAAA,EAMhC;EAAA,IALFC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IACJC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IAAAC,UAAA,GAAAH,IAAA,CACJI,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAGE,SAAS,GAAAF,UAAA;IAAAG,WAAA,GAAAN,IAAA,CACjBO,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAGD,SAAS,GAAAC,WAAA;IAAAE,WAAA,GAAAR,IAAA,CAClBS,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,KAAK,GAAAA,WAAA;EAEd,IAAME,WAAW,GAAGH,MAAM,KAAKF,SAAS,WAAAM,MAAA,CAAWJ,MAAM,IAAKF,SAAS;EACvE,IAAMO,UAAU,GAAGR,KAAK,KAAKC,SAAS,WAAAM,MAAA,CAAWP,KAAK,IAAKC,SAAS;EAEpE,oBACIV,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAAChB,gBAAA,CAAAiB,QAAQ;IACLC,EAAE,WAAAL,MAAA,CAAWV,IAAI,CAAG;IACpBA,IAAI,EAAE,OAAQ;IACdgB,KAAK,EAAE,IAAK;IACZV,MAAM,EAAEG,WAAY;IACpBN,KAAK,EAAEQ,UAAW;IAClBH,MAAM,EAAEA;EAAO,gBAEfd,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAAChB,gBAAA,CAAAiB,QAAQ;IAACC,EAAE,UAAAL,MAAA,CAAUV,IAAI,UAAQ;IAACA,IAAI,EAAE,MAAO;IAACiB,KAAK,EAAEjB;EAAK,CAAE,CAAC,EAC/DC,IAAI,gBAAGP,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAAChB,gBAAA,CAAAiB,QAAQ;IAACC,EAAE,UAAAL,MAAA,CAAUV,IAAI,UAAQ;IAACA,IAAI,EAAE,MAAO;IAACiB,KAAK,EAAEhB;EAAK,CAAE,CAAC,GAAG,IACrE,CAAC;AAEnB,CAAC;AAACiB,OAAA,CAAApB,IAAA,GAAAA,IAAA"}

package/components/LexicalEditorConfig/components/Plugin.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface PluginConfig {
+    name: string;
+    element: React.ReactElement;
+}
+export interface PluginProps {
+    name: string;
+    element?: React.ReactElement<unknown>;
+    remove?: boolean;
+    before?: string;
+    after?: string;
+}
+export declare const Plugin: React.FC<PluginProps>;

package/components/LexicalEditorConfig/components/Plugin.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Plugin = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactProperties = require("@webiny/react-properties");
+var Plugin = function Plugin(_ref) {
+  var name = _ref.name,
+    element = _ref.element,
+    _ref$after = _ref.after,
+    after = _ref$after === void 0 ? undefined : _ref$after,
+    _ref$before = _ref.before,
+    before = _ref$before === void 0 ? undefined : _ref$before,
+    _ref$remove = _ref.remove,
+    remove = _ref$remove === void 0 ? false : _ref$remove;
+  var placeBefore = before !== undefined ? "plugin:".concat(before) : undefined;
+  var placeAfter = after !== undefined ? "plugin:".concat(after) : undefined;
+  return /*#__PURE__*/_react.default.createElement(_reactProperties.Property, {
+    id: "plugins:".concat(name),
+    name: "plugins",
+    array: true,
+    before: placeBefore,
+    after: placeAfter,
+    remove: remove
+  }, /*#__PURE__*/_react.default.createElement(_reactProperties.Property, {
+    id: "plugin:".concat(name, ":name"),
+    name: "name",
+    value: name
+  }), element ? /*#__PURE__*/_react.default.createElement(_reactProperties.Property, {
+    id: "plugin:".concat(name, ":element"),
+    name: "element",
+    value: element
+  }) : null);
+};
+exports.Plugin = Plugin;

package/components/LexicalEditorConfig/components/Plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactProperties","Plugin","_ref","name","element","_ref$after","after","undefined","_ref$before","before","_ref$remove","remove","placeBefore","concat","placeAfter","default","createElement","Property","id","array","value","exports"],"sources":["Plugin.tsx"],"sourcesContent":["import React from \"react\";\nimport { Property } from \"@webiny/react-properties\";\n\nexport interface PluginConfig {\n    name: string;\n    element: React.ReactElement;\n}\n\nexport interface PluginProps {\n    name: string;\n    element?: React.ReactElement<unknown>;\n    remove?: boolean;\n    before?: string;\n    after?: string;\n}\n\nexport const Plugin: React.FC<PluginProps> = ({\n    name,\n    element,\n    after = undefined,\n    before = undefined,\n    remove = false\n}) => {\n    const placeBefore = before !== undefined ? `plugin:${before}` : undefined;\n    const placeAfter = after !== undefined ? `plugin:${after}` : undefined;\n\n    return (\n        <Property\n            id={`plugins:${name}`}\n            name={\"plugins\"}\n            array={true}\n            before={placeBefore}\n            after={placeAfter}\n            remove={remove}\n        >\n            <Property id={`plugin:${name}:name`} name={\"name\"} value={name} />\n            {element ? (\n                <Property id={`plugin:${name}:element`} name={\"element\"} value={element} />\n            ) : null}\n        </Property>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AAeO,IAAME,MAA6B,GAAG,SAAhCA,MAA6BA,CAAAC,IAAA,EAMpC;EAAA,IALFC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IACJC,OAAO,GAAAF,IAAA,CAAPE,OAAO;IAAAC,UAAA,GAAAH,IAAA,CACPI,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAGE,SAAS,GAAAF,UAAA;IAAAG,WAAA,GAAAN,IAAA,CACjBO,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAGD,SAAS,GAAAC,WAAA;IAAAE,WAAA,GAAAR,IAAA,CAClBS,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,KAAK,GAAAA,WAAA;EAEd,IAAME,WAAW,GAAGH,MAAM,KAAKF,SAAS,aAAAM,MAAA,CAAaJ,MAAM,IAAKF,SAAS;EACzE,IAAMO,UAAU,GAAGR,KAAK,KAAKC,SAAS,aAAAM,MAAA,CAAaP,KAAK,IAAKC,SAAS;EAEtE,oBACIV,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAAChB,gBAAA,CAAAiB,QAAQ;IACLC,EAAE,aAAAL,MAAA,CAAaV,IAAI,CAAG;IACtBA,IAAI,EAAE,SAAU;IAChBgB,KAAK,EAAE,IAAK;IACZV,MAAM,EAAEG,WAAY;IACpBN,KAAK,EAAEQ,UAAW;IAClBH,MAAM,EAAEA;EAAO,gBAEfd,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAAChB,gBAAA,CAAAiB,QAAQ;IAACC,EAAE,YAAAL,MAAA,CAAYV,IAAI,UAAQ;IAACA,IAAI,EAAE,MAAO;IAACiB,KAAK,EAAEjB;EAAK,CAAE,CAAC,EACjEC,OAAO,gBACJP,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAAChB,gBAAA,CAAAiB,QAAQ;IAACC,EAAE,YAAAL,MAAA,CAAYV,IAAI,aAAW;IAACA,IAAI,EAAE,SAAU;IAACiB,KAAK,EAAEhB;EAAQ,CAAE,CAAC,GAC3E,IACE,CAAC;AAEnB,CAAC;AAACiB,OAAA,CAAApB,MAAA,GAAAA,MAAA"}

package/components/LexicalEditorConfig/components/ToolbarElement.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface ToolbarElementConfig {
+    name: string;
+    element: React.ReactElement;
+}
+export interface ToolbarElementProps {
+    name: string;
+    element?: React.ReactElement<unknown>;
+    remove?: boolean;
+    before?: string;
+    after?: string;
+}
+export declare const ToolbarElement: React.FC<ToolbarElementProps>;

package/components/LexicalEditorConfig/components/ToolbarElement.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolbarElement = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactProperties = require("@webiny/react-properties");
+var ToolbarElement = function ToolbarElement(_ref) {
+  var name = _ref.name,
+    element = _ref.element,
+    _ref$after = _ref.after,
+    after = _ref$after === void 0 ? undefined : _ref$after,
+    _ref$before = _ref.before,
+    before = _ref$before === void 0 ? undefined : _ref$before,
+    _ref$remove = _ref.remove,
+    remove = _ref$remove === void 0 ? false : _ref$remove;
+  var placeBefore = before !== undefined ? "element:".concat(before) : undefined;
+  var placeAfter = after !== undefined ? "element:".concat(after) : undefined;
+  return /*#__PURE__*/_react.default.createElement(_reactProperties.Property, {
+    id: "element:".concat(name),
+    name: "toolbarElements",
+    array: true,
+    before: placeBefore,
+    after: placeAfter,
+    remove: remove
+  }, /*#__PURE__*/_react.default.createElement(_reactProperties.Property, {
+    id: "element:".concat(name, ":name"),
+    name: "name",
+    value: name
+  }), element ? /*#__PURE__*/_react.default.createElement(_reactProperties.Property, {
+    id: "element:".concat(name, ":element"),
+    name: "element",
+    value: element
+  }) : null);
+};
+exports.ToolbarElement = ToolbarElement;

package/components/LexicalEditorConfig/components/ToolbarElement.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactProperties","ToolbarElement","_ref","name","element","_ref$after","after","undefined","_ref$before","before","_ref$remove","remove","placeBefore","concat","placeAfter","default","createElement","Property","id","array","value","exports"],"sources":["ToolbarElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { Property } from \"@webiny/react-properties\";\n\nexport interface ToolbarElementConfig {\n    name: string;\n    element: React.ReactElement;\n}\n\nexport interface ToolbarElementProps {\n    name: string;\n    element?: React.ReactElement<unknown>;\n    remove?: boolean;\n    before?: string;\n    after?: string;\n}\n\nexport const ToolbarElement: React.FC<ToolbarElementProps> = ({\n    name,\n    element,\n    after = undefined,\n    before = undefined,\n    remove = false\n}) => {\n    const placeBefore = before !== undefined ? `element:${before}` : undefined;\n    const placeAfter = after !== undefined ? `element:${after}` : undefined;\n\n    return (\n        <Property\n            id={`element:${name}`}\n            name={\"toolbarElements\"}\n            array={true}\n            before={placeBefore}\n            after={placeAfter}\n            remove={remove}\n        >\n            <Property id={`element:${name}:name`} name={\"name\"} value={name} />\n            {element ? (\n                <Property id={`element:${name}:element`} name={\"element\"} value={element} />\n            ) : null}\n        </Property>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AAeO,IAAME,cAA6C,GAAG,SAAhDA,cAA6CA,CAAAC,IAAA,EAMpD;EAAA,IALFC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IACJC,OAAO,GAAAF,IAAA,CAAPE,OAAO;IAAAC,UAAA,GAAAH,IAAA,CACPI,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAGE,SAAS,GAAAF,UAAA;IAAAG,WAAA,GAAAN,IAAA,CACjBO,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAGD,SAAS,GAAAC,WAAA;IAAAE,WAAA,GAAAR,IAAA,CAClBS,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,KAAK,GAAAA,WAAA;EAEd,IAAME,WAAW,GAAGH,MAAM,KAAKF,SAAS,cAAAM,MAAA,CAAcJ,MAAM,IAAKF,SAAS;EAC1E,IAAMO,UAAU,GAAGR,KAAK,KAAKC,SAAS,cAAAM,MAAA,CAAcP,KAAK,IAAKC,SAAS;EAEvE,oBACIV,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAAChB,gBAAA,CAAAiB,QAAQ;IACLC,EAAE,aAAAL,MAAA,CAAaV,IAAI,CAAG;IACtBA,IAAI,EAAE,iBAAkB;IACxBgB,KAAK,EAAE,IAAK;IACZV,MAAM,EAAEG,WAAY;IACpBN,KAAK,EAAEQ,UAAW;IAClBH,MAAM,EAAEA;EAAO,gBAEfd,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAAChB,gBAAA,CAAAiB,QAAQ;IAACC,EAAE,aAAAL,MAAA,CAAaV,IAAI,UAAQ;IAACA,IAAI,EAAE,MAAO;IAACiB,KAAK,EAAEjB;EAAK,CAAE,CAAC,EAClEC,OAAO,gBACJP,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAAChB,gBAAA,CAAAiB,QAAQ;IAACC,EAAE,aAAAL,MAAA,CAAaV,IAAI,aAAW;IAACA,IAAI,EAAE,SAAU;IAACiB,KAAK,EAAEhB;EAAQ,CAAE,CAAC,GAC5E,IACE,CAAC;AAEnB,CAAC;AAACiB,OAAA,CAAApB,cAAA,GAAAA,cAAA"}

package/components/LexicalHtmlRenderer.d.ts

@@ -2,11 +2,13 @@ import React from "react";
 import { LexicalValue, ThemeEmotionMap } from "../types";
 import { Klass, LexicalNode } from "lexical";
 import { WebinyTheme } from "../themes/webinyLexicalTheme";
+import { CSSObject } from "@emotion/react";
 interface LexicalHtmlRendererProps {
     nodes?: Klass<LexicalNode>[];
     value: LexicalValue | null;
     theme: WebinyTheme;
     themeEmotionMap?: ThemeEmotionMap;
+    themeStylesTransformer?: (cssObject: Record<string, any>) => CSSObject;
 }
 export declare const BaseLexicalHtmlRenderer: React.FC<LexicalHtmlRendererProps>;
 /**