diff --git a/packages/ui-default/components/highlighter/highlighter.page.js b/packages/ui-default/components/highlighter/highlighter.page.js
index 124dfa21f..8ec96a9ae 100644
--- a/packages/ui-default/components/highlighter/highlighter.page.js
+++ b/packages/ui-default/components/highlighter/highlighter.page.js
@@ -4,7 +4,7 @@ import Notification from 'vj/components/notification/index';
 import tpl from 'vj/utils/tpl';
 import i18n from 'vj/utils/i18n';
 
-const highlighterPage = new AutoloadPage('highlighterPage', async () => {
+const highlighterPage = new AutoloadPage('highlighterPage', () => {
   Promise.all([
     import('./prismjs'),
     UserContext.formatCode ? load() : [true, null],
diff --git a/packages/ui-default/components/monaco/languages/markdown.ts b/packages/ui-default/components/monaco/languages/markdown.ts
index fe751d45c..4313e0599 100644
--- a/packages/ui-default/components/monaco/languages/markdown.ts
+++ b/packages/ui-default/components/monaco/languages/markdown.ts
@@ -122,7 +122,7 @@ monaco.languages.registerCompletionItemProvider('markdown', {
       startLineNumber: position.lineNumber,
       endLineNumber: position.lineNumber,
       startColumn: word.startColumn - 1,
-      endColumn: position.column - 1,
+      endColumn: word.startColumn - 1,
     });
     if (![':', '/'].includes(prefix)) return { suggestions: [] };
     const range = {
diff --git a/packages/ui-default/components/scratchpad/ScratchpadEditorContainer.jsx b/packages/ui-default/components/scratchpad/ScratchpadEditorContainer.jsx
index e6eb888cb..05d0c613c 100644
--- a/packages/ui-default/components/scratchpad/ScratchpadEditorContainer.jsx
+++ b/packages/ui-default/components/scratchpad/ScratchpadEditorContainer.jsx
@@ -61,7 +61,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(class MonacoEditor e
         this.editor.onDidChangeConfiguration(() => {
           const current = this.editor.getOptions()._values[40].fontSize;
           localStorage.setItem('scratchpad.editor.fontSize', current);
-        })
+        }),
       );
     }
   }
@@ -94,7 +94,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(class MonacoEditor e
             range: model.getFullModelRange(),
             text: value,
           },
-        ]
+        ],
       );
       editor.pushUndoStop();
       this.__prevent_trigger_change_event = false;
diff --git a/packages/ui-default/package.json b/packages/ui-default/package.json
index fa4cec8f9..f8d04d2c9 100644
--- a/packages/ui-default/package.json
+++ b/packages/ui-default/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.20.3",
+  "version": "4.20.4",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",
diff --git a/packages/ui-default/pages/api.page.tsx b/packages/ui-default/pages/api.page.tsx
index 9f686d98d..6583d6f4e 100644
--- a/packages/ui-default/pages/api.page.tsx
+++ b/packages/ui-default/pages/api.page.tsx
@@ -2,7 +2,6 @@ import { NamedPage } from 'vj/misc/Page';
 import request from 'vj/utils/request';
 import React from 'react';
 import { render } from 'react-dom';
-import 'graphiql/graphiql.css';
 
 const Logo = () => <span>Hydro API Console </span>;
 const defaultQuery = `\
@@ -17,6 +16,7 @@ const page = new NamedPage('api', async () => {
     import('graphiql'),
     import('graphql'),
     request.get('/api?schema'),
+    import('graphiql/graphiql.css'),
   ]);
   // @ts-ignore
   GraphiQL.Logo = Logo;