@webiny/lexical-editor 0.0.0-unstable.e622468070 → 0.0.0-unstable.e6f0dc8ca7

package/components/Editor/RichTextEditor.d.ts

@@ -9,6 +9,7 @@ export type InitialEditorConfig = React.ComponentProps<typeof LexicalComposer>["
 export interface RichTextEditorProps {
     children?: React.ReactNode | React.ReactNode[];
     classes?: string;
+    disabled?: boolean;
     contentEditableStyles?: React.CSSProperties;
     focus?: boolean;
     height?: number | string;

package/components/Editor/RichTextEditor.js

@@ -25,6 +25,7 @@ const BaseRichTextEditor = ({
   focus,
   styles,
   width,
+  disabled = false,
   height,
   contentEditableStyles,
   placeholderStyles,
@@ -55,6 +56,7 @@ const BaseRichTextEditor = ({
   }, plugin.element));
   const initialConfig = {
     editorId: useId(),
+    editable: !disabled,
     namespace: "webiny",
     onError: () => {
       // Ignore errors. We don't want to break the app because of errors caused by config/value updates.
@@ -88,7 +90,10 @@ const BaseRichTextEditor = ({
     }, /*#__PURE__*/React.createElement(RichTextEditorProvider, {
       theme: props.theme,
       toolbarActionPlugins: props.toolbarActionPlugins
-    }, staticToolbar ? staticToolbar : null, /*#__PURE__*/React.createElement("div", {
+    }, staticToolbar && !disabled ? staticToolbar : null, /*#__PURE__*/React.createElement("div", {
+      "data-role": "overlays",
+      className: "relative"
+    }), /*#__PURE__*/React.createElement("div", {
       /* This className is necessary for targeting of editor container from CSS files. */
       className: "editor-shell",
       ref: scrollRef,
@@ -100,7 +105,7 @@ const BaseRichTextEditor = ({
       }
     }, /*#__PURE__*/React.createElement(StateHandlingPlugin, {
       value: props.value,
-      onChange: onChange
+      onChange: disabled ? undefined : onChange
     }), /*#__PURE__*/React.createElement(ClearEditorPlugin, null), /*#__PURE__*/React.createElement(HistoryPlugin, {
       externalHistoryState: historyState
     }), onBlur && /*#__PURE__*/React.createElement(BlurEventPlugin, {
@@ -115,6 +120,7 @@ const BaseRichTextEditor = ({
         className: "editor",
         ref: onRef
       }, /*#__PURE__*/React.createElement(ContentEditable, {
+        disabled: disabled,
         style: {
           outline: 0,
           ...contentEditableStyles
@@ -122,7 +128,7 @@ const BaseRichTextEditor = ({
       }))),
       placeholder: placeholderElem,
       ErrorBoundary: LexicalErrorBoundary
-    }), floatingAnchorElem && toolbar))))
+    }), disabled ? null : floatingAnchorElem && toolbar))))
   );
 };
 

