feat(rte): add image from entity

Author: gjulivan

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 to choose image from entity.
+
 ## [4.7.0] - 2025-06-02
 
 ### Added

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

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/rich-text-web",
     "widgetName": "RichText",
-    "version": "4.7.0",
+    "version": "4.8.0",
     "description": "Rich inline or toolbar text editing",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",

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

@@ -179,6 +179,10 @@
                         </property>
                     </properties>
                 </property>
+                <property key="imageSource" type="datasource" isList="true" required="false">
+                    <caption>Selectable images</caption>
+                    <description />
+                </property>
             </propertyGroup>
         </propertyGroup>
         <propertyGroup caption="Custom toolbar">

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

@@ -165,8 +165,22 @@ export function useEmbedModal(ref: MutableRefObject<Quill | null>): ModalReturnT
                         ref.current?.updateContents(imageUpdateDelta, Emitter.sources.USER);
                     } else {
                         // upload new image
-                        if (selection && value.files) {
-                            uploadImage(ref, selection, value);
+                        if (selection) {
+                            if (value.files) {
+                                uploadImage(ref, selection, value);
+                            } else if (value.entityGuid) {
+                                const imageConfig = {
+                                    alt: value.alt,
+                                    width: value.width,
+                                    height: value.height,
+                                    "data-src": value.entityGuid
+                                };
+                                const delta = new Delta()
+                                    .retain(selection.index)
+                                    .delete(selection.length)
+                                    .insert({ image: value.entityGuid }, imageConfig);
+                                ref.current?.updateContents(delta, Emitter.sources.USER);
+                            }
                         }
                     }
                     closeDialog();
@@ -213,7 +227,16 @@ function uploadImage(ref: MutableRefObject<Quill | null>, range: Range, options:
             });
             Promise.all(promises).then(images => {
                 const update = images.reduce((delta: Delta, image) => {
-                    return delta.insert({ image }, { alt: options.alt, width: options.width, height: options.height });
+                    return delta.insert(
+                        { image },
+                        {
+                            alt: options.alt,
+                            width: options.width,
+                            height: options.height,
+                            "data-src": "10696049115005183",
+                            "data-mx-timestamp": "1749298464712"
+                        }
+                    );
                 }, new Delta().retain(range.index).delete(range.length)) as Delta;
                 ref.current?.updateContents(update, Emitter.sources.USER);
                 ref.current?.setSelection(range.index + images.length, Emitter.sources.SILENT);

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

@@ -11,7 +11,7 @@ import {
     useLayoutEffect,
     useRef
 } from "react";
-import { CustomFontsType } from "../../typings/RichTextProps";
+import { CustomFontsType, RichTextContainerProps } from "../../typings/RichTextProps";
 import { EditorDispatchContext } from "../store/EditorProvider";
 import { SET_FULLSCREEN_ACTION } from "../store/store";
 import "../utils/customPluginRegisters";
@@ -31,7 +31,7 @@ import {
 import { useEmbedModal } from "./CustomToolbars/useEmbedModal";
 import Dialog from "./ModalDialog/Dialog";
 
-export interface EditorProps {
+export interface EditorProps extends Pick<RichTextContainerProps, "imageSource"> {
     customFonts: CustomFontsType[];
     defaultValue?: string;
     onTextChange?: (...args: [delta: Delta, oldContent: Delta, source: EmitterSource]) => void;
@@ -200,6 +200,7 @@ const Editor = forwardRef((props: EditorProps, ref: MutableRefObject<Quill | nul
                 isOpen={showDialog}
                 onOpenChange={open => setShowDialog(open)}
                 parentNode={modalRef.current?.ownerDocument.body}
+                imageSource={props.imageSource}
                 {...dialogConfig}
             ></Dialog>
         </Fragment>

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

@@ -49,7 +49,8 @@ function EditorWrapperInner(props: EditorWrapperProps): ReactElement {
         readOnlyStyle,
         toolbarOptions,
         enableStatusBar,
-        tabIndex
+        tabIndex,
+        imageSource
     } = props;
 
     const globalState = useContext(EditorContext);
@@ -209,6 +210,7 @@ function EditorWrapperInner(props: EditorWrapperProps): ReactElement {
                     readOnly={stringAttribute.readOnly}
                     key={`${toolbarId}_${stringAttribute.readOnly}`}
                     customFonts={props.customFonts}
+                    imageSource={imageSource}
                 />
             </div>
             {enableStatusBar && (

packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/Dialog.scss

@@ -38,6 +38,60 @@
                 }
             }
         }
+
+        .mx-image-dialog-list {
+            display: flex;
+            flex-wrap: wrap;
+        }
+
+        .mx-image-dialog-item {
+            padding-right: var(--spacing-small, 8px);
+            padding-bottom: var(--spacing-small, 8px);
+            cursor: pointer;
+
+            &:hover {
+                transform: scale3d(1.05, 1.05, 1);
+                transition: transform 0.2s ease-in-out;
+            }
+        }
+
+        .mx-image-dialog-thumbnail {
+            max-height: 100px;
+            &-small {
+                max-height: 50px;
+            }
+
+            &-container {
+                position: relative;
+
+                .icon-container {
+                    position: absolute;
+                    left: 0;
+                    right: 0;
+                    bottom: 0;
+                    top: 0;
+                    align-items: center;
+                    justify-content: center;
+                    display: none;
+
+                    .icons {
+                        border-radius: var(--border-radius-default, 4px);
+                        background-color: var(--color-background, #fff);
+                        cursor: pointer;
+                        transition: transform 0.2s ease-in-out;
+                        &:hover {
+                            transform: scale3d(1.05, 1.05, 1);
+                        }
+                    }
+                }
+
+                &:hover {
+                    .icon-container {
+                        display: flex;
+                    }
+                }
+            }
+        }
     }
 
     &-header {

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

@@ -15,6 +15,7 @@ import VideoDialog, { VideoDialogProps } from "./VideoDialog";
 import ViewCodeDialog, { ViewCodeDialogProps } from "./ViewCodeDialog";
 import ImageDialog, { ImageDialogProps } from "./ImageDialog";
 import "./Dialog.scss";
+import { RichTextContainerProps } from "../../../typings/RichTextProps";
 
 interface BaseDialogProps {
     isOpen: boolean;
@@ -48,13 +49,13 @@ export type ChildDialogProps =
     | ViewCodeDialogBaseProps
     | ImageDialogBaseProps;
 
-export type DialogProps = BaseDialogProps & ChildDialogProps;
+export type DialogProps = BaseDialogProps & ChildDialogProps & Pick<RichTextContainerProps, "imageSource">;
 
 /**
  * Dialog components that will be shown on toolbar's button
  */
 export default function Dialog(props: DialogProps): ReactElement {
-    const { isOpen, onOpenChange, dialogType, config } = props;
+    const { isOpen, onOpenChange, dialogType, config, imageSource } = props;
     const { refs, context } = useFloating({
         open: isOpen,
         onOpenChange
@@ -78,7 +79,7 @@ export default function Dialog(props: DialogProps): ReactElement {
                     ></FloatingOverlay>
                     <FloatingFocusManager context={context}>
                         <div
-                            className="Dialog mx-layoutgrid"
+                            className="Dialog mx-layoutgrid widget-rich-text"
                             ref={refs.setFloating}
                             aria-labelledby={dialogType}
                             aria-describedby={dialogType}
@@ -94,7 +95,7 @@ export default function Dialog(props: DialogProps): ReactElement {
                                 <ViewCodeDialog {...(config as ViewCodeDialogProps)}></ViewCodeDialog>
                             </If>
                             <If condition={dialogType === "image"}>
-                                <ImageDialog {...(config as ImageDialogProps)}></ImageDialog>
+                                <ImageDialog imageSource={imageSource} {...(config as ImageDialogProps)}></ImageDialog>
                             </If>
                         </div>
                     </FloatingFocusManager>