npm - @webiny/lexical-editor - Versions diffs - 0.0.0-unstable.df7a8bb475 → 0.0.0-unstable.e2758ee1cf - Mend

@webiny/lexical-editor 0.0.0-unstable.df7a8bb475 → 0.0.0-unstable.e2758ee1cf

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (52) hide show

package/components/Editor/RichTextEditor.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":[]}
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","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 CHANGED Viewed

@@ -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.js CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":[]}
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 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;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/context/RichTextEditorContext.d.ts CHANGED Viewed

@@ -4,6 +4,7 @@ import { type EditorTheme, Theme } from "@webiny/lexical-theme";
 import type { ToolbarActionPlugin } from "../types.js";
 export interface RichTextEditorContext {
     editor: LexicalEditor;
+    getOverlaysElement: () => HTMLElement;
     toolbarActionPlugins: ToolbarActionPlugin[];
     theme: Theme;
 }

package/context/RichTextEditorContext.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { createContext, useMemo } from "react";
+import React, { createContext, useCallback, useMemo } from "react";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { Theme } from "@webiny/lexical-theme";
 export const RichTextEditorContext = /*#__PURE__*/createContext(undefined);
@@ -8,10 +8,23 @@ export const RichTextEditorProvider = ({
   children
 }) => {
   const [editor] = useLexicalComposerContext();
+  const getOverlaysElement = useCallback(() => {
+    const rootElement = editor.getRootElement();
+    if (!rootElement) {
+      return document.body;
+    }
+    const shell = rootElement.closest(".editor-shell");
+    if (!shell) {
+      return document.body;
+    }
+    const overlays = shell.previousElementSibling;
+    return overlays ?? document.body;
+  }, [editor]);
   const internalTheme = useMemo(() => new Theme(theme.colors, theme.typography, theme.tokens), [theme]);
   return /*#__PURE__*/React.createElement(RichTextEditorContext.Provider, {
     value: {
       editor,
+      getOverlaysElement,
       theme: internalTheme,
       toolbarActionPlugins
     }

package/context/RichTextEditorContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["React","createContext","useMemo","useLexicalComposerContext","Theme","RichTextEditorContext","undefined","RichTextEditorProvider","theme","toolbarActionPlugins","children","editor","internalTheme","colors","typography","tokens","createElement","Provider","value"],"sources":["RichTextEditorContext.tsx"],"sourcesContent":["import React, { createContext, useMemo } from \"react\";\nimport type { LexicalEditor } from \"lexical\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { type EditorTheme, Theme } from \"@webiny/lexical-theme\";\nimport type { ToolbarActionPlugin } from \"~/types.js\";\n\nexport interface RichTextEditorContext {\n editor: LexicalEditor;\n toolbarActionPlugins: ToolbarActionPlugin[];\n theme: Theme;\n}\n\nexport const RichTextEditorContext = createContext<RichTextEditorContext \| undefined>(undefined);\n\ninterface RichTextEditorProviderProps {\n theme: EditorTheme;\n toolbarActionPlugins?: ToolbarActionPlugin[];\n children?: React.ReactNode \| React.ReactNode[];\n}\n\nexport const RichTextEditorProvider = ({\n theme,\n toolbarActionPlugins = [],\n children\n}: RichTextEditorProviderProps) => {\n const [editor] = useLexicalComposerContext();\n\n const internalTheme = useMemo(\n () => new Theme(theme.colors, theme.typography, theme.tokens),\n [theme]\n );\n\n return (\n <RichTextEditorContext.Provider\n value={{\n editor,\n theme: internalTheme,\n toolbarActionPlugins\n }}\n >\n {children}\n </RichTextEditorContext.Provider>\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,aAAa,EAAEC,OAAO,QAAQ,OAAO;~~AAErD~~,SAASC,yBAAyB,QAAQ,uCAAuC;AACjF,SAA2BC,KAAK,QAAQ,uBAAuB;~~AAS~~/D,OAAO,MAAMC,qBAAqB,~~gBAAGJ~~,aAAa,~~CAAoCK~~,SAAS,CAAC;AAQhG,OAAO,MAAMC,sBAAsB,GAAGA,CAAC;EACnCC,KAAK;EACLC,oBAAoB,GAAG,EAAE;EACzBC;AACyB,CAAC,KAAK;EAC/B,MAAM,CAACC,MAAM,CAAC,GAAGR,yBAAyB,CAAC,CAAC;EAE5C,MAAMS,aAAa,~~GAAGV~~,OAAO,CACzB,MAAM,IAAIE,KAAK,CAACI,KAAK,~~CAACK~~,MAAM,~~EAAEL~~,KAAK,~~CAACM~~,UAAU,~~EAAEN~~,KAAK,~~CAACO~~,MAAM,CAAC,EAC7D,~~CAACP~~,KAAK,CACV,CAAC;EAED,~~oBACIR~~,KAAA,~~CAAAgB~~,aAAA,~~CAACX~~,qBAAqB,~~CAACY~~,QAAQ;IAC3BC,KAAK,EAAE;~~MACHP~~,MAAM;~~MACNH~~,KAAK,~~EAAEI~~,aAAa;~~MACpBH~~;IACJ;EAAE,GAEDC,QAC2B,CAAC;AAEzC,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["React","createContext","useCallback","useMemo","useLexicalComposerContext","Theme","RichTextEditorContext","undefined","RichTextEditorProvider","theme","toolbarActionPlugins","children","editor","getOverlaysElement","rootElement","getRootElement","document","body","shell","closest","overlays","previousElementSibling","internalTheme","colors","typography","tokens","createElement","Provider","value"],"sources":["RichTextEditorContext.tsx"],"sourcesContent":["import React, { createContext, useCallback, useMemo } from \"react\";\nimport type { LexicalEditor } from \"lexical\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { type EditorTheme, Theme } from \"@webiny/lexical-theme\";\nimport type { ToolbarActionPlugin } from \"~/types.js\";\n\nexport interface RichTextEditorContext {\n editor: LexicalEditor;\n getOverlaysElement: () => HTMLElement;\n toolbarActionPlugins: ToolbarActionPlugin[];\n theme: Theme;\n}\n\nexport const RichTextEditorContext = createContext<RichTextEditorContext \| undefined>(undefined);\n\ninterface RichTextEditorProviderProps {\n theme: EditorTheme;\n toolbarActionPlugins?: ToolbarActionPlugin[];\n children?: React.ReactNode \| React.ReactNode[];\n}\n\nexport const RichTextEditorProvider = ({\n theme,\n toolbarActionPlugins = [],\n children\n}: RichTextEditorProviderProps) => {\n const [editor] = useLexicalComposerContext();\n\n const getOverlaysElement = useCallback(() => {\n const rootElement = editor.getRootElement();\n if (!rootElement) {\n return document.body;\n }\n\n const shell = rootElement.closest(\".editor-shell\");\n if (!shell) {\n return document.body;\n }\n const overlays = shell.previousElementSibling;\n\n return (overlays ?? document.body) as HTMLElement;\n }, [editor]);\n\n const internalTheme = useMemo(\n () => new Theme(theme.colors, theme.typography, theme.tokens),\n [theme]\n );\n\n return (\n <RichTextEditorContext.Provider\n value={{\n editor,\n getOverlaysElement,\n theme: internalTheme,\n toolbarActionPlugins\n }}\n >\n {children}\n </RichTextEditorContext.Provider>\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,aAAa,EAAEC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAElE,SAASC,yBAAyB,QAAQ,uCAAuC;AACjF,SAA2BC,KAAK,QAAQ,uBAAuB;AAU/D,OAAO,MAAMC,qBAAqB,gBAAGL,aAAa,CAAoCM,SAAS,CAAC;AAQhG,OAAO,MAAMC,sBAAsB,GAAGA,CAAC;EACnCC,KAAK;EACLC,oBAAoB,GAAG,EAAE;EACzBC;AACyB,CAAC,KAAK;EAC/B,MAAM,CAACC,MAAM,CAAC,GAAGR,yBAAyB,CAAC,CAAC;EAE5C,MAAMS,kBAAkB,GAAGX,WAAW,CAAC,MAAM;IACzC,MAAMY,WAAW,GAAGF,MAAM,CAACG,cAAc,CAAC,CAAC;IAC3C,IAAI,CAACD,WAAW,EAAE;MACd,OAAOE,QAAQ,CAACC,IAAI;IACxB;IAEA,MAAMC,KAAK,GAAGJ,WAAW,CAACK,OAAO,CAAC,eAAe,CAAC;IAClD,IAAI,CAACD,KAAK,EAAE;MACR,OAAOF,QAAQ,CAACC,IAAI;IACxB;IACA,MAAMG,QAAQ,GAAGF,KAAK,CAACG,sBAAsB;IAE7C,OAAQD,QAAQ,IAAIJ,QAAQ,CAACC,IAAI;EACrC,CAAC,EAAE,CAACL,MAAM,CAAC,CAAC;EAEZ,MAAMU,aAAa,GAAGnB,OAAO,CACzB,MAAM,IAAIE,KAAK,CAACI,KAAK,CAACc,MAAM,EAAEd,KAAK,CAACe,UAAU,EAAEf,KAAK,CAACgB,MAAM,CAAC,EAC7D,CAAChB,KAAK,CACV,CAAC;EAED,oBACIT,KAAA,CAAA0B,aAAA,CAACpB,qBAAqB,CAACqB,QAAQ;IAC3BC,KAAK,EAAE;MACHhB,MAAM;MACNC,kBAAkB;MAClBJ,KAAK,EAAEa,aAAa;MACpBZ;IACJ;EAAE,GAEDC,QAC2B,CAAC;AAEzC,CAAC","ignoreList":[]}

package/hooks/useCurrentElement.js CHANGED Viewed

@@ -1,5 +1,4 @@
-import { $findMatchingParent } from "@lexical/utils";
-import { $isRootOrShadowRoot } from "lexical";
+import { $isRootOrShadowRoot, $findMatchingParent } from "lexical";
 import { useDeriveValueFromSelection } from "./useCurrentSelection.js";
 export function useCurrentElement() {
   return useDeriveValueFromSelection(({

package/hooks/useCurrentElement.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["$~~findMatchingParent~~","$~~isRootOrShadowRoot~~","useDeriveValueFromSelection","useCurrentElement","rangeSelection","element","getNodeFromSelection","selection","anchorNode","anchor","getNode","getKey","e","parent","getParent","getTopLevelElementOrThrow"],"sources":["useCurrentElement.ts"],"sourcesContent":["import ~~{ $findMatchingParent } from \"@lexical/utils\";\nimport~~ type { RangeSelection } from \"lexical\";\nimport { $isRootOrShadowRoot } from \"lexical\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection.js\";\n\nexport function useCurrentElement() {\n return useDeriveValueFromSelection(({ rangeSelection }) => {\n if (!rangeSelection) {\n return { element: null };\n }\n\n return { element: getNodeFromSelection(rangeSelection) };\n });\n}\n\nexport function getNodeFromSelection(selection: RangeSelection) {\n const anchorNode = selection.anchor.getNode();\n\n const element =\n anchorNode.getKey() === \"root\"\n ? anchorNode\n : $findMatchingParent(anchorNode, e => {\n const parent = e.getParent();\n return parent !== null && $isRootOrShadowRoot(parent);\n });\n\n return element \|\| anchorNode.getTopLevelElementOrThrow();\n}\n"],"mappings":"~~AAAA~~,SAASA,mBAAmB,~~QAAQ~~,~~gBAAgB;AAEpD,SAASC,~~mBAAmB,QAAQ,SAAS;~~AAC7C~~,SAASC,2BAA2B;AAEpC,OAAO,SAASC,iBAAiBA,CAAA,EAAG;EAChC,OAAOD,2BAA2B,CAAC,CAAC;IAAEE;EAAe,CAAC,KAAK;IACvD,IAAI,CAACA,cAAc,EAAE;MACjB,OAAO;QAAEC,OAAO,EAAE;MAAK,CAAC;IAC5B;IAEA,OAAO;MAAEA,OAAO,EAAEC,oBAAoB,CAACF,cAAc;IAAE,CAAC;EAC5D,CAAC,CAAC;AACN;AAEA,OAAO,SAASE,oBAAoBA,CAACC,SAAyB,EAAE;EAC5D,MAAMC,UAAU,GAAGD,SAAS,CAACE,MAAM,CAACC,OAAO,CAAC,CAAC;EAE7C,MAAML,OAAO,GACTG,UAAU,CAACG,MAAM,CAAC,CAAC,KAAK,MAAM,GACxBH,UAAU,~~GACVR~~,mBAAmB,~~CAACQ~~,UAAU,EAAEI,CAAC,IAAI;IACjC,MAAMC,MAAM,GAAGD,CAAC,CAACE,SAAS,CAAC,CAAC;IAC5B,OAAOD,MAAM,KAAK,IAAI,~~IAAIZ~~,mBAAmB,~~CAACY~~,MAAM,CAAC;EACzD,CAAC,CAAC;EAEZ,OAAOR,OAAO,IAAIG,UAAU,CAACO,yBAAyB,CAAC,CAAC;AAC5D","ignoreList":[]}
1	+ {"version":3,"names":["$isRootOrShadowRoot","$findMatchingParent","useDeriveValueFromSelection","useCurrentElement","rangeSelection","element","getNodeFromSelection","selection","anchorNode","anchor","getNode","getKey","e","parent","getParent","getTopLevelElementOrThrow"],"sources":["useCurrentElement.ts"],"sourcesContent":["import type { RangeSelection } from \"lexical\";\nimport { $isRootOrShadowRoot, $findMatchingParent } from \"lexical\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection.js\";\n\nexport function useCurrentElement() {\n return useDeriveValueFromSelection(({ rangeSelection }) => {\n if (!rangeSelection) {\n return { element: null };\n }\n\n return { element: getNodeFromSelection(rangeSelection) };\n });\n}\n\nexport function getNodeFromSelection(selection: RangeSelection) {\n const anchorNode = selection.anchor.getNode();\n\n const element =\n anchorNode.getKey() === \"root\"\n ? anchorNode\n : $findMatchingParent(anchorNode, e => {\n const parent = e.getParent();\n return parent !== null && $isRootOrShadowRoot(parent);\n });\n\n return element \|\| anchorNode.getTopLevelElementOrThrow();\n}\n"],"mappings":"AACA,SAASA,mBAAmB,EAAEC,mBAAmB,QAAQ,SAAS;AAClE,SAASC,2BAA2B;AAEpC,OAAO,SAASC,iBAAiBA,CAAA,EAAG;EAChC,OAAOD,2BAA2B,CAAC,CAAC;IAAEE;EAAe,CAAC,KAAK;IACvD,IAAI,CAACA,cAAc,EAAE;MACjB,OAAO;QAAEC,OAAO,EAAE;MAAK,CAAC;IAC5B;IAEA,OAAO;MAAEA,OAAO,EAAEC,oBAAoB,CAACF,cAAc;IAAE,CAAC;EAC5D,CAAC,CAAC;AACN;AAEA,OAAO,SAASE,oBAAoBA,CAACC,SAAyB,EAAE;EAC5D,MAAMC,UAAU,GAAGD,SAAS,CAACE,MAAM,CAACC,OAAO,CAAC,CAAC;EAE7C,MAAML,OAAO,GACTG,UAAU,CAACG,MAAM,CAAC,CAAC,KAAK,MAAM,GACxBH,UAAU,GACVP,mBAAmB,CAACO,UAAU,EAAEI,CAAC,IAAI;IACjC,MAAMC,MAAM,GAAGD,CAAC,CAACE,SAAS,CAAC,CAAC;IAC5B,OAAOD,MAAM,KAAK,IAAI,IAAIb,mBAAmB,CAACa,MAAM,CAAC;EACzD,CAAC,CAAC;EAEZ,OAAOR,OAAO,IAAIG,UAAU,CAACO,yBAAyB,CAAC,CAAC;AAC5D","ignoreList":[]}

package/index.d.ts CHANGED Viewed

@@ -15,7 +15,6 @@ export { UnderlineAction } from "./components/ToolbarActions/UnderlineAction.js"
 export { TypographyAction } from "./components/ToolbarActions/TypographyAction.js";
 export { TextAlignmentAction } from "./components/ToolbarActions/TextAlignmentAction.js";
 export { ImageAction } from "./components/ToolbarActions/ImageAction.js";
-export { Toolbar } from "./components/Toolbar/Toolbar.js";
 export { StaticToolbar } from "./components/Toolbar/StaticToolbar.js";
 export { RichTextEditor } from "./components/Editor/RichTextEditor.js";
 export { LinkPlugin } from "./plugins/LinkPlugin/LinkPlugin.js";