Refactor comment content rendering and add Content.vue

Author: ruibaby

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

@@ -1,16 +1,14 @@
 import './user-avatar';
 import { msg } from '@lit/localize';
-import { css, html, LitElement, unsafeCSS } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { property, state } 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 { formatDate, timeAgo } from './utils/date';
 import './commenter-ua-bar';
 import { consume } from '@lit/context';
-import sanitizeHtml from 'sanitize-html';
 import { configMapDataContext } from './context';
 import type { ConfigMapData } from './types';
+import './comment-content';
 
 export class BaseCommentItem extends LitElement {
   @property({ type: String })
@@ -41,49 +39,6 @@ export class BaseCommentItem extends LitElement {
   @state()
   configMapData: ConfigMapData | undefined;
 
-  protected override firstUpdated() {
-    const codeElements = this.shadowRoot?.querySelectorAll('pre>code');
-    if (!codeElements?.length) return;
-
-    Promise.all(
-      Array.from(codeElements).map(async (codeblock) => {
-        const lang =
-          this.extractLanguageFromCodeElement(codeblock) || 'plaintext';
-        const content = codeblock.textContent || '';
-
-        try {
-          const { codeToHtml } = await import('shiki/bundle/full');
-
-          const html = await codeToHtml(content, {
-            lang,
-            theme: 'github-dark',
-          });
-
-          if (codeblock.parentElement) {
-            codeblock.parentElement.outerHTML = html;
-          }
-        } catch (error) {
-          console.error('Failed to highlight code:', error);
-        }
-      })
-    );
-  }
-
-  private extractLanguageFromCodeElement(codeElement: Element): string | null {
-    const supportedPrefixes = ['language-', 'lang-'];
-
-    const langClass = Array.from(codeElement.classList).find((className) =>
-      supportedPrefixes.some((prefix) => className.startsWith(prefix))
-    );
-
-    if (langClass) {
-      const prefix = supportedPrefixes.find((p) => langClass.startsWith(p));
-      return prefix ? langClass.substring(prefix.length) : null;
-    }
-
-    return null;
-  }
-
   override render() {
     return html`<div class="item flex gap-3 py-4 ${this.breath ? 'animate-breath' : ''}">
       <div class="item-avatar flex-none">
@@ -121,14 +76,7 @@ export class BaseCommentItem extends LitElement {
           }
         </div>
 
-        <div class="item-content mt-2.5 space-y-2.5 content"><slot name="pre-content"></slot>${unsafeHTML(
-          sanitizeHtml(this.content, {
-            allowedAttributes: {
-              ...sanitizeHtml.defaults.allowedAttributes,
-              code: ['class'],
-            },
-          })
-        )}</div>
+        <div class="item-content mt-2.5 space-y-2.5"><slot name="pre-content"></slot><comment-content .content=${this.content}></comment-content></div>
 
         <div class="item-actions mt-2 flex items-center gap-3">
           <slot name="action"></slot>
@@ -141,7 +89,6 @@ export class BaseCommentItem extends LitElement {
 
   static override styles = [
     ...baseStyles,
-    unsafeCSS(contentStyles),
     css`
       .animate-breath {
         animation: breath 1s ease-in-out infinite;

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

@@ -0,0 +1,90 @@
+import { css, html, LitElement, type PropertyValues, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import sanitizeHtml from 'sanitize-html';
+import baseStyles from './styles/base';
+import contentStyles from './styles/content.css?inline';
+
+export class CommentContent extends LitElement {
+  @property({ type: String })
+  content: string = '';
+
+  protected override firstUpdated(_changedProperties: PropertyValues) {
+    super.firstUpdated(_changedProperties);
+    const codeElements = this.shadowRoot?.querySelectorAll('pre>code');
+    if (!codeElements?.length) return;
+
+    Promise.all(
+      Array.from(codeElements).map(async (codeblock) => {
+        const lang =
+          this.extractLanguageFromCodeElement(codeblock) || 'plaintext';
+        const content = codeblock.textContent || '';
+
+        try {
+          const { codeToHtml } = await import('shiki/bundle/full');
+
+          const html = await codeToHtml(content, {
+            lang,
+            theme: 'github-dark',
+          });
+
+          if (codeblock.parentElement) {
+            codeblock.parentElement.outerHTML = html;
+          }
+        } catch (error) {
+          console.error('Failed to highlight code:', error);
+        }
+      })
+    );
+  }
+
+  private extractLanguageFromCodeElement(codeElement: Element): string | null {
+    const supportedPrefixes = ['language-', 'lang-'];
+
+    const langClass = Array.from(codeElement.classList).find((className) =>
+      supportedPrefixes.some((prefix) => className.startsWith(prefix))
+    );
+
+    if (langClass) {
+      const prefix = supportedPrefixes.find((p) => langClass.startsWith(p));
+      return prefix ? langClass.substring(prefix.length) : null;
+    }
+
+    return null;
+  }
+
+  protected override render() {
+    return html`
+      <div class="content">${unsafeHTML(
+        sanitizeHtml(this.content, {
+          allowedAttributes: {
+            ...sanitizeHtml.defaults.allowedAttributes,
+            code: ['class'],
+          },
+        })
+      )}</div>
+    `;
+  }
+
+  static override styles = [
+    ...baseStyles,
+    unsafeCSS(contentStyles),
+    css`
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      @unocss-placeholder;
+    `,
+  ];
+}
+
+customElements.get('comment-content') ||
+  customElements.define('comment-content', CommentContent);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'comment-content': CommentContent;
+  }
+}

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

@@ -1,6 +1,5 @@
 import { css, html, LitElement } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
-import './emoji-button';
 
 export class CommentEditorSkeleton extends LitElement {
   protected override render() {

packages/comment-widget/src/index.ts

@@ -1,5 +1,6 @@
 import { BaseCommentItem } from './base-comment-item';
 import { BaseForm } from './base-form';
+import { CommentContent } from './comment-content';
 import { CommentEditor } from './comment-editor';
 import { CommentItem } from './comment-item';
 import { CommentList } from './comment-list';
@@ -27,4 +28,5 @@ export {
   CommentList,
   LitToast,
   CommentEditor,
+  CommentContent,
 };

packages/ui/rsbuild.config.mjs

@@ -21,7 +21,7 @@ export default rsbuildConfig({
         pluginVue({
           vueLoaderOptions: {
             compilerOptions: {
-              isCustomElement: (tag) => tag === 'comment-editor',
+              isCustomElement: (tag) => tag.startsWith('comment-'),
             },
           },
         }),

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

@@ -29,5 +29,5 @@ onMounted(() => {
 });
 </script>
 <template>
-  <comment-editor ref="editorRef"></comment-editor>
+  <comment-editor ref="editorRef" keep-alive></comment-editor>
 </template>

packages/ui/src/index.ts

@@ -16,5 +16,14 @@ export default definePlugin({
         ),
       };
     },
+    'comment:list-item:content:replace': () => {
+      return {
+        component: markRaw(
+          defineAsyncComponent({
+            loader: () => import('./components/Content.vue'),
+          })
+        ),
+      };
+    },
   },
 });