@squiz/formatted-text-editor 2.4.0 → 2.5.0

package/lib/Extensions/CodeBlockExtension/CodeBlockExtension.js

@@ -1,18 +1,65 @@
 "use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExtendedCodeBlockExtension = void 0;
-const extension_code_block_1 = require("@remirror/extension-code-block");
-class ExtendedCodeBlockExtension extends extension_code_block_1.CodeBlockExtension {
+exports.CodeBlockExtension = void 0;
+const core_1 = require("@remirror/core");
+const remirror_1 = require("remirror");
+let CodeBlockExtension = class CodeBlockExtension extends core_1.NodeExtension {
+    get name() {
+        return 'codeBlock';
+    }
+    createTags() {
+        return [core_1.ExtensionTag.Block, core_1.ExtensionTag.Code];
+    }
+    createNodeSpec(extra, override) {
+        return {
+            content: 'text*',
+            marks: '',
+            defining: true,
+            isolating: true,
+            draggable: false,
+            ...override,
+            code: true,
+            attrs: {
+                ...extra.defaults(),
+            },
+            parseDOM: [
+                {
+                    tag: 'code',
+                    preserveWhitespace: 'full',
+                },
+                {
+                    tag: 'pre',
+                    preserveWhitespace: 'full',
+                    getAttrs: (node) => {
+                        if (!(0, remirror_1.isElementDomNode)(node) || !(0, remirror_1.isElementDomNode)(node.querySelector('code'))) {
+                            return false;
+                        }
+                        return extra.parse(node);
+                    },
+                },
+            ],
+            toDOM: (node) => {
+                return ['code', extra.dom(node), 0];
+            },
+        };
+    }
     createNodeViews() {
-        return (node) => {
-            const { language } = node.attrs;
+        if (!this.options.enableDecorations) {
+            return {};
+        }
+        return () => {
             // This is the pre container for the code block
             const dom = document.createElement('pre');
             dom.setAttribute('spellcheck', 'false');
             dom.classList.add(`code-block`);
             // This is the actual code content in the code block
             const contentDOM = document.createElement('code');
-            contentDOM.setAttribute('data-code-block-language', language);
             // Divider between code block and pre container
             const dividerElement = document.createElement('div');
             dividerElement.classList.add('block-divider');
@@ -26,5 +73,24 @@ class ExtendedCodeBlockExtension extends extension_code_block_1.CodeBlockExtensi
             return { dom, contentDOM };
         };
     }
-}
-exports.ExtendedCodeBlockExtension = ExtendedCodeBlockExtension;
+    /**
+     * Toggle the <code> for the current block.
+     */
+    toggleCodeBlock() {
+        return (0, core_1.toggleBlockItem)({
+            type: this.type,
+            toggleType: 'paragraph',
+        });
+    }
+};
+__decorate([
+    (0, core_1.command)()
+], CodeBlockExtension.prototype, "toggleCodeBlock", null);
+CodeBlockExtension = __decorate([
+    (0, core_1.extension)({
+        defaultOptions: {
+            enableDecorations: false,
+        },
+    })
+], CodeBlockExtension);
+exports.CodeBlockExtension = CodeBlockExtension;

package/lib/Extensions/Extensions.d.ts

@@ -15,4 +15,4 @@ export declare enum MarkName {
     Link = "link",
     AssetLink = "assetLink"
 }
-export declare const createExtensions: (context: EditorContextOptions) => () => Extension[];
+export declare const createExtensions: (context: EditorContextOptions, enableDecorations?: boolean) => () => Extension[];

package/lib/Extensions/Extensions.js

@@ -32,7 +32,7 @@ var MarkName;
     MarkName["Link"] = "link";
     MarkName["AssetLink"] = "assetLink";
 })(MarkName = exports.MarkName || (exports.MarkName = {}));
