3.0.0原版

packages/ui/src/components/Content.vue

@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+import '@halo-dev/comment-widget';
+
+defineProps<{
+  content: string;
+}>();
+</script>
+<template>
+  <comment-content :content="content"></comment-content>
+</template>

packages/ui/src/components/Editor.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import '@halo-dev/comment-widget';
+import type { CommentEditor } from '@halo-dev/comment-widget';
+import { onMounted, ref } from 'vue';
+
+const props = defineProps<{
+  autoFocus?: boolean;
+}>();
+
+const emit =
+  defineEmits<
+    (e: 'update', content: { content: string; characterCount: number }) => void
+  >();
+
+const editorRef = ref<InstanceType<typeof CommentEditor>>();
+
+onMounted(() => {
+  if (props.autoFocus) {
+    editorRef.value?.setFocus();
+  }
+
+  editorRef.value?.addEventListener('update', (e) => {
+    const detail = (e as CustomEvent).detail;
+    emit('update', {
+      content: detail.content,
+      characterCount: detail.characterCount ?? 0,
+    });
+  });
+});
+</script>
+<template>
+  <comment-editor ref="editorRef" keep-alive></comment-editor>
+</template>

packages/ui/src/index.ts

@@ -0,0 +1,29 @@
+import { VLoading } from '@halo-dev/components';
+import { definePlugin } from '@halo-dev/console-shared';
+import { defineAsyncComponent, markRaw } from 'vue';
+
+export default definePlugin({
+  components: {},
+  routes: [],
+  extensionPoints: {
+    'comment:editor:replace': () => {
+      return {
+        component: markRaw(
+          defineAsyncComponent({
+            loader: () => import('./components/Editor.vue'),
+            loadingComponent: VLoading,
+          })
+        ),
+      };
+    },
+    'comment:list-item:content:replace': () => {
+      return {
+        component: markRaw(
+          defineAsyncComponent({
+            loader: () => import('./components/Content.vue'),
+          })
+        ),
+      };
+    },
+  },
+});