@fecommunity/reactpress-theme-starter 1.0.0-beta.0

package/components/comment/CommentEditor.tsx

@@ -0,0 +1,290 @@
+'use client'
+
+import CommentEmoji from '@/components/comment/CommentEmoji'
+import ThemeImage from '@/components/shared/ThemeImage'
+import { CommentProvider } from '@/lib/providers/client'
+import { getRandomColor, isLoggedInUser, type CommentNode } from '@/lib/utils/comment'
+import { useLocale } from '@fecommunity/reactpress-toolkit/ui'
+import {
+  getCommentEmailError,
+  isValidCommentEmail,
+  persistCommentAuthor,
+  readCommentAuthor,
+  resolveImageUrl,
+  useAsyncLoading,
+  useSiteUser,
+  type CommentAuthor,
+} from '@fecommunity/reactpress-toolkit/theme'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+interface CommentEditorProps {
+  hostId: string
+  parentComment?: CommentNode
+  replyComment?: CommentNode
+  small?: boolean
+  onOk?: () => void
+  onClose?: () => void
+  onSuccess?: (message: string) => void
+}
+
+function resolveInitialAuthor(user: ReturnType<typeof useSiteUser>['user']): CommentAuthor {
+  if (isLoggedInUser(user)) {
+    return { name: user.name, email: user.email ?? '' }
+  }
+  const saved = readCommentAuthor()
+  if (saved) return saved
+  return {
+    name: typeof user?.name === 'string' ? user.name : '',
+    email: typeof user?.email === 'string' ? user.email : '',
+  }
+}
+
+export default function CommentEditor({
+  hostId,
+  parentComment,
+  replyComment,
+  small = false,
+  onOk,
+  onClose,
+  onSuccess,
+}: CommentEditorProps) {
+  const { t } = useLocale()
+  const { user } = useSiteUser()
+  const [addComment, loading] = useAsyncLoading(CommentProvider.addComment)
+  const [author, setAuthor] = useState<CommentAuthor>(() => resolveInitialAuthor(user))
+  const [content, setContent] = useState('')
+  const [emailTouched, setEmailTouched] = useState(false)
+
+  const loggedInAuthor = useMemo(() => (isLoggedInUser(user) ? user : null), [user])
+  const accountEmail = loggedInAuthor?.email?.trim() ?? ''
+  const nameReadOnly = Boolean(loggedInAuthor)
+  const emailReadOnly = Boolean(loggedInAuthor && accountEmail)
+
+  const effectiveAuthor = useMemo((): CommentAuthor => {
+    if (loggedInAuthor) {
+      return {
+        name: loggedInAuthor.name,
+        email: accountEmail || author.email,
+      }
+    }
+    return author
+  }, [accountEmail, author, loggedInAuthor])
+
+  useEffect(() => {
+    if (loggedInAuthor) {
+      setAuthor({
+        name: loggedInAuthor.name,
+        email: accountEmail,
+      })
+      return
+    }
+
+    const saved = readCommentAuthor()
+    if (saved) {
+      setAuthor(saved)
+      return
+    }
+
+    if (user?.name || user?.email) {
+      setAuthor((prev) => ({
+        name: user.name || prev.name,
+        email: user.email || prev.email,
+      }))
+    }
+  }, [accountEmail, loggedInAuthor, user?.email, user?.name])
+
+  const emailError = useMemo(
+    () =>
+      emailReadOnly
+        ? ''
+        : getCommentEmailError(
+            author.email,
+            {
+              required: t('commentNamespace.userInfoEmailValidMsg'),
+              invalid: t('commentNamespace.userInfoIllegalEmailValidMsg'),
+            },
+            { touched: emailTouched }
+          ),
+    [author.email, emailReadOnly, emailTouched, t]
+  )
+
+  const canSubmit = useMemo(() => {
+    if (!content.trim()) return false
+    return Boolean(effectiveAuthor.name.trim() && isValidCommentEmail(effectiveAuthor.email))
+  }, [content, effectiveAuthor.email, effectiveAuthor.name])
+
+  const submit = useCallback(() => {
+    const trimmedName = effectiveAuthor.name.trim()
+    const trimmedEmail = effectiveAuthor.email.trim()
+    const trimmedContent = content.trim()
+
+    if (!emailReadOnly) {
+      setEmailTouched(true)
+    }
+    if (!trimmedName || !isValidCommentEmail(trimmedEmail) || !trimmedContent) {
+      return
+    }
+
+    const data: Record<string, string> = {
+      hostId,
+      name: trimmedName,
+      email: trimmedEmail,
+      avatar: loggedInAuthor?.avatar || '',
+      content: trimmedContent,
+      url: window.location.pathname,
+    }
+
+    if (parentComment?.id) {
+      data.parentCommentId = parentComment.id
+    }
+    if (replyComment) {
+      data.replyUserName = replyComment.name
+      data.replyUserEmail = replyComment.email
+    }
+
+    addComment(data).then(() => {
+      if (!loggedInAuthor) {
+        persistCommentAuthor({ name: trimmedName, email: trimmedEmail })
+      }
+      setContent('')
+      onSuccess?.(t('commentNamespace.commentSuccess'))
+      onOk?.()
+    })
+  }, [
+    addComment,
+    content,
+    effectiveAuthor.email,
+    effectiveAuthor.name,
+    emailReadOnly,
+    hostId,
+    loggedInAuthor,
+    onOk,
+    onSuccess,
+    parentComment?.id,
+    replyComment,
+    t,
+  ])
+
+  const placeholder = replyComment
+    ? `${t('commentNamespace.reply')} ${replyComment.name}`
+    : t('commentNamespace.replyPlaceholder')
+
+  return (
+    <div className={`rp-comment-editor${small ? 'is-small' : ''}`}>
+      {loggedInAuthor ? (
+        <p className="rp-comment-lead">
+          {t('commentNamespace.commentingAs').replace('{name}', loggedInAuthor.name)}
+        </p>
+      ) : !small ? (
+        <p className="rp-comment-lead">{t('commentNamespace.guestCommentLead')}</p>
+      ) : null}
+
+      <div className="rp-comment-author-fields">
+        <input
+          value={effectiveAuthor.name}
+          placeholder={t('commentNamespace.userInfoName')}
+          readOnly={nameReadOnly}
+          disabled={nameReadOnly}
+          onChange={(event) => setAuthor((prev) => ({ ...prev, name: event.target.value }))}
+          className="rp-comment-input"
+        />
+        <div className="rp-comment-field">
+          <input
+            type="email"
+            value={effectiveAuthor.email}
+            placeholder={t('commentNamespace.userInfoEmail')}
+            readOnly={emailReadOnly}
+            disabled={emailReadOnly}
+            onBlur={() => setEmailTouched(true)}
+            onChange={(event) => setAuthor((prev) => ({ ...prev, email: event.target.value }))}
+            className={`rp-comment-input${emailError ? 'is-error' : ''}`}
+          />
+          {emailError ? <span className="rp-comment-field-error">{emailError}</span> : null}
+        </div>
+      </div>
+
+      <textarea
+        value={content}
+        placeholder={placeholder}
+        rows={small ? 3 : 4}
+        onChange={(event) => setContent(event.target.value)}
+        className="rp-comment-textarea"
+      />
+
+      <footer>
+        <CommentEmoji onPick={(emoji) => setContent((prev) => `${prev}${emoji}`)}>
+          <>
+            <svg
+              viewBox="0 0 24 24"
+              width="18"
+              height="18"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.75"
+              aria-hidden
+            >
+              <circle cx="12" cy="12" r="10" />
+              <path d="M8 14s1.5 2 4 2 4-2 4-2" strokeLinecap="round" />
+              <circle cx="9" cy="9.5" r="0.75" fill="currentColor" stroke="none" />
+              <circle cx="15" cy="9.5" r="0.75" fill="currentColor" stroke="none" />
+            </svg>
+            <span>{t('commentNamespace.emoji')}</span>
+          </>
+        </CommentEmoji>
+
+        <div className="rp-comment-actions">
+          {onClose ? (
+            <button type="button" className="rp-comment-btn" onClick={onClose}>
+              {t('commentNamespace.close')}
+            </button>
+          ) : null}
+          <button
+            type="button"
+            className="rp-comment-btn rp-comment-btn-primary"
+            disabled={!canSubmit || loading}
+            onClick={submit}
+          >
+            {loading ? t('loading') : t('commentNamespace.publish')}
+          </button>
+        </div>
+      </footer>
+    </div>
+  )
+}
+
+export function CommentAvatar({
+  name,
+  avatar,
+  size,
+}: {
+  name: string
+  avatar?: string
+  size: number
+}) {
+  if (avatar) {
+    return (
+      <ThemeImage
+        src={resolveImageUrl(avatar, 'avatar')}
+        alt=""
+        width={size}
+        height={size}
+        className="shrink-0 rounded-full object-cover"
+        style={{ width: size, height: size }}
+      />
+    )
+  }
+
+  return (
+    <span
+      className="inline-flex shrink-0 items-center justify-center rounded-full text-white"
+      style={{
+        width: size,
+        height: size,
+        fontSize: size * 0.45,
+        backgroundColor: getRandomColor(name),
+      }}
+    >
+      {name.charAt(0).toUpperCase()}
+    </span>
+  )
+}

