feat(rte): allow to upload image using external widget

Author: gjulivan

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

@@ -8,7 +8,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Added
 
-- We added support to choose image from entity.
+- We added support to choose image from entity using external widget.
 
 ## [4.7.0] - 2025-06-02
 

packages/pluggableWidgets/rich-text-web/src/RichText.editorConfig.ts

@@ -1,5 +1,10 @@
 import { Properties, hidePropertyIn, hidePropertiesIn } from "@mendix/pluggable-widgets-tools";
-import { StructurePreviewProps } from "@mendix/widget-plugin-platform/preview/structure-preview-api";
+import {
+    StructurePreviewProps,
+    dropzone,
+    container,
+    rowLayout
+} from "@mendix/widget-plugin-platform/preview/structure-preview-api";
 import { RichTextPreviewProps } from "typings/RichTextProps";
 import RichTextPreviewSVGDark from "./assets/rich-text-preview-dark.svg";
 import RichTextPreviewSVGLight from "./assets/rich-text-preview-light.svg";
@@ -58,16 +63,36 @@ export function getProperties(values: RichTextPreviewProps, defaultProperties: P
     if (values.toolbarLocation === "hide") {
         hidePropertyIn(defaultProperties, values, "preset");
     }
+
+    if (values.imageSource === "none" || values.imageSource === null) {
+        hidePropertiesIn(defaultProperties, values, ["imageSourceContent", "enableDefaultUpload"]);
+    }
     return defaultProperties;
 }
 
 export function getPreview(props: RichTextPreviewProps, isDarkMode: boolean): StructurePreviewProps {
     const variant = isDarkMode ? RichTextPreviewSVGDark : RichTextPreviewSVGLight;
     const doc = decodeURIComponent(variant.replace("data:image/svg+xml,", ""));
 
-    return {
-        type: "Image",
-        document: props.stringAttribute ? doc.replace("[No attribute selected]", `[${props.stringAttribute}]`) : doc,
-        height: 150
-    };
+    const richTextPreview = container()(
+        rowLayout({ columnSize: "grow", borders: false })({
+            type: "Image",
+            document: props.stringAttribute
+                ? doc.replace("[No attribute selected]", `[${props.stringAttribute}]`)
+                : doc,
+            height: 150
+        })
+    );
+
+    if (props.imageSource) {
+        richTextPreview.children?.push(
+            rowLayout({ columnSize: "grow", borders: true, borderWidth: 1, borderRadius: 2 })(
+                dropzone(
+                    dropzone.placeholder(" image upload placeholder widget"),
+                    dropzone.hideDataSourceHeaderIf(false)
+                )(props.imageSourceContent)
+            )
+        );
+    }
+    return richTextPreview;
 }

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

@@ -183,6 +183,14 @@
                     <caption>Selectable images</caption>
                     <description />
                 </property>
+                <property key="imageSourceContent" type="widgets" required="false">
+                    <caption>Content</caption>
+                    <description>Content of a image uploader</description>
+                </property>
+                <property key="enableDefaultUpload" type="boolean" defaultValue="true">
+                    <caption>Enable default upload</caption>
+                    <description />
+                </property>
             </propertyGroup>
         </propertyGroup>
         <propertyGroup caption="Custom toolbar">

packages/pluggableWidgets/rich-text-web/src/__tests__/RichText.spec.tsx

@@ -44,7 +44,8 @@ describe("Rich Text", () => {
             maxHeight: 0,
             minHeight: 75,
             OverflowY: "auto",
-            customFonts: []
+            customFonts: [],
+            enableDefaultUpload: true
         };
     });
 

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

