diff --git a/packages/editors/src/form/TextEditor/TextEditor.js b/packages/editors/src/form/TextEditor/TextEditor.js
index 2490498f8..633382940 100644
--- a/packages/editors/src/form/TextEditor/TextEditor.js
+++ b/packages/editors/src/form/TextEditor/TextEditor.js
@@ -1,4 +1,5 @@
import React, { useEffect } from 'react';
+import { createPortal } from 'react-dom';
import { EditorContent, useEditor } from '@tiptap/react';
import { Box } from '@bubbles-ui/components';
import PropTypes from 'prop-types';
@@ -21,7 +22,6 @@ export const TEXT_EDITOR_DEFAULT_PROPS = {
export const TEXT_EDITOR_PROP_TYPES = {
content: PropTypes.string,
- library: PropTypes.element,
onChange: PropTypes.func,
onSchemaChange: PropTypes.func,
editorClassname: PropTypes.string,
@@ -38,6 +38,7 @@ export const TEXT_EDITOR_PROP_TYPES = {
placeholder: PropTypes.string,
readOnly: PropTypes.bool,
children: PropTypes.node,
+ toolbarPortal: PropTypes.any,
};
const TextEditor = ({
@@ -53,6 +54,7 @@ const TextEditor = ({
useSchema,
acceptedTags = [],
toolbarPosition,
+ toolbarPortal,
}) => {
const store = React.useRef({
isFocus: false,
@@ -183,7 +185,7 @@ const TextEditor = ({
editor.on('transaction', handleTransactions);
return () => editor.off('transaction', handleTransactions);
}
- return null;
+ return () => {};
}, [editor, handleTransactions]);
useEffect(() => {
@@ -196,6 +198,32 @@ const TextEditor = ({
}
}, [placeholder]);
+ const ToolbarComponent = React.useMemo(
+ () =>
+ toolbarPortal
+ ? () =>
+ createPortal(
+
+ {children}
+ ,
+ toolbarPortal,
+ )
+ : () => (
+
+ {children}
+
+ ),
+ [toolbarPortal],
+ );
+
return (
{readOnly ? null : (
-
- {children}
-
+
)}