From ef5e46fa834ea8f55fb9e95c5de03707d3195880 Mon Sep 17 00:00:00 2001
From: RubyLiu <liulubingjava@163.com>
Date: Tue, 10 Oct 2023 21:08:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=9B=86=E6=88=90=E5=AF=8C=E6=96=87?=
 =?UTF-8?q?=E6=9C=AC=E7=BC=96=E8=BE=91=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package.json                         |   1 +
 .../pure/ms-rich-text/MsRichText.vue          | 138 ++++++++++++++++++
 frontend/src/views/bug-management/index.vue   |   4 +
 3 files changed, 143 insertions(+)
 create mode 100644 frontend/src/components/pure/ms-rich-text/MsRichText.vue

diff --git a/frontend/package.json b/frontend/package.json
index 58d520b925..f1d8b63812 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -40,6 +40,7 @@
     "@arco-design/web-vue": "^2.51.2",
     "@arco-themes/vue-ms-theme-default": "^0.0.30",
     "@form-create/arco-design": "^3.1.23",
+    "@halo-dev/richtext-editor": "0.0.0-alpha.32",
     "@types/color": "^3.0.4",
     "@vueuse/core": "^10.4.1",
     "ace-builds": "^1.24.2",
diff --git a/frontend/src/components/pure/ms-rich-text/MsRichText.vue b/frontend/src/components/pure/ms-rich-text/MsRichText.vue
new file mode 100644
index 0000000000..586b41e9d7
--- /dev/null
+++ b/frontend/src/components/pure/ms-rich-text/MsRichText.vue
@@ -0,0 +1,138 @@
+<script lang="ts" setup>
+  import '@halo-dev/richtext-editor/dist/style.css';
+  // import { unified } from 'unified';
+  // import rehypeParse from 'rehype-parse';
+  // import rehypeFormat from 'rehype-format';
+  // import rehypeStringify from 'rehype-stringify';
+  import { useLocalStorage } from '@vueuse/core';
+  import useLocale from '@/locale/useLocale';
+  import {
+    ExtensionBlockquote,
+    ExtensionBold,
+    ExtensionBulletList,
+    ExtensionCode,
+    ExtensionDocument,
+    ExtensionDropcursor,
+    ExtensionGapcursor,
+    ExtensionHardBreak,
+    ExtensionHeading,
+    ExtensionHistory,
+    ExtensionHorizontalRule,
+    ExtensionItalic,
+    ExtensionOrderedList,
+    ExtensionStrike,
+    ExtensionText,
+    ExtensionImage,
+    ExtensionTaskList,
+    ExtensionLink,
+    ExtensionTextAlign,
+    ExtensionUnderline,
+    ExtensionTable,
+    ExtensionSubscript,
+    ExtensionSuperscript,
+    ExtensionPlaceholder,
+    ExtensionHighlight,
+    ExtensionCommands,
+    ExtensionIframe,
+    ExtensionVideo,
+    ExtensionAudio,
+    ExtensionCodeBlock,
+    ExtensionColor,
+    ExtensionFontSize,
+    lowlight,
+    RichTextEditor,
+    useEditor,
+    ExtensionIndent,
+    ExtensionDraggable,
+    ExtensionColumns,
+    ExtensionColumn,
+    ExtensionNodeSelected,
+    ExtensionTrailingNode,
+  } from '@halo-dev/richtext-editor';
+
+  const content = useLocalStorage('content', '');
+
+  const editor = useEditor({
+    content: content.value,
+    extensions: [
+      ExtensionBlockquote,
+      ExtensionBold,
+      ExtensionBulletList,
+      ExtensionCode,
+      ExtensionDocument,
+      ExtensionDropcursor.configure({
+        width: 2,
+        class: 'dropcursor',
+        color: 'skyblue',
+      }),
+      ExtensionGapcursor,
+      ExtensionHardBreak,
+      ExtensionHeading,
+      ExtensionHistory,
+      ExtensionHorizontalRule,
+      ExtensionItalic,
+      ExtensionOrderedList,
+      ExtensionStrike,
+      ExtensionText,
+      ExtensionImage.configure({
+        HTMLAttributes: {
+          loading: 'lazy',
+        },
+      }),
+      ExtensionTaskList,
+      ExtensionLink.configure({
+        autolink: false,
+        openOnClick: false,
+      }),
+      ExtensionTextAlign.configure({
+        types: ['heading', 'paragraph'],
+      }),
+      ExtensionUnderline,
+      ExtensionTable.configure({
+        resizable: true,
+      }),
+      ExtensionSubscript,
+      ExtensionSuperscript,
+      ExtensionPlaceholder.configure({
+        placeholder: '输入 / 以选择输入类型',
+      }),
+      ExtensionHighlight,
+      ExtensionVideo,
+      ExtensionAudio,
+      ExtensionCommands,
+      ExtensionCodeBlock.configure({
+        lowlight,
+      }),
+      ExtensionIframe,
+      ExtensionColor,
+      ExtensionFontSize,
+      ExtensionIndent,
+      ExtensionDraggable,
+      ExtensionColumns,
+      ExtensionColumn,
+      ExtensionNodeSelected,
+      ExtensionTrailingNode,
+    ],
+    onUpdate: () => {
+      content.value = `${editor.value?.getHTML()}`;
+    },
+  });
+
+  // const formatContent = computed(() => {
+  //   return unified().use(rehypeParse).use(rehypeFormat).use(rehypeStringify).processSync(content.value);
+  // });
+
+  // watchEffect(() => {
+  //   console.log(String(formatContent.value));
+  // });
+  const { currentLocale } = useLocale();
+
+  // const locale = useLocalStorage('locale', 'zh-CN');
+  const locale = computed(() => currentLocale.value as 'zh-CN' | 'en-US');
+</script>
+
+<template>
+  <div style="height: 100vh" class="flex">
+    <RichTextEditor v-if="editor" :editor="editor" :locale="locale" />
+  </div>
+</template>
diff --git a/frontend/src/views/bug-management/index.vue b/frontend/src/views/bug-management/index.vue
index 2438e1c492..cacd098ca1 100644
--- a/frontend/src/views/bug-management/index.vue
+++ b/frontend/src/views/bug-management/index.vue
@@ -12,10 +12,14 @@
       @select="onSelect"
       @ok="onOk"
     />
+    <MsRichText v-model="content" />
   </MsCard>
 </template>
 
 <script setup>
   import MsPagination from '@/components/pure/ms-pagination/index';
   import MsCard from '@/components/pure/ms-card/index.vue';
+  import MsRichText from '@/components/pure/ms-rich-text/MsRichText.vue';
+
+  const content = ref('');
 </script>