[WC-2848] Rich Text Image Resize

packages/pluggableWidgets/rich-text-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+-   We added support for resizing images, videos, and other embeds.
+
 ## [4.3.1] - 2025-03-19
 
 ### Fixed

packages/pluggableWidgets/rich-text-web/jest.config.js

@@ -4,5 +4,7 @@ module.exports = {
      * `quill` package is ESM module and because ESM is not supported by Jest yet
      * we mark `nanoevents` as a module that should be transformed by ts-jest.
      */
-    transformIgnorePatterns: ["node_modules/(?!quill)/"]
+    transformIgnorePatterns: ["node_modules/(?!quill)/"],
+    preset: "ts-jest",
+    testEnvironment: "jsdom"
 };

packages/pluggableWidgets/rich-text-web/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/rich-text-web",
     "widgetName": "RichText",
-    "version": "4.3.1",
+    "version": "4.4.0",
     "description": "Rich inline or toolbar text editing",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "repository": {
@@ -52,6 +52,10 @@
         "@mendix/widget-plugin-platform": "workspace:*",
         "@mendix/widget-plugin-test-utils": "workspace:*",
         "@rollup/plugin-json": "^6.1.0",
+        "@rollup/plugin-alias": "^5.1.1",
+        "@rollup/plugin-image": "^3.0.3",
+        "@rollup/plugin-replace": "^6.0.2",
+        "@types/dompurify": "^2.4.0",
         "@types/katex": "^0.16.7",
         "@types/sanitize-html": "^1.27.2",
         "cross-env": "^7.0.3",
@@ -68,6 +72,7 @@
         "katex": "^0.16.11",
         "linkifyjs": "^4.1.3",
         "parchment": "^3.0.0",
-        "quill": "^2.0.2"
+        "quill": "^2.0.2",
+        "quill-resize-module": "^2.0.4"
     }
 }

packages/pluggableWidgets/rich-text-web/rollup.config.js

@@ -1,9 +1,21 @@
 import preserveDirectives from "rollup-preserve-directives";
+import alias from "@rollup/plugin-alias";
 
 export default args => {
     const result = args.configDefaultConfig;
     return result.map((config, _index) => {
-        config.plugins = [...config.plugins, preserveDirectives()];
+        config.plugins = [
+            ...config.plugins,
+            preserveDirectives(),
+            alias({
+                entries: [
+                    {
+                        find: /(.*)\.svg\?raw$/,
+                        replacement: "$1.svg"
+                    }
+                ]
+            })
+        ];
         return config;
     });
 };

packages/pluggableWidgets/rich-text-web/src/__mocks__/quill-resize-module.ts

