Fuxi/application/components/problem/solution/program.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>