feat: [editor] support autocomplete (#1018)

src/common/ui/code.vue

@@ -66,6 +66,10 @@ import 'codemirror/addon/search/match-highlighter';
 import 'codemirror/addon/search/searchcursor';
 import 'codemirror/addon/selection/active-line';
 import 'codemirror/keymap/sublime';
+import 'codemirror/addon/hint/show-hint.css';
+import 'codemirror/addon/hint/show-hint';
+import 'codemirror/addon/hint/javascript-hint';
+import 'codemirror/addon/hint/anyword-hint';
 import CodeMirror from 'codemirror';
 import Tooltip from 'vueleton/lib/tooltip/bundle';
 import ToggleButton from '#/common/ui/toggle-button';
@@ -98,6 +102,17 @@ CodeMirror.commands.insertTab = cm => (
   cm.options.indentWithTabs ? insertTab(cm) : insertSoftTab(cm)
 );
 
+function autoHintWithFallback(cm, opts) {
+  const result = cm.getHelper(cm.getCursor(), 'hint')?.(cm, opts);
+  // fallback to anyword if default returns nothing (or no default)
+  return result?.list.length ? result : CodeMirror.hint.anyword(cm, opts);
+}
+CodeMirror.registerHelper('hint', 'autoHintWithFallback', autoHintWithFallback);
+
+CodeMirror.commands.autocomplete = (cm) => {
+  cm.showHint({ hint: CodeMirror.hint.autoHintWithFallback });
+};
+
 export const cmOptions = {
   continueComments: true,
   styleActiveLine: true,
@@ -301,6 +316,7 @@ export default {
       cm.setOption('extraKeys', {
         Esc: 'cancel',
         F1: 'showHelp',
+        'Ctrl-Space': 'autocomplete',
       });
       Object.assign(CodeMirror.commands, {
         cancel: () => {
@@ -486,6 +502,24 @@ $selectionDarkBg: rgba(73, 72, 62, .99);
   }
 }
 
+/* CodeMirror show-hints fix to work here */
+.CodeMirror-hints {
+  z-index: 9999;
+}
+
+@media (prefers-color-scheme: dark) {
+  .CodeMirror-hints {
+    background: var(--bg);
+  }
+  .CodeMirror-hint {
+    color: var(--fg);
+  }
+  li.CodeMirror-hint-active {
+    background: var(--fg);
+    color: var(--bg);
+  }
+}
+
 /* fix contenteditable selection color bug */
 .cm-s-eclipse .CodeMirror-line {
   ::selection {

src/common/ui/style/style.css

@@ -318,7 +318,8 @@ li {
 }
 
 .monospace-font,
-.editor-code .CodeMirror {
+.editor-code .CodeMirror,
+.CodeMirror-hints.eclipse /* use .eclipse as a workaround to override default CodeMirror-hints style */ {
   /* Use `Courier New` to ensure ` ` has the same width as an original space. */
   font-family: "Fira Code", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", Courier, monospace;
 }