@squiz/formatted-text-editor 2.2.11 → 2.3.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 2.3.0
+
+### Minor Changes
+
+- d88a072: changes regarding ci/cd refactoring
+
+## 2.2.12
+
+### Patch Changes
+
+- 4151b6a: add missing @mui/base package
+
 ## 2.2.11
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "2.2.11",
+  "version": "2.3.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "private": false,
@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@headlessui/react": "1.7.11",
+    "@mui/base": "^5.0.0-beta.40",
     "@mui/icons-material": "5.15.18",
     "@remirror/extension-react-tables": "^2.2.19",
     "@remirror/react": "2.0.35",

package/src/ui/Fields/MatrixAsset/MatrixAsset.spec.tsx

@@ -34,7 +34,7 @@ describe('MatrixAsset', () => {
           value={{
             matrixIdentifier: 'matrix-api-identifier',
             matrixAssetId: 'my-resource-id',
-            addional: 'addditional data',
+            additional: 'addditional data',
           }}
           onChange={jest.fn()}
         />

package/src/ui/Fields/ResourceBrowserSelector/ResourceBrowserSelector.spec.tsx

@@ -34,7 +34,7 @@ describe('ResourceBrowserSelector', () => {
         value={{
           matrixIdentifier: 'matrix-api-identifier',
           matrixAssetId: 'my-resource-id',
-          addional: 'addditional data',
+          additional: 'addditional data',
         }}
         onChange={jest.fn()}
       />,
@@ -57,7 +57,7 @@ describe('ResourceBrowserSelector', () => {
         value={{
           damObjectId: '123-456-789',
           damSystemIdentifier: 'zzz-xxx-ccc',
-          addional: 'addditional data',
+          additional: 'addditional data',
         }}
         onChange={jest.fn()}
       />,

package/lib/Editor/Editor.d.ts

@@ -1,16 +0,0 @@
-import React, { ReactNode } from 'react';
-import { RemirrorContentType, RemirrorEventListener, Extension } from '@remirror/core';
-type EditorProps = {
-    className?: string;
-    content?: RemirrorContentType;
-    onChange?: RemirrorEventListener<Extension>;
-    editable?: boolean;
-    border?: boolean;
-    children?: ReactNode;
-    isFocused?: boolean;
-    label?: string;
-    attributes?: Record<string, string>;
-    enableTableTool?: boolean;
-};
-declare const Editor: ({ content, className, border, editable, onChange, children, isFocused, attributes, enableTableTool, }: EditorProps) => React.JSX.Element;
-export default Editor;

package/lib/Editor/Editor.js

@@ -1,85 +0,0 @@
-"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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const react_2 = require("@remirror/react");
-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 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 { manager, state, setState } = (0, react_2.useRemirror)({
-        extensions: (0, Extensions_1.createExtensions)((0, react_1.useContext)(EditorContext_1.EditorContext)),
-        content,
-        selection: 'start',
-        stringHandler: 'html',
-    });
-    const handleChange = (parameter) => {
-        setState(parameter.state);
-        onChange?.(parameter);
-    };
-    const { isVisible, handleFocus, handleBlur, wrapperRef } = (0, useFocus_1.default)(isFocused || false);
-    // On initial load, check if we need to focus the actual text content
-    (0, react_1.useEffect)(() => {
-        if (isFocused) {
-            manager.view.dom.focus();
-        }
-        // TODO: May want to come back to this and see if there's a better solution
-        // We have to add a type button attribute to the delete buttons so they don't cause a submit by accident.
-        const tableDeleteButtons = document.querySelectorAll('.remirror-table-delete-inner-button');
-        tableDeleteButtons.forEach((button) => {
-            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 }),
-            children && react_1.default.createElement("div", { className: "squiz-fte-scope__editor__children" }, children),
-            react_1.default.createElement(WrappedEditor, null),
-            enableTableTool && react_1.default.createElement(extension_react_tables_1.TableComponents, { enableTableCellMenu: false }),
-            editable && isVisible && react_1.default.createElement(EditorToolbar_1.FloatingToolbar, null))));
-};
-exports.default = Editor;

package/lib/Editor/EditorContext.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { ResolveNodeToUrl } from '../types';
-export type EditorContextOptions = {
-    matrix: {
-        matrixDomain: string;
-    };
-    resolveNodeToUrl: ResolveNodeToUrl;
-};
-export declare const defaultEditorContext: EditorContextOptions;
-export declare const EditorContext: React.Context<EditorContextOptions>;

package/lib/Editor/EditorContext.js

@@ -1,16 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EditorContext = exports.defaultEditorContext = void 0;
-const react_1 = __importDefault(require("react"));
-exports.defaultEditorContext = {
-    matrix: {
-        matrixDomain: '',
-    },
-    resolveNodeToUrl: () => {
-        throw new Error('resolveNodeToUrl has not been configured.');
-    },
-};
-exports.EditorContext = react_1.default.createContext(exports.defaultEditorContext);

package/lib/EditorToolbar/FloatingToolbar.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const FloatingToolbar: () => React.JSX.Element;

package/lib/EditorToolbar/FloatingToolbar.js

@@ -1,76 +0,0 @@
-"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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FloatingToolbar = void 0;
-const react_1 = __importStar(require("react"));
-const ItalicButton_1 = __importDefault(require("./Tools/Italic/ItalicButton"));
-const UnderlineButton_1 = __importDefault(require("./Tools/Underline/UnderlineButton"));
-const BoldButton_1 = __importDefault(require("./Tools/Bold/BoldButton"));
-const hooks_1 = require("../hooks");
-const RemoveLinkButton_1 = __importDefault(require("./Tools/Link/RemoveLinkButton"));
-const LinkButton_1 = __importDefault(require("./Tools/Link/LinkButton"));
-const react_2 = require("@remirror/react");
-const react_components_1 = require("@remirror/react-components");
-const createToolbarPositioner_1 = require("../utils/createToolbarPositioner");
-const ImageButton_1 = __importDefault(require("./Tools/Image/ImageButton"));
-const Extensions_1 = require("../Extensions/Extensions");
-const ClearFormattingButton_1 = __importDefault(require("./Tools/ClearFormatting/ClearFormattingButton"));
-const FloatingToolbar = () => {
-    const watchedMarks = [Extensions_1.MarkName.Link, Extensions_1.MarkName.AssetLink];
-    const extensionNames = (0, hooks_1.useExtensionNames)();
-    const positioner = (0, react_1.useMemo)(() => (0, createToolbarPositioner_1.createToolbarPositioner)({ types: watchedMarks }), []);
-    const { clearFormatting } = (0, react_2.useCommands)();
-    const active = (0, react_2.useActive)();
-    const { data: { marks }, } = (0, react_2.usePositioner)(positioner, []);
-    let buttons = [
-        extensionNames.bold && react_1.default.createElement(BoldButton_1.default, { key: "bold" }),
-        extensionNames.italic && react_1.default.createElement(ItalicButton_1.default, { key: "italic" }),
-        extensionNames.underline && react_1.default.createElement(UnderlineButton_1.default, { key: "underline" }),
-    ];
-    if (active.image() || active.assetImage() || active.DAMImage()) {
-        buttons = [react_1.default.createElement(ImageButton_1.default, { key: "add-image", inPopover: true })];
-    }
-    else if (marks?.[Extensions_1.MarkName.Link].isExclusivelyActive || marks?.[Extensions_1.MarkName.AssetLink].isExclusivelyActive) {
-        // if all of the selected text is a link show the options to update/remove the link instead of the regular
-        // formatting options.
-        buttons = [
-            react_1.default.createElement(LinkButton_1.default, { key: "update-link", inPopover: true }),
-            react_1.default.createElement(RemoveLinkButton_1.default, { key: "remove-link", inPopover: true }),
-        ];
-    }
-    else if (!marks?.[Extensions_1.MarkName.Link].isActive && !marks?.[Extensions_1.MarkName.AssetLink].isActive) {
-        // if none of the selected text is a link show the option to create a link.
-        buttons.push(react_1.default.createElement(react_components_1.VerticalDivider, { key: "link-divider" }), react_1.default.createElement(LinkButton_1.default, { key: "add-link", inPopover: true }));
-    }
-    // Clear formatting will always be the last button in the toolbar
-    if (extensionNames.clearFormatting && clearFormatting.enabled()) {
-        buttons.push(react_1.default.createElement(ClearFormattingButton_1.default, { key: "clearFormatting" }));
-    }
-    return (react_1.default.createElement(react_2.FloatingToolbar, { className: "squiz-fte-scope squiz-fte-scope__floating-popover", positioner: positioner, tabIndex: 0, role: 'toolbar' }, buttons));
-};
-exports.FloatingToolbar = FloatingToolbar;

package/lib/EditorToolbar/Toolbar.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-type ToolbarProps = {
-    isVisible: boolean;
-    enableTableTool: boolean;
-};
-export declare const Toolbar: ({ isVisible, enableTableTool }: ToolbarProps) => React.JSX.Element;
-export {};

package/lib/EditorToolbar/Toolbar.js

@@ -1,49 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Toolbar = void 0;
-const react_1 = __importDefault(require("react"));
-const react_components_1 = require("@remirror/react-components");
-const clsx_1 = __importDefault(require("clsx"));
-const ItalicButton_1 = __importDefault(require("./Tools/Italic/ItalicButton"));
-const UnderlineButton_1 = __importDefault(require("./Tools/Underline/UnderlineButton"));
-const BoldButton_1 = __importDefault(require("./Tools/Bold/BoldButton"));
-const TextAlignButtons_1 = __importDefault(require("./Tools/TextAlign/TextAlignButtons"));
-const UndoButton_1 = __importDefault(require("./Tools/Undo/UndoButton"));
-const RedoButton_1 = __importDefault(require("./Tools/Redo/RedoButton"));
-const TextTypeDropdown_1 = __importDefault(require("./Tools/TextType/TextTypeDropdown"));
-const LinkButton_1 = __importDefault(require("./Tools/Link/LinkButton"));
-const ImageButton_1 = __importDefault(require("./Tools/Image/ImageButton"));
-const RemoveLinkButton_1 = __importDefault(require("./Tools/Link/RemoveLinkButton"));
-const ClearFormattingButton_1 = __importDefault(require("./Tools/ClearFormatting/ClearFormattingButton"));
-const ListButtons_1 = __importDefault(require("./Tools/Lists/ListButtons"));
-const HorizontalLineButton_1 = __importDefault(require("./Tools/HorizontalLine/HorizontalLineButton"));
-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 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 },
-        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),
-                react_1.default.createElement(RedoButton_1.default, null),
-                react_1.default.createElement(react_components_1.VerticalDivider, null))),
-            extensionNames.heading && extensionNames.paragraph && extensionNames.preformatted && react_1.default.createElement(TextTypeDropdown_1.default, null),
-            extensionNames.bold && react_1.default.createElement(BoldButton_1.default, null),
-            extensionNames.italic && react_1.default.createElement(ItalicButton_1.default, null),
-            extensionNames.underline && react_1.default.createElement(UnderlineButton_1.default, null),
-            extensionNames.nodeFormatting && react_1.default.createElement(TextAlignButtons_1.default, null),
-            extensionNames.listItem && react_1.default.createElement(ListButtons_1.default, null),
-            extensionNames.horizontalRule && react_1.default.createElement(HorizontalLineButton_1.default, null),
-            extensionNames.link && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(LinkButton_1.default, null),
-                react_1.default.createElement(RemoveLinkButton_1.default, null))),
-            extensionNames.image && react_1.default.createElement(ImageButton_1.default, null),
-            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))));
-};
-exports.Toolbar = Toolbar;

