@squiz/formatted-text-editor 2.4.0 → 2.6.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 2.6.0
+
+### Minor Changes
+
+- ec6d330: Updated packages to use resource browser v3
+
+## 2.5.0
+
+### Minor Changes
+
+- 0025f46: Allow mounting the editor and toolbar at arbitrary locations in the DOM.
+
 ## 2.4.0
 
 ### Minor Changes

package/demo/{App.tsx → diff/App.tsx}

@@ -1,13 +1,14 @@
 import React, { useState } from 'react';
-import { Editor, remirrorNodeToSquizNode, squizNodeToRemirrorNode } from '../src';
+import { Editor, remirrorNodeToSquizNode, squizNodeToRemirrorNode } from '../../src';
 import { RemirrorEventListener, Extension } from '@remirror/core';
 import ReactDiffViewer from 'react-diff-viewer-continued';
 import { AppContext } from './AppContext';
-import Button from '../src/ui/Button/Button';
+import Button from '../../src/ui/Button/Button';
 import TextFieldsOutlinedIcon from '@mui/icons-material/TextFieldsOutlined';
 import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
 import { VerticalDivider } from '@remirror/react-components';
 import { Dialog, useDialogStore } from '@squiz/sds';
+
 const ComponentHandlers = () => (
   <div style={{ display: 'flex', justifyContent: 'flex-end', maxHeight: '2rem' }}>
     <Button icon={<TextFieldsOutlinedIcon />} onClick={(x) => x} />
@@ -83,11 +84,6 @@ function App() {
               <a href="https://www.google.com"><strong>Mr Bean</strong></a>, nice to <a href="https://www.google.com">meet you</a>.
               <img src="https://media2.giphy.com/media/3o6ozsIxg5legYvggo/giphy.gif" height="150" width="200"/>
               <img data-matrix-asset-id="1" data-matrix-identifier="matrixIdentifier" data-matrix-domain="https://matrix-domain.squiz.net">
-              <img
-                  data-dam-object-id="CA87B42E-9410-402F-B3669D6900DD0793"
-                  data-dam-system-identifier="byder001"
-                  data-dam-system-type="bynder"
-              >
               </p>
             `}
             onChange={handleEditorChange}

package/demo/{AppContext.tsx → diff/AppContext.tsx}

@@ -8,8 +8,7 @@ import MatrixResourceBrowserPlugin, {
 import { ResourceBrowserContextProvider, ResourceBrowserSource } from '@squiz/resource-browser';
 import React, { PropsWithChildren } from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
-import { EditorContext } from '../src';
-import { ResolveNodeType } from '../src/types';
+import { EditorContext, ResolveNodeType } from '../../src';
 import resources from './resources.json';
 import sources from './sources.json';
 
@@ -31,6 +30,7 @@ export const AppContext = ({ children }: AppContextProps) => (
   <QueryClientProvider client={testQueryClient}>
     <ResourceBrowserContextProvider
       value={{
+        searchEnabled: true,
         onRequestSources: (): Promise<ResourceBrowserSource[]> =>
           Promise.resolve([
             {
@@ -38,14 +38,6 @@ export const AppContext = ({ children }: AppContextProps) => (
               id: 'matrixIdentifier',
               type: 'matrix',
             },
-            {
-              name: 'Bynder',
-              id: 'byder001',
-              type: 'dam',
-              configuration: {
-                externalType: 'bynder',
-              },
-            },
           ]),
         plugins: [
           DamResourceBrowserPlugin(),
@@ -67,6 +59,19 @@ export const AppContext = ({ children }: AppContextProps) => (
                 flattenResources(resources).find((resource) => resource.id === reference.resource) || null,
               );
             },
+            onSearchRequest: () =>
+              Promise.resolve({
+                results: [],
+                filters: [],
+                resultsSummary: {
+                  totalMatching: 0,
+                  numRanks: 10,
+                  currStart: 0,
+                  currEnd: 0,
+                  prevStart: null,
+                  nextStart: null,
+                },
+              }),
           }),
         ],
       }}

package/demo/diff/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon-dxp.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Formatted text editor - DXP package (SQUIZ)</title>
+    <style rel="./index.scss" lang="scss"></style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

package/demo/{index.scss → diff/index.scss}

@@ -1,3 +1,6 @@
+@import '../../../../node_modules/@squiz/resource-browser/lib/index.css';
+@import '../../../../node_modules/@squiz/matrix-resource-browser-plugin/lib/index.css';
+
 body {
   font-family: 'Open Sans';
 }

package/demo/{main.tsx → diff/main.tsx}

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import '@squiz/resource-browser/lib/index.css';
-import '../src/index.scss';
+import '../../src/index.scss';
 import './index.scss';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(

package/demo/index.html

@@ -5,9 +5,54 @@
     <link rel="icon" type="image/svg+xml" href="/favicon-dxp.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Formatted text editor - DXP package (SQUIZ)</title>
+    <style>
+      pre {
+        white-space: pre-line;
+      }
+    </style>
   </head>
   <body>
-    <div id="root"></div>
-    <script type="module" src="./main.tsx"></script>
+    <h1>Formatted text editor demo</h1>
+    <h2>Diff</h2>
+    <p>
+      <a href="./diff/index.html">View demo</a>
+    </p>
+    <pre>
+        Demonstrates how the formatted text editor is typically rendered.
+
+        Beneath the editor is 2 code blocks. On the left is the Remirror JSON representation of the content.
+        On the right is the Squiz JSON representation of the content.
+
+        You should typically expect there is no highlighted (red/green) content in either block. If there is
+        highlighted content this is indicative of the transformation logic not producing identical input
+        when run through a cycle of Remirror -> Squiz -> Remirror -> Squiz conversion. This may indicate that
+        the transformation logic is losing information during one of the transformation phases.
+    </pre>
+
+    <h2>Portals</h2>
+    <p>
+      <a href="./portals/index.html?withRemirror">View demo</a>
+      (<a href="./portals/index.html">without formatted text editor</a>)
+    </p>
+    <pre>
+        Demonstrates rendering the input and toolbar of a formatted text editor in arbitrary DOM locations.
+
+        Intended to show an "inline editing" variant where the editor will attempt to minimize how much it changes
+        the DOM where it is mounted. Including:
+         * Code/pre blocks don't have the decorative icons around them.
+         * Code blocks don't have a wrapping &lt;pre&gt; element.
+
+        The following manipulations still occur due to limitations which have not been overcome:
+         * Each editor input has 3 wrapping &lt;div&gt; elements.
+         * Each list item is wrapped in a &lt;p&gt; element.
+         * Remirror is strongly opinionated about its DOM structure. This is fine if the content being placed
+           in the editor was constructed by Remirror previously but if it wasn't then anything unexpected will
+           be transformed.
+
+        Including:
+         * Rendering the input in an iframe, with the other parts of the editor rendered outside.
+         * Attaching an editor to formatted content that is dynamically mounted after initially loaded
+           (collapse/expand accordion).
+    </pre>
   </body>
 </html>

package/demo/portals/Accordion.tsx

@@ -0,0 +1,50 @@
+import React, { useCallback, useState } from 'react';
+import clsx from 'clsx';
+
+export type AccordionProps = {
+  items: Array<{ title: string; content: string; defaultExpanded: boolean }>;
+};
+
+export const Accordion = ({ items }: AccordionProps) => {
+  const [expandedItems, setExpandedItems] = useState(() => items.map((item) => !!item.defaultExpanded));
+  const toggleItem = useCallback((index: number) => {
+    setExpandedItems((previous) => {
+      const updated = [...previous];
+      updated[index] = !previous[index];
+      return updated;
+    });
+  }, []);
+
+  return (
+    <>
+      {items.map((item, index) => (
+        <div
+          key={index}
+          className={clsx(
+            'accordion-item',
+            expandedItems[index] && 'accordion-item-expanded',
+            !expandedItems[index] && 'accordion-item-collapsed',
+          )}
+        >
+          <button
+            type="button"
+            className="accordion-item-header"
+            data-sq-content-type="string"
+            data-sq-field="items[0].title"
+            onClick={() => toggleItem(index)}
+          >
+            {item.title}
+          </button>
+          {expandedItems[index] && (
+            <div
+              className="accordion-item-content"
+              data-sq-content-type="formatted-text"
+              data-sq-field="items[0].content"
+              dangerouslySetInnerHTML={{ __html: item.content }}
+            ></div>
+          )}
+        </div>
+      ))}
+    </>
+  );
+};

package/demo/portals/App.tsx

@@ -0,0 +1,150 @@
+import { Editor } from '../../src';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+const editorIdentifierAttribute = 'data-sq-editor-key';
+let editorIndex = 0;
+
+const extractFormattedTextBlocks = (root: Element): Record<string, { container: Element; content: string }> => {
+  const selector = '[data-sq-content-type="formatted-text"][data-sq-block-index]';
+  const ungrouped = root.matches(selector) ? [root] : Array.from(root.querySelectorAll(selector));
+  const grouped: Record<string, Array<Element>> = {};
+  const editors: Record<string, { container: Element; content: string }> = {};
+
+  ungrouped?.forEach((element) => {
+    if (!element.parentElement) {
+      return;
+    }
+
+    const index = element.getAttribute('data-sq-block-index') as string;
+
+    grouped[index] ||= [];
+    grouped[index].push(element);
+  });
+
+  Object.values(grouped).forEach((elements) => {
+    const container = document.createElement('div');
+    const content = elements.map((element) => element.outerHTML).join('');
+    const key = `editor-${editorIndex++}`;
+
+    container.setAttribute(editorIdentifierAttribute, key);
+    elements[0].parentElement?.insertBefore(container, elements[0]);
+    elements.forEach((element) => element.remove());
+
+    editors[key] = { container, content };
+  });
+
+  return editors;
+};
+
+const extractFormattedTextComponentInputs = (
+  root: Element,
+): Record<string, { container: Element; content: string }> => {
+  const selector = '[data-sq-content-type="formatted-text"][data-sq-field]';
+  const elements = root.matches(selector) ? [root] : Array.from(root.querySelectorAll(selector));
+  const editors: Record<string, { container: Element; content: string }> = {};
+
+  elements.forEach((element) => {
+    const container = element;
+    const content = container.innerHTML;
+    let key = container.getAttribute(editorIdentifierAttribute);
+
+    if (!key) {
+      key = `editor-${editorIndex++}`;
+      container.setAttribute(editorIdentifierAttribute, key);
+    }
+
+    container.innerHTML = '';
+
+    editors[key] = { container, content };
+  });
+
+  return editors;
+};
+
+export const App = () => {
+  const toolbar = useRef<HTMLDivElement>(null);
+  const preview = useRef<HTMLIFrameElement>(null);
+  const mutationObserver = useRef<MutationObserver>();
+  const [, setIsMounting] = useState(true);
+  const [editors, setEditors] = useState<Record<string, { container: Element; content: string }>>({});
+  const withRemirror = window.location.search.includes('withRemirror');
+  const handleLoad = useCallback(() => {
+    if (!withRemirror) {
+      return;
+    }
+
+    const document = preview.current?.contentDocument;
+
+    if (!document) {
+      throw new Error('Preview is not loaded.');
+    }
+
+    setEditors({
+      ...extractFormattedTextBlocks(preview.current.contentDocument.body),
+      ...extractFormattedTextComponentInputs(preview.current.contentDocument.body),
+    });
+  }, [withRemirror]);
+
+  useEffect(() => {
+    mutationObserver.current?.disconnect();
+
+    if (!preview.current?.contentDocument) {
+      return;
+    }
+
+    const updatedEditors = { ...editors };
+    let hasUpdatedEditors = false;
+
+    mutationObserver.current = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.removedNodes.length > 0) {
+          Object.keys(updatedEditors).forEach((key) => {
+            if (!updatedEditors[key].container.parentElement) {
+              delete updatedEditors[key];
+              hasUpdatedEditors = true;
+            }
+          });
+        } else if (mutation.addedNodes.length > 0) {
+          mutation.addedNodes.forEach((node) => {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+              const newEditors = extractFormattedTextComponentInputs(node as Element);
+              Object.assign(updatedEditors, newEditors);
+              hasUpdatedEditors ||= Object.keys(newEditors).length > 0;
+            }
+          });
+        }
+      });
+
+      if (hasUpdatedEditors) {
+        setEditors(updatedEditors);
+      }
+    });
+
+    mutationObserver.current.observe(preview.current?.contentDocument, {
+      childList: true,
+      subtree: true,
+    });
+  }, [editors]);
+
+  useEffect(() => {
+    setIsMounting(false);
+  }, []);
+
+  return (
+    <>
+      <div ref={toolbar} id="toolbar"></div>
+      <iframe ref={preview} id="preview" title="Preview" src="./preview.html" onLoad={handleLoad} />
+      {Object.keys(editors).map((key) => (
+        <Editor
+          key={key}
+          enableDecorations={false}
+          content={editors[key].content}
+          containers={{
+            input: editors[key].container,
+            toolbar: toolbar.current,
+          }}
+        />
+      ))}
+    </>
+  );
+};

package/demo/portals/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon-dxp.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Formatted text editor - DXP package (SQUIZ)</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>

package/demo/portals/index.scss

@@ -0,0 +1,8 @@
+#toolbar {
+  height: 32px;
+}
+
+#preview {
+  width: 100%;
+  height: calc(100vh - 32px);
+}

package/demo/portals/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { App } from './App';
+import '@squiz/resource-browser/lib/index.css';
+import '../../src/index.scss';
+import './index.scss';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/demo/portals/preview.html

@@ -0,0 +1,91 @@
+<html>
+  <head>
+    <title>Remirror portal example</title>
+    <style>
+      body {
+        font-family: Palatino, Georgia, Times, 'Times New Roman', Serif;
+      }
+
+      #content {
+        margin: 24px;
+      }
+
+      .separator {
+        background-color: yellow;
+      }
+
+      .underline {
+        text-decoration: underline;
+      }
+
+      .accordion-item-collapsed .accordion-item-content {
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="content" spellcheck="false">
+      <h1 data-sq-content-type="formatted-text" data-sq-block-index="1">Remirror example</h1>
+      <!-- comment goes here la -->
+      <div data-sq-content-type="formatted-text" data-sq-block-index="1">
+        Australian governments at all levels have
+        <u
+          ><strong><em>endorsed</em></strong></u
+        >
+        WCAG 2.0, and require all government websites (federal, state and territory) to meet the new guidelines at the
+        minimum compliance level (Single A) by the end of 2012. In addition, the Australian Government requires all
+        federal websites to meet the medium conformance level (Double A) by the end of 2014.
+      </div>
+      <p data-sq-content-type="formatted-text" data-sq-block-index="1">
+        Federal government agencies must update <strong>all government</strong> websites (as specified within scope
+        under the Website Accessibility National Transition Strategy (NTS)) to WCAG 2.0 conformance. Agencies should use
+        the principle of progressive enhancement when building and managing websites, and test for conformance across
+        multiple browsers and operating system configurations.
+      </p>
+
+      <p class="separator">The below section shows most formatting options/supported element tags.</p>
+
+      <p data-sq-content-type="formatted-text" data-sq-block-index="2">
+        <img
+          src="https://www.squiz.net/__data/assets/file/0014/11075/glyphsquiz-darkblue.svg"
+          alt="Squiz logo"
+          width="200px"
+        />
+      </p>
+      <p data-sq-content-type="formatted-text" data-sq-block-index="2">
+        Visit <a href="https://www.squiz.net/" target="_blank">squiz.net</a>.
+      </p>
+      <code data-sq-content-type="formatted-text" data-sq-block-index="2">This is a code block.</code>
+      <pre data-sq-content-type="formatted-text" data-sq-block-index="2">This is a pre block.</pre>
+      <ul data-sq-content-type="formatted-text" data-sq-block-index="2">
+        <li>Item 1</li>
+        <li>Item 2</li>
+        <li>Item 3</li>
+      </ul>
+      <ol data-sq-content-type="formatted-text" data-sq-block-index="2">
+        <li>Item 1</li>
+        <li>Item 2</li>
+        <li>Item 3</li>
+      </ol>
+      <hr data-sq-content-type="formatted-text" data-sq-block-index="2" />
+      <h1 data-sq-content-type="formatted-text" data-sq-block-index="2">Heading</h1>
+      <p data-sq-content-type="formatted-text" data-sq-block-index="2">
+        <strong>Bold</strong>, <em>Italics</em>, <span class="underline">underline</span>
+      </p>
+
+      <p class="separator">
+        The below section shows a React mounted element with formatted text input. The input is dynamically
+        added/removed from the DOM by clicking the button.
+      </p>
+
+      <div
+        data-sq-content-type="component"
+        data-sq-block-index="3"
+        class="accordion"
+        data-hydration-component="accordion"
+        data-hydration-props='{"items":[{"title":"Accordion title","content":"<p><strong>Accordion content</strong></p>","defaultExpanded":true}]}'
+      ></div>
+    </div>
+    <script type="module" src="./preview.tsx"></script>
+  </body>
+</html>

package/demo/portals/preview.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { Accordion } from './Accordion';
+
+document.querySelectorAll('[data-hydration-component="accordion"]').forEach((element) => {
+  const props = JSON.parse(element.getAttribute('data-hydration-props') || '');
+  const root = ReactDOM.createRoot(element);
+
+  root.render(<Accordion {...props} />);
+});

package/lib/Editor/Editor.d.ts

@@ -1,16 +1,21 @@
 import React, { ReactNode } from 'react';
 import { RemirrorContentType, RemirrorEventListener, Extension } from '@remirror/core';
 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;
+    onChange?: RemirrorEventListener<Extension>;
 };
-declare const Editor: ({ content, className, border, editable, onChange, children, isFocused, attributes, enableTableTool, }: EditorProps) => React.JSX.Element;
+declare const Editor: ({ attributes, border, children, className, containers, content, editable, enableDecorations, enableTableTool, isFocused: isInitiallyFocused, label, onChange, }: EditorProps) => React.JSX.Element;
 export default Editor;

package/lib/Editor/Editor.js

@@ -32,27 +32,13 @@ const clsx_1 = __importDefault(require("clsx"));
 const EditorToolbar_1 = require("../EditorToolbar");
 const EditorContext_1 = require("./EditorContext");
 const Extensions_1 = require("../Extensions/Extensions");
-const useFocus_1 = __importDefault(require("../hooks/useFocus"));
+const hooks_1 = require("../hooks");
 const extension_react_tables_1 = require("@remirror/extension-react-tables");
-const WrappedEditor = () => {
-    const preventImagePaste = (0, react_1.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;
-    }, []);
-    (0, react_2.useEditorEvent)('paste', preventImagePaste);
-    return react_1.default.createElement(react_2.EditorComponent, null);
-};
-const Editor = ({ content, className, border = true, editable = true, onChange, children, isFocused, attributes, enableTableTool = false, }) => {
+const EditorInput_1 = require("../ui/EditorInput/EditorInput");
+const Editor = ({ attributes, border = true, children, className, containers, content, editable = true, enableDecorations = true, enableTableTool = false, isFocused: isInitiallyFocused = false, label = 'Text editor', onChange, }) => {
+    const isEmpty = containers?.toolbar && containers.input && !children;
     const { manager, state, setState } = (0, react_2.useRemirror)({
-        extensions: (0, Extensions_1.createExtensions)((0, react_1.useContext)(EditorContext_1.EditorContext)),
+        extensions: (0, Extensions_1.createExtensions)((0, react_1.useContext)(EditorContext_1.EditorContext), enableDecorations),
         content,
         selection: 'start',
         stringHandler: 'html',
@@ -61,10 +47,15 @@ const Editor = ({ content, className, border = true, editable = true, onChange,
         setState(parameter.state);
         onChange?.(parameter);
     };
-    const { isVisible, handleFocus, handleBlur, wrapperRef } = (0, useFocus_1.default)(isFocused || false);
+    const wrapperRef = (0, react_1.useRef)(null);
+    const { isFocused, handleFocus, handleBlur } = (0, hooks_1.useFocus)(isInitiallyFocused, (0, react_1.useCallback)((element) => {
+        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
     (0, react_1.useEffect)(() => {
-        if (isFocused) {
+        if (isInitiallyFocused) {
             manager.view.dom.focus();
         }
         // TODO: May want to come back to this and see if there's a better solution
@@ -74,12 +65,12 @@ const Editor = ({ content, className, border = true, editable = true, onChange,
             button.setAttribute('type', 'button');
         });
     }, []);
-    return (react_1.default.createElement("div", { ref: wrapperRef, onBlur: handleBlur, onFocusCapture: handleFocus, className: (0, clsx_1.default)('squiz-fte-scope', 'squiz-fte-scope__editor', !editable && 'squiz-fte-scope__editor--is-disabled', border && 'squiz-fte-scope__editor--bordered', className) },
-        react_1.default.createElement(react_2.Remirror, { manager: manager, initialContent: state, editable: editable, onChange: handleChange, placeholder: "Write something", label: "Text editor", attributes: attributes },
-            editable && react_1.default.createElement(EditorToolbar_1.Toolbar, { isVisible: isVisible, enableTableTool: enableTableTool }),
+    return (react_1.default.createElement("div", { ref: wrapperRef, onBlurCapture: handleBlur, onFocusCapture: handleFocus, className: (0, clsx_1.default)('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) },
+        react_1.default.createElement(react_2.Remirror, { manager: manager, initialContent: state, editable: editable, onChange: handleChange, placeholder: "Write something", label: label, attributes: attributes },
+            editable && (react_1.default.createElement(EditorToolbar_1.Toolbar, { isVisible: isFocused, enableTableTool: enableTableTool, container: containers?.toolbar })),
             children && react_1.default.createElement("div", { className: "squiz-fte-scope__editor__children" }, children),
-            react_1.default.createElement(WrappedEditor, null),
+            react_1.default.createElement(EditorInput_1.EditorInput, { container: containers?.input }),
             enableTableTool && react_1.default.createElement(extension_react_tables_1.TableComponents, { enableTableCellMenu: false }),
-            editable && isVisible && react_1.default.createElement(EditorToolbar_1.FloatingToolbar, null))));
+            editable && isFocused && react_1.default.createElement(EditorToolbar_1.FloatingToolbar, null))));
 };
 exports.default = Editor;

package/lib/EditorToolbar/Toolbar.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 type ToolbarProps = {
     isVisible: boolean;
     enableTableTool: boolean;
+    container?: Element | null;
 };
-export declare const Toolbar: ({ isVisible, enableTableTool }: ToolbarProps) => React.JSX.Element;
+export declare const Toolbar: ({ isVisible, enableTableTool, container }: ToolbarProps) => React.JSX.Element;
 export {};