71 lines
1.6 KiB
Vue
71 lines
1.6 KiB
Vue
<template>
|
|
<client-only>
|
|
<vue-monaco-editor
|
|
:options="options"
|
|
:language="answers.language ?? 'text'"
|
|
v-model:value="answers.code"
|
|
class="min-h-[360px] code-editor"
|
|
/>
|
|
</client-only>
|
|
|
|
<n-divider class="mx-[-24px] w-[calc(100%+48px)] divider-below-code" />
|
|
|
|
<section>
|
|
<n-space>
|
|
<n-select
|
|
:options="languages"
|
|
v-model:value="answers.language"
|
|
placeholder="Programming Language"
|
|
class="w-120"
|
|
/>
|
|
</n-space>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { NDivider, NSpace, NSelect } from "naive-ui";
|
|
import { VueMonacoEditor } from "@guolao/vue-monaco-editor";
|
|
|
|
const props = defineProps<{
|
|
challenge: any,
|
|
problem: any,
|
|
answers: any,
|
|
}>();
|
|
const emits = defineEmits(["update:answers"]);
|
|
|
|
const answers = ref(props.challenge?.answers ?? {});
|
|
|
|
watch(answers, (v) => {
|
|
emits("update:answers", v);
|
|
});
|
|
|
|
const options = {
|
|
minimap: { enabled: false }
|
|
};
|
|
|
|
const languageWhitelist: string[] = props.problem?.languageWhitelist ?? [];
|
|
const languageBlacklist: string[] = props.problem?.languageBlacklist ?? [];
|
|
|
|
const languages = [
|
|
{ label: "C", value: "c" },
|
|
{ label: "C++", value: "cpp" },
|
|
{ label: "JSON", value: "json" }, // Huh?
|
|
].filter((item) => {
|
|
return languageWhitelist.filter((x) => new RegExp(x, item.value)).length > 0 ||
|
|
!(languageBlacklist.filter((x) => new RegExp(x, item.value)).length > 0);
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.code-editor {
|
|
min-width: calc(100% + 48px);
|
|
margin-top: -20px;
|
|
margin-left: -24px;
|
|
margin-right: -24px;
|
|
}
|
|
|
|
.divider-below-code {
|
|
margin-top: 0 !important;
|
|
}
|
|
</style>
|