package/lib/EditorToolbar/Tools/Bold/BoldButton.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const BoldButton: () => React.JSX.Element;
-export default BoldButton;

package/lib/EditorToolbar/Tools/Bold/BoldButton.js

@@ -1,23 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@remirror/react");
-const Button_1 = __importDefault(require("../../../ui/Button/Button"));
-const FormatBoldRounded_1 = __importDefault(require("@mui/icons-material/FormatBoldRounded"));
-const getShortcutSymbol_1 = require("../../../utils/getShortcutSymbol");
-const BoldButton = () => {
-    const { toggleBold } = (0, react_2.useCommands)();
-    const chain = (0, react_2.useChainedCommands)();
-    const active = (0, react_2.useActive)();
-    const enabled = toggleBold.enabled();
-    const handleSelect = () => {
-        if (toggleBold.enabled()) {
-            chain.toggleBold().focus().run();
-        }
-    };
-    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.bold(), icon: react_1.default.createElement(FormatBoldRounded_1.default, null), label: `Bold (${(0, getShortcutSymbol_1.getShortcutSymbol)()}+B)` }));
-};
-exports.default = BoldButton;

package/lib/EditorToolbar/Tools/ClearFormatting/ClearFormattingButton.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const ClearFormattingButton: () => React.JSX.Element;
-export default ClearFormattingButton;

