cwd-widget 0.0.1

package/src/components/ReplyEditor.js

@@ -0,0 +1,297 @@
+/**
+ * ReplyEditor 回复编辑器组件
+ */
+
+import { Component } from './Component.js';
+import { renderMarkdown } from '../utils/markdown.js';
+
+export class ReplyEditor extends Component {
+  /**
+   * @param {HTMLElement|string} container - 容器元素或选择器
+   * @param {Object} props - 组件属性
+   * @param {string} props.replyToAuthor - 被回复的作者名
+   * @param {string} props.content - 回复内容
+   * @param {string|null} props.error - 错误信息
+   * @param {boolean} props.submitting - 是否正在提交
+   * @param {Function} props.onUpdate - 内容更新回调
+   * @param {Function} props.onSubmit - 提交回调
+   * @param {Function} props.onCancel - 取消回调
+   * @param {Function} props.onClearError - 清除错误回调
+   */
+  constructor(container, props = {}) {
+    super(container, props);
+    const { currentUser } = props;
+    this.state = {
+      content: props.content || '',
+      // 如果没有昵称或邮箱，显示用户信息输入框。且一旦显示，在当前编辑器生命周期内保持显示，避免输入过程中消失
+      showUserInfo: !currentUser || !currentUser.name || !currentUser.email,
+      showPreview: false,
+    };
+  }
+
+  render() {
+    const { currentUser } = this.props;
+    const { showUserInfo } = this.state;
+
+    const root = this.createElement('div', {
+      className: 'cwd-reply-editor',
+      children: [
+        // 头部
+        this.createElement('div', {
+          className: 'cwd-reply-header',
+          children: [
+            this.createTextElement('span', `回复 @${this.props.replyToAuthor}`, 'cwd-reply-to'),
+            this.createElement('button', {
+              className: 'cwd-btn-close',
+              attributes: {
+                type: 'button',
+                onClick: () => this.handleCancel()
+              },
+              text: '✕'
+            })
+          ]
+        }),
+
+        // 用户信息输入框（当缺少信息时显示）
+        ...(showUserInfo ? [
+          this.createElement('div', {
+            className: 'cwd-form-row',
+            attributes: {
+              style: 'margin-bottom: 12px;'
+            },
+            children: [
+              this.createFormField('昵称 *', 'text', 'name', currentUser?.name),
+              this.createFormField('邮箱 *', 'email', 'email', currentUser?.email),
+              this.createFormField('网址', 'url', 'url', currentUser?.url)
+            ]
+          })
+        ] : []),
+
+        // 文本框
+        this.createElement('textarea', {
+          className: 'cwd-reply-textarea',
+          attributes: {
+            rows: 3,
+            placeholder: '支持 Markdown 格式',
+            disabled: this.props.submitting,
+            onInput: (e) => this.handleInput(e),
+          },
+        }),
+
+        // 错误提示
+        ...(this.props.error ? [
+          this.createElement('div', {
+            className: 'cwd-error-inline cwd-error-small',
+            children: [
+              this.createTextElement('span', this.props.error),
+              this.createElement('button', {
+                className: 'cwd-error-close',
+                attributes: {
+                  type: 'button',
+                  onClick: () => this.handleClearError()
+                },
+                text: '✕'
+              })
+            ]
+          })
+        ] : []),
+
+        // 操作按钮
+        this.createElement('div', {
+          className: 'cwd-reply-actions',
+          children: [
+            this.createElement('button', {
+              className: `cwd-btn cwd-btn-secondary cwd-btn-small cwd-btn-preview ${this.state.showPreview ? 'cwd-btn-active' : ''}`,
+              attributes: {
+                type: 'button',
+                disabled: this.props.submitting || !this.state.content.trim(),
+                onClick: () => this.togglePreview(),
+              },
+              text: this.state.showPreview ? '关闭' : '预览',
+            }),
+            this.createElement('button', {
+              className: 'cwd-btn cwd-btn-primary cwd-btn-small',
+              attributes: {
+                type: 'button',
+                disabled: this.props.submitting || !this.state.content.trim(),
+                onClick: () => this.handleSubmit()
+              },
+              text: this.props.submitting ? '提交中...' : '提交回复'
+            }),
+            this.createElement('button', {
+              className: 'cwd-btn cwd-btn-secondary cwd-btn-small',
+              attributes: {
+                type: 'button',
+                disabled: this.props.submitting,
+                onClick: () => this.handleCancel()
+              },
+              text: '取消'
+            })
+          ]
+        }),
+
+        // 预览区域
+        ...(this.state.showPreview && this.state.content
+          ? [
+              this.createElement('div', {
+                className: 'cwd-preview-container',
+                children: [
+                  this.createElement('div', {
+                    className: 'cwd-preview-content cwd-comment-content',
+                    // 直接设置 innerHTML
+                    html: renderMarkdown(this.state.content),
+                  }),
+                ],
+              }),
+            ]
+          : []),
+      ]
+    });
+
+    // 设置文本框内容
+    const textarea = root.querySelector('textarea');
+    if (textarea) {
+      textarea.value = this.state.content;
+    }
+
+    this.elements.root = root;
+    this.empty(this.container);
+    this.container.appendChild(root);
+  }
+
+  updateProps(prevProps) {
+    // 如果外部传入的 content 变化，更新内部状态
+    if (this.props.content !== this.state.content && this.props.content !== prevProps?.content) {
+      this.state.content = this.props.content;
+      this.render();
+      return;
+    }
+
+    // 如果用户信息变化，重新渲染
+    if (JSON.stringify(this.props.currentUser) !== JSON.stringify(prevProps?.currentUser)) {
+      this.render();
+      return;
+    }
+
+    // 如果有错误显示/隐藏变化，重新渲染
+    if (this.props.error !== prevProps?.error) {
+      this.render();
+      return;
+    }
+
+    // 如果 submitting 状态变化，重新渲染
+    if (this.props.submitting !== prevProps?.submitting) {
+      this.render();
+      return;
+    }
+  }
+
+  togglePreview() {
+    this.state.showPreview = !this.state.showPreview;
+    this.render();
+  }
+
+  handleInput(e) {
+    this.state.content = e.target.value;
+    
+    // 更新提交按钮的禁用状态
+    const submitBtn = this.elements.root?.querySelector('.cwd-btn-primary');
+    if (submitBtn) {
+      submitBtn.disabled = this.props.submitting || !this.state.content.trim();
+    }
+
+    // 更新预览按钮的禁用状态
+    const previewBtn = this.elements.root?.querySelector('.cwd-btn-preview');
+    if (previewBtn) {
+      previewBtn.disabled = this.props.submitting || !this.state.content.trim();
+    }
+
+    if (this.props.onUpdate) {
+      this.props.onUpdate(this.state.content);
+    }
+
+    // 实时更新预览内容
+    if (this.state.showPreview) {
+      this.updatePreviewContent(this.state.content);
+    }
+  }
+
+  updatePreviewContent(content) {
+    const previewContent = this.elements.root?.querySelector('.cwd-preview-content');
+    if (previewContent) {
+      previewContent.innerHTML = renderMarkdown(content);
+    }
+  }
+
+  handleSubmit() {
+    if (this.props.onSubmit) {
+      this.props.onSubmit();
+    }
+  }
+
+  handleCancel() {
+    if (this.props.onCancel) {
+      this.props.onCancel();
+    }
+  }
+
+  handleClearError() {
+    if (this.props.onClearError) {
+      this.props.onClearError();
+    }
+  }
+
+  /**
+   * 设置内容
+   * @param {string} content - 新内容
+   */
+  setContent(content) {
+    this.state.content = content;
+    const textarea = this.elements.root?.querySelector('textarea');
+    if (textarea) {
+      textarea.value = content;
+    }
+  }
+
+  /**
+   * 获取内容
+   * @returns {string}
+   */
+  getContent() {
+    return this.state.content;
+  }
+
+  /**
+   * 聚焦文本框
+   */
+  focus() {
+    const textarea = this.elements.root?.querySelector('textarea');
+    if (textarea) {
+      textarea.focus();
+    }
+  }
+
+  handleUserInfoChange(field, value) {
+    if (this.props.onUpdateUserInfo) {
+      this.props.onUpdateUserInfo(field, value);
+    }
+  }
+
+  createFormField(placeholder, type, field, value) {
+    return this.createElement('div', {
+      className: 'cwd-form-field',
+      children: [
+        this.createElement('input', {
+          className: 'cwd-form-input',
+          attributes: {
+            type,
+            placeholder,
+            value: value || '',
+            disabled: this.props.submitting,
+            onInput: (e) => this.handleUserInfoChange(field, e.target.value)
+          }
+        })
+      ]
+    });
+  }
+}