fix

src/shared/components/CodeEditor.vue

@@ -1,12 +1,17 @@
 <script lang="ts" setup>
 import { cpp } from "@codemirror/lang-cpp"
 import { python } from "@codemirror/lang-python"
-import { EditorView } from "@codemirror/view"
+import { bracketMatching } from "@codemirror/language"
 import { Codemirror } from "vue-codemirror"
-import { autocompletion } from "@codemirror/autocomplete"
-import { LANGUAGE } from "utils/types"
+import {
+  autocompletion,
+  closeBrackets,
+  completeAnyWord,
+} from "@codemirror/autocomplete"
+import type { LANGUAGE } from "utils/types"
 import { oneDark } from "../themes/oneDark"
 import { smoothy } from "../themes/smoothy"
+import { styleTheme } from "shared/extensions/baseTheme"
 import { enhanceCompletion } from "shared/extensions/autocompletion"
 
 interface Props {
@@ -30,14 +35,6 @@ const code = defineModel<string>("value")
 
 const isDark = useDark()
 
-const styleTheme = EditorView.baseTheme({
-  "& .cm-scroller": { "font-family": "Monaco" },
-  "&.cm-editor.cm-focused": { outline: "none" },
-  "&.cm-editor .cm-tooltip.cm-tooltip-autocomplete ul": {
-    "font-family": "Monaco",
-  },
-})
-
 const langExtension = computed(() => {
   return ["Python2", "Python3"].includes(props.language) ? python() : cpp()
 })
@@ -45,8 +42,10 @@ const langExtension = computed(() => {
 const extensions = computed(() => [
   styleTheme,
   langExtension.value,
+  bracketMatching(),
+  closeBrackets(),
   autocompletion({
-    override: [enhanceCompletion(props.language)],
+    override: [enhanceCompletion(props.language), completeAnyWord],
   }),
   isDark.value ? oneDark : smoothy,
 ])

src/shared/components/SyncCodeEditor.vue

@@ -1,13 +1,19 @@
 <script lang="ts" setup>
 import { cpp } from "@codemirror/lang-cpp"
 import { python } from "@codemirror/lang-python"
+import { bracketMatching } from "@codemirror/language"
 import { EditorView } from "@codemirror/view"
 import { Codemirror } from "vue-codemirror"
-import { autocompletion } from "@codemirror/autocomplete"
+import {
+  autocompletion,
+  closeBrackets,
+  completeAnyWord,
+} from "@codemirror/autocomplete"
 import type { Extension } from "@codemirror/state"
-import { LANGUAGE } from "utils/types"
+import type { LANGUAGE } from "utils/types"
 import { oneDark } from "../themes/oneDark"
 import { smoothy } from "../themes/smoothy"
+import { styleTheme } from "shared/extensions/baseTheme"
 import { useCodeSync, SYNC_ERROR_CODES } from "../composables/sync"
 import { useBreakpoints } from "../composables/breakpoints"
 import { enhanceCompletion } from "shared/extensions/autocompletion"
@@ -50,14 +56,6 @@ const emit = defineEmits<{
 
 const { isDesktop } = useBreakpoints()
 
-const styleTheme = EditorView.baseTheme({
-  "& .cm-scroller": { "font-family": "Monaco" },
-  "&.cm-editor.cm-focused": { outline: "none" },
-  "&.cm-editor .cm-tooltip.cm-tooltip-autocomplete ul": {
-    "font-family": "Monaco",
-  },
-})
-
 const langExtension = computed((): Extension => {
   return ["Python2", "Python3"].includes(props.language) ? python() : cpp()
 })
@@ -65,9 +63,11 @@ const langExtension = computed((): Extension => {
 const extensions = computed(() => [
   styleTheme,
   langExtension.value,
+  bracketMatching(),
+  closeBrackets(),
   isDark.value ? oneDark : smoothy,
   autocompletion({
-    override: [enhanceCompletion(props.language)],
+    override: [enhanceCompletion(props.language), completeAnyWord],
   }),
   getInitialExtension(),
 ])

src/shared/extensions/autocompletion.ts

@@ -5,7 +5,7 @@ import type {
   CompletionSource,
 } from "@codemirror/autocomplete"
 import type { EditorView } from "@codemirror/view"
-import { LANGUAGE } from "utils/types"
+import type { LANGUAGE } from "utils/types"
 import { c } from "./c"
 import { python } from "./python"
 
@@ -25,7 +25,7 @@ export function enhanceCompletion(language: LANGUAGE): CompletionSource {
     context: CompletionContext,
   ): Promise<CompletionResult | null> {
     const word = context.matchBefore(/\w+/)
-    if (!word) return null
+    if (!word && !context.explicit) return null
 
     const trulyLanguage = language.startsWith("Python") ? "python" : "c"
     const completions: Completion[] = (
@@ -63,7 +63,7 @@ export function enhanceCompletion(language: LANGUAGE): CompletionSource {
     })
 
     return {
-      from: word.from,
+      from: word ? word.from : context.pos,
       options: completions,
       validFor: /^\w+$/,
     }

src/shared/extensions/baseTheme.ts

@@ -0,0 +1,9 @@
+import { EditorView } from "@codemirror/view"
+
+export const styleTheme = EditorView.baseTheme({
+  "& .cm-scroller": { "font-family": "Monaco" },
+  "&.cm-editor.cm-focused": { outline: "none" },
+  "&.cm-editor .cm-tooltip.cm-tooltip-autocomplete ul": {
+    "font-family": "Monaco",
+  },
+})

src/shared/themes/createTheme.ts

@@ -82,7 +82,7 @@ export const createTheme = ({
       ".cm-cursor, .cm-dropCursor": {
         borderLeftColor: settings.caret,
       },
-      "&.cm-focused .cm-selectionBackgroundm .cm-selectionBackground, .cm-content ::selection":
+      "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
         {
           backgroundColor: settings.selection,
         },

src/shared/themes/smoothy.ts

@@ -1,8 +1,23 @@
 import { tags as t } from "@lezer/highlight"
+import { EditorView } from "@codemirror/view"
+import type { Extension } from "@codemirror/state"
 import { createTheme } from "./createTheme"
 
+const tooltipTheme = EditorView.theme({
+  ".cm-tooltip": {
+    border: "1px solid #e0e0e0",
+    backgroundColor: "#f8f8f8",
+  },
+  ".cm-tooltip-autocomplete": {
+    "& > ul > li[aria-selected]": {
+      backgroundColor: "#e8e8e8",
+      color: "#000000",
+    },
+  },
+})
+
 // Author: Kenneth Reitz
-export const smoothy = createTheme({
+const smoothyBase = createTheme({
   variant: "light",
   settings: {
     background: "#FFFFFF",
@@ -81,3 +96,5 @@ export const smoothy = createTheme({
     },
   ],
 })
+
+export const smoothy: Extension = [smoothyBase, tooltipTheme]