46 lines
1.0 KiB
Vue
46 lines
1.0 KiB
Vue
<template>
|
|
<code-mirror
|
|
v-model="textValue"
|
|
basic
|
|
:lang="lang"
|
|
:dark="isDark"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import CodeMirror from "vue-codemirror6";
|
|
import {useVModel} from "@vueuse/core";
|
|
import {computed} from "vue";
|
|
import {css} from "@codemirror/lang-css";
|
|
import {javascript} from "@codemirror/lang-javascript";
|
|
import {html} from "@codemirror/lang-html";
|
|
import {liquidsoap} from "codemirror-lang-liquidsoap";
|
|
import useTheme from "~/functions/theme";
|
|
|
|
const props = defineProps<{
|
|
modelValue: string | null,
|
|
mode: string
|
|
}>();
|
|
|
|
const emit = defineEmits(['update:modelValue']);
|
|
|
|
const textValue = useVModel(props, 'modelValue', emit);
|
|
|
|
const lang = computed(() => {
|
|
switch (props.mode) {
|
|
case 'css':
|
|
return css();
|
|
case 'javascript':
|
|
return javascript();
|
|
case 'html':
|
|
return html();
|
|
case 'liquidsoap':
|
|
return liquidsoap();
|
|
default:
|
|
return null;
|
|
}
|
|
});
|
|
|
|
const {isDark} = useTheme();
|
|
</script>
|