feat: add form orientation property to rich text modal dialogs and components

Author: yordan-st

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">
+                    <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/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;
@@ -216,6 +217,7 @@ const Editor = forwardRef((props: EditorProps, ref: MutableRefObject<Quill | nul
                 imageSource={props.imageSource}
                 imageSourceContent={props.imageSourceContent}
                 enableDefaultUpload={props.enableDefaultUpload}
+                formOrientation={props.formOrientation}
                 {...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.scss

@@ -144,6 +144,20 @@
     &-content {
         padding: 20px;
         flex: 1;
+
+        &.form-vertical {
+            .form-group {
+                flex-direction: column;
+
+                .col-sm-3,
+                .col-sm-9,
+                .col-sm-12 {
+                    max-width: 100%;
+                    padding-left: 0;
+                    padding-right: 0;
+                }
+            }
+        }
     }
 
     &-footer {

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

@@ -9,6 +9,7 @@ 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";
@@ -51,13 +52,24 @@ export type ChildDialogProps =
 
 export type DialogProps = BaseDialogProps &
     ChildDialogProps &
-    Pick<RichTextContainerProps, "imageSource" | "imageSourceContent" | "enableDefaultUpload">;
+    Pick<RichTextContainerProps, "imageSource" | "imageSourceContent" | "enableDefaultUpload"> & {
+        formOrientation?: "horizontal" | "vertical";
+    };
 
 /**
  * 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,
+        imageSource,
+        imageSourceContent,
+        enableDefaultUpload,
+        formOrientation
+    } = props;
     const { refs, context } = useFloating({
         open: isOpen,
         onOpenChange
@@ -81,17 +93,26 @@ 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",
+                                formOrientation === "vertical" ? "form-vertical" : ""
+                            )}
                             ref={refs.setFloating}
                             aria-labelledby={dialogType}
                             aria-describedby={dialogType}
                             {...getFloatingProps()}
                         >
                             <If condition={dialogType === "link"}>
-                                <LinkDialog {...(config as LinkDialogProps)}></LinkDialog>
+                                <LinkDialog
+                                    formOrientation={formOrientation}
+                                    {...(config as LinkDialogProps)}
+                                ></LinkDialog>
                             </If>
                             <If condition={dialogType === "video"}>
-                                <VideoDialog {...(config as VideoDialogProps)}></VideoDialog>
+                                <VideoDialog
+                                    formOrientation={formOrientation}
+                                    {...(config as VideoDialogProps)}
+                                ></VideoDialog>
                             </If>
                             <If condition={dialogType === "view-code"}>
                                 <ViewCodeDialog {...(config as ViewCodeDialogProps)}></ViewCodeDialog>
@@ -101,6 +122,7 @@ export default function Dialog(props: DialogProps): ReactElement {
                                     imageSource={imageSource}
                                     imageSourceContent={imageSourceContent}
                                     enableDefaultUpload={enableDefaultUpload}
+                                    formOrientation={formOrientation}
                                     {...(config as ImageDialogProps)}
                                 ></ImageDialog>
                             </If>

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

@@ -36,10 +36,22 @@ 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 {

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

@@ -25,10 +25,12 @@ export interface ImageDialogProps extends Pick<RichTextContainerProps, "imageSou
     onClose(): void;
     defaultValue?: imageConfigType;
     enableDefaultUpload?: boolean;
+    formOrientation?: "horizontal" | "vertical";
 }
 
 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 +129,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>

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

@@ -1,15 +1,17 @@
 import { ChangeEvent, createElement, ReactElement, useState } from "react";
+import classNames from "classnames";
 import { type linkConfigType } from "../../utils/formats";
 import { DialogBody, DialogContent, DialogFooter, DialogHeader, FormControl } from "./DialogContent";
 
 export interface LinkDialogProps {
     onSubmit(value: linkConfigType): void;
     onClose(): void;
     defaultValue?: linkConfigType;
+    formOrientation?: "horizontal" | "vertical";
 }
 
 export default function LinkDialog(props: LinkDialogProps): ReactElement {
-    const { onSubmit, onClose } = props;
+    const { onSubmit, onClose, formOrientation } = props;
     const [formState, setFormState] = useState({
         text: props.defaultValue?.text ?? "",
         href: props.defaultValue?.href ?? "",
@@ -22,9 +24,9 @@ export default function LinkDialog(props: LinkDialogProps): ReactElement {
     };
 
     return (
-        <DialogContent className="link-dialog">
+        <DialogContent className={classNames("link-dialog", formOrientation === "vertical" ? "form-vertical" : "")}>
             <DialogHeader onClose={onClose}>Insert/Edit Link</DialogHeader>
-            <DialogBody>
+            <DialogBody formOrientation={formOrientation}>
                 <FormControl label="Text">
                     <input
                         type="text"

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

@@ -13,6 +13,7 @@ export interface VideoDialogProps {
     onClose(): void;
     selection?: Range | null;
     defaultValue?: videoConfigType;
+    formOrientation?: "horizontal" | "vertical";
 }
 
 export function getValueType(value: VideoFormType): VideoFormType {
@@ -111,14 +112,14 @@ function EmbedVideoDialog(props: VideoDialogProps): ReactElement {
 }
 
 export default function VideoDialog(props: VideoDialogProps): ReactElement {
-    const { onClose, defaultValue } = props;
+    const { onClose, defaultValue, formOrientation } = props;
     const [activeTab, setActiveTab] = useState("general");
     // disable embed tab if it is about modifying current video
     const disableEmbed = defaultValue?.src && defaultValue.src.length > 0;
     return (
-        <DialogContent className="video-dialog">
+        <DialogContent className={classNames("video-dialog", formOrientation === "vertical" ? "form-vertical" : "")}>
             <DialogHeader onClose={onClose}>{activeTab === "general" ? "Insert/Edit" : "Embed"} Media</DialogHeader>
-            <DialogBody>
+            <DialogBody formOrientation={formOrientation}>
                 <div>
                     <ul className="nav nav-tabs mx-tabcontainer-tabs" role="tablist">
                         <li

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

@@ -12,6 +12,8 @@ export type ToolbarLocationEnum = "auto" | "top" | "bottom" | "hide";
 
 export type ReadOnlyStyleEnum = "text" | "bordered" | "readPanel";
 
+export type FormOrientationEnum = "horizontal" | "vertical";
+
 export type WidthUnitEnum = "pixels" | "percentage";
 
 export type HeightUnitEnum = "percentageOfWidth" | "pixels" | "percentageOfParent" | "percentageOfView";
@@ -55,6 +57,7 @@ export interface RichTextContainerProps {
     preset: PresetEnum;
     toolbarLocation: ToolbarLocationEnum;
     readOnlyStyle: ReadOnlyStyleEnum;
+    formOrientation?: FormOrientationEnum;
     widthUnit: WidthUnitEnum;
     width: number;
     heightUnit: HeightUnitEnum;
@@ -100,6 +103,7 @@ export interface RichTextPreviewProps {
     preset: PresetEnum;
     toolbarLocation: ToolbarLocationEnum;
     readOnlyStyle: ReadOnlyStyleEnum;
+    formOrientation?: FormOrientationEnum;
     widthUnit: WidthUnitEnum;
     width: number | null;
     heightUnit: HeightUnitEnum;