feat: fix style props of Editor (#3590)

web/src/RecordListPage.js

@@ -272,6 +272,7 @@ class RecordListPage extends BaseListPage {
                 value={this.getDetailField("response")}
                 fillHeight
                 fillWidth
+                maxWidth={this.getEditorMaxWidth()}
                 dark
                 readOnly
               />
@@ -282,6 +283,7 @@ class RecordListPage extends BaseListPage {
                 lang="json"
                 fillHeight
                 fillWidth
+                maxWidth={this.getEditorMaxWidth()}
                 dark
                 readOnly
               />
@@ -292,6 +294,10 @@ class RecordListPage extends BaseListPage {
     );
   }
 
+  getEditorMaxWidth = () => {
+    return Setting.isMobile() ? window.innerWidth - 60 : 475;
+  };
+
   jsonStrFormatter = str => {
     try {
       return JSON.stringify(JSON.parse(str), null, 2);

web/src/common/Editor.js

@@ -18,14 +18,33 @@ import {materialDark} from "@uiw/codemirror-theme-material";
 import {langs} from "@uiw/codemirror-extensions-langs";
 
 export const Editor = (props) => {
-  const fillHeight = props.fillHeight ? {
+  let style = {};
-    height: "100%",
+  let height = props.height;
-    style: {height: "100%"},
+  let width = props.width;
-  } : {};
+  const copy2StyleProps = [
-  const fillWidth = props.fillWidth ? {
+    "width", "maxWidth", "minWidth",
-    width: "100%",
+    "height", "maxHeight", "minHeight",
-    style: {width: "100%"},
+  ];
-  } : {};
+  if (props.fillHeight) {
+    height = "100%";
+    style = {...style, height: "100%"};
+  }
+  if (props.fillWidth) {
+    width = "100%";
+    style = {...style, width: "100%"};
+  }
+  /**
+   * @uiw/react-codemirror style props sucha as "height" "width"
+   * may need to be configured with "style" in some scenarios to take effect
+   */
+  copy2StyleProps.forEach(el => {
+    if (["number", "string"].includes(typeof props[el])) {
+      style = {...style, [el]: props[el]};
+    }
+  });
+  if (props.style) {
+    style = {...style, ...props.style};
+  }
   let extensions = [];
   switch (props.lang) {
   case "javascript":
@@ -50,8 +69,9 @@ export const Editor = (props) => {
     <CodeMirror
       value={props.value}
       {...props}
-      {...fillHeight}
+      width={width}
-      {...fillWidth}
+      height={height}
+      style={style}
       readOnly={props.readOnly}
       theme={props.dark ? materialDark : "light"}
       extensions={extensions}