@squiz/formatted-text-editor 2.3.0 → 2.4.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 2.4.0
+
+### Minor Changes
+
+- 0d281a8: test changeset to trigger job
+
 ## 2.3.0
 
 ### Minor Changes

package/lib/Editor/Editor.d.ts

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,85 @@
+"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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,16 @@
+"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

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

package/lib/EditorToolbar/FloatingToolbar.js

@@ -0,0 +1,76 @@
+"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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,49 @@
+"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

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

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

@@ -0,0 +1,23 @@
+"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

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

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

@@ -0,0 +1,57 @@
+"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

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

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

@@ -0,0 +1,104 @@
+"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

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

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

@@ -0,0 +1,25 @@
+"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

@@ -0,0 +1,19 @@
+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;