@squiz/formatted-text-editor 2.3.0 → 2.5.0

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

package/lib/EditorToolbar/Toolbar.js

@@ -0,0 +1,51 @@
+"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 react_dom_1 = require("react-dom");
+const Toolbar = ({ isVisible, enableTableTool, container }) => {
+    const extensionNames = (0, hooks_1.useExtensionNames)();
+    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),
+                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))));
+    return container ? (0, react_dom_1.createPortal)(toolbar, container) : toolbar;
+};
+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;

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

@@ -0,0 +1,183 @@
+"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_hook_form_1 = require("react-hook-form");
+const react_image_size_1 = require("react-image-size");
+const clsx_1 = __importDefault(require("clsx"));
+const Input_1 = require("../../../../ui/Fields/Input/Input");
+const Button_1 = __importDefault(require("../../../../ui/Button/Button"));
+const LinkOff_1 = __importDefault(require("@mui/icons-material/LinkOff"));
+const InsertLinkRounded_1 = __importDefault(require("@mui/icons-material/InsertLinkRounded"));
+const Extensions_1 = require("../../../../Extensions/Extensions");
+const validation_1 = require("../../../../utils/validation");
+const Tabs_1 = require("../../../../ui/Tabs/Tabs");
+const ResourceBrowserSelector_1 = require("../../../../ui/Fields/ResourceBrowserSelector/ResourceBrowserSelector");
+var ViewTypes;
+(function (ViewTypes) {
+    ViewTypes["Resource"] = "Resource";
+    ViewTypes["URL"] = "URL";
+})(ViewTypes || (ViewTypes = {}));
+const imageTypeOptions = {
+    [ViewTypes.Resource]: { label: 'From source' },
+    [ViewTypes.URL]: { label: 'From URL' },
+};
+const ImageForm = ({ data, onSubmit }) => {
+    const { control, register, handleSubmit, setValue, watch, formState: { errors }, } = (0, react_hook_form_1.useForm)({
+        defaultValues: data,
+    });
+    const imageType = watch('imageType');
+    const [viewType, setViewType] = (0, react_1.useState)(ViewTypes.Resource);
+    const [aspectRatioFromWidth, setAspectRatioFromWidth] = (0, react_1.useState)(9 / 16);
+    const [aspectRatioFromHeight, setAspectRatioFromHeight] = (0, react_1.useState)(16 / 9);
+    const [aspectRatioLocked, setAspectRatioLocked] = (0, react_1.useState)(true);
+    const setDimensionsFromURL = async (e) => {
+        try {
+            const { width, height } = await (0, react_image_size_1.getImageSize)(e.target.value);
+            setValue('image.width', width);
+            setValue('image.height', height);
+            setAspectRatioFromWidth(height / width);
+            setAspectRatioFromHeight(width / height);
+        }
+        catch (error) {
+            // swallow the error for fetching the image size, will occur if the URL does not point to an image.
+            // will be handled by validation when attempting to add the image.
+        }
+    };
+    const validateIsNotImage = async (src) => {
+        try {
+            await (0, react_image_size_1.getImageSize)(src);
+            return false;
+        }
+        catch (error) {
+            return true;
+        }
+    };
+    const calculateDimensions = (event) => {
+        if (aspectRatioLocked) {
+            const currentTarget = event?.target;
+            const type = currentTarget.name;
+            const currentValue = currentTarget.value;
+            const otherValue = type === 'image.width' ? 'image.height' : 'image.width';
+            const aspectRatio = type === 'image.width' ? aspectRatioFromWidth : aspectRatioFromHeight;
+            const newValue = Math.round(aspectRatio * Number(currentValue) * 100) / 100;
+            setValue(otherValue, newValue);
+        }
+    };
+    const toggleAspectRatio = () => {
+        setAspectRatioLocked(!aspectRatioLocked);
+    };
+    (0, react_1.useEffect)(() => {
+        if (imageType === Extensions_1.NodeName.Image) {
+            setViewType(ViewTypes.URL);
+        }
+        else {
+            setViewType(ViewTypes.Resource);
+        }
+    }, [imageType, setViewType]);
+    const handleChangeViewType = (0, react_1.useCallback)((value) => {
+        setViewType(value);
+        // If its the URL field type we know what the imageType should be
+        if (value === ViewTypes.URL) {
+            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
+            setValue('imageType', Extensions_1.NodeName.AssetImage);
+        }
+    }, [setViewType, setValue]);
+    return (react_1.default.createElement("form", { className: "squiz-fte-form", onSubmit: handleSubmit(onSubmit) },
+        react_1.default.createElement("div", { className: "squiz-fte-form-group mb-4" },
+            react_1.default.createElement(Tabs_1.Tabs, { value: imageType === Extensions_1.NodeName.Image ? ViewTypes.URL : ViewTypes.Resource, options: imageTypeOptions, onChange: handleChangeViewType })),
+        viewType === ViewTypes.URL && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
+                react_1.default.createElement(Input_1.Input, { label: "Source", required: true, error: errors?.image?.src?.message, ...register('image.src', {
+                        onChange: setDimensionsFromURL,
+                        required: 'Source is required',
+                        validate: {
+                            isValidImage: async (value) => {
+                                if (value && validation_1.regexDataURI.test(value)) {
+                                    return 'Must not be a data URI';
+                                }
+                                if (value && (await validateIsNotImage(value))) {
+                                    return 'Must be a valid image URL';
+                                }
+                            },
+                            noEmptySpaces: validation_1.noEmptySpacesValidation,
+                        },
+                    }) })),
+            react_1.default.createElement("div", { className: "flex flex-row" },
+                react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
+                    react_1.default.createElement(Input_1.Input, { label: "Width", type: "number", required: true, error: errors?.image?.width?.message, ...register('image.width', {
+                            onChange: calculateDimensions,
+                            required: 'Width is required',
+                            validate: {
+                                isValidWidth: (value) => {
+                                    if (value && !(value > 0)) {
+                                        return 'Must be higher than 0';
+                                    }
+                                },
+                            },
+                        }) })),
+                react_1.default.createElement("div", { className: "flex mx-1 mb-2" },
+                    react_1.default.createElement(Button_1.default, { handleOnClick: toggleAspectRatio, isActive: false, icon: aspectRatioLocked ? react_1.default.createElement(InsertLinkRounded_1.default, null) : react_1.default.createElement(LinkOff_1.default, null), label: "Constrain properties", isDisabled: false, className: (0, clsx_1.default)('my-auto', !errors?.image?.height && !errors?.image?.width && 'mb-0') })),
+                react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
+                    react_1.default.createElement(Input_1.Input, { label: "Height", type: "number", required: true, error: errors?.image?.height?.message, ...register('image.height', {
+                            onChange: calculateDimensions,
+                            required: 'Height is required',
+                            validate: {
+                                isValidHeight: (value) => {
+                                    if (value && !(value > 0)) {
+                                        return 'Must be higher than 0';
+                                    }
+                                },
+                            },
+                        }) }))),
+            react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
+                react_1.default.createElement(Input_1.Input, { label: "Alternative description", error: errors?.image?.alt?.message, ...register('image.alt') })))),
+        viewType === ViewTypes.Resource && (react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
+            react_1.default.createElement(react_hook_form_1.Controller, { control: control, name: "resourceImage", rules: {
+                    validate: (value) => {
+                        const matrixValidation = (0, validation_1.hasProperties)('An image must be selected', [
+                            'matrixIdentifier',
+                            'matrixAssetId',
+                        ])(value);
+                        const damValidation = (0, validation_1.hasProperties)('An image must be selected', [
+                            'damObjectId',
+                            'damSystemIdentifier',
+                        ])(value);
+                        // One of the two needs to validate
+                        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) => {
+                        setValue('imageType', value.target.value.nodeType);
+                        onChange(value);
+                    }, error: error?.message })) })))));
+};
+exports.default = ImageForm;

package/lib/EditorToolbar/Tools/Image/ImageButton.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type ImageButtonProps = {
+    inPopover?: boolean;
+};
+declare const ImageButton: ({ inPopover }: ImageButtonProps) => React.JSX.Element;
+export default ImageButton;