@@ -0,0 +1,16 @@
+// eslint-disable-next-line @typescript-eslint/no-extraneous-class
+export class QuillResizeToolbar {
+    constructor() {
+        return this;
+    }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-extraneous-class
+export default class QuillResize {
+    static Modules = {
+        Toolbar: QuillResizeToolbar
+    };
+    constructor() {
+        return this;
+    }
+}

packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/useEmbedModal.ts

@@ -26,7 +26,9 @@ type ModalReturnType = {
 export function useEmbedModal(ref: MutableRefObject<Quill | null>): ModalReturnType {
     const [showDialog, setShowDialog] = useState<boolean>(false);
     const [dialogConfig, setDialogConfig] = useState<ChildDialogProps>({});
-
+    const openDialog = (): void => {
+        setShowDialog(true);
+    };
     const closeDialog = (): void => {
         setShowDialog(false);
         setTimeout(() => ref.current?.focus(), 50);
@@ -52,7 +54,7 @@ export function useEmbedModal(ref: MutableRefObject<Quill | null>): ModalReturnT
                     defaultValue: { ...value, text }
                 }
             });
-            setShowDialog(true);
+            openDialog();
         } else {
             ref.current?.format("link", false);
             closeDialog();
@@ -61,27 +63,44 @@ export function useEmbedModal(ref: MutableRefObject<Quill | null>): ModalReturnT
 
     const customVideoHandler = (value: any): void => {
         const selection = ref.current?.getSelection();
-        if (value === true) {
+        if (value === true || value.type === "video") {
             setDialogConfig({
                 dialogType: "video",
                 config: {
-                    onSubmit: (value: VideoFormType) => {
-                        if (Object.hasOwn(value, "src") && (value as videoConfigType).src !== undefined) {
-                            const currentValue = value as videoConfigType;
-                            const delta = new Delta()
-                                .retain(selection?.index ?? 0)
-                                .delete(selection?.length ?? 0)
-                                .insert(
-                                    { video: currentValue },
-                                    { width: currentValue.width, height: currentValue.height }
-                                );
-                            ref.current?.updateContents(delta, Emitter.sources.USER);
+                    onSubmit: (submittedValue: VideoFormType) => {
+                        if (
+                            Object.hasOwn(submittedValue, "src") &&
+                            (submittedValue as videoConfigType).src !== undefined
+                        ) {
+                            const currentValue = submittedValue as videoConfigType;
+                            if (value.type === "video") {
+                                const index = selection?.index ?? 0;
+                                const length = selection?.length ?? 1;
+                                const videoConfig = {
+                                    width: currentValue.width,
+                                    height: currentValue.height
+                                };
+                                // update existing video value
+                                const delta = new Delta().retain(index).retain(length, videoConfig);
+                                ref.current?.updateContents(delta, Emitter.sources.USER);
+                            } else {
+                                // insert new video
+                                const delta = new Delta()
+                                    .retain(selection?.index ?? 0)
+                                    .delete(selection?.length ?? 0)
+                                    .insert(
+                                        { video: currentValue },
+                                        { width: currentValue.width, height: currentValue.height }
+                                    );
+                                ref.current?.updateContents(delta, Emitter.sources.USER);
+                            }
                         } else {
-                            const currentValue = value as videoEmbedConfigType;
+                            const currentValue = submittedValue as videoEmbedConfigType;
                             const res = ref.current?.clipboard.convert({
                                 html: currentValue.embedcode
                             });
                             if (res) {
+                                // insert video via embed code;
                                 const delta = new Delta()
                                     .retain(selection?.index ?? 0)
                                     .delete(selection?.length ?? 0)
@@ -93,10 +112,11 @@ export function useEmbedModal(ref: MutableRefObject<Quill | null>): ModalReturnT
                         closeDialog();
                     },
                     onClose: closeDialog,
-                    selection: ref.current?.getSelection()
+                    selection: ref.current?.getSelection(),
+                    defaultValue: { ...value }
                 }
             });
-            setShowDialog(true);
+            openDialog();
         } else {
             ref.current?.format("link", false);
             closeDialog();
@@ -112,40 +132,50 @@ export function useEmbedModal(ref: MutableRefObject<Quill | null>): ModalReturnT
                     onSubmit: (value: viewCodeConfigType) => {
                         const newDelta = ref.current?.clipboard.convert({ html: value.src });
                         if (newDelta) {
-                            ref.current?.setContents(newDelta, Quill.sources.USER);
+                            ref.current?.setContents(newDelta, Emitter.sources.USER);
                         }
                         closeDialog();
                     },
                     onClose: closeDialog
                 }
             });
-            setShowDialog(true);
+            openDialog();
         } else {
             ref.current?.format("link", false);
             closeDialog();
         }
     };
 
     const customImageUploadHandler = (value: any): void => {
-        if (value === true) {
-            setDialogConfig({
-                dialogType: "image",
-                config: {
-                    onSubmit: (value: imageConfigType) => {
-                        const range = ref.current?.getSelection(true);
-                        if (range && value.files) {
-                            uploadImage(ref, range, value);
+        const selection = ref.current?.getSelection(true);
+        setDialogConfig({
+            dialogType: "image",
+            config: {
+                onSubmit: (value: imageConfigType) => {
+                    if (value.src) {
+                        const index = selection?.index ?? 0;
+                        const length = 1;
+                        const imageConfig = {
+                            alt: value.alt,
+                            width: value.width,
+                            height: value.height
+                        };
+                        // update existing image attribute
+                        const imageUpdateDelta = new Delta().retain(index).retain(length, imageConfig);
+                        ref.current?.updateContents(imageUpdateDelta, Emitter.sources.USER);
+                    } else {
+                        // upload new image
+                        if (selection && value.files) {
+                            uploadImage(ref, selection, value);
                         }
-                        closeDialog();
-                    },
-                    onClose: closeDialog
-                }
-            });
-            setShowDialog(true);
-        } else {
-            ref.current?.format("link", false);
-            closeDialog();
-        }
+                    }
+                    closeDialog();
+                },
+                onClose: closeDialog,
+                defaultValue: { ...value }
+            }
+        });
+        openDialog();
     };
 
     return {

packages/pluggableWidgets/rich-text-web/src/components/Editor.tsx

@@ -8,7 +8,6 @@ import {
     MutableRefObject,
     useEffect,
     useLayoutEffect,
-    // useState,
     useRef
 } from "react";
 import "../utils/customPluginRegisters";
@@ -21,7 +20,8 @@ import {
 } from "./CustomToolbars/toolbarHandlers";
 import { useEmbedModal } from "./CustomToolbars/useEmbedModal";
 import Dialog from "./ModalDialog/Dialog";
-
+import { RESIZE_MODULE_CONFIG } from "../utils/formats/resizeModuleConfig";
+import { EDIT_DIALOG_EVENT } from "../utils/helpers";
 export interface EditorProps {
     defaultValue?: string;
     onTextChange?: (...args: [delta: Delta, oldContent: Delta, source: EmitterSource]) => void;
@@ -112,7 +112,8 @@ const Editor = forwardRef((props: EditorProps, ref: MutableRefObject<Quill | nul
                                       image: customImageUploadHandler
                                   }
                               }
-                            : false
+                            : false,
+                        resize: RESIZE_MODULE_CONFIG
                     },
                     readOnly
                 };
@@ -124,8 +125,18 @@ const Editor = forwardRef((props: EditorProps, ref: MutableRefObject<Quill | nul
                 quill.on(Quill.events.SELECTION_CHANGE, (...arg) => {
                     onSelectionChangeRef.current?.(...arg);
                 });
-                quill.on("EDIT-TOOLTIP", (...arg: any[]) => {
-                    customLinkHandler(arg[0]);
+                quill.on(EDIT_DIALOG_EVENT, (...arg: any[]) => {
+                    if (arg[0]) {
+                        if (arg[0].href) {
+                            customLinkHandler(arg[0]);
+                        } else if (arg[0].src) {
+                            if (arg[0].type === "video") {
+                                customVideoHandler(arg[0]);
+                            } else {
+                                customImageUploadHandler(arg[0]);
+                            }
+                        }
+                    }
                 });
             }
 

packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/ImageDialog.tsx

@@ -1,42 +1,56 @@
-import { ChangeEvent, createElement, ReactElement, useState } from "react";
+import { ChangeEvent, createElement, ReactElement, useEffect, useRef, useState } from "react";
 import { type imageConfigType } from "../../utils/formats";
 import { DialogBody, DialogContent, DialogFooter, DialogHeader, FormControl } from "./DialogContent";
 import { IMG_MIME_TYPES } from "../CustomToolbars/constants";
 
 export interface ImageDialogProps {
     onSubmit(value: imageConfigType): void;
     onClose(): void;
+    defaultValue?: imageConfigType;
 }
 
 export default function ImageDialog(props: ImageDialogProps): ReactElement {
-    const { onSubmit, onClose } = props;
+    const { onSubmit, onClose, defaultValue } = props;
+    const inputReference = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        setTimeout(() => inputReference?.current?.focus(), 50);
+    }, []);
 
     const [formState, setFormState] = useState<imageConfigType>({
         files: null,
-        width: 100,
-        height: 100
+        alt: defaultValue?.alt ?? "",
+        width: defaultValue?.width ?? 100,
+        height: defaultValue?.height ?? 100,
+        src: defaultValue?.src ?? undefined
     });
 
     const onFileChange = (e: ChangeEvent<HTMLInputElement>): void => {
         setFormState({ ...formState, [e.target.name]: e.target.files });
     };
 
     const onInputChange = (e: ChangeEvent<HTMLInputElement>): void => {
+        e.preventDefault();
+        e.stopPropagation();
         setFormState({ ...formState, [e.target.name]: e.target.value });
     };
 
     return (
         <DialogContent className="image-dialog">
             <DialogHeader onClose={onClose}>Insert/Edit Image</DialogHeader>
             <DialogBody>
-                <FormControl label="Source Code">
-                    <input
-                        name="files"
-                        className="form-control mx-textarea-input mx-textarea-noresize code-input"
-                        type="file"
-                        accept={IMG_MIME_TYPES.join(", ")}
-                        onChange={onFileChange}
-                    ></input>
+                <FormControl label="Source">
+                    {defaultValue?.src ? (
+                        <img src={defaultValue.src} alt={defaultValue.alt} height={50} />
+                    ) : (
+                        <input
+                            name="files"
+                            className="form-control mx-textarea-input mx-textarea-noresize code-input"
+                            type="file"
+                            accept={IMG_MIME_TYPES.join(", ")}
+                            onChange={onFileChange}
+                        ></input>
+                    )}
                 </FormControl>
                 <FormControl label="Alternative description">
                     <input
@@ -45,6 +59,7 @@ export default function ImageDialog(props: ImageDialogProps): ReactElement {
                         name="alt"
                         onChange={onInputChange}
                         value={formState.alt}
+                        ref={inputReference}
                     />
                 </FormControl>
                 <FormControl label="Width">

packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/VideoDialog.tsx

@@ -12,6 +12,7 @@ export interface VideoDialogProps {
     onSubmit(value: VideoFormType): void;
     onClose(): void;
     selection?: Range | null;
+    defaultValue?: videoConfigType;
 }
 
 export function getValueType(value: VideoFormType): VideoFormType {
@@ -21,11 +22,11 @@ export function getValueType(value: VideoFormType): VideoFormType {
 }
 
 function GeneralVideoDialog(props: VideoDialogProps): ReactElement {
-    const { onSubmit, onClose } = props;
+    const { onSubmit, onClose, defaultValue } = props;
     const [formState, setFormState] = useState<videoConfigType>({
-        src: "",
-        width: 560,
-        height: 314
+        src: defaultValue?.src ?? "",
+        width: defaultValue?.width ?? 560,
+        height: defaultValue?.height ?? 314
     });
 
     const onInputChange = (e: ChangeEvent<HTMLInputElement | HTMLSelectElement>): void => {
@@ -47,7 +48,17 @@ function GeneralVideoDialog(props: VideoDialogProps): ReactElement {
     return (
         <Fragment>
             <FormControl label="URL">
-                <input className="form-control" type="url" name="src" onChange={onInputChange} value={formState.src} />
+                {defaultValue?.src ? (
+                    <span className="mx-text-muted">{defaultValue?.src}</span>
+                ) : (
+                    <input
+                        className="form-control"
+                        type="url"
+                        name="src"
+                        onChange={onInputChange}
+                        value={formState.src}
+                    />
+                )}
             </FormControl>
             <FormControl label="Width">
                 <input
@@ -100,9 +111,10 @@ function EmbedVideoDialog(props: VideoDialogProps): ReactElement {
 }
 
 export default function VideoDialog(props: VideoDialogProps): ReactElement {
-    const { onClose } = props;
+    const { onClose, defaultValue } = props;
     const [activeTab, setActiveTab] = useState("general");
-
+    // disable embed tab if it is about modifying current video
+    const disableEmbed = defaultValue?.src && defaultValue.src.length > 0;
     return (
         <DialogContent className="video-dialog">
             <DialogHeader onClose={onClose}>{activeTab === "general" ? "Insert/Edit" : "Embed"} Media</DialogHeader>
@@ -118,19 +130,21 @@ export default function VideoDialog(props: VideoDialogProps): ReactElement {
                         >
                             <a href="#">General</a>
                         </li>
-                        <li
-                            role="presentation"
-                            className={classNames({
-                                active: activeTab === "embed"
-                            })}
-                            onClick={(e: React.MouseEvent) => {
-                                setActiveTab("embed");
-                                e.stopPropagation();
-                                e.preventDefault();
-                            }}
-                        >
-                            <a href="#">Embed</a>
-                        </li>
+                        {!disableEmbed && (
+                            <li
+                                role="presentation"
+                                className={classNames({
+                                    active: activeTab === "embed"
+                                })}
+                                onClick={(e: React.MouseEvent) => {
+                                    setActiveTab("embed");
+                                    e.stopPropagation();
+                                    e.preventDefault();
+                                }}
+                            >
+                                <a href="#">Embed</a>
+                            </li>
+                        )}
                     </ul>
                 </div>
                 <div>

packages/pluggableWidgets/rich-text-web/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="RichText" version="4.3.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="RichText" version="4.4.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="RichText.xml" />
         </widgetFiles>

packages/pluggableWidgets/rich-text-web/src/ui/RichTextIcons.scss

@@ -52,6 +52,21 @@ $icons: (
         }
     }
 
+    .ql-container {
+        .ql-resize-overlay {
+            .ql-resize-toolbar {
+                font-family: "RichTextIconFont" !important;
+                font-style: normal;
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+
+                button {
+                    position: relative;
+                }
+            }
+        }
+    }
+
     .icons {
         font-family: "RichTextIconFont" !important;
         font-size: 16px;

packages/pluggableWidgets/rich-text-web/src/utils/customPluginRegisters.ts

@@ -11,6 +11,7 @@ const direction = Quill.import("attributors/style/direction") as Attributor;
 const alignment = Quill.import("attributors/style/align") as Attributor;
 import { IndentLeftStyle, IndentRightStyle } from "./formats/indent";
 import Formula from "./formats/formula";
+import QuillResize from "quill-resize-module";
 class Empty {
     doSomething(): string {
         return "";
@@ -30,5 +31,6 @@ Quill.register(IndentLeftStyle, true);
 Quill.register(IndentRightStyle, true);
 Quill.register(Formula, true);
 Quill.register(Button, true);
+Quill.register("modules/resize", QuillResize, true);
 // add empty handler for view code, this format is handled by toolbar's custom config via ViewCodeDialog
 Quill.register({ "ui/view-code": Empty });

packages/pluggableWidgets/rich-text-web/src/utils/formats.d.ts

@@ -24,4 +24,5 @@ export type imageConfigType = {
     alt?: string;
     width?: number;
     height?: number;
+    src?: string;
 };

packages/pluggableWidgets/rich-text-web/src/utils/formats/resizeModuleConfig.ts

@@ -0,0 +1,98 @@
+import Quill from "quill";
+import QuillResize from "quill-resize-module";
+import { EDIT_DIALOG_EVENT } from "../helpers";
+
+type ToolbarTool = {
+    text: string;
+    className: string;
+    verify: (activeEle: HTMLElement) => boolean;
+    handler: (
+        this: typeof QuillResize.Modules.Base,
+        _evt: MouseEvent,
+        _button: HTMLElement,
+        activeEle: HTMLIFrameElement
+    ) => void;
+};
+
+class MxResizeToolbar extends QuillResize.Modules?.Toolbar {
+    _addToolbarButtons(): void {
+        const buttons: HTMLButtonElement[] = [];
+        this.options.tools.forEach((tool: ToolbarTool) => {
+            if (tool.verify && tool.verify.call(this, this.activeEle) === false) {
+                return;
+            }
+
+            const button = document.createElement("button");
+            button.className = tool.className;
+            buttons.push(button);
+            button.setAttribute("aria-label", tool.text);
+            button.setAttribute("type", "button");
+
+            button.addEventListener("click", evt => {
+                tool.handler.call(this, evt, button, this.activeEle);
+                // image may change position; redraw drag handles
+                this.requestUpdate();
+            });
+            this.toolbar.appendChild(button);
+        });
+    }
+}
+
+export const RESIZE_MODULE_CONFIG = {
+    modules: ["DisplaySize", MxResizeToolbar, "Resize", "Keyboard"],
+    tools: [
+        {
+            text: "Edit Image",
+            className: "icons icon-Image",
+            verify(activeEle: HTMLElement) {
+                return activeEle && activeEle.tagName === "IMG";
+            },
+            handler(
+                this: { quill: Quill; resizer: typeof QuillResize },
+                _evt: MouseEvent,
+                _button: HTMLElement,
+                activeEle: HTMLImageElement
+            ) {
+                const imageInfo = {
+                    alt: activeEle.alt || "",
+                    src: activeEle.src,
+                    width: activeEle.width,
+                    height: activeEle.height,
+                    type: "image"
+                };
+                this.resizer.handleEdit();
+                this.quill.emitter.emit(EDIT_DIALOG_EVENT, imageInfo);
+            }
+        },
+        {
+            text: "Edit Video",
+            className: "icons icon-Film",
+            verify(activeEle: HTMLElement) {
+                return activeEle && activeEle.tagName === "IFRAME" && activeEle.classList.contains("ql-video");
+            },
+            handler(
+                this: typeof QuillResize.Modules.Base,
+                _evt: MouseEvent,
+                _button: HTMLElement,
+                activeEle: HTMLIFrameElement
+            ) {
+                const videoInfo = {
+                    src: activeEle.src,
+                    width: activeEle.width,
+                    height: activeEle.height,
+                    type: "video"
+                };
+                this.resizer.handleEdit();
+                this.quill.emitter.emit(EDIT_DIALOG_EVENT, videoInfo);
+            }
+        }
+    ],
+    parchment: {
+        image: {
+            attribute: ["width", "height"]
+        },
+        video: {
+            attribute: ["width", "height"]
+        }
+    }
+};

packages/pluggableWidgets/rich-text-web/src/utils/helpers.ts

@@ -3,6 +3,8 @@ import Quill from "quill";
 import { Delta, Op } from "quill/core";
 import { RichTextContainerProps } from "typings/RichTextProps";
 
+export const EDIT_DIALOG_EVENT = "EDIT-DIALOG";
+
 function getHeightScale(height: number, heightUnit: "pixels" | "percentageOfParent" | "percentageOfView"): string {
     return `${height}${heightUnit === "pixels" ? "px" : heightUnit === "percentageOfView" ? "vh" : "%"}`;
 }

packages/pluggableWidgets/rich-text-web/src/utils/themes/mxTooltip.ts

@@ -3,6 +3,7 @@ import Emitter from "quill/core/emitter";
 import LinkBlot from "quill/formats/link";
 import { BaseTooltip } from "quill/themes/base";
 import { linkConfigType } from "../formats";
+import { EDIT_DIALOG_EVENT } from "../helpers";
 
 export default class MxTooltip extends BaseTooltip {
     static TEMPLATE = [
@@ -78,7 +79,7 @@ export default class MxTooltip extends BaseTooltip {
                     title: this.linkDOMNode?.getAttribute("title") ?? undefined,
                     target: this.linkDOMNode?.getAttribute("target") ?? undefined
                 };
-                this.quill.emitter.emit("EDIT-TOOLTIP", linkConfig);
+                this.quill.emitter.emit(EDIT_DIALOG_EVENT, linkConfig);
             }
         } else {
             super.edit(mode, preview);

packages/pluggableWidgets/rich-text-web/typings/global.d.ts

@@ -1,4 +1,3 @@
-
 export interface MXGlobalObject {
     remoteUrl: string;
 }

packages/pluggableWidgets/rich-text-web/typings/modules.d.ts

@@ -0,0 +1,63 @@
+declare module "*.css";
+declare module "*.scss";
+
+// Add quill-resize-module declaration
+declare module "quill-resize-module" {
+    import Quill from "quill";
+
+    interface ResizeModuleOptions {
+        modules?: string[];
+        handleStyles?: {
+            backgroundColor?: string;
+            border?: string;
+            boxSizing?: string;
+        };
+        displayStyles?: {
+            backgroundColor?: string;
+            border?: string;
+            color?: string;
+        };
+        toolbarStyles?: {
+            backgroundColor?: string;
+            border?: string;
+            color?: string;
+            boxShadow?: string;
+        };
+        overlayStyles?: {
+            border?: string;
+            boxSizing?: string;
+        };
+        embedTags?: string[];
+        tools?: Array<
+            | string
+            | {
+                  text: string;
+                  verify: (activeEle: HTMLElement) => boolean;
+                  handler: (evt: MouseEvent, button: HTMLElement, activeEle: HTMLElement) => void;
+              }
+        >;
+        locale?: {
+            altTip?: string;
+            inputTip?: string;
+            floatLeft?: string;
+            floatRight?: string;
+            center?: string;
+            restore?: string;
+        };
+    }
+
+    interface ResizeModuleConstructor {
+        new (quill: Quill, options: ResizeModuleOptions): any;
+        Modules?: any;
+        handleEdit(): void;
+    }
+
+    const ResizeModule: ResizeModuleConstructor;
+    export default ResizeModule;
+}
+
+// Add the dist/resize module declaration
+declare module "quill-resize-module/dist/resize" {
+    export * from "quill-resize-module";
+    export { default } from "quill-resize-module";
+}