[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

@@ -6,11 +6,21 @@ interface PropsWithChildrenWithClass extends PropsWithChildren {
     className?: string;
 }
 
-export function DialogContent(props: PropsWithChildrenWithClass): ReactElement {
-    const { children, className } = props;
+export interface DialogContentProps extends PropsWithChildrenWithClass {
+    formOrientation: "horizontal" | "vertical";
+}
+
+export function DialogContent(props: DialogContentProps): ReactElement {
+    const { children, className, formOrientation } = props;
 
     return (
-        <div className={classNames("widget-rich-text-modal-body modal-dialog mx-window mx-window-active", className)}>
+        <div
+            className={classNames(
+                "widget-rich-text-modal-body modal-dialog mx-window mx-window-active",
+                { "form-vertical": formOrientation === "vertical" },
+                className
+            )}
+        >
             <div className="modal-content mx-window-content">{children}</div>
         </div>
     );
@@ -36,24 +46,55 @@ export function DialogHeader(props: DialogHeaderProps): ReactElement {
     );
 }
 
-export function DialogBody(props: PropsWithChildrenWithClass): ReactElement {
-    const { children, className } = props;
+export interface DialogBodyProps extends PropsWithChildrenWithClass {
+    formOrientation: "horizontal" | "vertical";
+}
+
+export function DialogBody(props: DialogBodyProps): 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",
+                {
+                    "form-vertical": formOrientation === "vertical",
+                    "form-horizontal": formOrientation !== "vertical"
+                },
+                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", { "col-sm-3": formOrientation !== "vertical" })}
+                    >
+                        {label}
+                    </label>
+                )}
+                {formOrientation === "vertical" ? (
+                    children
+                ) : (
+                    <div className={`col-sm-${label ? "9" : "12"}`}>{children}</div>
+                )}
             </div>
         </If>
     );