feat(web): format code on save (#1002)

* feat(web): format code on save * fix(web): json data max height
labring · Apr 4, 2023 · e970a66 · e970a66
1 parent 378b0e6
commit e970a66
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 5 deletions.
diff --git a/web/src/App.css b/web/src/App.css
@@ -20,7 +20,7 @@
 /* 滚动条滑块 */
 ::-webkit-scrollbar-thumb {
   border-radius: 4px;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.2);
 }
 
 html,

diff --git a/web/src/components/Editor/FunctionEditor.tsx b/web/src/components/Editor/FunctionEditor.tsx
@@ -2,10 +2,15 @@ import { useEffect, useRef } from "react";
 import { debounce } from "lodash";
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
 
+import { Pages } from "@/constants";
+
 import "./userWorker";
 
 import { AutoImportTypings } from "./typesResolve";
 
+import useHotKey, { DEFAULT_SHORTCUTS } from "@/hooks/useHotKey";
+import useGlobalStore from "@/pages/globalStore";
+
 const autoImportTypings = new AutoImportTypings();
 const parseImports = debounce(autoImportTypings.parse, 1500).bind(autoImportTypings);
 
@@ -108,6 +113,19 @@ function FunctionEditor(props: {
   const subscriptionRef = useRef<monaco.IDisposable | undefined>(undefined);
   const monacoEl = useRef(null);
 
+  const globalStore = useGlobalStore((state) => state);
+
+  useHotKey(
+    DEFAULT_SHORTCUTS.send_request,
+    () => {
+      // format
+      editorRef.current?.trigger("keyboard", "editor.action.formatDocument", {});
+    },
+    {
+      enabled: globalStore.currentPageId === Pages.function,
+    },
+  );
+
   useEffect(() => {
     if (monacoEl && !editorRef.current) {
       editorRef.current = monaco.editor.create(monacoEl.current!, {
@@ -120,6 +138,7 @@ function FunctionEditor(props: {
         scrollbar: {
           verticalScrollbarSize: 6,
         },
+        formatOnPaste: true,
         overviewRulerLanes: 0,
         lineNumbersMinChars: 4,
         fontSize: 14,

diff --git a/web/src/components/Editor/JSONViewer.tsx b/web/src/components/Editor/JSONViewer.tsx
@@ -245,8 +245,8 @@ export default function JSONViewer(props: JSONViewerProps) {
   return (
     <div
       style={{
-        maxHeight: 100,
-        overflow: "hidden",
+        maxHeight: 390,
+        overflow: "auto",
       }}
     >
       <SyntaxHighlighter

diff --git a/web/src/components/Editor/JsonEditor.tsx b/web/src/components/Editor/JsonEditor.tsx
@@ -56,7 +56,7 @@ function JsonEditor(props: {
           alwaysConsumeMouseWheel: false,
         },
         lineNumbersMinChars: 0,
-        fontSize: 14,
+        fontSize: 13,
         scrollBeyondLastLine: false,
         folding: false,
         overviewRulerBorder: false,

diff --git a/web/src/pages/home/mods/CreateAppModal/BundleItem/index.tsx b/web/src/pages/home/mods/CreateAppModal/BundleItem/index.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { useColorMode } from "@chakra-ui/react";
 import clsx from "clsx";
 import { t } from "i18next";