[WC-3037] RichText: Modal form orientation

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 change the form orientation of the link, image and video modals
+
 ## [4.8.1] - 2025-07-29
 
 ### Fixed

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

@@ -55,6 +55,14 @@
                         <enumerationValue key="readPanel">Read panel</enumerationValue>
                     </enumerationValues>
                 </property>
+                <property key="formOrientation" type="enumeration" defaultValue="horizontal" required="true">
+                    <caption>Form orientation</caption>
+                    <description>The form orientation for modals (Insert link, Insert image, Insert video).</description>
+                    <enumerationValues>
+                        <enumerationValue key="horizontal">Horizontal</enumerationValue>
+                        <enumerationValue key="vertical">Vertical</enumerationValue>
+                    </enumerationValues>
+                </property>
             </propertyGroup>
             <propertyGroup caption="Visibility">
                 <systemProperty key="Visibility" />

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

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

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

@@ -12,6 +12,7 @@ import { type VideoFormType } from "../ModalDialog/VideoDialog";
 import { Delta } from "quill/core";
 import { IMG_MIME_TYPES } from "./constants";
 import Emitter from "quill/core/emitter";
+import { RichTextContainerProps } from "typings/RichTextProps";
 
 type ModalReturnType = {
     showDialog: boolean;
@@ -23,7 +24,13 @@ type ModalReturnType = {
     customImageUploadHandler(value: any): void;
 };
 
-export function useEmbedModal(ref: MutableRefObject<Quill | null>): ModalReturnType {
+export function useEmbedModal(
+    ref: MutableRefObject<Quill | null>,
+    props: Pick<
+        RichTextContainerProps,
+        "imageSource" | "imageSourceContent" | "enableDefaultUpload" | "formOrientation"
+    >
+): ModalReturnType {
     const [showDialog, setShowDialog] = useState<boolean>(false);
     const [dialogConfig, setDialogConfig] = useState<ChildDialogProps>({});
     const openDialog = (): void => {
@@ -51,7 +58,8 @@ export function useEmbedModal(ref: MutableRefObject<Quill | null>): ModalReturnT
                         closeDialog();
                     },
                     onClose: closeDialog,
-                    defaultValue: { ...value, text }
+                    defaultValue: { ...value, text },
+                    formOrientation: props.formOrientation
                 }
             });
             openDialog();
@@ -113,7 +121,8 @@ export function useEmbedModal(ref: MutableRefObject<Quill | null>): ModalReturnT
                     },
                     onClose: closeDialog,
                     selection: ref.current?.getSelection(),
-                    defaultValue: { ...value }
+                    defaultValue: { ...value },
+                    formOrientation: props.formOrientation
                 }
             });
             openDialog();
@@ -136,7 +145,8 @@ export function useEmbedModal(ref: MutableRefObject<Quill | null>): ModalReturnT
                         }
                         closeDialog();
                     },
-                    onClose: closeDialog
+                    onClose: closeDialog,
+                    formOrientation: props.formOrientation
                 }
             });
             openDialog();
@@ -186,7 +196,11 @@ export function useEmbedModal(ref: MutableRefObject<Quill | null>): ModalReturnT
                     closeDialog();
                 },
                 onClose: closeDialog,
-                defaultValue: { ...value }
+                defaultValue: { ...value },
+                formOrientation: props.formOrientation,
+                imageSource: props.imageSource,
+                imageSourceContent: props.imageSourceContent,
+                enableDefaultUpload: props.enableDefaultUpload
             }
         });
         openDialog();

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

@@ -38,6 +38,7 @@ export interface EditorProps
     defaultValue?: string;
     onTextChange?: (...args: [delta: Delta, oldContent: Delta, source: EmitterSource]) => void;
     onSelectionChange?: (...args: [range: Range, oldRange: Range, source: EmitterSource]) => void;
+    formOrientation: "horizontal" | "vertical";
     theme: string;
     style?: CSSProperties;
     className?: string;
@@ -65,7 +66,7 @@ const Editor = forwardRef((props: EditorProps, ref: MutableRefObject<Quill | nul
         customVideoHandler,
         customViewCodeHandler,
         customImageUploadHandler
-    } = useEmbedModal(ref);
+    } = useEmbedModal(ref, props);
     const customIndentHandler = getIndentHandler(ref);
 
     // quill instance is not changing, thus, the function reference has to stays.