@@ -31,7 +31,7 @@ import {
 import { useEmbedModal } from "./CustomToolbars/useEmbedModal";
 import Dialog from "./ModalDialog/Dialog";
 
-export interface EditorProps extends Pick<RichTextContainerProps, "imageSource"> {
+export interface EditorProps extends Pick<RichTextContainerProps, "imageSource" | "imageSourceContent"> {
     customFonts: CustomFontsType[];
     defaultValue?: string;
     onTextChange?: (...args: [delta: Delta, oldContent: Delta, source: EmitterSource]) => void;
@@ -201,6 +201,7 @@ const Editor = forwardRef((props: EditorProps, ref: MutableRefObject<Quill | nul
                 onOpenChange={open => setShowDialog(open)}
                 parentNode={modalRef.current?.ownerDocument.body}
                 imageSource={props.imageSource}
+                imageSourceContent={props.imageSourceContent}
                 {...dialogConfig}
             ></Dialog>
         </Fragment>

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

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

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

@@ -49,13 +49,15 @@ export type ChildDialogProps =
     | ViewCodeDialogBaseProps
     | ImageDialogBaseProps;
 
-export type DialogProps = BaseDialogProps & ChildDialogProps & Pick<RichTextContainerProps, "imageSource">;
+export type DialogProps = BaseDialogProps &
+    ChildDialogProps &
+    Pick<RichTextContainerProps, "imageSource" | "imageSourceContent" | "enableDefaultUpload">;
 
 /**
  * Dialog components that will be shown on toolbar's button
  */
 export default function Dialog(props: DialogProps): ReactElement {
-    const { isOpen, onOpenChange, dialogType, config, imageSource } = props;
+    const { isOpen, onOpenChange, dialogType, config, imageSource, imageSourceContent, enableDefaultUpload } = props;
     const { refs, context } = useFloating({
         open: isOpen,
         onOpenChange
@@ -95,7 +97,12 @@ export default function Dialog(props: DialogProps): ReactElement {
                                 <ViewCodeDialog {...(config as ViewCodeDialogProps)}></ViewCodeDialog>
                             </If>
                             <If condition={dialogType === "image"}>
-                                <ImageDialog imageSource={imageSource} {...(config as ImageDialogProps)}></ImageDialog>
+                                <ImageDialog
+                                    imageSource={imageSource}
+                                    imageSourceContent={imageSourceContent}
+                                    enableDefaultUpload={enableDefaultUpload}
+                                    {...(config as ImageDialogProps)}
+                                ></ImageDialog>
                             </If>
                         </div>
                     </FloatingFocusManager>

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

@@ -1,3 +1,4 @@
+import { If } from "@mendix/widget-plugin-component-kit/If";
 import classNames from "classnames";
 import { createElement, Fragment, PropsWithChildren, ReactElement } from "react";
 
@@ -49,10 +50,12 @@ export function FormControl(props: FormControlProps): ReactElement {
     const { children, className, label } = props;
 
     return (
-        <div className={classNames("form-group", className)}>
-            {label && <label className="control-label col-sm-3">{label}</label>}
-            <div className={`col-sm-${label ? "9" : "12"}`}> {children}</div>
-        </div>
+        <If condition={children !== undefined && children !== null}>
+            <div className={classNames("form-group", className)}>
+                {label && <label className="control-label col-sm-3">{label}</label>}
+                <div className={`col-sm-${label ? "9" : "12"}`}> {children}</div>
+            </div>
+        </If>
     );
 }
 

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

@@ -1,87 +1,37 @@
-import { ChangeEvent, createElement, Fragment, 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";
-import classNames from "classnames";
 import { If } from "@mendix/widget-plugin-component-kit/If";
+import classNames from "classnames";
+import { ChangeEvent, createElement, ReactElement, useEffect, useRef, useState } from "react";
 import { RichTextContainerProps } from "../../../typings/RichTextProps";
-import { fetchDocumentUrl, fetchImageThumbnail } from "../../utils/mx-data";
+import { type imageConfigType } from "../../utils/formats";
+import { IMG_MIME_TYPES } from "../CustomToolbars/constants";
+import { DialogBody, DialogContent, DialogFooter, DialogHeader, FormControl } from "./DialogContent";
 
 type imageListType = {
     id: string;
     url: string;
     thumbnailUrl?: string;
 };
 
-export interface ImageDialogProps extends Pick<RichTextContainerProps, "imageSource"> {
+interface CustomEvent<T = any> extends Event {
+    /**
+     * Returns any custom data event was created with. Typically used for synthetic events.
+     */
+    readonly detail: T;
+    initCustomEvent(typeArg: string, canBubbleArg: boolean, cancelableArg: boolean, detailArg: T): void;
+}
+
+export interface ImageDialogProps extends Pick<RichTextContainerProps, "imageSource" | "imageSourceContent"> {
     onSubmit(value: imageConfigType): void;
     onClose(): void;
     defaultValue?: imageConfigType;
-}
-
-export interface EntityImageDialogProps extends ImageDialogProps {
-    onSelect(image: imageListType): void;
-}
-
-function EntityImageDialog(props: EntityImageDialogProps): ReactElement {
-    const { imageSource, onSelect } = props;
-    const [images, setImages] = useState<imageListType[]>([]);
-
-    useEffect(() => {
-        if (imageSource && imageSource.items && imageSource.items.length > 0 && imageSource.status === "available") {
-            const newImages: imageListType[] = imageSource.items.map(item => {
-                const guid = item.id;
-                const src = fetchDocumentUrl(item.id);
-                return {
-                    id: guid,
-                    url: src
-                };
-            });
-
-            Promise.all(
-                newImages.map(async image => {
-                    if (image.url) {
-                        const thumbnailUrl = await fetchImageThumbnail(image.url);
-                        console.log("Fetched thumbnail for image:", image.id, thumbnailUrl);
-                        return { ...image, thumbnailUrl };
-                    }
-                    return image;
-                })
-            ).then(fetchedImages => {
-                setImages(fetchedImages);
-            });
-        }
-    }, [imageSource, imageSource?.status, imageSource?.items]);
-
-    if (!imageSource || imageSource.status !== "available") {
-        return <div className="mx-text mx-text-error">Image source is not available</div>;
-    }
-
-    return (
-        <Fragment>
-            {images.length > 0 ? (
-                <div className="mx-image-dialog-list">
-                    {images.map(image => (
-                        <div key={image.id} className="mx-image-dialog-item" onClick={() => onSelect(image)}>
-                            <img
-                                src={image.thumbnailUrl || image.url}
-                                alt={image.id}
-                                className="mx-image-dialog-thumbnail"
-                            />
-                        </div>
-                    ))}
-                </div>
-            ) : (
-                <div className="mx-text mx-text-error">No images found in the datasource</div>
-            )}
-        </Fragment>
-    );
+    enableDefaultUpload?: boolean;
 }
 
 export default function ImageDialog(props: ImageDialogProps): ReactElement {
-    const { onClose, defaultValue, onSubmit, imageSource } = props;
+    const { onClose, defaultValue, onSubmit, imageSource, imageSourceContent, enableDefaultUpload } = props;
     const [activeTab, setActiveTab] = useState("general");
     const [selectedImageEntity, setSelectedImageEntity] = useState<imageListType>();
+    const imageUploadElementRef = useRef<HTMLDivElement>(null);
     // disable embed tab if it is about modifying current video
     const disableEmbed =
         (defaultValue?.src && defaultValue.src.length > 0) ||
@@ -117,11 +67,30 @@ export default function ImageDialog(props: ImageDialogProps): ReactElement {
         setActiveTab("general");
     };
 
+    const handleImageSelected = (event: CustomEvent<imageListType>): void => {
+        const image = event.detail;
+        onEmbedSelected(image);
+    };
+
     const onEmbedDeleted = (): void => {
         setFormState({ ...formState, entityGuid: undefined, src: undefined });
         setSelectedImageEntity(undefined);
     };
 
+    useEffect(() => {
+        const imgRef = imageUploadElementRef.current;
+
+        // const element = ref.current;
+        if (imgRef !== null) {
+            imgRef.addEventListener("imageSelected", handleImageSelected);
+        }
+        // element.addEventListener("click", handleClick);
+
+        return () => {
+            imgRef?.removeEventListener("imageSelected", handleImageSelected);
+        };
+    }, [imageUploadElementRef.current]);
+
     return (
         <DialogContent className="video-dialog">
             <DialogHeader onClose={onClose}>{activeTab === "general" ? "Insert/Edit" : "Embed"} Images</DialogHeader>
@@ -149,12 +118,12 @@ export default function ImageDialog(props: ImageDialogProps): ReactElement {
                                     e.preventDefault();
                                 }}
                             >
-                                <a href="#">From datasource</a>
+                                <a href="#">Attachments</a>
                             </li>
                         </ul>
                     </div>
                 )}
-                <div>
+                <div ref={imageUploadElementRef}>
                     <If condition={activeTab === "general"}>
                         <FormControl label="Source">
                             {defaultValue?.src ? (
@@ -174,15 +143,15 @@ export default function ImageDialog(props: ImageDialogProps): ReactElement {
                                         <span className="icons icon-Delete" onClick={onEmbedDeleted}></span>
                                     </span>
                                 </div>
-                            ) : (
+                            ) : enableDefaultUpload ? (
                                 <input
                                     name="files"
                                     className="form-control mx-textarea-input mx-textarea-noresize code-input"
                                     type="file"
                                     accept={IMG_MIME_TYPES.join(", ")}
                                     onChange={onFileChange}
                                 ></input>
-                            )}
+                            ) : undefined}
                         </FormControl>
                         <FormControl label="Alternative description">
                             <input
@@ -217,7 +186,7 @@ export default function ImageDialog(props: ImageDialogProps): ReactElement {
                         <DialogFooter onSubmit={() => onSubmit(formState)} onClose={onClose}></DialogFooter>
                     </If>
                     <If condition={activeTab === "embed"}>
-                        <EntityImageDialog {...props} onSelect={onEmbedSelected} />
+                        <div>{imageSourceContent}</div>
                     </If>
                 </div>
             </DialogBody>

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

@@ -3,6 +3,7 @@
  * WARNING: All changes made to this file will be overwritten
  * @author Mendix Widgets Framework Team
  */
+import { ComponentType, ReactNode } from "react";
 import { ActionValue, EditableValue, ListValue } from "mendix";
 
 export type PresetEnum = "basic" | "standard" | "full" | "custom";
@@ -71,6 +72,8 @@ export interface RichTextContainerProps {
     spellCheck: boolean;
     customFonts: CustomFontsType[];
     imageSource?: ListValue;
+    imageSourceContent?: ReactNode;
+    enableDefaultUpload: boolean;
     toolbarConfig: ToolbarConfigEnum;
     history: boolean;
     fontStyle: boolean;
@@ -114,6 +117,8 @@ export interface RichTextPreviewProps {
     spellCheck: boolean;
     customFonts: CustomFontsPreviewType[];
     imageSource: {} | { caption: string } | { type: string } | null;
+    imageSourceContent: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };
+    enableDefaultUpload: boolean;
     toolbarConfig: ToolbarConfigEnum;
     history: boolean;
     fontStyle: boolean;