package/components/Editor/RichTextEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Fragment","useId","useRef","useState","LexicalComposer","AutoFocusPlugin","ClearEditorPlugin","RichTextPlugin","LexicalErrorBoundary","makeDecoratable","HistoryPlugin","ContentEditable","allNodes","RichTextEditorProvider","BlurEventPlugin","Placeholder","SharedHistoryContext","useSharedHistoryContext","LexicalEditorWithConfig","useLexicalEditorConfig","StateHandlingPlugin","BaseRichTextEditor","onChange","toolbar","staticToolbar","nodes","placeholder","children","onBlur","focus","styles","width","height","contentEditableStyles","placeholderStyles","props","editorTheme","theme","config","historyState","placeholderElem","createElement","scrollRef","floatingAnchorElem","setFloatingAnchorElem","undefined","onRef","_floatingAnchorElem","sizeStyle","configNodes","map","node","configPlugins","plugins","plugin","key","name","element","initialConfig","editorId","namespace","onError","current","tokens","$colors","colors","$typography","typography","$cacheKey","JSON","stringify","configRef","length","toolbarActionPlugins","className","ref","style","overflow","position","value","externalHistoryState","contentEditable","outline","ErrorBoundary","RichTextEditor"],"sources":["RichTextEditor.tsx"],"sourcesContent":["import React, { Fragment, useId, useRef, useState } from \"react\";\nimport type { Klass, LexicalNode } from \"lexical\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\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 { makeDecoratable } from \"@webiny/react-composition\";\nimport { HistoryPlugin } from \"@lexical/react/LexicalHistoryPlugin\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport type { EditorTheme } from \"@webiny/lexical-theme\";\nimport { allNodes } from \"@webiny/lexical-nodes\";\nimport { RichTextEditorProvider } from \"~/context/RichTextEditorContext.js\";\nimport { BlurEventPlugin } from \"~/plugins/BlurEventPlugin/BlurEventPlugin.js\";\nimport type { LexicalValue, ToolbarActionPlugin } from \"~/types.js\";\nimport { Placeholder } from \"~/ui/Placeholder.js\";\nimport { SharedHistoryContext, useSharedHistoryContext } from \"~/context/SharedHistoryContext.js\";\nimport {\n    LexicalEditorWithConfig,\n    useLexicalEditorConfig\n} from \"~/components/LexicalEditorConfig/LexicalEditorConfig.js\";\nimport { StateHandlingPlugin } from \"~/plugins/StateHandlingPlugin.js\";\n\nexport type InitialEditorConfig = React.ComponentProps<typeof LexicalComposer>[\"initialConfig\"] & {\n    editorId: string;\n};\n\nexport interface RichTextEditorProps {\n    children?: React.ReactNode | React.ReactNode[];\n    classes?: string;\n    contentEditableStyles?: React.CSSProperties;\n    focus?: boolean;\n    height?: number | string;\n    nodes?: Klass<LexicalNode>[];\n    onBlur?: (editorState: LexicalValue) => void;\n    onChange?: (value: LexicalValue) => void;\n    placeholder?: string;\n    placeholderStyles?: React.CSSProperties;\n    staticToolbar?: React.ReactNode;\n    styles?: React.CSSProperties;\n    tag?: string;\n    theme: EditorTheme;\n    toolbarActionPlugins?: ToolbarActionPlugin[];\n    toolbar?: React.ReactNode;\n    value: LexicalValue | null | undefined;\n    configRef?: React.MutableRefObject<InitialEditorConfig | undefined>;\n    width?: number | string;\n}\n\nconst BaseRichTextEditor = ({\n    onChange,\n    toolbar,\n    staticToolbar,\n    nodes,\n    placeholder,\n    children,\n    onBlur,\n    focus,\n    styles,\n    width,\n    height,\n    contentEditableStyles,\n    placeholderStyles,\n    ...props\n}: RichTextEditorProps) => {\n    const editorTheme = useRef(props.theme);\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\n    const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLElement | undefined>(\n        undefined\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        editorId: useId(),\n        namespace: \"webiny\",\n        onError: () => {\n            // Ignore errors. We don't want to break the app because of errors caused by config/value updates.\n            // These are usually resolved in the next component render cycle.\n        },\n        nodes: [...allNodes, ...configNodes, ...(nodes || [])],\n        theme: {\n            ...editorTheme.current.tokens,\n            // I'm not aware of a better way to pass custom data to nodes.\n            // For now, we're using Lexical's theme to pass colors and typography.\n            $colors: editorTheme.current.colors,\n            $typography: editorTheme.current.typography,\n            $cacheKey: JSON.stringify(editorTheme.current)\n        }\n    };\n\n    if (props.configRef) {\n        props.configRef.current = initialConfig;\n    }\n\n    return (\n        /**\n         * Once the LexicalComposer is mounted, it caches the `initialConfig` internally, and all future\n         * updates to the config will be ignored. This is a problem because we pull in Nodes from our config,\n         * and initially, there can be multiple re-renders, while the config object is settled.\n         *\n         * To bypass this issue, we generate a naive `key` based on the number of Nodes.\n         */\n        <SharedHistoryContext>\n            <LexicalComposer initialConfig={initialConfig} key={initialConfig.nodes.length}>\n                <RichTextEditorProvider\n                    theme={props.theme}\n                    toolbarActionPlugins={props.toolbarActionPlugins}\n                >\n                    {staticToolbar ? staticToolbar : null}\n                    <div\n                        /* This className is necessary for targeting of editor container from CSS files. */\n                        className={\"editor-shell\"}\n                        ref={scrollRef}\n                        style={{\n                            ...styles,\n                            ...sizeStyle,\n                            overflow: \"auto\",\n                            position: \"relative\"\n                        }}\n                    >\n                        {/* State plugins. */}\n                        <StateHandlingPlugin value={props.value} onChange={onChange} />\n                        <ClearEditorPlugin />\n                        <HistoryPlugin externalHistoryState={historyState} />\n                        {/* Event plugins. */}\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                </RichTextEditorProvider>\n            </LexicalComposer>\n        </SharedHistoryContext>\n    );\n};\n\n/**\n * @description Main editor container\n */\nexport const RichTextEditor = makeDecoratable(\"RichTextEditor\", (props: RichTextEditorProps) => {\n    return (\n        <LexicalEditorWithConfig>\n            <BaseRichTextEditor {...props} />\n        </LexicalEditorWithConfig>\n    );\n});\n\nexport namespace RichTextEditor {\n    export type InitialConfig = InitialEditorConfig;\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Fragment","useId","useRef","useState","LexicalComposer","AutoFocusPlugin","ClearEditorPlugin","RichTextPlugin","LexicalErrorBoundary","makeDecoratable","HistoryPlugin","ContentEditable","allNodes","RichTextEditorProvider","BlurEventPlugin","Placeholder","SharedHistoryContext","useSharedHistoryContext","LexicalEditorWithConfig","useLexicalEditorConfig","StateHandlingPlugin","BaseRichTextEditor","onChange","toolbar","staticToolbar","nodes","placeholder","children","onBlur","focus","styles","width","disabled","height","contentEditableStyles","placeholderStyles","props","editorTheme","theme","config","historyState","placeholderElem","createElement","scrollRef","floatingAnchorElem","setFloatingAnchorElem","undefined","onRef","_floatingAnchorElem","sizeStyle","configNodes","map","node","configPlugins","plugins","plugin","key","name","element","initialConfig","editorId","editable","namespace","onError","current","tokens","$colors","colors","$typography","typography","$cacheKey","JSON","stringify","configRef","length","toolbarActionPlugins","className","ref","style","overflow","position","value","externalHistoryState","contentEditable","outline","ErrorBoundary","RichTextEditor"],"sources":["RichTextEditor.tsx"],"sourcesContent":["import React, { Fragment, useId, useRef, useState } from \"react\";\nimport type { Klass, LexicalNode } from \"lexical\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\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 { makeDecoratable } from \"@webiny/react-composition\";\nimport { HistoryPlugin } from \"@lexical/react/LexicalHistoryPlugin\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport type { EditorTheme } from \"@webiny/lexical-theme\";\nimport { allNodes } from \"@webiny/lexical-nodes\";\nimport { RichTextEditorProvider } from \"~/context/RichTextEditorContext.js\";\nimport { BlurEventPlugin } from \"~/plugins/BlurEventPlugin/BlurEventPlugin.js\";\nimport type { LexicalValue, ToolbarActionPlugin } from \"~/types.js\";\nimport { Placeholder } from \"~/ui/Placeholder.js\";\nimport { SharedHistoryContext, useSharedHistoryContext } from \"~/context/SharedHistoryContext.js\";\nimport {\n    LexicalEditorWithConfig,\n    useLexicalEditorConfig\n} from \"~/components/LexicalEditorConfig/LexicalEditorConfig.js\";\nimport { StateHandlingPlugin } from \"~/plugins/StateHandlingPlugin.js\";\n\nexport type InitialEditorConfig = React.ComponentProps<typeof LexicalComposer>[\"initialConfig\"] & {\n    editorId: string;\n};\n\nexport interface RichTextEditorProps {\n    children?: React.ReactNode | React.ReactNode[];\n    classes?: string;\n    disabled?: boolean;\n    contentEditableStyles?: React.CSSProperties;\n    focus?: boolean;\n    height?: number | string;\n    nodes?: Klass<LexicalNode>[];\n    onBlur?: (editorState: LexicalValue) => void;\n    onChange?: (value: LexicalValue) => void;\n    placeholder?: string;\n    placeholderStyles?: React.CSSProperties;\n    staticToolbar?: React.ReactNode;\n    styles?: React.CSSProperties;\n    tag?: string;\n    theme: EditorTheme;\n    toolbarActionPlugins?: ToolbarActionPlugin[];\n    toolbar?: React.ReactNode;\n    value: LexicalValue | null | undefined;\n    configRef?: React.MutableRefObject<InitialEditorConfig | undefined>;\n    width?: number | string;\n}\n\nconst BaseRichTextEditor = ({\n    onChange,\n    toolbar,\n    staticToolbar,\n    nodes,\n    placeholder,\n    children,\n    onBlur,\n    focus,\n    styles,\n    width,\n    disabled = false,\n    height,\n    contentEditableStyles,\n    placeholderStyles,\n    ...props\n}: RichTextEditorProps) => {\n    const editorTheme = useRef(props.theme);\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\n    const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLElement | undefined>(\n        undefined\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        editorId: useId(),\n        editable: !disabled,\n        namespace: \"webiny\",\n        onError: () => {\n            // Ignore errors. We don't want to break the app because of errors caused by config/value updates.\n            // These are usually resolved in the next component render cycle.\n        },\n        nodes: [...allNodes, ...configNodes, ...(nodes || [])],\n        theme: {\n            ...editorTheme.current.tokens,\n            // I'm not aware of a better way to pass custom data to nodes.\n            // For now, we're using Lexical's theme to pass colors and typography.\n            $colors: editorTheme.current.colors,\n            $typography: editorTheme.current.typography,\n            $cacheKey: JSON.stringify(editorTheme.current)\n        }\n    };\n\n    if (props.configRef) {\n        props.configRef.current = initialConfig;\n    }\n\n    return (\n        /**\n         * Once the LexicalComposer is mounted, it caches the `initialConfig` internally, and all future\n         * updates to the config will be ignored. This is a problem because we pull in Nodes from our config,\n         * and initially, there can be multiple re-renders, while the config object is settled.\n         *\n         * To bypass this issue, we generate a naive `key` based on the number of Nodes.\n         */\n        <SharedHistoryContext>\n            <LexicalComposer initialConfig={initialConfig} key={initialConfig.nodes.length}>\n                <RichTextEditorProvider\n                    theme={props.theme}\n                    toolbarActionPlugins={props.toolbarActionPlugins}\n                >\n                    {staticToolbar && !disabled ? staticToolbar : null}\n                    <div data-role={\"overlays\"} className={\"relative\"}></div>\n                    <div\n                        /* This className is necessary for targeting of editor container from CSS files. */\n                        className={\"editor-shell\"}\n                        ref={scrollRef}\n                        style={{\n                            ...styles,\n                            ...sizeStyle,\n                            overflow: \"auto\",\n                            position: \"relative\"\n                        }}\n                    >\n                        {/* State plugins. */}\n                        <StateHandlingPlugin\n                            value={props.value}\n                            onChange={disabled ? undefined : onChange}\n                        />\n                        <ClearEditorPlugin />\n                        <HistoryPlugin externalHistoryState={historyState} />\n                        {/* Event plugins. */}\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                                            disabled={disabled}\n                                            style={{ outline: 0, ...contentEditableStyles }}\n                                        />\n                                    </div>\n                                </div>\n                            }\n                            placeholder={placeholderElem}\n                            ErrorBoundary={LexicalErrorBoundary}\n                        />\n                        {/* Toolbar. */}\n                        {disabled ? null : floatingAnchorElem && toolbar}\n                    </div>\n                </RichTextEditorProvider>\n            </LexicalComposer>\n        </SharedHistoryContext>\n    );\n};\n\n/**\n * @description Main editor container\n */\nexport const RichTextEditor = makeDecoratable(\"RichTextEditor\", (props: RichTextEditorProps) => {\n    return (\n        <LexicalEditorWithConfig>\n            <BaseRichTextEditor {...props} />\n        </LexicalEditorWithConfig>\n    );\n});\n\nexport namespace RichTextEditor {\n    export type InitialConfig = InitialEditorConfig;\n}\n"],"mappings":"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","ignoreList":[]}