package/components/comment/CommentEmoji.tsx

@@ -0,0 +1,110 @@
+'use client'
+
+import { emojis } from '@/components/comment/emojis'
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+
+const PANEL_WIDTH = 320
+const PANEL_HEIGHT = 240
+const PANEL_GAP = 8
+
+interface CommentEmojiProps {
+  onPick: (emoji: string) => void
+  children: React.ReactNode
+}
+
+export default function CommentEmoji({ onPick, children }: CommentEmojiProps) {
+  const [open, setOpen] = useState(false)
+  const [mounted, setMounted] = useState(false)
+  const anchorRef = useRef<HTMLDivElement>(null)
+  const [panelStyle, setPanelStyle] = useState<React.CSSProperties>({
+    visibility: 'hidden',
+  })
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  useLayoutEffect(() => {
+    if (!open || !anchorRef.current) return
+
+    const updatePosition = () => {
+      const anchor = anchorRef.current
+      if (!anchor) return
+
+      const rect = anchor.getBoundingClientRect()
+      let left = rect.left
+      left = Math.max(PANEL_GAP, Math.min(left, window.innerWidth - PANEL_WIDTH - PANEL_GAP))
+
+      let top = rect.top - PANEL_HEIGHT - PANEL_GAP
+      if (top < PANEL_GAP) {
+        top = rect.bottom + PANEL_GAP
+      }
+
+      setPanelStyle({
+        position: 'fixed',
+        top,
+        left,
+        width: PANEL_WIDTH,
+        maxHeight: PANEL_HEIGHT,
+        zIndex: 9999,
+        visibility: 'visible',
+      })
+    }
+
+    updatePosition()
+    window.addEventListener('resize', updatePosition)
+    window.addEventListener('scroll', updatePosition, true)
+    return () => {
+      window.removeEventListener('resize', updatePosition)
+      window.removeEventListener('scroll', updatePosition, true)
+    }
+  }, [open])
+
+  useEffect(() => {
+    if (!open) return undefined
+
+    const close = (event: MouseEvent) => {
+      const target = event.target as Node
+      if (anchorRef.current?.contains(target)) return
+      if ((target as Element).closest?.('.rp-comment-emoji-panel')) return
+      setOpen(false)
+    }
+
+    document.addEventListener('mousedown', close)
+    return () => document.removeEventListener('mousedown', close)
+  }, [open])
+
+  const panel =
+    open && mounted ? (
+      <div className="rp-comment-emoji-panel is-portal" style={panelStyle} role="listbox">
+        {Object.entries(emojis).map(([name, emoji]) => (
+          <button
+            key={name}
+            type="button"
+            aria-label={emoji}
+            onClick={() => {
+              onPick(emoji)
+              setOpen(false)
+            }}
+          >
+            {emoji}
+          </button>
+        ))}
+      </div>
+    ) : null
+
+  return (
+    <div className="rp-comment-emoji-anchor" ref={anchorRef}>
+      <button
+        type="button"
+        className="rp-comment-emoji-trigger"
+        aria-expanded={open}
+        onClick={() => setOpen((value) => !value)}
+      >
+        {children}
+      </button>
+      {panel ? createPortal(panel, document.body) : null}
+    </div>
+  )
+}

