refactor: improve type safety, prop passing cleanup

Author: yordan-st

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

@@ -55,7 +55,7 @@
                         <enumerationValue key="readPanel">Read panel</enumerationValue>
                     </enumerationValues>
                 </property>
-                <property key="formOrientation" type="enumeration" defaultValue="horizontal">
+                <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>

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,7 +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";
+    formOrientation: "horizontal" | "vertical";
     theme: string;
     style?: CSSProperties;
     className?: string;
@@ -66,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.
@@ -214,10 +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}
-                formOrientation={props.formOrientation}
                 {...dialogConfig}
             ></Dialog>
         </Fragment>

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

@@ -144,20 +144,6 @@
     &-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

@@ -16,7 +16,6 @@ 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;
@@ -50,26 +49,13 @@ export type ChildDialogProps =
     | ViewCodeDialogBaseProps
     | ImageDialogBaseProps;
 
-export type DialogProps = BaseDialogProps &
-    ChildDialogProps &
-    Pick<RichTextContainerProps, "imageSource" | "imageSourceContent" | "enableDefaultUpload"> & {
-        formOrientation?: "horizontal" | "vertical";
-    };
+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,
-        formOrientation
-    } = props;
+    const { isOpen, onOpenChange, dialogType, config } = props;
     const { refs, context } = useFloating({
         open: isOpen,
         onOpenChange
@@ -93,38 +79,25 @@ export default function Dialog(props: DialogProps): ReactElement {
                     ></FloatingOverlay>
                     <FloatingFocusManager context={context}>
                         <div
-                            className={classNames(
-                                "Dialog mx-layoutgrid widget-rich-text",
-                                formOrientation === "vertical" ? "form-vertical" : ""
-                            )}
+                            className={classNames("Dialog mx-layoutgrid widget-rich-text", {
+                                "form-vertical": config?.formOrientation === "vertical"
+                            })}
                             ref={refs.setFloating}
                             aria-labelledby={dialogType}
                             aria-describedby={dialogType}
                             {...getFloatingProps()}
                         >
                             <If condition={dialogType === "link"}>
-                                <LinkDialog
-                                    formOrientation={formOrientation}
-                                    {...(config as LinkDialogProps)}
-                                ></LinkDialog>
+                                <LinkDialog {...(config as LinkDialogProps)}></LinkDialog>
                             </If>
                             <If condition={dialogType === "video"}>
-                                <VideoDialog
-                                    formOrientation={formOrientation}
-                                    {...(config as VideoDialogProps)}
-                                ></VideoDialog>
+                                <VideoDialog {...(config as VideoDialogProps)}></VideoDialog>
                             </If>
                             <If condition={dialogType === "view-code"}>
                                 <ViewCodeDialog {...(config as ViewCodeDialogProps)}></ViewCodeDialog>
                             </If>
                             <If condition={dialogType === "image"}>
-                                <ImageDialog
-                                    imageSource={imageSource}
-                                    imageSourceContent={imageSourceContent}
-                                    enableDefaultUpload={enableDefaultUpload}
-                                    formOrientation={formOrientation}
-                                    {...(config as ImageDialogProps)}
-                                ></ImageDialog>
+                                <ImageDialog {...(config as ImageDialogProps)}></ImageDialog>
                             </If>
                         </div>
                     </FloatingFocusManager>

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

@@ -37,7 +37,7 @@ export function DialogHeader(props: DialogHeaderProps): ReactElement {
 }
 
 export function DialogBody(
-    props: PropsWithChildrenWithClass & { formOrientation?: "horizontal" | "vertical" }
+    props: PropsWithChildrenWithClass & { formOrientation: "horizontal" | "vertical" }
 ): ReactElement {
     const { children, className, formOrientation } = props;
 
@@ -56,18 +56,16 @@ export function DialogBody(
 
 export interface FormControlProps extends PropsWithChildrenWithClass {
     label?: string;
-    formOrientation?: "horizontal" | "vertical";
+    formOrientation: "horizontal" | "vertical";
     inputId?: string;
 }
 
-export function FormControl(props: FormControlProps & { formOrientation?: "horizontal" | "vertical" }): ReactElement {
+export function FormControl(props: FormControlProps): ReactElement {
     const { children, className, label, formOrientation, inputId } = props;
 
-    console.log("Form orientation:", props.formOrientation);
-
     return (
         <If condition={children !== undefined && children !== null}>
-            <div className={classNames("form-group", formOrientation === "vertical" ? "no-columns" : "", className)}>
+            <div className={classNames("form-group", { "no-columns": formOrientation === "vertical" }, className)}>
                 {label && (
                     <label
                         htmlFor={inputId}

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

@@ -20,12 +20,14 @@ 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;
-    formOrientation?: "horizontal" | "vertical";
 }
 
 export default function ImageDialog(props: ImageDialogProps): ReactElement {

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

@@ -7,7 +7,7 @@ export interface LinkDialogProps {
     onSubmit(value: linkConfigType): void;
     onClose(): void;
     defaultValue?: linkConfigType;
-    formOrientation?: "horizontal" | "vertical";
+    formOrientation: "horizontal" | "vertical";
 }
 
 export default function LinkDialog(props: LinkDialogProps): ReactElement {

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

@@ -13,7 +13,7 @@ export interface VideoDialogProps {
     onClose(): void;
     selection?: Range | null;
     defaultValue?: videoConfigType;
-    formOrientation?: "horizontal" | "vertical";
+    formOrientation: "horizontal" | "vertical";
 }
 
 export function getValueType(value: VideoFormType): VideoFormType {