-const createExtensions = (context) => {
+const createExtensions = (context, enableDecorations = true) => {
     return () => {
         return [
             new CommandsExtension_1.CommandsExtension(),
@@ -43,8 +43,8 @@ const createExtensions = (context) => {
             new extensions_1.NodeFormattingExtension({ indents: [] }),
             new extensions_1.ParagraphExtension(),
             new extensions_1.HardBreakExtension(),
-            new PreformattedExtension_1.PreformattedExtension(),
-            new CodeBlockExtension_1.ExtendedCodeBlockExtension({ defaultWrap: true }),
+            new CodeBlockExtension_1.CodeBlockExtension({ enableDecorations }),
+            new PreformattedExtension_1.PreformattedExtension({ enableDecorations }),
             new extensions_1.UnderlineExtension(),
             new extensions_1.HistoryExtension(),
             new ImageExtension_1.ImageExtension(),

package/lib/Extensions/PreformattedExtension/PreformattedExtension.d.ts

@@ -1,10 +1,13 @@
 import { ApplySchemaAttributes, CommandFunction, NodeExtension, NodeExtensionSpec, NodeSpecOverride } from '@remirror/core';
 import { NodeViewMethod } from 'remirror';
-export declare class PreformattedExtension extends NodeExtension {
+export type PreformattedExtensionOptions = {
+    enableDecorations?: boolean;
+};
+export declare class PreformattedExtension extends NodeExtension<PreformattedExtensionOptions> {
     get name(): "preformatted";
     createTags(): ("block" | "formattingNode" | "textBlock")[];
     createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec;
-    createNodeViews(): NodeViewMethod;
+    createNodeViews(): NodeViewMethod | Record<string, never>;
     /**
      * Toggle the <pre> for the current block.
      */

package/lib/Extensions/PreformattedExtension/PreformattedExtension.js

@@ -35,6 +35,9 @@ let PreformattedExtension = class PreformattedExtension extends core_1.NodeExten
         };
     }
     createNodeViews() {
+        if (!this.options.enableDecorations) {
+            return {};
+        }
         return (node) => {
             const { nodeTextAlignment } = node.attrs;
             // This is the pre container for the code block
@@ -71,6 +74,10 @@ __decorate([
     (0, core_1.command)()
 ], PreformattedExtension.prototype, "togglePreformatted", null);
 PreformattedExtension = __decorate([
-    (0, core_1.extension)({})
+    (0, core_1.extension)({
+        defaultOptions: {
+            enableDecorations: false,
+        },
+    })
 ], PreformattedExtension);
 exports.PreformattedExtension = PreformattedExtension;

package/lib/hooks/index.d.ts

@@ -1,2 +1,3 @@
-export * from './useExtensionNames';
-export * from './useExpandedSelection';
+export * from './useExtensionNames/useExtensionNames';
+export * from './useExpandedSelection/useExpandedSelection';
+export * from './useFocus/useFocus';

package/lib/hooks/index.js

@@ -14,5 +14,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./useExtensionNames"), exports);
-__exportStar(require("./useExpandedSelection"), exports);
+__exportStar(require("./useExtensionNames/useExtensionNames"), exports);
+__exportStar(require("./useExpandedSelection/useExpandedSelection"), exports);
+__exportStar(require("./useFocus/useFocus"), exports);

package/lib/hooks/useFocus/useFocus.d.ts

@@ -0,0 +1,6 @@
+import { FocusEvent as ReactFocusEvent, FocusEventHandler } from 'react';
+export declare const useFocus: (initialState: boolean, isChildElement: (element: Element) => boolean) => {
+    handleFocus: (event: ReactFocusEvent) => void;
+    handleBlur: FocusEventHandler<HTMLDivElement>;
+    isFocused: boolean;
+};

package/lib/hooks/{useFocus.js → useFocus/useFocus.js}

@@ -1,16 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFocus = void 0;
 const react_1 = require("react");
-const useFocus = (initialState) => {
-    const wrapperRef = (0, react_1.createRef)();
-    const [isVisible, setIsVisible] = (0, react_1.useState)(initialState);
+const useFocus = (initialState, isChildElement) => {
+    const [isFocused, setIsFocused] = (0, react_1.useState)(initialState);
+    const getFocusedElement = (0, react_1.useCallback)(() => {
+        let element = document.activeElement;
+        while (element instanceof HTMLIFrameElement) {
+            element = element.contentDocument?.activeElement || null;
+        }
+        return element?.parentElement ? element : null;
+    }, []);
     const handleFocus = (0, react_1.useCallback)((event) => {
         // Ignore elements flagged to be ignored, this allows us to add extra, clickable, elements
         // without triggering a focus, such as action menus.
         if (!event.target?.classList?.contains('fte-ignore') && !event.target?.closest('.fte-ignore')) {
-            setIsVisible(true);
+            setIsFocused(true);
         }
-    }, [wrapperRef]);
+    }, []);
     const handleBlur = (0, react_1.useCallback)((event) => {
         // React event bubbling is interesting, it bubbles up the React tree rather than the DOM tree.
         // The tree deviates when rendering portals (eg. for modals).
@@ -30,14 +37,21 @@ const useFocus = (initialState) => {
         //
         // An assumption here is that anything in a portal will only blur to another element that is also in the portal
         // (and therefore still in our React tree resulting in the element still effectively being focused).
-        const isBlurringEditor = wrapperRef.current?.contains(event.target);
-        const isFocusedInEditor = wrapperRef.current?.contains(event.relatedTarget);
-        // Detect if the blur event happens when the related/clicked target is the floating popover
-        const isClickingFloatingToolbar = !!event.relatedTarget?.closest('.squiz-fte-scope__floating-popover');
-        if (isBlurringEditor && !isFocusedInEditor && !isClickingFloatingToolbar) {
-            setIsVisible(false);
-        }
-    }, [wrapperRef]);
-    return { handleFocus, handleBlur, isVisible, wrapperRef };
+        // TODO: PLATFORM-1611 this shit still doesn't work properly, notably issues with the link/image modals.
+        requestAnimationFrame(() => {
+            // "relatedTarget" in the event object will be null if the element gaining focus is in a different
+            // document to the element being blurred (eg. floating toolbar rendered in top level frame,
+            // editor rendered in iframe). instead grab the active element to determine current focus.
+            const isBlurringEditor = isChildElement(event.target);
+            const focusedElement = event.relatedTarget || getFocusedElement();
+            const isFocusedInEditor = focusedElement && isChildElement(focusedElement);
+            // Detect if the blur event happens when the related/clicked target is the floating popover
+            const isClickingFloatingToolbar = !!focusedElement?.closest('.squiz-fte-scope__floating-popover');
+            if (isBlurringEditor && !isFocusedInEditor && !isClickingFloatingToolbar) {
+                setIsFocused(false);
+            }
+        });
+    }, [getFocusedElement, isChildElement]);
+    return { handleFocus, handleBlur, isFocused };
 };
-exports.default = useFocus;
+exports.useFocus = useFocus;

package/lib/index.css

@@ -5145,6 +5145,11 @@
   border-width: 2px;
   border-style: solid;
 }
+.squiz-fte-scope.squiz-fte-scope__editor--empty {
+  height: 0px;
+  width: 0px;
+  border-width: 0px;
+}
 .squiz-fte-scope.squiz-fte-scope__editor--is-disabled {
   cursor: not-allowed;
   border-width: 0px;
@@ -5511,11 +5516,11 @@
   padding: 6px 8px;
 }
 .squiz-fte-scope .header-toolbar {
+  opacity: 0;
+  max-height: 0;
   transition-duration: 0.3s;
   transition-property: max-height, opacity;
   transition-timing-function: ease-out;
-  opacity: 0;
-  max-height: 0;
 }
 .squiz-fte-scope .header-toolbar.show-toolbar {
   opacity: 1;

package/lib/ui/EditorInput/EditorInput.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { EditorInputProps } from './EditorInput.props';
+export declare const EditorInput: ({ container, ...other }: EditorInputProps) => React.JSX.Element;

package/lib/ui/EditorInput/EditorInput.js

@@ -0,0 +1,49 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorInput = void 0;
+const react_1 = require("@remirror/react");
+const react_2 = __importStar(require("react"));
+const react_dom_1 = require("react-dom");
+const EditorInput = ({ container, ...other }) => {
+    const { getRootProps } = (0, react_1.useRemirrorContext)();
+    const { key, ...rootProps } = getRootProps();
+    const preventImagePaste = (0, react_2.useCallback)((event) => {
+        const { clipboardData } = event;
+        const pastedData = clipboardData?.files[0];
+        if (pastedData?.type &&
+            pastedData?.type.startsWith('image/') &&
+            // Still allow paste of any text that came through (Word, etc)
+            !clipboardData?.types.includes('text/plain')) {
+            event.preventDefault();
+        }
+        // Allow other paste event handlers to be run.
+        return false;
+    }, []);
+    const input = react_2.default.createElement("div", { key: key, ...rootProps, ...other });
+    (0, react_1.useEditorEvent)('paste', preventImagePaste);
+    return container ? (0, react_dom_1.createPortal)(input, container) : input;
+};
+exports.EditorInput = EditorInput;

package/lib/ui/EditorInput/EditorInput.props.d.ts

@@ -0,0 +1,4 @@
+import { HTMLAttributes } from 'react';
+export type EditorInputProps = HTMLAttributes<HTMLDivElement> & {
+    container?: Element | null;
+};

package/lib/ui/EditorInput/EditorInput.props.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.js

@@ -8,9 +8,6 @@ const resolveNodeTag = (node) => {
     if (node.type.name === Extensions_1.NodeName.Text) {
         return 'span';
     }
-    if (node.type.name === Extensions_1.NodeName.CodeBlock) {
-        return 'code';
-    }
     if (node.type.spec?.toDOM) {
         const domNode = node.type.spec.toDOM(node);
         if (domNode instanceof window.Node) {

package/lib/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.js

@@ -75,12 +75,6 @@ const getNodeAttributes = (node) => {
             title: node.attributes?.title,
         };
     }
-    else if (node.type === 'tag' && node.tag === 'code') {
-        return {
-            language: node.attributes?.language || 'markup',
-            wrap: node.attributes?.wrap || true,
-        };
-    }
     else if (node.type === 'matrix-image') {
         return {
             matrixAssetId: node.matrixAssetId,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "private": false,

package/src/Editor/Editor.spec.tsx

@@ -5,7 +5,12 @@ import { MatrixResourceBrowserPluginProps } from '@squiz/matrix-resource-browser
 import Editor from './Editor';
 import { renderWithEditor, mockResourceBrowserContext } from '../../tests';
 import ImageButton from '../EditorToolbar/Tools/Image/ImageButton';
-import * as useFocus from '../hooks/useFocus';
+import * as hooks from '../hooks';
+
+jest.mock('../hooks', () => ({
+  __esModule: true,
+  ...jest.requireActual('../hooks'),
+}));
 
 const handleFocusMock = jest.fn();
 const handleBlurMock = jest.fn();
@@ -341,11 +346,10 @@ describe('Formatted text editor', () => {
   });
 
   it('triggers handleFocus when editor is focused', async () => {
-    jest.spyOn(useFocus, 'default').mockReturnValue({
-      isVisible: false,
+    jest.spyOn(hooks, 'useFocus').mockReturnValue({
+      isFocused: false,
       handleFocus: handleFocusMock,
       handleBlur: handleBlurMock,
-      wrapperRef: { current: null },
     });
 
     const { getByLabelText } = render(<Editor />);
@@ -358,11 +362,10 @@ describe('Formatted text editor', () => {
   });
 
   it('triggers handleBlur when editor is blurred', () => {
-    jest.spyOn(useFocus, 'default').mockReturnValue({
-      isVisible: false,
+    jest.spyOn(hooks, 'useFocus').mockReturnValue({
+      isFocused: false,
       handleFocus: handleFocusMock,
       handleBlur: handleBlurMock,
-      wrapperRef: { current: null },
     });
 
     const { getByLabelText } = render(<Editor />);
@@ -375,11 +378,10 @@ describe('Formatted text editor', () => {
   });
 
   it('should apply hide class when focus hook returns false', () => {
-    jest.spyOn(useFocus, 'default').mockReturnValue({
-      isVisible: true,
+    jest.spyOn(hooks, 'useFocus').mockReturnValue({
+      isFocused: true,
       handleFocus: handleFocusMock,
       handleBlur: handleBlurMock,
-      wrapperRef: { current: null },
     });
 
     const { container } = render(<Editor />);
@@ -462,4 +464,27 @@ describe('Formatted text editor', () => {
     expect(within(document.body).getByRole('button', { name: 'Link (Ctrl+K)', hidden: true })).toBeInTheDocument();
     expect(document.querySelector('.show-toolbar')).toBeInTheDocument();
   });
+
+  it('Renders the input and toolbar in container elements if provided', () => {
+    const toolbar = document.createElement('div');
+    const input = document.createElement('div');
+    document.body.append(toolbar, input);
+
+    const { container, unmount } = render(<Editor containers={{ toolbar, input }} />);
+
+    // Toolbar and input should be rendered in the provided containers.
+    expect(within(input).getByRole('textbox')).toBeInTheDocument();
+    expect(within(toolbar).getByRole('button', { name: 'Bold (Ctrl+B)' })).toBeInTheDocument();
+
+    // They should not be rendered inside of the editor element.
+    expect(within(container).queryByRole('textbox')).not.toBeInTheDocument();
+    expect(within(container).queryByRole('button', { name: 'Bold (Ctrl+B)' })).not.toBeInTheDocument();
+    expect(container.querySelector('.squiz-fte-scope__editor--empty')).toBeInTheDocument();
+
+    unmount();
+
+    // Toolbar and input should be removed on unmount.
+    expect(within(input).queryByRole('textbox')).not.toBeInTheDocument();
+    expect(within(toolbar).queryByRole('button', { name: 'Bold (Ctrl+B)' })).not.toBeInTheDocument();
+  });
 });

package/src/Editor/Editor.tsx

@@ -1,61 +1,49 @@
-import React, { useContext, useCallback, ReactNode, useEffect } from 'react';
-import { EditorComponent, Remirror, useRemirror, useEditorEvent } from '@remirror/react';
+import React, { useContext, useCallback, ReactNode, useEffect, useRef } from 'react';
+import { Remirror, useRemirror } from '@remirror/react';
 import { RemirrorContentType, RemirrorEventListener, Extension } from '@remirror/core';
-import { ClipboardEventHandler } from '@remirror/extension-events/dist-types/events-extension';
 import clsx from 'clsx';
 import { Toolbar, FloatingToolbar } from '../EditorToolbar';
 import { EditorContext } from './EditorContext';
 import { createExtensions } from '../Extensions/Extensions';
-import useFocus from '../hooks/useFocus';
+import { useFocus } from '../hooks';
 import { TableComponents } from '@remirror/extension-react-tables';
+import { EditorInput } from '../ui/EditorInput/EditorInput';
 
 type EditorProps = {
+  attributes?: Record<string, string>;
+  border?: boolean;
+  children?: ReactNode;
   className?: string;
+  containers?: {
+    input?: Element | null;
+    toolbar?: Element | null;
+  };
   content?: RemirrorContentType;
-  onChange?: RemirrorEventListener<Extension>;
   editable?: boolean;
-  border?: boolean;
-  children?: ReactNode;
+  enableDecorations?: boolean;
+  enableTableTool?: boolean;
   isFocused?: boolean;
   label?: string;
-  attributes?: Record<string, string>;
-  enableTableTool?: boolean;
-};
-
-const WrappedEditor = () => {
-  const preventImagePaste = useCallback((event) => {
-    const { clipboardData } = event;
-    const pastedData = clipboardData?.files[0];
-    if (
-      pastedData?.type &&
-      pastedData?.type.startsWith('image/') &&
-      // Still allow paste of any text that came through (Word, etc)
-      !clipboardData?.types.includes('text/plain')
-    ) {
-      event.preventDefault();
-    }
-
-    // Allow other paste event handlers to be run.
-    return false;
-  }, []) as ClipboardEventHandler;
-
-  useEditorEvent('paste', preventImagePaste);
-  return <EditorComponent />;
+  onChange?: RemirrorEventListener<Extension>;
 };
 
 const Editor = ({
-  content,
-  className,
+  attributes,
   border = true,
-  editable = true,
-  onChange,
   children,
-  isFocused,
-  attributes,
+  className,
+  containers,
+  content,
+  editable = true,
+  enableDecorations = true,
   enableTableTool = false,
+  isFocused: isInitiallyFocused = false,
+  label = 'Text editor',
+  onChange,
 }: EditorProps) => {
+  const isEmpty = containers?.toolbar && containers.input && !children;
   const { manager, state, setState } = useRemirror({
-    extensions: createExtensions(useContext(EditorContext)),
+    extensions: createExtensions(useContext(EditorContext), enableDecorations),
     content,
     selection: 'start',
     stringHandler: 'html',
@@ -66,11 +54,24 @@ const Editor = ({
     onChange?.(parameter);
   };
 
-  const { isVisible, handleFocus, handleBlur, wrapperRef } = useFocus(isFocused || false);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const { isFocused, handleFocus, handleBlur } = useFocus(
+    isInitiallyFocused,
+    useCallback(
+      (element: Node) => {
+        return Boolean(
+          wrapperRef.current?.contains(element) ||
+            containers?.input?.contains(element) ||
+            containers?.toolbar?.contains(element),
+        );
+      },
+      [containers?.input, containers?.toolbar],
+    ),
+  );
 
   // On initial load, check if we need to focus the actual text content
   useEffect(() => {
-    if (isFocused) {
+    if (isInitiallyFocused) {
       manager.view.dom.focus();
     }
 
@@ -85,13 +86,14 @@ const Editor = ({
   return (
     <div
       ref={wrapperRef}
-      onBlur={handleBlur}
+      onBlurCapture={handleBlur}
       onFocusCapture={handleFocus}
       className={clsx(
         'squiz-fte-scope',
         'squiz-fte-scope__editor',
         !editable && 'squiz-fte-scope__editor--is-disabled',
         border && 'squiz-fte-scope__editor--bordered',
+        isEmpty && 'squiz-fte-scope__editor--empty',
         className,
       )}
     >
@@ -101,14 +103,16 @@ const Editor = ({
         editable={editable}
         onChange={handleChange}
         placeholder="Write something"
-        label="Text editor"
+        label={label}
         attributes={attributes}
       >
-        {editable && <Toolbar isVisible={isVisible} enableTableTool={enableTableTool} />}
+        {editable && (
+          <Toolbar isVisible={isFocused} enableTableTool={enableTableTool} container={containers?.toolbar} />
+        )}
         {children && <div className="squiz-fte-scope__editor__children">{children}</div>}
-        <WrappedEditor />
+        <EditorInput container={containers?.input} />
         {enableTableTool && <TableComponents enableTableCellMenu={false} />}
-        {editable && isVisible && <FloatingToolbar />}
+        {editable && isFocused && <FloatingToolbar />}
       </Remirror>
     </div>
   );

package/src/Editor/_editor.scss

@@ -42,6 +42,10 @@
     @apply border-2 border-solid;
   }
 
+  &--empty {
+    @apply w-0 h-0 border-0;
+  }
+
   &--is-disabled {
     @apply bg-gray-50 border-0 cursor-not-allowed;
 

package/src/EditorToolbar/Toolbar.tsx

@@ -17,17 +17,19 @@ import HorizontalLineButton from './Tools/HorizontalLine/HorizontalLineButton';
 import TableButton from './Tools/Table/TableButton';
 import ContentToolsDropdown from './Tools/ContentTools/ContentToolsDropdown';
 import { useExtensionNames } from '../hooks';
+import { createPortal } from 'react-dom';
 
 type ToolbarProps = {
   isVisible: boolean;
   enableTableTool: boolean;
+  container?: Element | null;
 };
-export const Toolbar = ({ isVisible, enableTableTool }: ToolbarProps) => {
-  const extensionNames = useExtensionNames();
 
-  return (
+export const Toolbar = ({ isVisible, enableTableTool, container }: ToolbarProps) => {
+  const extensionNames = useExtensionNames();
+  const toolbar = (
     <RemirrorToolbar
-      className={clsx('editor-toolbar header-toolbar', isVisible && 'show-toolbar')}
+      className={clsx('editor-toolbar header-toolbar', isVisible && 'show-toolbar', container && 'fte-portal-toolbar')}
       role="toolbar"
       tabIndex={0}
     >
@@ -59,4 +61,6 @@ export const Toolbar = ({ isVisible, enableTableTool }: ToolbarProps) => {
       </div>
     </RemirrorToolbar>
   );
+
+  return container ? createPortal(toolbar, container) : toolbar;
 };