package/components/comment/CommentIconButton.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import ArticleActionButton, {
+  type ArticleActionVariant,
+} from '@/components/widgets/ArticleActionButton'
+import { COMMENT_DOM_ID } from '@/lib/utils/comment'
+import { useLocale } from '@fecommunity/reactpress-toolkit/ui'
+
+interface CommentIconButtonProps {
+  variant?: ArticleActionVariant
+}
+
+export default function CommentIconButton({ variant = 'floating' }: CommentIconButtonProps) {
+  const { t } = useLocale()
+
+  return (
+    <ArticleActionButton
+      label={t('comment')}
+      onClick={() => {
+        document.getElementById(COMMENT_DOM_ID)?.scrollIntoView({ behavior: 'smooth' })
+      }}
+      variant={variant}
+    >
+      <svg
+        viewBox="0 0 24 24"
+        width="20"
+        height="20"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.8"
+        aria-hidden
+      >
+        <path d="M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z" />
+      </svg>
+    </ArticleActionButton>
+  )
+}

package/components/comment/CommentItem.tsx

@@ -0,0 +1,135 @@
+'use client'
+
+import CommentEditor, { CommentAvatar } from '@/components/comment/CommentEditor'
+import { type CommentNode } from '@/lib/utils/comment'
+import { useLocale } from '@fecommunity/reactpress-toolkit/ui'
+import { LocaleTime } from '@fecommunity/reactpress-toolkit/ui/content'
+import { useToggle } from '@fecommunity/reactpress-toolkit/theme'
+
+interface CommentItemProps {
+  comment: CommentNode
+  parentComment?: CommentNode
+  isChild?: boolean
+  isLast?: boolean
+  onSuccess?: (message: string) => void
+}
+
+export default function CommentItem({
+  comment,
+  parentComment,
+  isChild = false,
+  isLast = false,
+  onSuccess,
+}: CommentItemProps) {
+  const { t, locale } = useLocale()
+  const [editorVisible, toggleEditorVisible] = useToggle(false)
+  const [showMore, toggleMore] = useToggle(false)
+  const avatarSize = isChild ? 20 : 28
+  const paddingHorizontal = avatarSize + 4
+
+  return (
+    <div
+      className={`rp-comment-item${isChild ? 'is-child' : 'is-parent'}${isChild && isLast ? 'is-last' : ''}`}
+    >
+      <div>
+        <header>
+          <CommentAvatar name={comment.name} avatar={comment.avatar} size={avatarSize} />
+          <span className="rp-comment-name">
+            <strong>{comment.name}</strong>
+            {comment.replyUserName ? (
+              <>
+                <span style={{ margin: '0 8px' }}>{t('commentNamespace.reply')}</span>
+                <strong>{comment.replyUserName}</strong>
+              </>
+            ) : null}
+          </span>
+        </header>
+
+        <main style={{ padding: `8px 0 8px ${paddingHorizontal}px` }}>
+          <div
+            className="rp-rich-text"
+            dangerouslySetInnerHTML={{ __html: comment.html || comment.content }}
+          />
+        </main>
+
+        <footer style={{ paddingLeft: `${paddingHorizontal}px` }}>
+          <div className="rp-comment-meta">
+            {comment.userAgent ? (
+              <span>
+                {comment.userAgent}
+                {' · '}
+              </span>
+            ) : null}
+            <LocaleTime date={comment.createAt} timeago locale={locale} />
+            <button
+              type="button"
+              className="rp-comment-reply-btn"
+              onClick={() => toggleEditorVisible()}
+            >
+              {t('commentNamespace.reply')}
+            </button>
+          </div>
+
+          {editorVisible ? (
+            <div className="rp-comment-reply-editor">
+              <CommentEditor
+                small
+                hostId={comment.hostId}
+                parentComment={parentComment}
+                replyComment={comment}
+                onOk={toggleEditorVisible}
+                onClose={toggleEditorVisible}
+                onSuccess={onSuccess}
+              />
+            </div>
+          ) : null}
+
+          {comment.children?.length ? (
+            <div className="rp-comment-children">
+              <CommentList
+                comments={comment.children.slice(0, showMore ? comment.children.length : 2)}
+                parentComment={comment}
+                isChild
+                onSuccess={onSuccess}
+              />
+              {comment.children.length > 2 ? (
+                <button type="button" className="rp-comment-show-more" onClick={() => toggleMore()}>
+                  {showMore ? t('commentShowLess') : t('commentShowMore')}
+                </button>
+              ) : null}
+            </div>
+          ) : null}
+        </footer>
+      </div>
+    </div>
+  )
+}
+
+interface CommentListProps {
+  comments: CommentNode[]
+  parentComment?: CommentNode | null
+  isChild?: boolean
+  onSuccess?: (message: string) => void
+}
+
+export function CommentList({
+  comments,
+  parentComment = null,
+  isChild = false,
+  onSuccess,
+}: CommentListProps) {
+  return (
+    <div>
+      {comments.map((comment, index) => (
+        <CommentItem
+          key={`${parentComment?.id || 'root'}-${comment.id}`}
+          comment={comment}
+          parentComment={parentComment || comment}
+          isChild={isChild}
+          isLast={index === comments.length - 1}
+          onSuccess={onSuccess}
+        />
+      ))}
+    </div>
+  )
+}

