Add ToastEditor component

diff --git a/client/components/Toast/ToastEditor.vue b/client/components/Toast/ToastEditor.vue
new file mode 100644 (file)
index 0000000..5b71e8c
--- /dev/null
+++ b/client/components/Toast/ToastEditor.vue
@@ -0,0 +1,31 @@
+<template>
+  <div ref="editorElement"></div>
+</template>
+
+<script setup>
+import Editor from "@toast-ui/editor";
+import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js";
+import { onMounted, ref } from "vue";
+
+const props = defineProps({
+  initialValue: String,
+});
+
+const editorElement = ref();
+
+onMounted(() => {
+  new Editor({
+    el: editorElement.value,
+    height: "100%",
+    initialValue: props.initialValue,
+    plugins: [codeSyntaxHighlight],
+  });
+});
+</script>
+
+<style>
+@import "@toast-ui/editor/dist/toastui-editor.css";
+@import "prismjs/themes/prism.css";
+@import "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css";
+@import "./toastui-editor-overrides.scss";
+</style>