@squiz/formatted-text-editor 0.0.0-rbv2-20240530041851

package/jest.bootstrap.ts

@@ -0,0 +1,3 @@
+import { jsdomPolyfill } from 'jest-remirror';
+
+jsdomPolyfill();

package/jest.config.ts

@@ -0,0 +1,27 @@
+export default {
+  preset: 'ts-jest',
+  maxWorkers: 1,
+  clearMocks: true,
+  collectCoverage: true,
+  collectCoverageFrom: ['src/**/*.{ts,tsx}'],
+  coverageThreshold: {
+    global: {
+      branches: 90,
+      functions: 90,
+      lines: 90,
+      statements: 90,
+    },
+  },
+  errorOnDeprecated: true,
+  fakeTimers: {
+    enableGlobally: true,
+  },
+  resetMocks: true,
+  resetModules: true,
+  testEnvironment: 'jsdom',
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|css|scss)$':
+      '<rootDir>/file-transformer.js',
+  },
+  setupFilesAfterEnv: ['<rootDir>/jest.bootstrap.ts'],
+};

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()) {
+        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,47 @@
+"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 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))));
+};
+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/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,18 @@
+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 { DeepPartial } from '../../../../types';
+export type ImageFormData = {
+    imageType: NodeName;
+    image: Pick<ImageAttributes, 'src' | 'alt' | 'width' | 'height'>;
+    assetImage: AssetImageAttributes;
+};
+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,143 @@
+"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 MatrixAsset_1 = require("../../../../ui/Fields/MatrixAsset/MatrixAsset");
+const imageTypeOptions = {
+    [Extensions_1.NodeName.AssetImage]: { label: 'From source' },
+    [Extensions_1.NodeName.Image]: { 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') || Extensions_1.NodeName.AssetImage;
+    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);
+    };
+    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, options: imageTypeOptions, onChange: (value) => setValue('imageType', value) })),
+        imageType === Extensions_1.NodeName.Image && (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') })))),
+        imageType === Extensions_1.NodeName.AssetImage && (react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
+            react_1.default.createElement(react_hook_form_1.Controller, { control: control, name: "assetImage", rules: {
+                    validate: (0, validation_1.hasProperties)('An image must be selected', ['matrixIdentifier', 'matrixAssetId']),
+                }, render: ({ field: { onChange, value }, fieldState: { error } }) => (react_1.default.createElement(MatrixAsset_1.MatrixAsset, { modalTitle: "Insert image", allowedTypes: ['image'], value: value, onChange: onChange, 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;