package/components/Toolbar/StaticToolbar.css

@@ -258,3 +258,419 @@
 .static-toolbar button.item.dropdown-item-active i {
   opacity: 1;
 }
+
+i.bold {
+  background-image: url("../../images/icons/type-bold.svg");
+}
+
+i.italic {
+  background-image: url("../../images/icons/type-italic.svg");
+}
+
+i.code {
+  background-image: url("../../images/icons/code.svg");
+}
+
+i.underline {
+  background-image: url("../../images/icons/type-underline.svg");
+}
+
+i.strikethrough {
+  background-image: url("../../images/icons/type-strikethrough.svg");
+}
+
+i.link {
+  background-image: url("../../images/icons/link.svg");
+}
+
+i.quote {
+  background-image: url("../../images/icons/chat-square-quote.svg");
+}
+
+.icon.left-align,
+i.left-align {
+  background-image: url("../../images/icons/text-left.svg");
+}
+
+i.center-align {
+  background-image: url("../../images/icons/text-center.svg");
+}
+
+i.right-align {
+  background-image: url("../../images/icons/text-right.svg");
+}
+
+i.indent {
+  background-image: url("../../images/icons/indent.svg");
+}
+
+i.outdent {
+  background-image: url("../../images/icons/outdent.svg");
+}
+
+i.justify-align {
+  background-image: url("../../images/icons/justify.svg");
+}
+
+i.chevron-down {
+  background-color: transparent;
+  background-size: contain;
+  display: inline-block;
+  height: 8px;
+  width: 8px;
+  background-image: url("../../images/icons/chevron-down.svg");
+}
+
+i.insert-image,
+.icon.insert-image {
+  background-color: transparent;
+  background-size: contain;
+  display: inline-block;
+  height: 8px;
+  width: 8px;
+  background-image: url("../../images/icons/insert-image.svg");
+}
+
+.icon.bullet-list,
+.icon.bullet {
+  background-image: url("../../images/icons/list-ul.svg");
+}
+
+.icon.numbered-list,
+.icon.number {
+  background-image: url("../../images/icons/list-ol.svg");
+}
+
+i.font-color,
+.icon.font-color {
+  background-image: url("../../images/icons/font-color.svg");
+}
+
+.link-editor .button.active,
+.toolbar .button.active {
+  background-color: rgb(223, 232, 250);
+}
+
+.toolbar .divider {
+  width: 1px;
+  background-color: #eee;
+  margin: 0 4px;
+}
+
+.lexical-dropdown-container {
+  position: absolute;
+  bottom: -5px;
+  left: 0;
+}
+
+.lexical-dropdown {
+  z-index: 10;
+  display: block;
+  position: fixed;
+  box-shadow:
+    0 12px 28px 0 rgba(0, 0, 0, 0.2),
+    0 2px 4px 0 rgba(0, 0, 0, 0.1),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
+  border-radius: 8px;
+  min-height: 40px;
+  background-color: #fff;
+  max-height: 250px;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+.lexical-dropdown.no-scroll {
+  max-height: inherit;
+  overflow: auto;
+  overflow-y: auto;
+}
+
+.lexical-dropdown .item {
+  margin: 0 8px 0 8px;
+  padding: 8px;
+  color: #050505;
+  cursor: pointer;
+  line-height: 16px;
+  font-size: 15px;
+  display: flex;
+  align-content: center;
+  flex-direction: row;
+  flex-shrink: 0;
+  justify-content: space-between;
+  background-color: #fff;
+  border-radius: 8px;
+  border: 0;
+  max-width: 250px;
+  min-width: 100px;
+}
+
+.lexical-dropdown .item.fontsize-item,
+.lexical-dropdown .item.fontsize-item .text {
+  min-width: unset;
+}
+
+.lexical-dropdown .item .active {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  background-size: contain;
+}
+
+.lexical-dropdown .item:first-child {
+  margin-top: 8px;
+}
+
+.lexical-dropdown .item:last-child {
+  margin-bottom: 8px;
+}
+
+.lexical-dropdown .item:hover {
+  background-color: #eee;
+}
+
+.lexical-dropdown .item .text {
+  display: flex;
+  line-height: 20px;
+  flex-grow: 1;
+  min-width: 150px;
+}
+
+.lexical-dropdown .item .icon {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  user-select: none;
+  margin-right: 12px;
+  line-height: 16px;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.lexical-dropdown .divider {
+  width: auto;
+  background-color: #eee;
+  margin: 4px 8px;
+  height: 1px;
+}
+
+@media screen and (max-width: 1100px) {
+  .dropdown-button-text {
+    display: none !important;
+  }
+  .font-size .dropdown-button-text {
+    display: flex !important;
+  }
+  .code-language .dropdown-button-text {
+    display: flex !important;
+  }
+}
+
+button.item i {
+  opacity: 0.6;
+}
+
+button.item.dropdown-item-active {
+  background-color: rgba(223, 232, 250, 0.3);
+}
+
+button.item.dropdown-item-active i {
+  opacity: 1;
+}
+
+.editor-shell span.editor-image {
+  cursor: default;
+  display: inline-block;
+  position: relative;
+  user-select: none;
+}
+
+.editor-shell .editor-image img {
+  max-width: 100%;
+  cursor: default;
+}
+
+.editor-shell .editor-image img.focused {
+  outline: 2px solid rgb(60, 132, 244);
+  user-select: none;
+}
+
+.editor-shell .editor-image img.focused.draggable {
+  cursor: grab;
+}
+
+.editor-shell .editor-image img.focused.draggable:active {
+  cursor: grabbing;
+}
+
+.editor-shell .editor-image .image-caption-container .tree-view-output {
+  margin: 0;
+  border-radius: 0;
+}
+
+.editor-shell .editor-image .image-caption-container {
+  display: block;
+  position: absolute;
+  bottom: 4px;
+  left: 0;
+  right: 0;
+  padding: 0;
+  margin: 0;
+  border-top: 1px solid #fff;
+  background-color: #ffffffe6;
+  min-width: 100px;
+  color: #000;
+  overflow: hidden;
+}
+
+.editor-shell .editor-image .image-caption-button {
+  display: block;
+  position: absolute;
+  bottom: 20px;
+  left: 0;
+  right: 0;
+  width: 30%;
+  padding: 10px;
+  margin: 0 auto;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 5px;
+  background-color: #00000080;
+  min-width: 100px;
+  color: #fff;
+  cursor: pointer;
+  user-select: none;
+}
+
+.editor-shell .editor-image .image-caption-button:hover {
+  background-color: #3c84f480;
+}
+
+.editor-shell .editor-image .image-resizer {
+  display: block;
+  width: 7px;
+  height: 7px;
+  position: absolute;
+  background-color: #3c84f4;
+  border: 1px solid #fff;
+}
+
+.editor-shell .editor-image .image-resizer.image-resizer-n {
+  top: -6px;
+  left: 48%;
+  cursor: n-resize;
+}
+
+.editor-shell .editor-image .image-resizer.image-resizer-ne {
+  top: -6px;
+  right: -6px;
+  cursor: ne-resize;
+}
+
+.editor-shell .editor-image .image-resizer.image-resizer-e {
+  bottom: 48%;
+  right: -6px;
+  cursor: e-resize;
+}
+
+.editor-shell .editor-image .image-resizer.image-resizer-se {
+  bottom: -2px;
+  right: -6px;
+  cursor: nwse-resize;
+}
+
+.editor-shell .editor-image .image-resizer.image-resizer-s {
+  bottom: -2px;
+  left: 48%;
+  cursor: s-resize;
+}
+
+.editor-shell .editor-image .image-resizer.image-resizer-sw {
+  bottom: -2px;
+  left: -6px;
+  cursor: sw-resize;
+}
+
+.editor-shell .editor-image .image-resizer.image-resizer-w {
+  bottom: 48%;
+  left: -6px;
+  cursor: w-resize;
+}
+
+.editor-shell .editor-image .image-resizer.image-resizer-nw {
+  top: -6px;
+  left: -6px;
+  cursor: nw-resize;
+}
+
+.editor-shell span.inline-editor-image {
+  cursor: default;
+  display: inline-block;
+  position: relative;
+  z-index: 1;
+}
+
+.editor-shell .inline-editor-image img {
+  max-width: 100%;
+  cursor: default;
+}
+
+.editor-shell .inline-editor-image img.focused {
+  outline: 2px solid rgb(60, 132, 244);
+}
+
+.editor-shell .inline-editor-image img.focused.draggable {
+  cursor: grab;
+}
+
+.editor-shell .inline-editor-image img.focused.draggable:active {
+  cursor: grabbing;
+}
+
+.editor-shell .inline-editor-image .image-caption-container .tree-view-output {
+  margin: 0;
+  border-radius: 0;
+}
+
+.editor-shell .inline-editor-image.position-full {
+  margin: 1em 0;
+}
+
+.editor-shell .inline-editor-image.position-left {
+  float: left;
+  width: 50%;
+  margin: 1em 1em 0 0;
+}
+
+.editor-shell .inline-editor-image.position-right {
+  float: right;
+  width: 50%;
+  margin: 1em 0 0 1em;
+}
+
+.editor-shell .inline-editor-image .image-edit-button {
+  display: block;
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  padding: 6px 8px;
+  margin: 0 auto;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 5px;
+  background-color: #00000080;
+  min-width: 60px;
+  color: #fff;
+  cursor: pointer;
+  user-select: none;
+}
+
+.editor-shell .inline-editor-image .image-edit-button:hover {
+  background-color: #3c84f480;
+}
+
+.editor-shell .inline-editor-image .image-caption-container {
+  display: block;
+  background-color: #f4f4f4;
+  min-width: 100%;
+  color: #000;
+  overflow: hidden;
+}

package/components/ToolbarActions/FontColorAction.d.ts

@@ -1,27 +1,27 @@
 import React from "react";
-export declare const FontColorPicker: (() => JSX.Element | null) & {
-    original: () => JSX.Element | null;
+export declare const FontColorPicker: (() => React.JSX.Element | null) & {
+    original: () => React.JSX.Element | null;
     originalName: string;
     displayName: string;
 } & {
-    original: (() => JSX.Element | null) & {
-        original: () => JSX.Element | null;
+    original: (() => React.JSX.Element | null) & {
+        original: () => React.JSX.Element | null;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(() => JSX.Element | null) & {
-        original: () => JSX.Element | null;
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(() => React.JSX.Element | null) & {
+        original: () => React.JSX.Element | null;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 };
 interface FontActionColorPicker {
-    element: JSX.Element;
+    element: React.JSX.Element;
 }
-declare const FontActionColorPicker: ({ element }: FontActionColorPicker) => JSX.Element;
+declare const FontActionColorPicker: ({ element }: FontActionColorPicker) => React.JSX.Element;
 export type FontColorAction = React.ComponentType<unknown> & {
     ColorPicker: typeof FontActionColorPicker;
 };

package/components/ToolbarActions/FontColorAction.js

@@ -33,10 +33,6 @@ export const FontColorAction = () => {
     return $isFontColorNode(node) ? node.getColorStyle().color : "#000";
   });
   const onFontColorSelect = useCallback((colorValue, themeColorName) => {
-    console.log({
-      colorValue,
-      themeColorName
-    });
     editor.dispatchCommand(ADD_FONT_COLOR_COMMAND, {
       color: new ThemeColorValue(colorValue, themeColorName)
     });

package/components/ToolbarActions/FontColorAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useMemo","Compose","makeDecoratable","FontColorActionContext","$isFontColorNode","ADD_FONT_COLOR_COMMAND","ThemeColorValue","getSelectedNode","useDeriveValueFromSelection","useRichTextEditor","FontColorPicker","console","log","FontActionColorPicker","element","createElement","component","with","FontColorAction","editor","fontColor","rangeSelection","node","getColorStyle","color","onFontColorSelect","colorValue","themeColorName","dispatchCommand","context","value","applyColor","Provider","ColorPicker"],"sources":["FontColorAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from \"react\";\nimport type { LexicalCommand } from \"lexical\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport { FontColorActionContext } from \"~/context/FontColorActionContext.js\";\nimport type { FontColorPayload } from \"@webiny/lexical-nodes\";\nimport { $isFontColorNode, ADD_FONT_COLOR_COMMAND, ThemeColorValue } from \"@webiny/lexical-nodes\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode.js\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection.js\";\nimport { useRichTextEditor } from \"~/hooks/index.js\";\n\nexport const FontColorPicker = makeDecoratable(\"FontColorPicker\", (): JSX.Element | null => {\n    useEffect(() => {\n        console.log(\"Default FontColorPicker, please add your own component\");\n    }, []);\n    return null;\n});\n\ninterface FontActionColorPicker {\n    element: JSX.Element;\n}\n\nconst FontActionColorPicker = ({ element }: FontActionColorPicker): JSX.Element => {\n    return <Compose component={FontColorPicker} with={() => () => element} />;\n};\n\nexport type FontColorAction = React.ComponentType<unknown> & {\n    ColorPicker: typeof FontActionColorPicker;\n};\n\nexport const FontColorAction: FontColorAction = () => {\n    const { editor } = useRichTextEditor();\n    const fontColor = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return \"#000\";\n        }\n\n        const node = getSelectedNode(rangeSelection);\n        return $isFontColorNode(node) ? node.getColorStyle().color : \"#000\";\n    });\n\n    const onFontColorSelect = useCallback(\n        (colorValue: string, themeColorName: string | undefined) => {\n            console.log({ colorValue, themeColorName });\n            editor.dispatchCommand<LexicalCommand<FontColorPayload>>(ADD_FONT_COLOR_COMMAND, {\n                color: new ThemeColorValue(colorValue, themeColorName)\n            });\n        },\n        []\n    );\n\n    const context = useMemo(\n        () => ({\n            value: fontColor,\n            applyColor: onFontColorSelect\n        }),\n        [onFontColorSelect, fontColor]\n    );\n\n    return (\n        <FontColorActionContext.Provider value={context}>\n            <FontColorPicker />\n        </FontColorActionContext.Provider>\n    );\n};\n\nFontColorAction.ColorPicker = FontActionColorPicker;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,OAAO,QAAQ,OAAO;AAE9D,SAASC,OAAO,EAAEC,eAAe,QAAQ,2BAA2B;AACpE,SAASC,sBAAsB;AAE/B,SAASC,gBAAgB,EAAEC,sBAAsB,EAAEC,eAAe,QAAQ,uBAAuB;AACjG,SAASC,eAAe;AACxB,SAASC,2BAA2B;AACpC,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,eAAe,GAAGR,eAAe,CAAC,iBAAiB,EAAE,MAA0B;EACxFH,SAAS,CAAC,MAAM;IACZY,OAAO,CAACC,GAAG,CAAC,wDAAwD,CAAC;EACzE,CAAC,EAAE,EAAE,CAAC;EACN,OAAO,IAAI;AACf,CAAC,CAAC;AAMF,MAAMC,qBAAqB,GAAGA,CAAC;EAAEC;AAA+B,CAAC,KAAkB;EAC/E,oBAAOjB,KAAA,CAAAkB,aAAA,CAACd,OAAO;IAACe,SAAS,EAAEN,eAAgB;IAACO,IAAI,EAAEA,CAAA,KAAM,MAAMH;EAAQ,CAAE,CAAC;AAC7E,CAAC;AAMD,OAAO,MAAMI,eAAgC,GAAGA,CAAA,KAAM;EAClD,MAAM;IAAEC;EAAO,CAAC,GAAGV,iBAAiB,CAAC,CAAC;EACtC,MAAMW,SAAS,GAAGZ,2BAA2B,CAAC,CAAC;IAAEa;EAAe,CAAC,KAAK;IAClE,IAAI,CAACA,cAAc,EAAE;MACjB,OAAO,MAAM;IACjB;IAEA,MAAMC,IAAI,GAAGf,eAAe,CAACc,cAAc,CAAC;IAC5C,OAAOjB,gBAAgB,CAACkB,IAAI,CAAC,GAAGA,IAAI,CAACC,aAAa,CAAC,CAAC,CAACC,KAAK,GAAG,MAAM;EACvE,CAAC,CAAC;EAEF,MAAMC,iBAAiB,GAAG3B,WAAW,CACjC,CAAC4B,UAAkB,EAAEC,cAAkC,KAAK;IACxDhB,OAAO,CAACC,GAAG,CAAC;MAAEc,UAAU;MAAEC;IAAe,CAAC,CAAC;IAC3CR,MAAM,CAACS,eAAe,CAAmCvB,sBAAsB,EAAE;MAC7EmB,KAAK,EAAE,IAAIlB,eAAe,CAACoB,UAAU,EAAEC,cAAc;IACzD,CAAC,CAAC;EACN,CAAC,EACD,EACJ,CAAC;EAED,MAAME,OAAO,GAAG7B,OAAO,CACnB,OAAO;IACH8B,KAAK,EAAEV,SAAS;IAChBW,UAAU,EAAEN;EAChB,CAAC,CAAC,EACF,CAACA,iBAAiB,EAAEL,SAAS,CACjC,CAAC;EAED,oBACIvB,KAAA,CAAAkB,aAAA,CAACZ,sBAAsB,CAAC6B,QAAQ;IAACF,KAAK,EAAED;EAAQ,gBAC5ChC,KAAA,CAAAkB,aAAA,CAACL,eAAe,MAAE,CACW,CAAC;AAE1C,CAAC;AAEDQ,eAAe,CAACe,WAAW,GAAGpB,qBAAqB","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useEffect","useMemo","Compose","makeDecoratable","FontColorActionContext","$isFontColorNode","ADD_FONT_COLOR_COMMAND","ThemeColorValue","getSelectedNode","useDeriveValueFromSelection","useRichTextEditor","FontColorPicker","console","log","FontActionColorPicker","element","createElement","component","with","FontColorAction","editor","fontColor","rangeSelection","node","getColorStyle","color","onFontColorSelect","colorValue","themeColorName","dispatchCommand","context","value","applyColor","Provider","ColorPicker"],"sources":["FontColorAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from \"react\";\nimport type { LexicalCommand } from \"lexical\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport { FontColorActionContext } from \"~/context/FontColorActionContext.js\";\nimport type { FontColorPayload } from \"@webiny/lexical-nodes\";\nimport { $isFontColorNode, ADD_FONT_COLOR_COMMAND, ThemeColorValue } from \"@webiny/lexical-nodes\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode.js\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection.js\";\nimport { useRichTextEditor } from \"~/hooks/index.js\";\n\nexport const FontColorPicker = makeDecoratable(\"FontColorPicker\", (): React.JSX.Element | null => {\n    useEffect(() => {\n        console.log(\"Default FontColorPicker, please add your own component\");\n    }, []);\n    return null;\n});\n\ninterface FontActionColorPicker {\n    element: React.JSX.Element;\n}\n\nconst FontActionColorPicker = ({ element }: FontActionColorPicker): React.JSX.Element => {\n    return <Compose component={FontColorPicker} with={() => () => element} />;\n};\n\nexport type FontColorAction = React.ComponentType<unknown> & {\n    ColorPicker: typeof FontActionColorPicker;\n};\n\nexport const FontColorAction: FontColorAction = () => {\n    const { editor } = useRichTextEditor();\n    const fontColor = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return \"#000\";\n        }\n\n        const node = getSelectedNode(rangeSelection);\n        return $isFontColorNode(node) ? node.getColorStyle().color : \"#000\";\n    });\n\n    const onFontColorSelect = useCallback(\n        (colorValue: string, themeColorName: string | undefined) => {\n            editor.dispatchCommand<LexicalCommand<FontColorPayload>>(ADD_FONT_COLOR_COMMAND, {\n                color: new ThemeColorValue(colorValue, themeColorName)\n            });\n        },\n        []\n    );\n\n    const context = useMemo(\n        () => ({\n            value: fontColor,\n            applyColor: onFontColorSelect\n        }),\n        [onFontColorSelect, fontColor]\n    );\n\n    return (\n        <FontColorActionContext.Provider value={context}>\n            <FontColorPicker />\n        </FontColorActionContext.Provider>\n    );\n};\n\nFontColorAction.ColorPicker = FontActionColorPicker;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,OAAO,QAAQ,OAAO;AAE9D,SAASC,OAAO,EAAEC,eAAe,QAAQ,2BAA2B;AACpE,SAASC,sBAAsB;AAE/B,SAASC,gBAAgB,EAAEC,sBAAsB,EAAEC,eAAe,QAAQ,uBAAuB;AACjG,SAASC,eAAe;AACxB,SAASC,2BAA2B;AACpC,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,eAAe,GAAGR,eAAe,CAAC,iBAAiB,EAAE,MAAgC;EAC9FH,SAAS,CAAC,MAAM;IACZY,OAAO,CAACC,GAAG,CAAC,wDAAwD,CAAC;EACzE,CAAC,EAAE,EAAE,CAAC;EACN,OAAO,IAAI;AACf,CAAC,CAAC;AAMF,MAAMC,qBAAqB,GAAGA,CAAC;EAAEC;AAA+B,CAAC,KAAwB;EACrF,oBAAOjB,KAAA,CAAAkB,aAAA,CAACd,OAAO;IAACe,SAAS,EAAEN,eAAgB;IAACO,IAAI,EAAEA,CAAA,KAAM,MAAMH;EAAQ,CAAE,CAAC;AAC7E,CAAC;AAMD,OAAO,MAAMI,eAAgC,GAAGA,CAAA,KAAM;EAClD,MAAM;IAAEC;EAAO,CAAC,GAAGV,iBAAiB,CAAC,CAAC;EACtC,MAAMW,SAAS,GAAGZ,2BAA2B,CAAC,CAAC;IAAEa;EAAe,CAAC,KAAK;IAClE,IAAI,CAACA,cAAc,EAAE;MACjB,OAAO,MAAM;IACjB;IAEA,MAAMC,IAAI,GAAGf,eAAe,CAACc,cAAc,CAAC;IAC5C,OAAOjB,gBAAgB,CAACkB,IAAI,CAAC,GAAGA,IAAI,CAACC,aAAa,CAAC,CAAC,CAACC,KAAK,GAAG,MAAM;EACvE,CAAC,CAAC;EAEF,MAAMC,iBAAiB,GAAG3B,WAAW,CACjC,CAAC4B,UAAkB,EAAEC,cAAkC,KAAK;IACxDR,MAAM,CAACS,eAAe,CAAmCvB,sBAAsB,EAAE;MAC7EmB,KAAK,EAAE,IAAIlB,eAAe,CAACoB,UAAU,EAAEC,cAAc;IACzD,CAAC,CAAC;EACN,CAAC,EACD,EACJ,CAAC;EAED,MAAME,OAAO,GAAG7B,OAAO,CACnB,OAAO;IACH8B,KAAK,EAAEV,SAAS;IAChBW,UAAU,EAAEN;EAChB,CAAC,CAAC,EACF,CAACA,iBAAiB,EAAEL,SAAS,CACjC,CAAC;EAED,oBACIvB,KAAA,CAAAkB,aAAA,CAACZ,sBAAsB,CAAC6B,QAAQ;IAACF,KAAK,EAAED;EAAQ,gBAC5ChC,KAAA,CAAAkB,aAAA,CAACL,eAAe,MAAE,CACW,CAAC;AAE1C,CAAC;AAEDQ,eAAe,CAACe,WAAW,GAAGpB,qBAAqB","ignoreList":[]}

package/components/ToolbarActions/TextAlignmentAction.d.ts

@@ -1,27 +1,27 @@
 import React from "react";
-export declare const BaseTextAlignmentDropDown: (() => JSX.Element | null) & {
-    original: () => JSX.Element | null;
+export declare const BaseTextAlignmentDropDown: (() => React.JSX.Element | null) & {
+    original: () => React.JSX.Element | null;
     originalName: string;
     displayName: string;
 } & {
-    original: (() => JSX.Element | null) & {
-        original: () => JSX.Element | null;
+    original: (() => React.JSX.Element | null) & {
+        original: () => React.JSX.Element | null;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(() => JSX.Element | null) & {
-        original: () => JSX.Element | null;
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(() => React.JSX.Element | null) & {
+        original: () => React.JSX.Element | null;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 };
 interface TextAlignmentActionDropdownProps {
-    element: JSX.Element;
+    element: React.JSX.Element;
 }
-declare const TextAlignmentActionDropDown: ({ element }: TextAlignmentActionDropdownProps) => JSX.Element;
+declare const TextAlignmentActionDropDown: ({ element }: TextAlignmentActionDropdownProps) => React.JSX.Element;
 export type TextAlignmentAction = React.ComponentType<unknown> & {
     TextAlignmentDropDown: typeof TextAlignmentActionDropDown;
 };