<script setup lang="ts">
import { ref } from 'vue';

import CodeEditor from './CodeEditor.vue';

withDefaults(
  defineProps<{
    highlight?: boolean;
    lineWrapping?: boolean;
    modelValue: string;
    readonly?: boolean;
  }>(),
  { highlight: true, lineWrapping: true, readonly: false },
);

const emit = defineEmits<{
  cursorChange: [{ column: number; line: number }];
  save: [];
  'update:modelValue': [value: string];
}>();

const editorRef = ref<InstanceType<typeof CodeEditor>>();

defineExpose({
  focus: () => editorRef.value?.focus(),
  openSearch: () => editorRef.value?.openSearch(),
  scrollToLine: (line: number, column = 1) =>
    editorRef.value?.scrollToLine(line, column),
});
</script>

<template>
  <CodeEditor
    ref="editorRef"
    :model-value="modelValue"
    :language="highlight ? 'markdown' : 'text'"
    :line-wrapping="lineWrapping"
    :readonly="readonly"
    @cursor-change="emit('cursorChange', $event)"
    @save="emit('save')"
    @update:model-value="emit('update:modelValue', $event)"
  />
</template>
