fix: readonly resize module and fullscreen editor height

Author: gjulivan

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

@@ -127,7 +127,6 @@ const Editor = forwardRef((props: EditorProps, ref: MutableRefObject<Quill | nul
                                 ...QuillTableBetter.keyboardBindings
                             }
                         },
-                        resize: RESIZE_MODULE_CONFIG,
                         table: false,
                         "table-better": {
                             language: "en_US",
@@ -139,6 +138,9 @@ const Editor = forwardRef((props: EditorProps, ref: MutableRefObject<Quill | nul
                     readOnly
                 };
 
+                if (!readOnly && options.modules) {
+                    options.modules.resize = RESIZE_MODULE_CONFIG;
+                }
                 const quill = new MxQuill(editorContainer, options);
                 ref.current = quill;
 

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

@@ -190,12 +190,16 @@ function EditorWrapperInner(props: EditorWrapperProps): ReactElement {
                     theme={"snow"}
                     ref={quillRef}
                     defaultValue={stringAttribute.value}
-                    style={{
-                        height: style?.height,
-                        minHeight: style?.minHeight,
-                        maxHeight: style?.maxHeight,
-                        overflowY: style?.overflowY
-                    }}
+                    style={
+                        isFullscreen
+                            ? { height: "100%" }
+                            : {
+                                  height: style?.height,
+                                  minHeight: style?.minHeight,
+                                  maxHeight: style?.maxHeight,
+                                  overflowY: style?.overflowY
+                              }
+                    }
                     toolbarId={shouldHideToolbar ? undefined : toolbarOptions ? toolbarOptions : toolbarId}
                     onTextChange={onTextChange}
                     onSelectionChange={onSelectionChange}

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

@@ -7,10 +7,15 @@
         align-items: center;
         display: flex;
         z-index: 105;
+
+        &.mx-underlay {
+            z-index: 105;
+        }
     }
 
     &-body {
         &.modal-dialog {
+            z-index: 106;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);

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

@@ -9,7 +9,7 @@ import {
     useRole
 } from "@floating-ui/react";
 import { If } from "@mendix/widget-plugin-component-kit/If";
-import { createElement, ReactElement } from "react";
+import { createElement, Fragment, ReactElement } from "react";
 import LinkDialog, { LinkDialogProps } from "./LinkDialog";
 import VideoDialog, { VideoDialogProps } from "./VideoDialog";
 import ViewCodeDialog, { ViewCodeDialogProps } from "./ViewCodeDialog";
@@ -71,10 +71,14 @@ export default function Dialog(props: DialogProps): ReactElement {
     return (
         <FloatingPortal>
             {isOpen && (
-                <FloatingOverlay lockScroll className="widget-rich-text-modal-overlay">
+                <Fragment>
+                    <FloatingOverlay
+                        lockScroll
+                        className="widget-rich-text-modal-overlay mx-underlay"
+                    ></FloatingOverlay>
                     <FloatingFocusManager context={context}>
                         <div
-                            className="Dialog"
+                            className="Dialog mx-layoutgrid"
                             ref={refs.setFloating}
                             aria-labelledby={dialogType}
                             aria-describedby={dialogType}
@@ -94,7 +98,7 @@ export default function Dialog(props: DialogProps): ReactElement {
                             </If>
                         </div>
                     </FloatingFocusManager>
-                </FloatingOverlay>
+                </Fragment>
             )}
         </FloatingPortal>
     );