<script setup>
import { Codemirror } from "vue-codemirror";
import { oneDark } from "@codemirror/theme-one-dark";
import { javascript } from "@codemirror/lang-javascript";
import { html } from "@codemirror/lang-html";
import { vue as vueLang } from "@codemirror/lang-vue";
const props = defineProps({
  height: { type: [String, Number], required: false, default: "100%" },
  minHeight: { type: [String, Number], required: false, default: "20em" },
  lang: { type: String, required: false, default: "vue" }
});
const extensions = [oneDark];
if (props.lang == "vue") {
  extensions.push(vueLang({ base: html({ autoCloseTags: true, matchClosingTags: true, selfClosingTags: true }) }));
} else {
  extensions.push(javascript({ typescript: true }));
}
const model = defineModel({ type: String });
</script>

<template>
  <codemirror
    v-model="model"
    :extensions="extensions"
    :style="{ height, minHeight }"
  />
</template>
