<script setup lang="ts">
import { ref } from "vue";
import { MdEditor } from "md-editor-v3";
import "md-editor-v3/lib/style.css";
import { useThemeStore } from "@/stores/theme";

const theme = useThemeStore();

const text = ref("# Hello Editor");

async function handleSaveEvent(v: string, h: Promise<string>) {}

async function loadMarkdownFromString(markdown: string) {
  text.value = markdown;
}

async function loadMarkdownFromUrl(url: string) {
  const response = await fetch(url);
  const markdown = await response.text();
  text.value = markdown;
}

defineExpose({
  loadMarkdownFromString,
  loadMarkdownFromUrl,
});
</script>

<template>
  <MdEditor v-model="text" :theme="theme.currentMode" />
</template>

<style lang="postcss" scoped></style>