package/lib/EditorToolbar/Tools/ClearFormatting/ClearFormattingButton.js

@@ -1,57 +0,0 @@
-"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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const react_2 = require("@remirror/react");
-const react_components_1 = require("@remirror/react-components");
-const FormatClearRounded_1 = __importDefault(require("@mui/icons-material/FormatClearRounded"));
-const Button_1 = __importDefault(require("../../../ui/Button/Button"));
-const getShortcutSymbol_1 = require("../../../utils/getShortcutSymbol");
-const ClearFormattingButton = () => {
-    const { clearFormatting } = (0, react_2.useCommands)();
-    const { selection } = (0, react_2.useEditorState)();
-    // Checks wether we have specific content selected or not
-    const contentSelected = !selection.empty;
-    const handleSelect = () => {
-        if (clearFormatting.enabled()) {
-            clearFormatting();
-        }
-    };
-    const handleShortcut = (0, react_1.useCallback)(() => {
-        handleSelect();
-        // Prevent other key handlers being run
-        return true;
-    }, []);
-    // When Ctrl+\ is pressed clear formatting, only registered in the toolbar button instance to avoid the key press
-    // being double handled.
-    (0, react_2.useKeymap)('Mod-\\', handleShortcut);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_components_1.VerticalDivider, null),
-        react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: false, isActive: false, icon: react_1.default.createElement(FormatClearRounded_1.default, null), label: `${contentSelected ? 'Clear formatting from selection' : 'Clear all formatting'} (${(0, getShortcutSymbol_1.getShortcutSymbol)()}+\\)` })));
-};
-exports.default = ClearFormattingButton;

