60 lines
1.3 KiB
Vue
60 lines
1.3 KiB
Vue
<script lang="ts" setup>
|
|
import { cpp } from "@codemirror/lang-cpp"
|
|
import { python } from "@codemirror/lang-python"
|
|
import { EditorView } from "@codemirror/view"
|
|
import { Codemirror } from "vue-codemirror"
|
|
import { LANGUAGE } from "~/utils/types"
|
|
import { oneDark } from "../themes/oneDark"
|
|
import { smoothy } from "../themes/smoothy"
|
|
|
|
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",
|
|
},
|
|
})
|
|
|
|
interface Props {
|
|
language?: LANGUAGE
|
|
fontSize?: number
|
|
height?: string
|
|
readonly?: boolean
|
|
placeholder?: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
language: "C",
|
|
fontSize: 20,
|
|
height: "100%",
|
|
readonly: false,
|
|
placeholder: "",
|
|
})
|
|
|
|
const code = defineModel<string>("value")
|
|
|
|
const isDark = useDark()
|
|
|
|
const lang = computed(() => {
|
|
if (props.language === "Python3" || props.language === "Python2") {
|
|
return python()
|
|
}
|
|
return cpp()
|
|
})
|
|
</script>
|
|
<template>
|
|
<Codemirror
|
|
v-model="code"
|
|
indentWithTab
|
|
:extensions="[styleTheme, lang, isDark ? oneDark : smoothy]"
|
|
:disabled="props.readonly"
|
|
:tabSize="4"
|
|
:placeholder="props.placeholder"
|
|
:style="{ height: props.height, fontSize: props.fontSize + 'px' }"
|
|
/>
|
|
</template>
|