package/components/comment/CommentSection.tsx

@@ -0,0 +1,123 @@
+'use client'
+
+import CommentEditor from '@/components/comment/CommentEditor'
+import { CommentList } from '@/components/comment/CommentItem'
+import { CommentProvider } from '@/lib/providers/client'
+import { COMMENT_DOM_ID, type CommentNode } from '@/lib/utils/comment'
+import { useLocale } from '@fecommunity/reactpress-toolkit/ui'
+import { usePagination, useToggle } from '@fecommunity/reactpress-toolkit/theme'
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+interface CommentSectionProps {
+  hostId: string
+}
+
+export default function CommentSection({ hostId }: CommentSectionProps) {
+  const { t } = useLocale()
+  const ref = useRef<HTMLDivElement>(null)
+  const [firstLoad, setFirstLoad] = useToggle(true)
+  const [toast, setToast] = useState('')
+  const toastTimerRef = useRef<number | null>(null)
+
+  const {
+    data: comments,
+    total,
+    loading,
+    page,
+    pageSize,
+    setPage,
+    refresh,
+  } = usePagination<CommentNode>((params) => CommentProvider.getArticleComments(hostId, params), {
+    pageSize: 6,
+    after: ({ page: currentPage }) => {
+      if (currentPage === 1 && firstLoad) {
+        setFirstLoad(false)
+        return
+      }
+      Promise.resolve().then(() => {
+        ref.current?.scrollIntoView({ behavior: 'smooth' })
+      })
+    },
+  })
+
+  const showToast = useCallback(
+    (message: string) => {
+      if (toastTimerRef.current) {
+        window.clearTimeout(toastTimerRef.current)
+      }
+      setToast(message)
+      refresh()
+      toastTimerRef.current = window.setTimeout(() => {
+        setToast('')
+        toastTimerRef.current = null
+      }, 2000)
+    },
+    [refresh]
+  )
+
+  useEffect(
+    () => () => {
+      if (toastTimerRef.current) {
+        window.clearTimeout(toastTimerRef.current)
+      }
+    },
+    []
+  )
+
+  const totalPages = Math.max(1, Math.ceil(total / pageSize))
+
+  return (
+    <div id={COMMENT_DOM_ID} ref={ref} className="rp-comment-root">
+      <div className="rp-comment-editor-wrap">
+        <CommentEditor hostId={hostId} onSuccess={showToast} />
+      </div>
+
+      <CommentList comments={comments} onSuccess={showToast} />
+
+      <div className="rp-comment-pagination">
+        {!loading && total > pageSize ? (
+          <div className="rp-comment-pagination-inner">
+            <button
+              type="button"
+              className="rp-comment-pagination-btn"
+              disabled={page <= 1}
+              onClick={() => setPage(page - 1)}
+              aria-label="Previous page"
+            >
+              ‹
+            </button>
+            {Array.from({ length: totalPages }, (_, index) => index + 1).map((pageNumber) => (
+              <button
+                key={pageNumber}
+                type="button"
+                className={`rp-comment-pagination-btn${pageNumber === page ? 'is-active' : ''}`}
+                onClick={() => setPage(pageNumber)}
+              >
+                {pageNumber}
+              </button>
+            ))}
+            <button
+              type="button"
+              className="rp-comment-pagination-btn"
+              disabled={page >= totalPages}
+              onClick={() => setPage(page + 1)}
+              aria-label="Next page"
+            >
+              ›
+            </button>
+          </div>
+        ) : loading ? (
+          <button type="button" className="rp-comment-btn rp-comment-btn-primary" disabled>
+            {t('loading')}
+          </button>
+        ) : null}
+      </div>
+
+      {toast ? (
+        <div className="rp-comment-toast" role="status" aria-live="polite">
+          {toast}
+        </div>
+      ) : null}
+    </div>
+  )
+}