Add UI package and enhance comment editor integration

Author: ruibaby

.gitignore

@@ -70,4 +70,5 @@ application-local.properties
 /packages/*/node_modules/
 node_modules
 /workplace/
-/src/main/resources/static/
+/src/main/resources/static/
+/src/main/resources/console/

packages/comment-widget/src/base-form.ts

@@ -191,7 +191,7 @@ export class BaseForm extends LitElement {
   override render() {
     return html`
       <form class="form w-full flex flex-col gap-4" @submit="${this.onSubmit}">
-        <comment-editor ${ref(this.editorRef)}></comment-editor>
+        <comment-editor ${ref(this.editorRef)} .placeholder=${this.configMapData?.editor?.placeholder}></comment-editor>
         ${
           !this.currentUser && this.allowAnonymousComments
             ? html`<div class="form-inputs grid grid-cols-1 md:grid-cols-4 gap-2 items-center">

packages/comment-widget/src/comment-editor.ts

@@ -6,10 +6,8 @@ import { repeat } from 'lit/directives/repeat.js';
 import './emoji-button';
 import contentStyles from './styles/content.css?inline';
 import './comment-editor-skeleton';
-import { consume } from '@lit/context';
-import { configMapDataContext } from './context';
+import { property } from 'lit/decorators.js';
 import baseStyles from './styles/base';
-import type { ConfigMapData } from './types';
 
 interface ActionItem {
   name?: string;
@@ -75,16 +73,18 @@ const actionItems: ActionItem[] = [
 ];
 
 export class CommentEditor extends LitElement {
+  @property({ type: String })
+  placeholder: string | undefined;
+
+  @property({ type: Boolean, attribute: 'keep-alive' })
+  keepAlive = false;
+
   @state()
   editor: Editor | undefined;
 
   @state()
   loading = true;
 
-  @consume({ context: configMapDataContext })
-  @state()
-  configMapData: ConfigMapData | undefined;
-
   protected override firstUpdated(_changedProperties: PropertyValues): void {
     super.firstUpdated(_changedProperties);
     this.createEditor();
@@ -113,8 +113,7 @@ export class CommentEditor extends LitElement {
         }),
 
         Placeholder.configure({
-          placeholder:
-            this.configMapData?.editor?.placeholder || msg('Write a comment'),
+          placeholder: this.placeholder || msg('Write a comment'),
         }),
 
         CodeBlockShiki.configure({
@@ -133,10 +132,25 @@ export class CommentEditor extends LitElement {
         this.requestUpdate();
       },
     });
+
+    this.editor.on('update', () => {
+      this.dispatchEvent(
+        new CustomEvent('update', {
+          detail: {
+            content: this.editor?.getHTML(),
+            characterCount: this.editor?.storage.characterCount.characters(),
+          },
+        })
+      );
+    });
   }
 
   override disconnectedCallback(): void {
-    this.editor?.destroy();
+    if (!this.keepAlive) {
+      this.editor?.destroy();
+      this.editor = undefined;
+    }
+    super.disconnectedCallback();
   }
 
   setFocus() {

packages/comment-widget/src/index.ts

@@ -1,5 +1,6 @@
 import { BaseCommentItem } from './base-comment-item';
 import { BaseForm } from './base-form';
+import { CommentEditor } from './comment-editor';
 import { CommentItem } from './comment-item';
 import { CommentList } from './comment-list';
 import { CommentPagination } from './comment-pagination';
@@ -25,4 +26,5 @@ export {
   UserAvatar,
   CommentList,
   LitToast,
+  CommentEditor,
 };

packages/ui/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="@rsbuild/core/types" />
+/// <reference types="unplugin-icons/types/vue" />

packages/ui/package.json

@@ -0,0 +1,23 @@
+{
+  "type": "module",
+  "scripts": {
+    "build": "rsbuild build",
+    "dev": "rsbuild build --watch --env-mode=development",
+    "type-check": "vue-tsc --build"
+  },
+  "dependencies": {
+    "@halo-dev/comment-widget": "workspace:*",
+    "@halo-dev/components": "^2.21.0",
+    "@halo-dev/console-shared": "link:/Users/ryanwang/Workspace/github/ruibaby/halo-next/ui/packages/shared",
+    "vue": "^3.5.17"
+  },
+  "devDependencies": {
+    "@halo-dev/ui-plugin-bundler-kit": "^2.21.2",
+    "@rsbuild/core": "^1.4.3",
+    "@rsbuild/plugin-vue": "^1.1.1",
+    "@types/node": "^20.19.1",
+    "@vue/tsconfig": "^0.7.0",
+    "typescript": "~5.8.3",
+    "vue-tsc": "^2.2.10"
+  }
+}

packages/ui/rsbuild.config.mjs

@@ -0,0 +1,36 @@
+import { rsbuildConfig } from '@halo-dev/ui-plugin-bundler-kit';
+import { pluginVue } from '@rsbuild/plugin-vue';
+
+const MANIFEST_PATH = '../../src/main/resources/plugin.yaml';
+const OUT_DIR_PROD = '../../src/main/resources/console';
+const OUT_DIR_DEV = '../../build/resources/main/console';
+
+export default rsbuildConfig({
+  manifestPath: MANIFEST_PATH,
+  rsbuild: ({ envMode }) => {
+    const isProduction = envMode === 'production';
+    const outDir = isProduction ? OUT_DIR_PROD : OUT_DIR_DEV;
+
+    return {
+      resolve: {
+        alias: {
+          '@': './src',
+        },
+      },
+      plugins: [
+        pluginVue({
+          vueLoaderOptions: {
+            compilerOptions: {
+              isCustomElement: (tag) => tag === 'comment-editor',
+            },
+          },
+        }),
+      ],
+      output: {
+        distPath: {
+          root: outDir,
+        },
+      },
+    };
+  },
+});

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"></comment-editor>
+</template>

packages/ui/src/index.ts

@@ -0,0 +1,20 @@
+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,
+          })
+        ),
+      };
+    },
+  },
+});

packages/ui/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}