@ziteh/yangchun-comment-client 0.1.0 → 0.2.0-alpha.1

package/dist/element.js

@@ -1,680 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import snarkdown from 'snarkdown';
-import { LitElement, html, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { createApiService } from './utils/apiService';
-import { createI18n, en, zhHant } from './utils/i18n';
-import { generatePseudonymAndHash } from './utils/pseudonym';
-import { sanitizeHtml, setupDOMPurifyHooks } from './utils/sanitize';
-import { formatDate } from './utils/format';
-import { createPreviewTemplate } from './views/preview';
-import { createCommentsTemplate as renderCommentsView } from './views/comments';
-import './index.css';
-export class YangchunCommentElement extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.post = '/blog/my-post';
-        this.apiUrl = 'http://localhost:8787/';
-        this.authorName = undefined;
-        this.language = 'en';
-        this.apiService = createApiService(this.apiUrl);
-        this.i18n = createI18n(en);
-        this.commentMap = {};
-        this.comments = [];
-        this.currentReplyTo = null;
-        this.previewText = '';
-        this.previewName = '';
-        this.previewPseudonym = '';
-        this.editingComment = null;
-        this.activeTab = 'write';
-        this.showMarkdownHelp = false;
-        this.showAdminLogin = false;
-    }
-    static { this.MAX_NAME_LENGTH = 25; }
-    static { this.MAX_MESSAGE_LENGTH = 1000; }
-    static { this.MY_NAME_HASHES_KEY = 'ycc_my_name_hashes'; }
-    createRenderRoot() {
-        return this;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.syncI18n();
-        this.apiService = createApiService(this.apiUrl);
-        setupDOMPurifyHooks();
-        this.reloadComments();
-    }
-    disconnectedCallback() {
-        document.body.classList.remove('ycc-modal-open');
-        super.disconnectedCallback();
-    }
-    updated(changed) {
-        if (changed.has('apiUrl'))
-            this.apiService = createApiService(this.apiUrl);
-        if (changed.has('language'))
-            this.syncI18n();
-        if (changed.has('post'))
-            this.reloadComments();
-    }
-    syncI18n() {
-        let languageStrings = en;
-        const lang = this.language;
-        if (typeof lang === 'string')
-            languageStrings = lang === 'zh-Hant' ? zhHant : en;
-        else if (lang && typeof lang === 'object')
-            languageStrings = lang;
-        this.i18n = createI18n(languageStrings);
-    }
-    renderMarkdown(md) {
-        return unsafeHTML(sanitizeHtml(snarkdown(md || '')));
-    }
-    getDisplayName(comment) {
-        if (comment?.isAdmin && this.authorName)
-            return this.authorName;
-        const cleaned = comment?.pseudonym ?? '';
-        return cleaned.trim() ? cleaned : this.i18n.t('anonymous');
-    }
-    canEditComment(commentId) {
-        return this.apiService.canEditComment(commentId);
-    }
-    saveMyNameHash(nameHash) {
-        try {
-            const arr = this.getMyNameHashes();
-            if (nameHash && !arr.includes(nameHash)) {
-                arr.push(nameHash);
-                localStorage.setItem(YangchunCommentElement.MY_NAME_HASHES_KEY, JSON.stringify(arr));
-            }
-        }
-        catch (e) {
-            console.warn('Failed to save name hash:', e);
-        }
-    }
-    getMyNameHashes() {
-        try {
-            const stored = localStorage.getItem(YangchunCommentElement.MY_NAME_HASHES_KEY);
-            return stored ? JSON.parse(stored) : [];
-        }
-        catch (e) {
-            console.warn('Failed to get name hashes:', e);
-            return [];
-        }
-    }
-    isMyComment(comment) {
-        if (!comment.nameHash)
-            return false;
-        return this.getMyNameHashes().includes(comment.nameHash);
-    }
-    async loadComments() {
-        return await this.apiService.getComments(this.post);
-    }
-    async reloadComments() {
-        this.comments = await this.loadComments();
-        this.buildCommentMap();
-    }
-    // moved preview template to views/preview.ts
-    switchTab(tab) {
-        this.activeTab = tab;
-        if (tab === 'preview')
-            this.saveCurrentFormInputs();
-    }
-    saveCurrentFormInputs() {
-        const nameInput = document.querySelector('#comment-form input[name="name"]');
-        if (nameInput)
-            this.previewName = nameInput.value;
-    }
-    async renderCommentsList() {
-        if (this.comments.length === 0)
-            await this.reloadComments();
-    }
-    buildCommentMap() {
-        this.commentMap = {};
-        this.comments.forEach((c) => {
-            this.commentMap[c.id] = c;
-        });
-    }
-    createCommentsTemplate() {
-        return renderCommentsView(this);
-    }
-    setReplyTo(commentId) {
-        if (this.editingComment) {
-            this.editingComment = null;
-            this.previewText = '';
-            this.previewName = '';
-            this.previewPseudonym = '';
-        }
-        this.currentReplyTo = commentId;
-        const form = this.querySelector('#comment-form-container');
-        if (form)
-            form.scrollIntoView({ behavior: 'smooth' });
-    }
-    cancelReply() {
-        this.currentReplyTo = null;
-    }
-    handleInputChange(e) {
-        this.previewText = e.target.value;
-    }
-    async handleNameInputChange(e) {
-        const target = e.target;
-        this.previewName = target.value;
-        if (target.value.trim()) {
-            try {
-                const { pseudonym } = await generatePseudonymAndHash(target.value);
-                this.previewPseudonym = pseudonym;
-            }
-            catch {
-                this.previewPseudonym = '';
-            }
-        }
-        else {
-            this.previewPseudonym = '';
-        }
-    }
-    async handleSubmit(e) {
-        e.preventDefault();
-        const fd = new FormData(e.target);
-        const originalName = fd.get('name');
-        const message = fd.get('message');
-        if (originalName && originalName.length > YangchunCommentElement.MAX_NAME_LENGTH) {
-            alert(`${this.i18n.t('nameTooLong')} (${originalName.length}/${YangchunCommentElement.MAX_NAME_LENGTH})`);
-            return;
-        }
-        if (message.length > YangchunCommentElement.MAX_MESSAGE_LENGTH) {
-            alert(`${this.i18n.t('messageTooLong')} (${message.length}/${YangchunCommentElement.MAX_MESSAGE_LENGTH})`);
-            return;
-        }
-        let pseudonym;
-        let hash;
-        if (this.editingComment) {
-            pseudonym = this.editingComment.pseudonym || '';
-            hash = this.editingComment.nameHash || '';
-        }
-        else {
-            const r = await generatePseudonymAndHash(originalName || '');
-            pseudonym = r.pseudonym;
-            hash = r.hash;
-        }
-        const success = await this.processSubmission(pseudonym, hash, message);
-        if (success) {
-            this.resetFormState();
-            this.comments.length = 0;
-            await this.renderCommentsList();
-        }
-    }
-    async processSubmission(pseudonym, nameHash, message) {
-        if (this.editingComment) {
-            const success = await this.apiService.updateComment(this.post, this.editingComment.id, this.editingComment.pseudonym || '', this.editingComment.nameHash || '', message);
-            if (!success)
-                alert(this.i18n.t('editFailed'));
-            return success;
-        }
-        else {
-            const commentId = await this.apiService.addComment(this.post, pseudonym, nameHash, message, this.currentReplyTo);
-            if (!commentId) {
-                alert(this.i18n.t('submitFailed'));
-                return false;
-            }
-            this.saveMyNameHash(nameHash);
-            return true;
-        }
-    }
-    resetFormState() {
-        const form = document.querySelector('#comment-form');
-        if (form)
-            form.reset();
-        this.previewText = '';
-        this.previewName = '';
-        this.previewPseudonym = '';
-        this.editingComment = null;
-        this.currentReplyTo = null;
-    }
-    async handlePreviewSubmit() {
-        if (this.previewName && this.previewName.length > YangchunCommentElement.MAX_NAME_LENGTH) {
-            alert(`${this.i18n.t('nameTooLong')} (${this.previewName.length}/${YangchunCommentElement.MAX_NAME_LENGTH})`);
-            return;
-        }
-        if (this.previewText.length > YangchunCommentElement.MAX_MESSAGE_LENGTH) {
-            alert(`${this.i18n.t('messageTooLong')} (${this.previewText.length}/${YangchunCommentElement.MAX_MESSAGE_LENGTH})`);
-            return;
-        }
-        let pseudonym;
-        let hash;
-        if (this.editingComment) {
-            pseudonym = this.editingComment.pseudonym || '';
-            hash = this.editingComment.nameHash || '';
-        }
-        else {
-            const g = await generatePseudonymAndHash(this.previewName);
-            pseudonym = g.pseudonym;
-            hash = g.hash;
-        }
-        const success = await this.processSubmission(pseudonym, hash, this.previewText);
-        if (success) {
-            this.resetPreviewState();
-            this.comments.length = 0;
-            await this.renderCommentsList();
-        }
-    }
-    resetPreviewState() {
-        this.previewText = '';
-        this.previewName = '';
-        this.previewPseudonym = '';
-        this.editingComment = null;
-        this.currentReplyTo = null;
-        this.switchTab('write');
-        const form = document.querySelector('#comment-form');
-        if (form)
-            form.reset();
-    }
-    async handleDelete(commentId) {
-        if (!confirm(this.i18n.t('confirmDelete')))
-            return;
-        const success = await this.apiService.deleteComment(this.post, commentId);
-        if (success) {
-            this.comments.length = 0;
-            await this.renderCommentsList();
-        }
-        else {
-            alert(this.i18n.t('deleteFailed'));
-        }
-    }
-    handleEdit(comment) {
-        this.clearReplyState();
-        this.setEditingState(comment);
-        this.populateFormWithComment(comment);
-        this.scrollToForm();
-    }
-    clearReplyState() {
-        if (this.currentReplyTo)
-            this.currentReplyTo = null;
-    }
-    setEditingState(comment) {
-        this.editingComment = comment;
-        this.previewText = comment.msg || '';
-        this.previewName = comment.pseudonym || '';
-        this.previewPseudonym = comment.pseudonym || '';
-    }
-    populateFormWithComment(comment) {
-        const nameInput = document.querySelector('#comment-form input[name="name"]');
-        const messageInput = document.querySelector('#comment-form textarea[name="message"]');
-        if (nameInput) {
-            nameInput.value = comment.pseudonym || '';
-            this.previewName = comment.pseudonym || '';
-            this.previewPseudonym = comment.pseudonym || '';
-        }
-        if (messageInput) {
-            messageInput.value = comment.msg || '';
-            this.previewText = comment.msg || '';
-        }
-    }
-    scrollToForm() {
-        const form = document.querySelector('#comment-form-container');
-        if (form)
-            form.scrollIntoView({ behavior: 'smooth' });
-    }
-    cancelEdit() {
-        this.editingComment = null;
-        this.clearFormAndPreview();
-    }
-    clearFormAndPreview() {
-        const form = document.querySelector('#comment-form');
-        if (form)
-            form.reset();
-        this.previewText = '';
-        this.previewName = '';
-        this.previewPseudonym = '';
-    }
-    toggleMarkdownHelp() {
-        this.showMarkdownHelp = !this.showMarkdownHelp;
-        this.updateBodyScrollLock();
-    }
-    createMarkdownHelpTemplate() {
-        return html ` <div id="markdown-help-modal" class="active">
-      <div class="markdown-help-container ycc-flex">
-        <div
-          class="markdown-help-backdrop ycc-clickable"
-          @click=${() => this.toggleMarkdownHelp()}
-        ></div>
-        <div class="markdown-help-content" role="dialog" aria-modal="true">
-          <button
-            class="markdown-help-close ycc-clickable ycc-reset-button"
-            @click=${() => this.toggleMarkdownHelp()}
-            aria-label="Close"
-          >
-            ×
-          </button>
-          <h4>${this.i18n.t('commentSystemTitle')}</h4>
-          <p>${this.i18n.t('commentSystemDesc')}</p>
-          <p>${this.i18n.t('commentTimeLimit')}</p>
-          <p>
-            Powered by&nbsp;<a
-              href="https://github.com/ziteh/yangchun-comment"
-              target="_blank"
-              rel="noopener noreferrer"
-              >Yang Chun Comment</a
-            >
-          </p>
-          <h4>${this.i18n.t('markdownSyntax')}</h4>
-          <p>${this.i18n.t('markdownBasicSupport')}</p>
-          <div class="markdown-examples">
-            <code>
-              <pre>
-${this.i18n.t('markdownLinkExample')}
-
-${this.i18n.t('markdownImageExample')}
-
-${this.i18n.t('markdownItalicExample')}
-
-${this.i18n.t('markdownBoldExample')}
-
-${this.i18n.t('markdownListExample')}
-
-${this.i18n.t('markdownOrderedListExample')}
-
-${this.i18n.t('markdownInlineCodeExample')}
-
-${this.i18n.t('markdownCodeBlockExample')}</pre
-              >
-            </code>
-          </div>
-        </div>
-      </div>
-    </div>`;
-    }
-    createFormTemplate() {
-        return html `
-      ${this.activeTab === 'preview' ? createPreviewTemplate(this) : this.createFormContent()}
-      ${this.createStatusIndicators()}
-      ${this.showMarkdownHelp ? this.createMarkdownHelpTemplate() : nothing}
-      ${this.showAdminLogin ? this.createAdminLoginTemplate() : nothing}
-    `;
-    }
-    createFormContent() {
-        return html ` <div class="comment-box">
-      <div id="form-content" class="${this.activeTab === 'write' ? 'active' : ''}">
-        <form
-          id="comment-form"
-          class="ycc-reset-form"
-          @submit=${(e) => this.handleSubmit(e)}
-        >
-          <div class="honeypot-field">
-            <input type="text" name="website" tabindex="-1" autocomplete="off" aria-hidden="true" />
-          </div>
-          ${this.createTextareaSection()} ${this.createFormFooter()}
-        </form>
-      </div>
-    </div>`;
-    }
-    createTextareaSection() {
-        return html ` <div class="comment-input">
-      <textarea
-        name="message"
-        placeholder="${this.i18n.t('messagePlaceholder')}"
-        maxlength="${YangchunCommentElement.MAX_MESSAGE_LENGTH}"
-        required
-        .value=${this.previewText}
-        @input=${(e) => this.handleInputChange(e)}
-      ></textarea>
-      <div class="char-count">
-        <span
-          id="message-char-count"
-          class="${this.previewText.length > YangchunCommentElement.MAX_MESSAGE_LENGTH
-            ? 'over-limit'
-            : ''}"
-          >${this.previewText.length}</span
-        >/${YangchunCommentElement.MAX_MESSAGE_LENGTH}
-      </div>
-    </div>`;
-    }
-    createFormFooter() {
-        return html ` <div class="comment-footer ycc-flex ycc-flex-wrap ycc-gap-xs">
-      <div class="name-input-container">
-        <input
-          type="text"
-          name="name"
-          autocomplete="name"
-          placeholder="${this.i18n.t('namePlaceholder')}"
-          maxlength="${YangchunCommentElement.MAX_NAME_LENGTH}"
-          ?disabled=${this.editingComment !== null}
-          .value=${this.previewName}
-          @input=${(e) => this.handleNameInputChange(e)}
-        />
-        <div class="char-count" style="margin-top: 4px;">
-          <span
-            id="name-char-count"
-            class="${this.previewName.length > YangchunCommentElement.MAX_NAME_LENGTH
-            ? 'over-limit'
-            : ''}"
-            >${this.previewName.length}</span
-          >/${YangchunCommentElement.MAX_NAME_LENGTH}
-        </div>
-        <div class="pseudonym-notice" style="font-size: 0.8em; color: #666; margin-top: 4px;">
-          ${this.editingComment
-            ? this.i18n.t('editingPseudonymNotice')
-            : this.i18n.t('pseudonymNotice')}
-        </div>
-      </div>
-      <div class="ycc-flex ycc-gap-xs">${this.createFormButtons()}</div>
-    </div>`;
-    }
-    createFormButtons() {
-        return html ` <button
-        type="button"
-        class="help-btn ycc-clickable ycc-reset-button"
-        title="${this.i18n.t('markdownHelp')}"
-        @click=${() => this.toggleMarkdownHelp()}
-      >
-        ?
-      </button>
-      <button
-        type="button"
-        class="preview-btn ycc-clickable ycc-transition ycc-transparent-bg ycc-reset-button ${this
-            .activeTab === 'preview'
-            ? 'active'
-            : ''}"
-        @click=${() => this.switchTab(this.activeTab === 'preview' ? 'write' : 'preview')}
-      >
-        ${this.activeTab === 'preview' ? this.i18n.t('write') : this.i18n.t('preview')}
-      </button>
-      <button type="submit" class="submit-btn ycc-clickable ycc-transition ycc-reset-button">
-        ${this.editingComment ? this.i18n.t('updateComment') : this.i18n.t('submitComment')}
-      </button>`;
-    }
-    createAdminButton() {
-        return html `<button
-      type="button"
-      class="admin-btn ycc-clickable ycc-reset-button"
-      title="Admin"
-      @click=${() => this.showAdminModal()}
-    >
-      ⚙
-    </button>`;
-    }
-    showAdminModal() {
-        this.showAdminLogin = true;
-        this.updateBodyScrollLock();
-    }
-    hideAdminModal() {
-        this.showAdminLogin = false;
-        this.updateBodyScrollLock();
-    }
-    updateBodyScrollLock() {
-        const lock = this.showMarkdownHelp || this.showAdminLogin;
-        document.body.classList.toggle('ycc-modal-open', lock);
-    }
-    createAdminLoginTemplate() {
-        return html `<div
-      class="admin-modal-backdrop ycc-clickable"
-      @click=${() => this.hideAdminModal()}
-    >
-      <div class="admin-modal-content" @click=${(e) => e.stopPropagation()}>
-        <button
-          class="admin-modal-close ycc-clickable ycc-reset-button"
-          @click=${() => this.hideAdminModal()}
-        >
-          ×
-        </button>
-        <h3>Admin Login</h3>
-        <form @submit=${(e) => this.handleAdminLogin(e)}>
-          <div class="admin-form-group">
-            <label for="admin-username">Username:</label
-            ><input type="text" id="admin-username" name="username" required autocomplete="off" />
-          </div>
-          <div class="admin-form-group">
-            <label for="admin-password">Password:</label
-            ><input
-              type="password"
-              id="admin-password"
-              name="password"
-              required
-              autocomplete="off"
-            />
-          </div>
-          <button type="submit" class="admin-login-btn ycc-clickable ycc-reset-button">
-            Login
-          </button>
-        </form>
-      </div>
-    </div>`;
-    }
-    async handleAdminLogin(e) {
-        e.preventDefault();
-        const fd = new FormData(e.target);
-        const username = fd.get('username');
-        const password = fd.get('password');
-        try {
-            const res = await fetch(`${this.apiUrl}admin/login`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ username, password }),
-            });
-            if (res.ok) {
-                await res.text();
-                alert('Admin login successful!');
-                this.hideAdminModal();
-            }
-            else {
-                alert('Admin login failed!');
-            }
-        }
-        catch (err) {
-            console.error('Admin login error:', err);
-            alert('Admin login error!');
-        }
-    }
-    createStatusIndicators() {
-        const replyIndicator = this.createReplyIndicator();
-        const editIndicator = this.createEditIndicator();
-        const hasAny = replyIndicator !== '' || editIndicator !== '';
-        return hasAny ? html `${replyIndicator}${editIndicator}` : nothing;
-    }
-    createReplyIndicator() {
-        return this.currentReplyTo && this.commentMap[this.currentReplyTo]
-            ? html `<div class="info ycc-flex ycc-gap-md">
-          ${this.i18n.t('replyingTo')}
-          ${this.getDisplayName(this.commentMap[this.currentReplyTo])}<button
-            type="button"
-            class="cancel-link ycc-clickable ycc-transition ycc-reset-button"
-            @click=${() => this.cancelReply()}
-          >
-            ${this.i18n.t('cancelReply')}
-          </button>
-        </div>`
-            : '';
-    }
-    createEditIndicator() {
-        return this.editingComment
-            ? html `<div class="info ycc-flex ycc-gap-md">
-          ${this.i18n.t('editing')} ${this.editingComment.id}<button
-            type="button"
-            class="cancel-link ycc-clickable ycc-transition ycc-reset-button"
-            @click=${() => this.cancelEdit()}
-          >
-            ${this.i18n.t('cancelEdit')}
-          </button>
-        </div>`
-            : '';
-    }
-    render() {
-        return html ` <div class="ycc-container">
-      <div class="comment-box-container">
-        <div id="comment-form-container" class="form-content">${this.createFormTemplate()}</div>
-        <!-- <div class="admin-btn-wrapper">${this.createAdminButton()}</div> -->
-      </div>
-      <div id="comments-container">${this.createCommentsTemplate()}</div>
-    </div>`;
-    }
-    async refresh() {
-        await this.reloadComments();
-    }
-    get i18n$() {
-        return this.i18n;
-    }
-    get commentMap$() {
-        return this.commentMap;
-    }
-    get currentReplyTo$() {
-        return this.currentReplyTo;
-    }
-    get previewText$() {
-        return this.previewText;
-    }
-    get previewPseudonym$() {
-        return this.previewPseudonym;
-    }
-    get editingComment$() {
-        return this.editingComment;
-    }
-    get comments$() {
-        return this.comments;
-    }
-    formatDate(ts) {
-        return formatDate(ts);
-    }
-}
-__decorate([
-    property({ type: String })
-], YangchunCommentElement.prototype, "post", void 0);
-__decorate([
-    property({ type: String })
-], YangchunCommentElement.prototype, "apiUrl", void 0);
-__decorate([
-    property({ type: String })
-], YangchunCommentElement.prototype, "authorName", void 0);
-__decorate([
-    property({ attribute: false })
-], YangchunCommentElement.prototype, "language", void 0);
-__decorate([
-    state()
-], YangchunCommentElement.prototype, "commentMap", void 0);
-__decorate([
-    state()
-], YangchunCommentElement.prototype, "comments", void 0);
-__decorate([
-    state()
-], YangchunCommentElement.prototype, "currentReplyTo", void 0);
-__decorate([
-    state()
-], YangchunCommentElement.prototype, "previewText", void 0);
-__decorate([
-    state()
-], YangchunCommentElement.prototype, "previewName", void 0);
-__decorate([
-    state()
-], YangchunCommentElement.prototype, "previewPseudonym", void 0);
-__decorate([
-    state()
-], YangchunCommentElement.prototype, "editingComment", void 0);
-__decorate([
-    state()
-], YangchunCommentElement.prototype, "activeTab", void 0);
-__decorate([
-    state()
-], YangchunCommentElement.prototype, "showMarkdownHelp", void 0);
-__decorate([
-    state()
-], YangchunCommentElement.prototype, "showAdminLogin", void 0);

package/dist/index.d.ts

@@ -1,9 +0,0 @@
-import type { I18nStrings } from './utils/i18n';
-import { YangchunCommentElement } from './element';
-export declare function initYangchunComment(elementId?: string, options?: {
-    post?: string;
-    apiUrl?: string;
-    language?: 'en' | 'zh-Hant' | I18nStrings;
-    authorName?: string;
-}): YangchunCommentElement;
-export default initYangchunComment;