[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">