@squiz/formatted-text-editor 2.4.0 → 2.6.0

package/lib/EditorToolbar/Toolbar.js

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

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

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

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

@@ -1,6 +1,6 @@
 @import "https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded";
 
-/* node_modules/@squiz/sds/lib/package.css */
+/* ../../node_modules/@squiz/sds/lib/package.css */
 .squiz-fte-scope code[class*=language-],
 .squiz-fte-scope pre[class*=language-] {
   color: #ccc;
@@ -280,6 +280,9 @@
   margin-right: 0.5rem;
   max-width: 100%;
 }
+.squiz-fte-scope .sds-alert__title .svg-wrapper svg {
+  fill: #3d3d3d;
+}
 .squiz-fte-scope .sds-alert__buttons {
   display: flex;
   margin-bottom: 0.375rem;
@@ -1100,6 +1103,9 @@
   letter-spacing: -0.5px;
   line-height: 1.5rem;
 }
+.squiz-fte-scope .sds-card-title .svg-wrapper svg {
+  fill: #3d3d3d;
+}
 .squiz-fte-scope .sds-card-subtitle {
   font-size: 1rem;
   font-weight: 700;
@@ -2020,6 +2026,9 @@
   line-height: 1.25rem;
   color: #3d3d3d;
 }
+.squiz-fte-scope .sds-data-list__title .svg-wrapper svg {
+  fill: #3d3d3d;
+}
 @media screen and (min-width: 768px) {
   .squiz-fte-scope .sds-data-list__icon + div {
     align-items: center;
@@ -2136,6 +2145,9 @@
   letter-spacing: -0.5px;
   line-height: 1.5rem;
 }
+.squiz-fte-scope .sds-dialog__heading span .svg-wrapper svg {
+  fill: #3d3d3d;
+}
 .squiz-fte-scope .sds-dialog__icon {
   flex-shrink: 0;
   margin-right: 0.75rem;
@@ -2318,7 +2330,7 @@
 .squiz-fte-scope .sds-dropdown-label {
   display: block;
   padding: 0.5rem;
-  word-break: break-all;
+  word-break: break-word;
 }
 .squiz-fte-scope .sds-empty-state-card {
   align-items: center;
@@ -2355,6 +2367,9 @@
   margin-top: 1rem;
   text-align: center;
 }
+.squiz-fte-scope .sds-empty-state-card__title .svg-wrapper svg {
+  fill: #3d3d3d;
+}
 .squiz-fte-scope .sds-empty-state-card__icon > svg {
   height: 11rem;
   width: auto;
@@ -2818,11 +2833,21 @@
   font-weight: 600;
   margin-bottom: 0.25rem;
 }
+.squiz-fte-scope .sds-form-control-text {
+  align-items: center;
+  display: flex;
+}
 .squiz-fte-scope .sds-form-control-label {
   color: #3d3d3d;
   flex-grow: 1;
   text-align: left;
-  word-break: break-all;
+  word-break: break-word;
+}
+.squiz-fte-scope .sds-form-control--prominent .sds-form-control-item {
+  margin-bottom: 1.25rem;
+}
+.squiz-fte-scope .sds-form-control--prominent .sds-form-control-item:last-child {
+  margin-bottom: 0;
 }
 .squiz-fte-scope ::-moz-placeholder {
   color: #949494;
@@ -2941,6 +2966,9 @@
   display: block;
   margin-bottom: 0.75rem;
 }
+.squiz-fte-scope .sds-link-list__heading .svg-wrapper svg {
+  fill: #3d3d3d;
+}
 .squiz-fte-scope .sds-link-list {
   list-style-type: none;
   margin: 0;
@@ -3045,6 +3073,9 @@
   display: block;
   margin-bottom: 0.75rem;
 }
+.squiz-fte-scope .sds-row__title .svg-wrapper svg {
+  fill: #3d3d3d;
+}
 .squiz-fte-scope .sds-row__title:only-child,
 .squiz-fte-scope .sds-row__title:last-child {
   margin-bottom: 0;
@@ -3057,36 +3088,54 @@
   margin-bottom: 1.75rem;
   margin-top: 1.75rem;
 }
+.squiz-fte-scope .sds-heading--level-1 .svg-wrapper svg {
+  fill: #3d3d3d;
+}
 .squiz-fte-scope .sds-heading--level-2 {
   font-size: 1.25rem;
   font-weight: 600;
   letter-spacing: -0.5px;
   line-height: 1.5rem;
 }
+.squiz-fte-scope .sds-heading--level-2 .svg-wrapper svg {
+  fill: #3d3d3d;
+}
 .squiz-fte-scope .sds-heading--level-3 {
   font-size: 1.125rem;
   font-weight: 600;
   letter-spacing: -0.2px;
   line-height: 1.375rem;
 }
+.squiz-fte-scope .sds-heading--level-3 .svg-wrapper svg {
+  fill: #3d3d3d;
+}
 .squiz-fte-scope .sds-heading--level-4 {
   font-size: 1rem;
   font-weight: 700;
   letter-spacing: -0.2px;
   line-height: 1.25rem;
 }
+.squiz-fte-scope .sds-heading--level-4 .svg-wrapper svg {
+  fill: #3d3d3d;
+}
 .squiz-fte-scope .sds-heading--level-5 {
   font-size: 1rem;
   font-weight: 600;
   letter-spacing: -0.2px;
   line-height: 1.25rem;
 }
+.squiz-fte-scope .sds-heading--level-5 .svg-wrapper svg {
+  fill: #3d3d3d;
+}
 .squiz-fte-scope .sds-heading--level-6 {
   font-size: 0.875rem;
   font-weight: 600;
   letter-spacing: -0.2px;
   line-height: 1.25rem;
 }
+.squiz-fte-scope .sds-heading--level-6 .svg-wrapper svg {
+  fill: #3d3d3d;
+}
 .squiz-fte-scope .sds-text--sm-regular {
   font-size: 0.8125rem;
   font-weight: 400;
@@ -4175,6 +4224,9 @@
   margin-bottom: 1rem;
   margin-top: 0;
 }
+.squiz-fte-scope .sds-popover__title .svg-wrapper svg {
+  fill: #3d3d3d;
+}
 .squiz-fte-scope .sds-popover--left .sds-popover__content-wrapper {
   bottom: 50%;
   right: calc(100% + 1rem);
@@ -4214,6 +4266,108 @@
 .squiz-fte-scope .sds-popover--medium .sds-popover__content-wrapper {
   width: 400px;
 }
+.squiz-fte-scope .sds-sequence-list.presentation-only .sds-sequence-list__item-content {
+  margin-right: unset;
+}
+.squiz-fte-scope .sds-sequence-list__item {
+  background-color: #ededed;
+  border-radius: 0.25rem;
+  display: flex;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  position: relative;
+  transition: 0.3s background-color ease-in;
+}
+.squiz-fte-scope .sds-sequence-list__item--dragging {
+  background-color: #e0e0e0;
+}
+.squiz-fte-scope .sds-sequence-list__item:last-of-type::before {
+  content: none;
+}
+.squiz-fte-scope .sds-sequence-list__list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  list-style-type: none;
+}
+.squiz-fte-scope .sds-sequence-list__list--dragging .sds-sequence-list__item-dots {
+  display: none;
+}
+.squiz-fte-scope .sds-sequence-list__list--dragging .sds-tooltip {
+  visibility: hidden;
+}
+.squiz-fte-scope .sds-sequence-list__item-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-right: 1.5rem;
+  width: 100%;
+}
+@media screen and (min-width: 576px) {
+  .squiz-fte-scope .sds-sequence-list__item-content {
+    flex-direction: row;
+    gap: 1rem;
+    justify-content: space-evenly;
+  }
+}
+.squiz-fte-scope .sds-sequence-list__item-content .sds-form-field {
+  width: 100%;
+}
+.squiz-fte-scope .sds-sequence-list .sds-tooltip__wrapper {
+  height: -moz-min-content;
+  height: min-content;
+}
+.squiz-fte-scope .sds-sequence-list .sds-tooltip__wrapper:has(.sds-sequence-list__item-remove) {
+  position: absolute;
+  right: 1rem;
+  top: 0.75rem;
+}
+.squiz-fte-scope .sds-sequence-list__item-remove--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.squiz-fte-scope .sds-sequence-list__item-dots {
+  left: -30px;
+  position: absolute;
+  width: 0.25rem;
+}
+.squiz-fte-scope .sds-sequence-list__item-index-mark {
+  font-size: 0.875rem;
+  font-weight: 400;
+  letter-spacing: -0.2px;
+  line-height: 1.25rem;
+  background-color: #f5bb8c;
+  border-radius: 100%;
+  display: grid;
+  height: 2rem;
+  left: -0.75rem;
+  place-items: center;
+  position: absolute;
+  top: 50%;
+  transform: translate(-100%, -50%);
+  width: 2rem;
+}
+.squiz-fte-scope .sds-sequence-list__item-drag-btn {
+  align-self: baseline;
+}
+.squiz-fte-scope .sds-sequence-list__item-drag-btn svg {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+.squiz-fte-scope .sds-sequence-list__item-drag-btn--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.squiz-fte-scope .sds-sequence-list__add-item-btn {
+  font-size: 0.875rem;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 1.25rem;
+  align-items: center;
+  display: flex;
+  gap: 0.75rem;
+  margin-left: 3rem;
+}
 
 /* ../../node_modules/@squiz/dxp-content-tools-modal/lib/package.css */
 .dxp-ctm-section .squiz-fte-scope.squiz-fte-scope__editor.squiz-fte-scope__editor--is-disabled.squiz-fte-scope__editor--bordered {
@@ -5145,6 +5299,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 +5670,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;