fix: multiple feedbacks fix

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

@@ -30,12 +30,24 @@ export function getProperties(values: RichTextPreviewProps, defaultProperties: P
         hidePropertiesIn(defaultProperties, values, toolbarGroupKeys);
     }
 
-    if (values.heightUnit === "pixels") {
+    if (values.heightUnit === "percentageOfWidth") {
+        hidePropertyIn(defaultProperties, values, "height");
+    } else {
+        hidePropertiesIn(defaultProperties, values, [
+            "minHeight",
+            "minHeightUnit",
+            "maxHeight",
+            "maxHeightUnit",
+            "OverflowY"
+        ]);
+    }
+
+    if (values.minHeightUnit === "none") {
         hidePropertyIn(defaultProperties, values, "minHeight");
     }
 
-    if (values.widthUnit === "percentage" && values.heightUnit === "percentageOfWidth") {
-        hidePropertyIn(defaultProperties, values, "height");
+    if (values.maxHeightUnit === "none") {
+        hidePropertiesIn(defaultProperties, values, ["maxHeight", "OverflowY"]);
     }
 
     if (!values.onChange) {

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

@@ -1,5 +1,4 @@
 import { ValidationAlert } from "@mendix/widget-plugin-component-kit/Alert";
-import { getDimensions } from "@mendix/widget-plugin-platform/utils/get-dimensions";
 import classNames from "classnames";
 import { createElement, Fragment, useEffect, useState } from "react";
 import { RichTextContainerProps } from "../typings/RichTextProps";
@@ -8,15 +7,9 @@ import "./ui/RichText.scss";
 import { constructWrapperStyle } from "./utils/helpers";
 
 export default function RichText(props: RichTextContainerProps): JSX.Element {
-    const { stringAttribute, width: w, height: h, widthUnit, heightUnit, readOnlyStyle } = props;
+    const { stringAttribute, readOnlyStyle } = props;
 
-    const { width, height } = getDimensions({
-        width: w,
-        widthUnit,
-        height: h,
-        heightUnit
-    });
-    const wrapperStyle = constructWrapperStyle(props, { width, height });
+    const wrapperStyle = constructWrapperStyle(props);
     const [isIncubator, setIsIncubator] = useState(true);
 
     useEffect(() => {

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

@@ -64,7 +64,7 @@
             <propertyGroup caption="Dimensions">
                 <property key="widthUnit" type="enumeration" defaultValue="percentage">
                     <caption>Width unit</caption>
-                    <description>Percentage: portion of parent size. Pixels: absolute amount of pixels.</description>
+                    <description />
                     <enumerationValues>
                         <enumerationValue key="percentage">Percentage</enumerationValue>
                         <enumerationValue key="pixels">Pixels</enumerationValue>
@@ -78,18 +78,52 @@
                     <caption>Height unit</caption>
                     <description />
                     <enumerationValues>
-                        <enumerationValue key="percentageOfWidth">Percentage of width</enumerationValue>
+                        <enumerationValue key="percentageOfWidth">Auto</enumerationValue>
                         <enumerationValue key="pixels">Pixels</enumerationValue>
-                        <enumerationValue key="percentageOfParent">Percentage of parent</enumerationValue>
+                        <enumerationValue key="percentageOfParent">Percentage</enumerationValue>
+                        <enumerationValue key="percentageOfView">Viewport</enumerationValue>
                     </enumerationValues>
                 </property>
                 <property key="height" type="integer" defaultValue="250">
                     <caption>Height</caption>
                     <description />
                 </property>
+                <property key="minHeightUnit" type="enumeration" defaultValue="none">
+                    <caption>Minimum Height unit</caption>
+                    <description />
+                    <enumerationValues>
+                        <enumerationValue key="none">None</enumerationValue>
+                        <enumerationValue key="pixels">Pixels</enumerationValue>
+                        <enumerationValue key="percentageOfParent">Percentage</enumerationValue>
+                        <enumerationValue key="percentageOfView">Viewport</enumerationValue>
+                    </enumerationValues>
+                </property>
                 <property key="minHeight" type="integer" defaultValue="250">
                     <caption>Minimum height</caption>
-                    <description>Editor's minimum height. The number value is in pixels.</description>
+                    <description />
+                </property>
+                <property key="maxHeightUnit" type="enumeration" defaultValue="none">
+                    <caption>Maximum Height unit</caption>
+                    <description />
+                    <enumerationValues>
+                        <enumerationValue key="none">None</enumerationValue>
+                        <enumerationValue key="pixels">Pixels</enumerationValue>
+                        <enumerationValue key="percentageOfParent">Percentage</enumerationValue>
+                        <enumerationValue key="percentageOfView">Viewport</enumerationValue>
+                    </enumerationValues>
+                </property>
+                <property key="maxHeight" type="integer" defaultValue="250">
+                    <caption>Maximum height</caption>
+                    <description />
+                </property>
+                <property key="OverflowY" type="enumeration" defaultValue="auto">
+                    <caption>Vertical Overflow</caption>
+                    <description />
+                    <enumerationValues>
+                        <enumerationValue key="auto">Auto</enumerationValue>
+                        <enumerationValue key="scroll">Scroll</enumerationValue>
+                        <enumerationValue key="hidden">Hidden</enumerationValue>
+                    </enumerationValues>
                 </property>
             </propertyGroup>
         </propertyGroup>

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

@@ -26,11 +26,13 @@
     className?: string;
     toolbarId?: string | Array<string | string[] | { [k: string]: any }>;
     readOnly?: boolean;
+    tabIndex?: number;
 }
 
 // Editor is an uncontrolled React component
 const Editor = forwardRef((props: EditorProps, ref: MutableRefObject<Quill | null>) => {
-    const { theme, defaultValue, style, className, toolbarId, onTextChange, onSelectionChange, readOnly } = props;
+    const { theme, defaultValue, style, className, toolbarId, onTextChange, onSelectionChange, readOnly, tabIndex } =
+        props;
     const containerRef = useRef<HTMLDivElement>(null);
     const modalRef = useRef<HTMLDivElement>(null);
     const onTextChangeRef = useRef(onTextChange);

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

@@ -37,7 +37,8 @@
         onLoad,
         readOnlyStyle,
         toolbarOptions,
-        enableStatusBar
+        enableStatusBar,
+        tabIndex
     } = props;
     const isFirstLoad = useRef<boolean>(false);
     const quillRef = useRef<Quill>(null);
@@ -55,7 +56,7 @@
                     }
                 }
             }, 200),
         [stringAttribute]
     );
     const calculateWordCount = useCallback(
         (quill: Quill | null): void => {
@@ -100,7 +101,6 @@
                 if (!isFocus) {
                     setIsFocus(true);
                     executeAction(onFocus);
-
                     editorValueRef.current = quillRef.current?.getText() || "";
                 }
             } else {
@@ -132,44 +132,40 @@
                 "flex-column",
                 `${stringAttribute?.readOnly ? `editor-${readOnlyStyle}` : ""}`
             )}
-            style={{
-                maxWidth: style?.maxWidth
-            }}
+            style={{ width: style?.width }}
             onClick={e => {
                 // click on other parts of editor, such as the toolbar, should also set focus
-                if (
-                    toolbarRef.current === (e.target as HTMLDivElement) ||
-                    toolbarRef.current?.contains(e.target as Node)
-                ) {
-                    quillRef?.current?.focus();
+                if (!quillRef?.current?.hasFocus()) {
+                    if (
+                        toolbarRef.current === (e.target as HTMLDivElement) ||
+                        toolbarRef.current?.contains(e.target as Node) ||
+                        e.target === quillRef?.current?.container.parentElement
+                    ) {
+                        quillRef?.current?.focus();
+                    }
                 }
             }}
             spellCheck={props.spellCheck}
+            tabIndex={tabIndex}
         >
             {toolbarLocation === "auto" && <StickySentinel />}
             <div
                 className={classNames(
                     "flexcontainer",
-                    toolbarLocation === "bottom" ? "flex-column-reverse" : "flex-column"
+                    toolbarLocation === "top" ? "flex-column-reverse" : "flex-column"
                 )}
             >
-                <If condition={!shouldHideToolbar && toolbarOptions === undefined}>
-                    <Toolbar
-                        ref={toolbarRef}
-                        id={toolbarId}
-                        preset={preset}
-                        quill={quillRef.current}
-                        toolbarContent={toolbarPreset}
-                    />
-                </If>
                 <Editor
+                    tabIndex={tabIndex}
                     theme={"snow"}
                     ref={quillRef}
                     defaultValue={stringAttribute.value}
+                    // style={{height: style?.height}}
                     style={{
                         height: style?.height,
                         minHeight: style?.minHeight,
-                        maxHeight: style?.maxHeight
+                        maxHeight: style?.maxHeight,
+                        overflowY: style?.overflowY
                     }}
                     toolbarId={shouldHideToolbar ? undefined : toolbarOptions ? toolbarOptions : toolbarId}
                     onTextChange={onTextChange}
@@ -178,6 +174,15 @@
                     readOnly={stringAttribute.readOnly}
                     key={`${toolbarId}_${stringAttribute.readOnly}`}
                 />
+                <If condition={!shouldHideToolbar && toolbarOptions === undefined}>
+                    <Toolbar
+                        ref={toolbarRef}
+                        id={toolbarId}
+                        preset={preset}
+                        quill={quillRef.current}
+                        toolbarContent={toolbarPreset}
+                    />
+                </If>
             </div>
             {enableStatusBar && (
                 <div className="widget-rich-text-footer">

packages/pluggableWidgets/rich-text-web/src/utils/helpers.ts

@@ -3,19 +3,31 @@
 import { Delta, Op } from "quill/core";
 import { RichTextContainerProps } from "typings/RichTextProps";
 
-export function constructWrapperStyle(props: RichTextContainerProps, currentStyle: CSSProperties): CSSProperties {
-    const { width, height } = currentStyle;
-    const { minHeight, heightUnit, widthUnit } = props;
+function getHeightScale(height: number, heightUnit: "pixels" | "percentageOfParent" | "percentageOfView") {
+    return `${height}${heightUnit === "pixels" ? "px" : heightUnit === "percentageOfView" ? "vh" : "%"}`;
+}
 
-    const wrapperStyle: Pick<CSSProperties, "width" | "height" | "minHeight" | "maxWidth"> = { width, height };
+export function constructWrapperStyle(props: RichTextContainerProps): CSSProperties {
+    const { widthUnit, heightUnit, minHeightUnit, maxHeightUnit, width, height, minHeight, maxHeight, OverflowY } =
+        props;
 
-    if (heightUnit !== "pixels") {
-        wrapperStyle.minHeight = minHeight;
-        delete wrapperStyle.height;
-    }
+    const wrapperStyle: Pick<CSSProperties, "width" | "height" | "minHeight" | "maxHeight" | "maxWidth" | "overflowY"> =
+        {};
+
+    wrapperStyle.width = `${width}${widthUnit === "pixels" ? "px" : "%"}`;
+    if (heightUnit === "percentageOfWidth") {
+        wrapperStyle.height = "auto";
 
-    if (widthUnit === "pixels") {
-        wrapperStyle.maxWidth = width;
+        if (minHeightUnit !== "none") {
+            wrapperStyle.minHeight = getHeightScale(minHeight, minHeightUnit);
+        }
+
+        if (maxHeightUnit !== "none") {
+            wrapperStyle.maxHeight = getHeightScale(maxHeight, maxHeightUnit);
+            wrapperStyle.overflowY = OverflowY;
+        }
+    } else {
+        wrapperStyle.height = getHeightScale(height, heightUnit);
     }
 
     return wrapperStyle;

packages/pluggableWidgets/rich-text-web/src/utils/themes/mxTheme.ts

@@ -37,21 +37,23 @@ export default class MendixTheme extends SnowTheme {
 
     /** updating font picker selected item based on current's selection font */
     updateFontPicker(range: Range): void {
-        const currentRange = range || { index: 0, length: 0 };
-        if (!this.fontPicker) {
-            this.fontPicker = this.pickers.find(picker => picker.container.classList.contains("ql-font"));
-        }
+        if (this.pickers) {
+            const currentRange = range || { index: 0, length: 0 };
+            if (!this.fontPicker) {
+                this.fontPicker = this.pickers.find(picker => picker.container.classList.contains("ql-font"));
+            }
 
-        const format = this.quill.getFormat(currentRange.index, currentRange.length);
-        let font = format ? (format.font as string) : undefined;
-        if (!font) {
-            // default font
-            font = "helvetica";
-        }
+            const format = this.quill.getFormat(currentRange.index, currentRange.length);
+            let font = format ? (format.font as string) : undefined;
+            if (!font) {
+                // default font
+                font = "helvetica";
+            }
 
-        const currentOption = this.fontPicker?.container.querySelector(`[data-value=${font}]`);
-        if (currentOption) {
-            this.fontPicker?.selectItem(currentOption as HTMLElement, false);
+            const currentOption = this.fontPicker?.container.querySelector(`[data-value=${font}]`);
+            if (currentOption) {
+                this.fontPicker?.selectItem(currentOption as HTMLElement, false);
+            }
         }
     }
 }

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

@@ -13,7 +13,13 @@ export type ReadOnlyStyleEnum = "text" | "bordered" | "readPanel";
 
 export type WidthUnitEnum = "percentage" | "pixels";
 
-export type HeightUnitEnum = "percentageOfWidth" | "pixels" | "percentageOfParent";
+export type HeightUnitEnum = "percentageOfWidth" | "pixels" | "percentageOfParent" | "percentageOfView";
+
+export type MinHeightUnitEnum = "none" | "pixels" | "percentageOfParent" | "percentageOfView";
+
+export type MaxHeightUnitEnum = "none" | "pixels" | "percentageOfParent" | "percentageOfView";
+
+export type OverflowYEnum = "auto" | "scroll" | "hidden";
 
 export type OnChangeTypeEnum = "onLeave" | "onDataChange";
 
@@ -42,7 +48,11 @@ export interface RichTextContainerProps {
     width: number;
     heightUnit: HeightUnitEnum;
     height: number;
+    minHeightUnit: MinHeightUnitEnum;
     minHeight: number;
+    maxHeightUnit: MaxHeightUnitEnum;
+    maxHeight: number;
+    OverflowY: OverflowYEnum;
     onChange?: ActionValue;
     onFocus?: ActionValue;
     onBlur?: ActionValue;
@@ -76,7 +86,11 @@ export interface RichTextPreviewProps {
     width: number | null;
     heightUnit: HeightUnitEnum;
     height: number | null;
+    minHeightUnit: MinHeightUnitEnum;
     minHeight: number | null;
+    maxHeightUnit: MaxHeightUnitEnum;
+    maxHeight: number | null;
+    OverflowY: OverflowYEnum;
     onChange: {} | null;
     onFocus: {} | null;
     onBlur: {} | null;