<template>
    <codemirror
        v-model="jsCode"
        :placeholder="editorPlaceholder"
        :style="{ height: editorHeight+'px' }"
        :autofocus="true"
        :indent-with-tab="true"
        :tabSize="tabSize"
        :extensions="extensions"
        :scrollbarStyle="null"
    />
</template>

<script setup>
import {Codemirror} from "vue-codemirror";
import {javascript} from "@codemirror/lang-javascript";
import {defineEmits, ref, defineProps, computed} from "vue";

const emit = defineEmits()
const props = defineProps({
  value: {
    type: String,
    default: "",
  },
  editorPlaceholder: {
    type: String,
    default: "请输入代码",
  },
  editorHeight: {
    type: String,
    default: "300",
  },
  tabSize: {
    type: Number,
    default: 2,
  }
})
const _value = computed({
  get() {
    return props.value || ""
  },
  set(value) {
    emit('update:value', value)
  }
})
const jsCode = ref();
const extensions = ref([javascript()]);
</script>
