feat: support media upload

packages/comment-widget/package.json

@@ -48,6 +48,7 @@
     "@tiptap/extensions": "^3.10.4",
     "@tiptap/pm": "^3.10.4",
     "@tiptap/starter-kit": "^3.10.4",
+    "@tiptap/extension-image": "^3.14.0",
     "dayjs": "^1.11.19",
     "emoji-mart": "^5.6.0",
     "es-toolkit": "^1.41.0",

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

@@ -25,6 +25,7 @@ import { ofetch } from 'ofetch';
 import type { CommentEditor } from './comment-editor';
 import { cleanHtml } from './utils/html';
 import './base-tooltip';
+import { uploadEditorFiles } from './extension/editor-upload';
 
 export class BaseForm extends LitElement {
   @consume({ context: baseUrlContext })
@@ -296,7 +297,13 @@ export class BaseForm extends LitElement {
     `;
   }
 
-  private debouncedSubmit = debounce((data: Record<string, unknown>) => {
+  private debouncedSubmit = debounce(async (data: Record<string, unknown>) => {
+    const uploadedResult = await uploadEditorFiles(
+      this.editorRef.value?.editor
+    );
+    if (!uploadedResult) {
+      return;
+    }
     const content = cleanHtml(this.editorRef.value?.editor?.getHTML());
     const characterCount =
       this.editorRef.value?.editor?.storage.characterCount.characters();

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

@@ -6,9 +6,11 @@ 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 { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { when } from 'lit/directives/when.js';
+import { baseUrlContext } from './context';
 import baseStyles from './styles/base';
 import { cleanHtml } from './utils/html';
 
@@ -75,7 +77,19 @@ const actionItems: ActionItem[] = [
   },
 ];
 
+const uploadActionItem: ActionItem = {
+  name: 'upload',
+  displayName: () => msg('Upload'),
+  type: 'action',
+  icon: 'i-mingcute-upload-line',
+  run: (editor?: Editor) => editor?.chain().focus().uploadFile().run(),
+};
+
 export class CommentEditor extends LitElement {
+  @consume({ context: baseUrlContext })
+  @state()
+  baseUrl = '';
+
   @property({ type: String })
   placeholder: string | undefined;
 
@@ -101,6 +115,8 @@ export class CommentEditor extends LitElement {
       'tiptap-extension-code-block-shiki'
     );
     const { CharacterCount } = await import('@tiptap/extensions');
+    const { EditorUpload } = await import('./extension/editor-upload');
+    const { Image } = await import('@tiptap/extension-image');
 
     this.loading = false;
 
@@ -124,6 +140,21 @@ export class CommentEditor extends LitElement {
         }),
 
         CharacterCount,
+
+        Image.configure({
+          inline: true,
+          resize: {
+            enabled: true,
+            alwaysPreserveAspectRatio: true,
+            minWidth: 50,
+            minHeight: 50,
+            directions: ['bottom-right'],
+          },
+        }),
+
+        EditorUpload.configure({
+          baseUrl: this.baseUrl,
+        }),
       ],
       onUpdate: () => {
         this.requestUpdate();
@@ -187,6 +218,7 @@ export class CommentEditor extends LitElement {
             this.renderActionItem(item, this.editor)
           )}
           ${this.renderActionItem({ type: 'separator' })}
+          ${this.renderActionItem(uploadActionItem, this.editor)}
           <li class="flex items-center">
             <emoji-button @emoji-select=${this.onEmojiSelect}></emoji-button>
           </li>