@@ -213,9 +214,6 @@ const Editor = forwardRef((props: EditorProps, ref: MutableRefObject<Quill | nul
                 isOpen={showDialog}
                 onOpenChange={open => setShowDialog(open)}
                 parentNode={modalRef.current?.ownerDocument.body}
-                imageSource={props.imageSource}
-                imageSourceContent={props.imageSourceContent}
-                enableDefaultUpload={props.enableDefaultUpload}
                 {...dialogConfig}
             ></Dialog>
         </Fragment>

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

@@ -52,7 +52,8 @@ function EditorWrapperInner(props: EditorWrapperProps): ReactElement {
         tabIndex,
         imageSource,
         imageSourceContent,
-        enableDefaultUpload
+        enableDefaultUpload,
+        formOrientation
     } = props;
 
     const globalState = useContext(EditorContext);
@@ -215,6 +216,7 @@ function EditorWrapperInner(props: EditorWrapperProps): ReactElement {
                     imageSource={imageSource}
                     imageSourceContent={imageSourceContent}
                     enableDefaultUpload={enableDefaultUpload}
+                    formOrientation={formOrientation}
                 />
             </div>
             {enableStatusBar && (

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

@@ -9,13 +9,13 @@ import {
     useRole
 } from "@floating-ui/react";
 import { If } from "@mendix/widget-plugin-component-kit/If";
+import classNames from "classnames";
 import { createElement, Fragment, ReactElement } from "react";
 import LinkDialog, { LinkDialogProps } from "./LinkDialog";
 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;
@@ -49,15 +49,13 @@ export type ChildDialogProps =
     | ViewCodeDialogBaseProps
     | ImageDialogBaseProps;
 
-export type DialogProps = BaseDialogProps &
-    ChildDialogProps &
-    Pick<RichTextContainerProps, "imageSource" | "imageSourceContent" | "enableDefaultUpload">;
+export type DialogProps = BaseDialogProps & ChildDialogProps;
 
 /**
  * Dialog components that will be shown on toolbar's button
  */
 export default function Dialog(props: DialogProps): ReactElement {
-    const { isOpen, onOpenChange, dialogType, config, imageSource, imageSourceContent, enableDefaultUpload } = props;
+    const { isOpen, onOpenChange, dialogType, config } = props;
     const { refs, context } = useFloating({
         open: isOpen,
         onOpenChange
@@ -81,7 +79,9 @@ export default function Dialog(props: DialogProps): ReactElement {
                     ></FloatingOverlay>
                     <FloatingFocusManager context={context}>
                         <div
-                            className="Dialog mx-layoutgrid widget-rich-text"
+                            className={classNames("Dialog mx-layoutgrid widget-rich-text", {
+                                "form-vertical": config?.formOrientation === "vertical"
+                            })}
                             ref={refs.setFloating}
                             aria-labelledby={dialogType}
                             aria-describedby={dialogType}
@@ -97,12 +97,7 @@ export default function Dialog(props: DialogProps): ReactElement {
                                 <ViewCodeDialog {...(config as ViewCodeDialogProps)}></ViewCodeDialog>
                             </If>
                             <If condition={dialogType === "image"}>
-                                <ImageDialog
-                                    imageSource={imageSource}
-                                    imageSourceContent={imageSourceContent}
-                                    enableDefaultUpload={enableDefaultUpload}
-                                    {...(config as ImageDialogProps)}
-                                ></ImageDialog>
+                                <ImageDialog {...(config as ImageDialogProps)}></ImageDialog>
                             </If>
                         </div>
                     </FloatingFocusManager>

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

@@ -36,24 +36,50 @@ export function DialogHeader(props: DialogHeaderProps): ReactElement {
     );
 }
 
-export function DialogBody(props: PropsWithChildrenWithClass): ReactElement {
-    const { children, className } = props;
+export function DialogBody(
+    props: PropsWithChildrenWithClass & { formOrientation: "horizontal" | "vertical" }
+): ReactElement {
+    const { children, className, formOrientation } = props;
 
-    return <div className={classNames("widget-rich-text-modal-content form-horizontal", className)}>{children}</div>;
+    return (
+        <div
+            className={classNames(
+                "widget-rich-text-modal-content",
+                formOrientation === "vertical" ? "form-vertical" : "form-horizontal",
+                className
+            )}
+        >
+            {children}
+        </div>
+    );
 }
 
 export interface FormControlProps extends PropsWithChildrenWithClass {
     label?: string;
+    formOrientation: "horizontal" | "vertical";
+    inputId?: string;
 }
 
 export function FormControl(props: FormControlProps): ReactElement {
-    const { children, className, label } = props;
+    const { children, className, label, formOrientation, inputId } = props;
 
     return (
         <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 className={classNames("form-group", { "no-columns": formOrientation === "vertical" }, className)}>
+                {label && (
+                    <label
+                        htmlFor={inputId}
+                        id={`${inputId}-label`}
+                        className={classNames("control-label", formOrientation !== "vertical" && "col-sm-3")}
+                    >
+                        {label}
+                    </label>
+                )}
+                {formOrientation === "vertical" ? (
+                    children
+                ) : (
+                    <div className={`col-sm-${label ? "9" : "12"}`}>{children}</div>
+                )}
             </div>
         </If>
     );

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

@@ -20,15 +20,19 @@ interface CustomEvent<T = any> extends Event {
     initCustomEvent(typeArg: string, canBubbleArg: boolean, cancelableArg: boolean, detailArg: T): void;
 }
 
-export interface ImageDialogProps extends Pick<RichTextContainerProps, "imageSource" | "imageSourceContent"> {
+export interface ImageDialogProps
+    extends Pick<
+        RichTextContainerProps,
+        "imageSource" | "imageSourceContent" | "enableDefaultUpload" | "formOrientation"
+    > {
     onSubmit(value: imageConfigType): void;
     onClose(): void;
     defaultValue?: imageConfigType;
-    enableDefaultUpload?: boolean;
 }
 
 export default function ImageDialog(props: ImageDialogProps): ReactElement {
-    const { onClose, defaultValue, onSubmit, imageSource, imageSourceContent, enableDefaultUpload } = props;
+    const { onClose, defaultValue, onSubmit, imageSource, imageSourceContent, enableDefaultUpload, formOrientation } =
+        props;
     const [activeTab, setActiveTab] = useState("general");
     const [selectedImageEntity, setSelectedImageEntity] = useState<Image>();
     const imageUploadElementRef = useRef<HTMLDivElement>(null);
@@ -127,9 +131,9 @@ export default function ImageDialog(props: ImageDialogProps): ReactElement {
     }, [imageUploadElementRef.current]);
 
     return (
-        <DialogContent className="image-dialog">
+        <DialogContent className={classNames("image-dialog", formOrientation === "vertical" ? "form-vertical" : "")}>
             <DialogHeader onClose={onClose}>{activeTab === "general" ? "Insert/Edit" : "Embed"} Images</DialogHeader>
-            <DialogBody>
+            <DialogBody formOrientation={formOrientation}>
                 <div ref={imageUploadElementRef}>
                     {!disableEmbed && (
                         <div>
@@ -161,7 +165,11 @@ export default function ImageDialog(props: ImageDialogProps): ReactElement {
                     )}
                     <div>
                         <If condition={activeTab === "general"}>
-                            <FormControl label="Source">
+                            <FormControl
+                                label="Source"
+                                formOrientation={formOrientation}
+                                inputId="rich-text-image-file-input"
+                            >
                                 {defaultValue?.src ? (
                                     <img
                                         src={defaultValue.src}
@@ -182,6 +190,7 @@ export default function ImageDialog(props: ImageDialogProps): ReactElement {
                                     </div>
                                 ) : enableDefaultUpload ? (
                                     <input
+                                        id="rich-text-image-file-input"
                                         name="files"
                                         className="form-control mx-textarea-input mx-textarea-noresize code-input"
                                         type="file"
@@ -190,8 +199,13 @@ export default function ImageDialog(props: ImageDialogProps): ReactElement {
                                     ></input>
                                 ) : undefined}
                             </FormControl>
-                            <FormControl label="Alternative description">
+                            <FormControl
+                                label="Alternative description"
+                                formOrientation={formOrientation}
+                                inputId="rich-text-image-alt-input"
+                            >
                                 <input
+                                    id="rich-text-image-alt-input"
                                     className="form-control"
                                     type="text"
                                     name="alt"
@@ -200,10 +214,16 @@ export default function ImageDialog(props: ImageDialogProps): ReactElement {
                                     ref={inputReference}
                                 />
                             </FormControl>
-                            <FormControl label="Width" className="image-dialog-size">
+                            <FormControl
+                                label="Width"
+                                className="image-dialog-size"
+                                formOrientation={formOrientation}
+                                inputId="rich-text-image-width-input"
+                            >
                                 <div className="flexcontainer image-dialog-size-container">
                                     <div className="flexcontainer image-dialog-size-input">
                                         <input
+                                            id="rich-text-image-width-input"
                                             className="form-control"
                                             type="number"
                                             name="width"
@@ -217,6 +237,7 @@ export default function ImageDialog(props: ImageDialogProps): ReactElement {
                                     </div>
                                     <div className="flexcontainer image-dialog-size-input">
                                         <input
+                                            id="rich-text-image-height-input"
                                             className="form-control"
                                             type="number"
                                             name="height"
@@ -228,8 +249,13 @@ export default function ImageDialog(props: ImageDialogProps): ReactElement {
                                     </div>
                                 </div>
                             </FormControl>
-                            <FormControl label="Keep ratio">
+                            <FormControl
+                                label="Keep ratio"
+                                formOrientation={formOrientation}
+                                inputId="rich-text-image-keep-ratio-input"
+                            >
                                 <input
+                                    id="rich-text-image-keep-ratio-input"
                                     type="checkbox"
                                     name="keepAspectRatio"
                                     checked={formState.keepAspectRatio}