feat: add MarkdownEditor component and integrate it into news add/edit forms

src/components/markdown-editor/index.vue

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import type { ComponentInstance } from 'vue';
+import { getCurrentInstance } from 'vue';
+import { storeToRefs } from 'pinia';
+import type { ToolbarNames } from 'md-editor-v3';
+import { MdEditor } from 'md-editor-v3';
+import { useThemeStore } from '@/store/modules/theme';
+
+import 'md-editor-v3/lib/style.css';
+
+const modelValue = defineModel('value', { type: String, default: '' });
+const themeStore = useThemeStore();
+const { darkMode } = storeToRefs(themeStore);
+
+const toolbarsExclude: ToolbarNames[] = [
+  'github',
+  'catalog',
+  'previewOnly',
+  'fullscreen',
+  'image',
+  'code',
+  'codeRow',
+  'save',
+  'htmlPreview',
+  'next',
+  'revoke',
+  'mermaid'
+];
+const vm = getCurrentInstance()!;
+
+function changeRef(expose: any) {
+  vm.exposed = expose;
+}
+
+defineExpose({} as ComponentInstance<typeof MdEditor>);
+</script>
+
+<template>
+  <MdEditor
+    :ref="changeRef"
+    v-model="modelValue"
+    v-bind="{ ...$attrs }"
+    :toolbars-exclude="toolbarsExclude"
+    :theme="darkMode ? 'dark' : 'light'"
+  />
+</template>
+
+<style lang="css" scoped></style>