npm - @squiz/formatted-text-editor - Versions diffs - 2.4.0 → 2.5.0 - Mend

@squiz/formatted-text-editor 2.4.0 → 2.5.0

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 (70) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,11 @@
 # Change Log
+## 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} RENAMED Viewed

@@ -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} />

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

@@ -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';

package/demo/diff/index.html ADDED Viewed

@@ -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/{main.tsx → diff/main.tsx} RENAMED Viewed

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

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

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

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

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

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

package/demo/portals/index.tsx ADDED Viewed

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

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

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

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

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

@@ -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 {};

package/lib/EditorToolbar/Toolbar.js CHANGED Viewed

@@ -23,9 +23,10 @@ const HorizontalLineButton_1 = __importDefault(require("./Tools/HorizontalLine/H
 const TableButton_1 = __importDefault(require("./Tools/Table/TableButton"));
 const ContentToolsDropdown_1 = __importDefault(require("./Tools/ContentTools/ContentToolsDropdown"));
 const hooks_1 = require("../hooks");
-const Toolbar = ({ isVisible, enableTableTool }) => {
+const react_dom_1 = require("react-dom");
+const Toolbar = ({ isVisible, enableTableTool, container }) => {
     const extensionNames = (0, hooks_1.useExtensionNames)();
-    return (react_1.default.createElement(react_components_1.Toolbar, { className: (0, clsx_1.default)('editor-toolbar header-toolbar', isVisible && 'show-toolbar'), role: "toolbar", tabIndex: 0 },
+    const toolbar = (react_1.default.createElement(react_components_1.Toolbar, { className: (0, clsx_1.default)('editor-toolbar header-toolbar', isVisible && 'show-toolbar', container && 'fte-portal-toolbar'), role: "toolbar", tabIndex: 0 },
         react_1.default.createElement("div", { className: "editor-toolbar__tools" },
             extensionNames.history && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(UndoButton_1.default, null),
@@ -45,5 +46,6 @@ const Toolbar = ({ isVisible, enableTableTool }) => {
             extensionNames.clearFormatting && react_1.default.createElement(ClearFormattingButton_1.default, null),
             enableTableTool && extensionNames.table && react_1.default.createElement(TableButton_1.default, null),
             react_1.default.createElement(ContentToolsDropdown_1.default, null))));
+    return container ? (0, react_dom_1.createPortal)(toolbar, container) : toolbar;
 };
 exports.Toolbar = Toolbar;

package/lib/EditorToolbar/Tools/Image/Form/ImageForm.js CHANGED Viewed

@@ -104,13 +104,11 @@ const ImageForm = ({ data, onSubmit }) => {
         setViewType(value);
         // If its the URL field type we know what the imageType should be
         if (value === ViewTypes.URL) {
-            console.log(`handleChangeViewType: ${value} NodeName.Image`);
             setValue('imageType', Extensions_1.NodeName.Image);
         }
         else {
             // Need a value here and this is the assumed default elsewhere
             // Will be set again later once Resource Browser returns a resource value
-            console.log(`handleChangeViewType: ${value} NodeName.AssetImage`);
             setValue('imageType', Extensions_1.NodeName.AssetImage);
         }
     }, [setViewType, setValue]);
@@ -178,7 +176,6 @@ const ImageForm = ({ data, onSubmit }) => {
                         return matrixValidation && damValidation;
                     },
                 }, render: ({ field: { onChange, value }, fieldState: { error } }) => (react_1.default.createElement(ResourceBrowserSelector_1.ResourceBrowserSelector, { modalTitle: "Insert image", allowedTypes: ['image'], value: value, onChange: (value) => {
-                        console.log(`onChange: ${value}`);
                         setValue('imageType', value.target.value.nodeType);
                         onChange(value);
                     }, error: error?.message })) })))));

package/lib/Extensions/CodeBlockExtension/CodeBlockExtension.d.ts CHANGED Viewed

@@ -1,5 +1,15 @@
-import { CodeBlockExtension } from '@remirror/extension-code-block';
+import { ApplySchemaAttributes, CommandFunction, NodeExtension, NodeExtensionSpec, NodeSpecOverride } from '@remirror/core';
 import { NodeViewMethod } from 'remirror';
-export declare class ExtendedCodeBlockExtension extends CodeBlockExtension {
-    createNodeViews(): NodeViewMethod;
+export type CodeBlockOptions = {
+    enableDecorations?: boolean;
+};
+export declare class CodeBlockExtension extends NodeExtension<CodeBlockOptions> {
+    get name(): "codeBlock";
+    createTags(): ("block" | "code")[];
+    createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec;
+    createNodeViews(): NodeViewMethod | Record<string, never>;
+    /**
+     * Toggle the <code> for the current block.
+     */
+    toggleCodeBlock(): CommandFunction;
 }