feat(rich-text-web): add quill-resize-module for image resizing

Author: rahmanunver

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.0] - 2025-02-14
 
 ### Fixed

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

@@ -51,7 +51,11 @@
         "@mendix/widget-plugin-component-kit": "workspace:*",
         "@mendix/widget-plugin-platform": "workspace:*",
         "@mendix/widget-plugin-test-utils": "workspace:*",
+        "@rollup/plugin-alias": "^5.1.1",
+        "@rollup/plugin-image": "^3.0.3",
         "@rollup/plugin-json": "^4.1.0",
+        "@rollup/plugin-replace": "^6.0.2",
+        "@rollup/plugin-url": "^8.0.2",
         "@types/dompurify": "^2.4.0",
         "@types/katex": "^0.16.7",
         "@types/sanitize-html": "^1.27.2",
@@ -69,6 +73,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,31 @@
 import preserveDirectives from "rollup-preserve-directives";
+import url from "@rollup/plugin-url";
+import image from "@rollup/plugin-image";
+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"
+                    }
+                ]
+            }),
+            url({
+                include: ["**/*.svg"],
+                limit: 0,
+                fileName: "[name][extname]"
+            }),
+            image({
+                include: ["**/*.svg"]
+            })
+        ];
         return config;
     });
 };

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,6 @@ import {
 } from "./CustomToolbars/toolbarHandlers";
 import { useEmbedModal } from "./CustomToolbars/useEmbedModal";
 import Dialog from "./ModalDialog/Dialog";
-
 export interface EditorProps {
     defaultValue?: string;
     onTextChange?: (...args: [delta: Delta, oldContent: Delta, source: EmitterSource]) => void;
@@ -112,7 +110,8 @@ const Editor = forwardRef((props: EditorProps, ref: MutableRefObject<Quill | nul
                                       image: customImageUploadHandler
                                   }
                               }
-                            : false
+                            : false,
+                        resize: {}
                     },
                     readOnly
                 };

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

@@ -42,7 +42,12 @@ $icons: (
     List-roman: "\e921",
     Inline-code: "\e923",
     View-edit-code: "\e924",
-    Code-block: "\e925"
+    Code-block: "\e923",
+    Resize-left: "\e923",
+    Resize-right: "\e923",
+    Resize-center: "\e923",
+    Resize-restore: "\e923",
+    Resize-alt: "\e923"
 );
 
 .widget-rich-text {
@@ -52,6 +57,52 @@ $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;
+                    font-size: 0;
+                    color: transparent;
+                    > * {
+                        display: none;
+                    }
+
+                    &:before {
+                        position: absolute;
+                        left: 50%;
+                        top: 50%;
+                        transform: translate(-50%, -50%);
+                        font-size: 16px;
+                        color: black;
+                        display: block;
+                    }
+
+                    &:nth-child(1):before {
+                        content: map.get($icons, Resize-left);
+                    }
+                    &:nth-child(2):before {
+                        content: map.get($icons, Resize-right);
+                    }
+                    &:nth-child(3):before {
+                        content: map.get($icons, Resize-center);
+                    }
+                    &:nth-child(4):before {
+                        content: map.get($icons, Resize-restore);
+                    }
+                    &:nth-child(5):before {
+                        content: map.get($icons, Resize-alt);
+                    }
+                }
+            }
+        }
+    }
+
     .icons {
         font-family: "RichTextIconFont" !important;
         font-size: 16px;

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

@@ -12,6 +12,7 @@ const alignment = Quill.import("attributors/style/align") as Attributor;
 import { IndentLeftStyle, IndentRightStyle } from "./formats/indent";
 import Formula from "./formats/formula";
 import CustomHeader from "./formats/header";
+import QuillResize from "quill-resize-module";
 class Empty {
     doSomething(): string {
         return "";
@@ -32,5 +33,6 @@ Quill.register(IndentRightStyle, true);
 Quill.register(Formula, true);
 Quill.register(CustomHeader, 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/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,62 @@
+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;
+    }
+
+    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";
+}