Add configurable editor placeholder to comment widget (#188)

Author: ruibaby

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

@@ -6,7 +6,10 @@ 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 baseStyles from './styles/base';
+import type { ConfigMapData } from './types';
 
 interface ActionItem {
   name?: string;
@@ -78,6 +81,10 @@ export class CommentEditor extends LitElement {
   @state()
   loading = true;
 
+  @consume({ context: configMapDataContext })
+  @state()
+  configMapData: ConfigMapData | undefined;
+
   protected override firstUpdated(_changedProperties: PropertyValues): void {
     super.firstUpdated(_changedProperties);
     this.createEditor();
@@ -106,7 +113,8 @@ export class CommentEditor extends LitElement {
         }),
 
         Placeholder.configure({
-          placeholder: msg('Write a comment'),
+          placeholder:
+            this.configMapData?.editor?.placeholder || msg('Write a comment'),
         }),
 
         CodeBlockShiki.configure({

packages/comment-widget/src/types/index.ts

@@ -2,6 +2,7 @@ export interface ConfigMapData {
   basic: BasicConfig;
   security: SecurityConfig;
   avatar: AvatarConfig;
+  editor?: EditorConfig;
 }
 
 interface BasicConfig {
@@ -26,3 +27,7 @@ interface AvatarConfig {
   providerMirror: string;
   policy: 'anonymousUser' | 'allUser' | 'noAvatarUser';
 }
+
+interface EditorConfig {
+  placeholder?: string;
+}

src/main/resources/extensions/settings.yaml

@@ -122,3 +122,9 @@ spec:
             - label: "匿名&无头像用户"
               value: "noAvatarUser"
           value: "anonymousUser"
+    - group: editor
+      label: 编辑器
+      formSchema:
+        - $formkit: text
+          name: placeholder
+          label: 自定义评论框占位符