Add rich text editor supports for comment widget (#187)

<img width="931" height="321" alt="image" src="https://github.com/user-attachments/assets/2391e35d-38a7-4229-a9cc-aad6b97b6db2" />

Fixes #66
Fixes #102
Fixes #142

```release-note
评论输入框支持富文本内容
```

Author: ruibaby

.gitignore

@@ -62,9 +62,6 @@ nbdist/
 *.tar.gz
 *.rar
 
-### VSCode
-.vscode
-
 ### Local file
 application-local.yml
 application-local.yaml

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome",
+    "editor.codeActionsOnSave": {
+      "source.fixAll.biome": "explicit",
+      "source.organizeImports.biome": "explicit"
+    }
+  }
+}

package.json

@@ -30,7 +30,18 @@
     "husky": "^9.1.7",
     "lint-staged": "^16.1.2",
     "typescript": "~5.3.3",
-    "vite": "^5.1.4"
+    "vite": "^7.0.6",
+    "vite-plugin-dts": "^4.5.4"
   },
-  "packageManager": "[email protected]+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39"
+  "packageManager": "[email protected]+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39",
+  "pnpm": {
+    "overrides": {
+      "vite": "npm:[email protected]"
+    }
+  },
+  "dependencies": {
+    "@tiptap/extensions": "^3.0.9",
+    "shiki": "^3.9.2",
+    "tiptap-extension-code-block-shiki": "^0.5.1"
+  }
 }

packages/comment-widget/package.json

@@ -27,24 +27,29 @@
     "var.css"
   ],
   "scripts": {
-    "build": "tsc",
-    "dev": "tsc -w",
-    "locale:extract": "lit-localize extract",
-    "locale:build": "lit-localize build"
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "locale:build": "lit-localize build",
+    "locale:extract": "lit-localize extract"
   },
   "dependencies": {
     "@emoji-mart/data": "^1.2.1",
     "@halo-dev/api-client": "^2.21.1",
     "@lit/context": "^1.1.6",
     "@lit/localize": "^0.12.2",
+    "@tiptap/core": "^3.0.9",
+    "@tiptap/pm": "^3.0.9",
+    "@tiptap/starter-kit": "^3.0.9",
     "dayjs": "^1.11.13",
     "emoji-mart": "^5.6.0",
     "es-toolkit": "^1.39.8",
     "javascript-time-ago": "^2.5.11",
     "lit": "^3.3.1"
   },
   "devDependencies": {
+    "@iconify/json": "^2.2.367",
     "@lit/localize-tools": "^0.8.0",
-    "lit-analyzer": "^2.0.3"
+    "lit-analyzer": "^2.0.3",
+    "unocss": "^66.4.1"
   }
 }

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

@@ -1,8 +1,10 @@
 import './user-avatar';
 import { msg } from '@lit/localize';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import baseStyles from './styles/base';
+import contentStyles from './styles/content.css?inline';
 import varStyles from './styles/var';
 import { formatDate, timeAgo } from './utils/date';
 
@@ -40,19 +42,27 @@ export class BaseCommentItem extends LitElement {
         <div class="item__meta">
           ${
             this.userWebsite
-              ? html`<a class="item__author" target="_blank" href=${this.userWebsite}>
+              ? html`<a
+                class="item__author"
+                target="_blank"
+                href=${this.userWebsite}
+              >
                 ${this.userDisplayName}
               </a>`
               : html`<div class="item__author">${this.userDisplayName}</div>`
           }
           <div class="item__meta-info" title=${formatDate(this.creationTime)}>
             ${timeAgo(this.creationTime)}
           </div>
-          ${!this.approved ? html`<div class="item__meta-info">${msg('Reviewing')}</div>` : ''}
+          ${
+            !this.approved
+              ? html`<div class="item__meta-info">${msg('Reviewing')}</div>`
+              : ''
+          }
         </div>
 
-        <div class="item__content">
-          <pre><slot name="pre-content"></slot>${this.content}</pre>
+        <div class="item__content markdown-body">
+          <div><slot name="pre-content"></slot>${unsafeHTML(this.content)}</div>
         </div>
 
         <div class="item__actions">
@@ -67,6 +77,7 @@ export class BaseCommentItem extends LitElement {
   static override styles = [
     varStyles,
     baseStyles,
+    unsafeCSS(contentStyles),
     css`
       .item {
         display: flex;

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

@@ -14,13 +14,14 @@ import {
   nameContext,
   toastContext,
 } from './context';
-import './emoji-button';
 import './icons/icon-loading';
 import { msg } from '@lit/localize';
 import type { ToastManager } from './lit-toast';
 import baseStyles from './styles/base';
 import varStyles from './styles/var';
 import type { ConfigMapData } from './types';
+import './comment-editor';
+import type { CommentEditor } from './comment-editor';
 
 export class BaseForm extends LitElement {
   @consume({ context: baseUrlContext })
@@ -64,6 +65,8 @@ export class BaseForm extends LitElement {
 
   textareaRef: Ref<HTMLTextAreaElement> = createRef<HTMLTextAreaElement>();
 
+  editorRef: Ref<CommentEditor> = createRef<CommentEditor>();
+
   get customAccount() {
     return JSON.parse(
       localStorage.getItem('halo-comment-custom-account') || '{}'
@@ -168,14 +171,6 @@ export class BaseForm extends LitElement {
     target.style.height = `${target.scrollHeight}px`;
   }
 
-  onEmojiSelect(e: CustomEvent) {
-    const data = e.detail;
-    if (this.textareaRef.value) {
-      this.textareaRef.value.value += data.native;
-      this.textareaRef.value.focus();
-    }
-  }
-
   onKeydown(e: KeyboardEvent) {
     if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
       const form = this.shadowRoot?.querySelector('form');
@@ -197,15 +192,7 @@ export class BaseForm extends LitElement {
   override render() {
     return html`
       <form class="form" @submit="${this.onSubmit}">
-        <textarea
-          class="form__editor"
-          ${ref(this.textareaRef)}
-          placeholder=${msg('Write a comment')}
-          rows="4"
-          name="content"
-          required
-          @input=${this.onContentInput}
-        ></textarea>
+        <comment-editor ${ref(this.editorRef)}></comment-editor>
 
         ${
           !this.currentUser && this.allowAnonymousComments
@@ -269,7 +256,6 @@ export class BaseForm extends LitElement {
                 : ''
             }
 
-            <emoji-button @emoji-select=${this.onEmojiSelect}></emoji-button>
             <button
               .disabled=${this.submitting}
               type="submit"
@@ -299,8 +285,21 @@ export class BaseForm extends LitElement {
   }
 
   private debouncedSubmit = debounce((data: Record<string, unknown>) => {
+    const content = this.editorRef.value?.editor?.getHTML() || '';
+    const characterCount =
+      this.editorRef.value?.editor?.storage.characterCount.characters();
+
+    if (!characterCount) {
+      this.toastManager?.warn(msg('Please enter content'));
+      this.editorRef.value?.setFocus();
+      return;
+    }
+
     const event = new CustomEvent('submit', {
-      detail: data,
+      detail: {
+        ...data,
+        content,
+      },
     });
     this.dispatchEvent(event);
   }, 300);
@@ -327,10 +326,12 @@ export class BaseForm extends LitElement {
   resetForm() {
     const form = this.shadowRoot?.querySelector('form');
     form?.reset();
+    this.editorRef.value?.reset();
   }
 
   setFocus() {
     this.textareaRef.value?.focus();
+    this.editorRef.value?.setFocus();
   }
 
   static override styles = [