package/lib/EditorToolbar/Tools/ContentTools/ContentToolsDropdown.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const ContentToolsDropdown: () => React.JSX.Element | null;
-export default ContentToolsDropdown;

package/lib/EditorToolbar/Tools/ContentTools/ContentToolsDropdown.js

@@ -1,104 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const model_1 = require("@remirror/pm/model");
-const react_1 = require("@remirror/react");
-const dxp_ai_client_react_1 = require("@squiz/dxp-ai-client-react");
-const sds_1 = require("@squiz/sds");
-const prosemirror_model_1 = require("prosemirror-model");
-const react_2 = __importDefault(require("react"));
-const AiIcon_1 = require("../../../Icons/AiIcon");
-const dxp_content_tools_modal_1 = require("@squiz/dxp-content-tools-modal");
-const ContentToolsDropdown = () => {
-    const aiService = (0, dxp_ai_client_react_1.useAiService)();
-    const { contentTools } = aiService;
-    const { updateActiveDialog } = (0, sds_1.useDialogStore)();
-    const { isSelectionEmpty, getHTML } = (0, react_1.useHelpers)();
-    const { getState, view } = (0, react_1.useRemirrorContext)();
-    // No content tools to show, don't show dropdown at all
-    if (!contentTools || contentTools?.length === 0) {
-        return null;
-    }
-    const hasContent = getState().doc.textContent.length > 0;
-    const getSelectedRichText = () => {
-        const { from, to } = getState().selection;
-        const fragment = getState().doc.slice(from, to).content;
-        const div = document.createElement('div');
-        fragment.forEach((node) => {
-            div.appendChild(model_1.DOMSerializer.fromSchema(getState().schema).serializeNode(node));
-        });
-        return div.innerHTML;
-    };
-    const onInsertAfter = (content) => {
-        const schema = getState().schema;
-        const doc = getState().doc;
-        const tr = getState().tr;
-        // Parse the HTML string into a document fragment
-        const element = document.createElement('div');
-        element.innerHTML = content;
-        const newContent = prosemirror_model_1.DOMParser.fromSchema(schema).parse(element);
-        // Append the new content to the existing document
-        const newTransaction = tr.insert(doc.content.size, newContent.content);
-        view.dispatch(newTransaction);
-    };
-    const onReplace = (content) => {
-        const schema = getState().schema;
-        const { from, to, empty } = getState().selection;
-        const { tr } = getState();
-        // Parse the HTML string into a document fragment
-        const element = document.createElement('div');
-        element.innerHTML = content;
-        const newContent = prosemirror_model_1.DOMParser.fromSchema(schema).parse(element);
-        if (empty) {
-            // If there is no selection, replace the entire document content
-            const newTransaction = tr.replaceWith(0, getState().doc.content.size, newContent.content);
-            view.dispatch(newTransaction);
-        }
-        else {
-            // Replace the selected content with the new content
-            const newTransaction = tr.replaceWith(from, to, newContent.content);
-            view.dispatch(newTransaction);
-        }
-    };
-    const dropdownItems = contentTools?.map((item) => {
-        return {
-            items: [
-                {
-                    action: () => {
-                        // If we don't have a selection, use all text
-                        const richContent = isSelectionEmpty() ? getHTML() : getSelectedRichText(); // NOTE: selected rich text may not work as expected
-                        const dialogProps = {
-                            classes: ['dxp-ctm-dialog'],
-                            dialogContent: {
-                                renderContent: (dialogContentProps) => {
-                                    return (react_2.default.createElement(dxp_content_tools_modal_1.ModalContent, { aiServiceOverride: aiService, content: richContent, contentTool: item, dialogContentProps: dialogContentProps, onInsertAfter: onInsertAfter, onReplace: onReplace }));
-                                },
-                            },
-                            dialogSize: sds_1.DIALOG_SIZE_XL,
-                            heading: `Rewrite content to ... ${item.name}`,
-                            icon: dxp_content_tools_modal_1.ICON_DXP_AI,
-                            footer: react_2.default.createElement(dxp_content_tools_modal_1.ModalFooter, { contentTool: item }),
-                            stateHandler: sds_1.useDialogStore,
-                            showFullScreenButton: true,
-                        };
-                        updateActiveDialog(dialogProps);
-                    },
-                    key: item.id,
-                    label: react_2.default.createElement("span", null, item.name),
-                },
-            ],
-            key: item.id,
-        };
-    });
-    return (react_2.default.createElement(react_2.default.Fragment, null,
-        react_2.default.createElement(react_1.VerticalDivider, null),
-        hasContent && (react_2.default.createElement(sds_1.Dropdown, { title: "Content tools", "aria-label": "Content tools", buttonProps: {
-                format: sds_1.BUTTON_FORMAT_TRANSPARENT,
-                icon: AiIcon_1.ICON_AI,
-                theme: sds_1.BUTTON_THEME_DEFAULT,
-            }, className: "content-tools-dropdown", dropdownPosition: sds_1.DROPDOWN_POSITION_RIGHT, heading: 'Rewrite to...', sections: dropdownItems ?? [], disabled: !hasContent })),
-        !hasContent && react_2.default.createElement("div", { className: "content-tools-dropdown--disabled" }, AiIcon_1.ICON_AI)));
-};
-exports.default = ContentToolsDropdown;

package/lib/EditorToolbar/Tools/HorizontalLine/HorizontalLineButton.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const HorizontalLineButton: () => React.JSX.Element;
-export default HorizontalLineButton;

package/lib/EditorToolbar/Tools/HorizontalLine/HorizontalLineButton.js

@@ -1,25 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@remirror/react");
-const react_components_1 = require("@remirror/react-components");
-const Button_1 = __importDefault(require("../../../ui/Button/Button"));
-const HorizontalRuleRounded_1 = __importDefault(require("@mui/icons-material/HorizontalRuleRounded"));
-const HorizontalLineButton = () => {
-    const { insertHorizontalRule } = (0, react_2.useCommands)();
-    const chain = (0, react_2.useChainedCommands)();
-    const active = (0, react_2.useActive)();
-    const enabled = insertHorizontalRule.enabled();
-    const handleSelect = () => {
-        if (insertHorizontalRule.enabled()) {
-            chain.insertHorizontalRule().focus().run();
-        }
-    };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.italic(), icon: react_1.default.createElement(HorizontalRuleRounded_1.default, null), label: "Horizontal line" }),
-        react_1.default.createElement(react_components_1.VerticalDivider, null)));
-};
-exports.default = HorizontalLineButton;

package/lib/EditorToolbar/Tools/Image/Form/ImageForm.d.ts

@@ -1,19 +0,0 @@
-import { ReactElement } from 'react';
-import { SubmitHandler } from 'react-hook-form';
-import { ImageAttributes } from '@remirror/extension-image/dist-types/image-extension';
-import { NodeName } from '../../../../Extensions/Extensions';
-import { AssetImageAttributes } from '../../../../Extensions/ImageExtension/AssetImageExtension';
-import { DAMImageAttributes } from '../../../../Extensions/ImageExtension/DAMImageExtension';
-import { DeepPartial } from '../../../../types';
-export type ImageFormData = {
-    imageType: NodeName;
-    image: Pick<ImageAttributes, 'src' | 'alt' | 'width' | 'height'>;
-    resourceImage: AssetImageAttributes & DAMImageAttributes;
-};
-export type FormProps = {
-    data: DeepPartial<ImageFormData>;
-    onSubmit: SubmitHandler<ImageFormData>;
-};
-export type Dimensions = 'image.width' | 'image.height';
-declare const ImageForm: ({ data, onSubmit }: FormProps) => ReactElement;
-export default ImageForm;