gitalk-react 1.0.0-beta.8 → 1.0.0

package/lib/components/action.tsx

@@ -1,10 +1,10 @@
+import cn from "classnames";
 import React from "react";
 
-export interface ActionProps
-  extends React.DetailedHTMLProps<
-    React.AnchorHTMLAttributes<HTMLAnchorElement>,
-    HTMLAnchorElement
-  > {
+export interface ActionProps extends React.DetailedHTMLProps<
+  React.AnchorHTMLAttributes<HTMLAnchorElement>,
+  HTMLAnchorElement
+> {
   text: string;
 }
 
@@ -13,7 +13,7 @@ const Action: React.FC<ActionProps> = ({
   className = "",
   ...restProps
 }) => (
-  <a className={`gt-action ${className}`} {...restProps}>
+  <a className={cn("gt-action", className)} {...restProps}>
     <span className="gt-action-text">{text}</span>
   </a>
 );

package/lib/components/avatar.tsx

@@ -1,12 +1,12 @@
+import cn from "classnames";
 import React, { useState } from "react";
 
 import { DEFAULT_AVATAR } from "../constants";
 
-export interface AvatarProps
-  extends React.DetailedHTMLProps<
-    React.AnchorHTMLAttributes<HTMLAnchorElement>,
-    HTMLAnchorElement
-  > {
+export interface AvatarProps extends React.DetailedHTMLProps<
+  React.AnchorHTMLAttributes<HTMLAnchorElement>,
+  HTMLAnchorElement
+> {
   src?: string;
   alt?: string;
   defaultSrc?: string;
@@ -23,7 +23,7 @@ const Avatar: React.FC<AvatarProps> = ({
 
   return (
     <a
-      className={`gt-avatar ${className}`}
+      className={cn("gt-avatar", className)}
       target="_blank"
       rel="noopener noreferrer"
       {...restProps}

package/lib/components/button.tsx

@@ -1,10 +1,10 @@
+import cn from "classnames";
 import React from "react";
 
-export interface ButtonProps
-  extends React.DetailedHTMLProps<
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
-    HTMLButtonElement
-  > {
+export interface ButtonProps extends React.DetailedHTMLProps<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+> {
   text: string;
   isLoading?: boolean;
 }
@@ -21,7 +21,7 @@ const Button: React.FC<ButtonProps> = ({
 
   return (
     <button
-      className={`gt-btn ${className}`}
+      className={cn("gt-btn", className)}
       style={{ cursor: disabled ? "not-allowed" : undefined, ...style }}
       disabled={disabled}
       {...restProps}

package/lib/components/comment-textarea.tsx

@@ -10,11 +10,10 @@ import Avatar from "./avatar";
 import Button from "./button";
 import Svg from "./svg";
 
-interface CommentTextareaProps
-  extends React.DetailedHTMLProps<
-    React.TextareaHTMLAttributes<HTMLTextAreaElement>,
-    HTMLTextAreaElement
-  > {
+interface CommentTextareaProps extends React.DetailedHTMLProps<
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+  HTMLTextAreaElement
+> {
   value: string;
   octokit: Octokit;
   user?: User;
@@ -42,6 +41,7 @@ const CommentTextarea = forwardRef<HTMLTextAreaElement, CommentTextareaProps>(
     const [isPreviewComment, setIsPreviewComment] = useState<boolean>(false);
 
     const prevInputCommentRef = useRef<string>();
+    const prevCommentHtmlRef = useRef<string>("");
 
     const {
       data: commentHtml = "",
@@ -49,7 +49,8 @@ const CommentTextarea = forwardRef<HTMLTextAreaElement, CommentTextareaProps>(
       run: runGetCommentHtml,
     } = useRequest(
       async (): Promise<string> => {
-        if (prevInputCommentRef.current === inputComment) return commentHtml;
+        if (prevInputCommentRef.current === inputComment)
+          return prevCommentHtmlRef.current;
 
         const getPreviewedHtmlRes = await octokit.request("POST /markdown", {
           text: inputComment,
@@ -59,6 +60,7 @@ const CommentTextarea = forwardRef<HTMLTextAreaElement, CommentTextareaProps>(
           prevInputCommentRef.current = inputComment;
 
           const _commentHtml = getPreviewedHtmlRes.data;
+          prevCommentHtmlRef.current = _commentHtml;
           return _commentHtml;
         } else {
           onPreviewError(getPreviewedHtmlRes);

package/lib/components/comment.tsx

@@ -1,5 +1,14 @@
+import cn from "classnames";
 import { formatDistanceToNow, parseISO } from "date-fns";
-import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
+import { enUS } from "date-fns/locale";
+import React, {
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 
 import ArrowDown from "../assets/arrow-down.svg?raw";
 import Edit from "../assets/edit.svg?raw";
@@ -12,17 +21,18 @@ import Avatar from "./avatar";
 import Svg from "./svg";
 
 export interface CommentProps
-  extends React.DetailedHTMLProps<
-    React.HTMLAttributes<HTMLDivElement>,
-    HTMLDivElement
-  > {
+  extends
+    React.DetailedHTMLProps<
+      React.HTMLAttributes<HTMLDivElement>,
+      HTMLDivElement
+    >,
+    Pick<GitalkProps, "collapsedHeight" | "highlightAdminComment"> {
   comment: CommentType;
   isAuthor: boolean;
   isAdmin: boolean;
   onReply: (comment: CommentType) => void;
   onLike: (like: boolean, comment: CommentType) => void;
   likeLoading: boolean;
-  collapsedHeight?: GitalkProps["collapsedHeight"];
 }
 
 const Comment: React.FC<CommentProps> = ({
@@ -33,6 +43,7 @@ const Comment: React.FC<CommentProps> = ({
   onLike,
   likeLoading,
   collapsedHeight,
+  highlightAdminComment,
   className = "",
   ...restProps
 }) => {
@@ -77,12 +88,13 @@ const Comment: React.FC<CommentProps> = ({
     return () => {};
   }, []);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const commentElement = ref.current;
 
     if (commentElement && collapsedHeight) {
       const commentElementHeight = commentElement.clientHeight;
       if (commentElementHeight > collapsedHeight) {
+        // eslint-disable-next-line react-hooks/set-state-in-effect
         setCollapsed(true);
       }
     }
@@ -91,7 +103,14 @@ const Comment: React.FC<CommentProps> = ({
   return (
     <div
       ref={ref}
-      className={`gt-comment ${isAdmin ? "gt-comment-admin" : ""} ${className}`}
+      className={cn(
+        "gt-comment",
+        {
+          "gt-comment-admin": isAdmin,
+          "gt-comment-admin--highlight": isAdmin && highlightAdminComment,
+        },
+        className,
+      )}
       {...restProps}
     >
       <Avatar
@@ -123,7 +142,7 @@ const Comment: React.FC<CommentProps> = ({
             <span className="gt-comment-date__time">
               {formatDistanceToNow(parseISO(created_at), {
                 addSuffix: true,
-                locale: dateFnsLocaleMap[language],
+                locale: dateFnsLocaleMap[language] ?? enUS,
               })}
             </span>
           </div>

package/lib/components/comments-list.tsx

@@ -7,13 +7,18 @@ import Button from "./button";
 import Comment, { type CommentProps } from "./comment";
 
 interface CommentWithForwardedRefProps
-  extends Pick<
-    CommentProps,
-    "comment" | "onReply" | "likeLoading" | "collapsedHeight"
-  > {
+  extends
+    Pick<
+      CommentProps,
+      | "comment"
+      | "onReply"
+      | "likeLoading"
+      | "collapsedHeight"
+      | "highlightAdminComment"
+    >,
+    Pick<GitalkProps, "admin"> {
   onLike: (like: boolean, commentId: number, heartReactionId?: number) => void;
   user?: User;
-  admin: GitalkProps["admin"];
 }
 
 // Why forwardRef? https://www.npmjs.com/package/react-flip-move#usage-with-functional-components
@@ -55,7 +60,8 @@ const CommentWithForwardedRef = forwardRef<
 });
 
 interface CommentsListProps
-  extends Pick<GitalkProps, "flipMoveOptions">,
+  extends
+    Pick<GitalkProps, "flipMoveOptions">,
     Omit<CommentWithForwardedRefProps, "comment"> {
   comments: CommentType[];
   commentsCount: number;

package/lib/components/meta.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useContext, useState } from "react";
+import cn from "classnames";
+import React, { useContext, useState } from "react";
 
 import ArrowDown from "../assets/arrow-down.svg?raw";
 import { HOMEPAGE, VERSION } from "../constants";
@@ -8,11 +9,10 @@ import { hasClassInParent } from "../utils/dom";
 import Action from "./action";
 import Svg from "./svg";
 
-interface MetaProps {
+interface MetaProps extends Pick<GitalkProps, "pagerDirection"> {
   issue?: Issue;
   user?: User;
   commentsCount: number;
-  pagerDirection: GitalkProps["pagerDirection"];
   onPagerDirectionChange: (
     direction: NonNullable<GitalkProps["pagerDirection"]>,
   ) => void;
@@ -35,14 +35,14 @@ const Meta: React.FC<MetaProps> = (props) => {
 
   const [showPopup, setShowPopup] = useState<boolean>(false);
 
-  const hidePopup = useCallback((e: MouseEvent) => {
+  function hidePopup(e: MouseEvent) {
     const target = e.target as HTMLElement;
     if (target && hasClassInParent(target, "gt-user", "gt-popup")) {
       return;
     }
     document.removeEventListener("click", hidePopup);
     setShowPopup(false);
-  }, []);
+  }
 
   const onShowOrHidePopup: React.MouseEventHandler<HTMLDivElement> = (e) => {
     e.preventDefault();
@@ -75,13 +75,17 @@ const Meta: React.FC<MetaProps> = (props) => {
             ? [
                 <Action
                   key="sort-asc"
-                  className={`gt-action-sortasc${pagerDirection === "first" ? " is--active" : ""}`}
+                  className={cn("gt-action-sortasc", {
+                    "is--active": pagerDirection === "first",
+                  })}
                   onClick={() => onPagerDirectionChange("first")}
                   text={polyglot.t("sort-asc")}
                 />,
                 <Action
                   key="sort-desc"
-                  className={`gt-action-sortdesc${pagerDirection === "last" ? " is--active" : ""}`}
+                  className={cn("gt-action-sortdesc", {
+                    "is--active": pagerDirection === "last",
+                  })}
                   onClick={() => onPagerDirectionChange("last")}
                   text={polyglot.t("sort-desc")}
                 />,
@@ -113,7 +117,7 @@ const Meta: React.FC<MetaProps> = (props) => {
       )}
       <div className="gt-user">
         <div
-          className={`gt-user-inner${showPopup ? " is--poping" : ""}`}
+          className={cn("gt-user-inner", { "is--poping": showPopup })}
           onClick={onShowOrHidePopup}
         >
           <span className="gt-user-name">

package/lib/components/svg.tsx

@@ -1,10 +1,10 @@
+import cn from "classnames";
 import React from "react";
 
-export interface SVGProps
-  extends React.DetailedHTMLProps<
-    React.HTMLAttributes<HTMLSpanElement>,
-    HTMLSpanElement
-  > {
+export interface SVGProps extends React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLSpanElement>,
+  HTMLSpanElement
+> {
   icon: string;
   text?: string;
 }
@@ -15,7 +15,7 @@ const Svg: React.FC<SVGProps> = ({
   className = "",
   ...restProps
 }) => (
-  <span className={`gt-ico ${className}`} {...restProps}>
+  <span className={cn("gt-ico", className)} {...restProps}>
     <span
       className="gt-svg"
       dangerouslySetInnerHTML={{

package/lib/constants/index.ts

@@ -1,13 +1,17 @@
 import {
+  ar,
+  bn,
   de,
   enUS,
   es,
   faIR,
   fr,
+  hi,
   ja,
   ko,
   type Locale,
   pl,
+  pt,
   ru,
   zhCN,
   zhTW,
@@ -22,7 +26,9 @@ export const HOMEPAGE = packageJson.homepage;
 
 export const DEFAULT_LANG: Lang = "en";
 export const DEFAULT_LABELS = ["Gitalk"];
-export const DEFAULT_FLIP_MOVE_OPTIONS: GitalkProps["flipMoveOptions"] = {
+export const DEFAULT_FLIP_MOVE_OPTIONS: NonNullable<
+  GitalkProps["flipMoveOptions"]
+> = {
   staggerDelayBy: 150,
   appearAnimation: "accordionVertical",
   enterAnimation: "accordionVertical",
@@ -42,16 +48,24 @@ export const ACCESS_TOKEN_KEY = "GT_ACCESS_TOKEN";
 export const STORED_COMMENTS_KEY = "GT_COMMENT";
 
 export const DATE_FNS_LOCALE_MAP: Record<Lang, Locale> = {
+  en: enUS,
   zh: zhCN,
   "zh-CN": zhCN,
+  "zh-SG": zhCN,
   "zh-TW": zhTW,
-  en: enUS,
-  "es-ES": es,
-  fr,
-  ru,
-  de,
-  pl,
-  ko,
+  "zh-HK": zhTW,
+  "zh-MO": zhTW,
+  hi: hi,
+  es: es,
+  fr: fr,
+  ar: ar,
+  bn: bn,
+  ru: ru,
+  pt: pt,
+  ur: enUS,
+  ko: ko,
+  ja: ja,
+  de: de,
+  pl: pl,
   fa: faIR,
-  ja,
 };

package/lib/gitalk.tsx

@@ -1,6 +1,7 @@
 import "./i18n";
 
 import { useRequest } from "ahooks";
+import cn from "classnames";
 import React, {
   useCallback,
   useEffect,
@@ -69,6 +70,7 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
     defaultUser: propsDefaultUser,
     defaultAuthor: propsDefaultAuthor,
     collapsedHeight: propsCollapsedHeight,
+    highlightAdminComment = true,
     updateCountCallback,
     onCreateIssue,
     onCreateComment,
@@ -775,7 +777,11 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
   return (
     <I18nContext.Provider value={i18nContextValue}>
       <div
-        className={`gt-container${isInputFocused ? " gt-input-focused" : ""} ${className}`}
+        className={cn(
+          "gt-container",
+          { "gt-input-focused": isInputFocused },
+          className,
+        )}
         {...restProps}
       >
         {/* Alert */}
@@ -830,6 +836,7 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
                 onLike={runLikeOrDislikeComment}
                 likeLoading={likeOrDislikeCommentLoading}
                 collapsedHeight={collapsedHeight}
+                highlightAdminComment={highlightAdminComment}
               />
             </>
           ) : (
@@ -879,4 +886,6 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
 
 export type { GitalkProps };
 
+export { DEFAULT_FLIP_MOVE_OPTIONS };
+
 export default Gitalk;

package/lib/i18n/ar.json

@@ -0,0 +1,20 @@
+{
+  "init": "جارٍ تحميل Gitalk ...",
+  "no-found-related": "لم يتم العثور على %{link} ذي صلة للتعليق",
+  "please-contact": "يرجى الاتصال بـ %{user} لتهيئة التعليق",
+  "init-issue": "إنشاء المشكلة",
+  "leave-a-comment": "اترك تعليقًا",
+  "preview": "معاينة",
+  "edit": "تعديل",
+  "comment": "تعليق",
+  "support-markdown": "يدعم Markdown",
+  "login-with-github": "تسجيل الدخول عبر GitHub",
+  "first-comment-person": "كن أول من يترك تعليقًا!",
+  "commented": "علق",
+  "load-more": "تحميل المزيد",
+  "counts": "%{counts} تعليق |||| %{counts} تعليقات",
+  "sort-asc": "الترتيب من الأقدم",
+  "sort-desc": "الترتيب من الأحدث",
+  "logout": "تسجيل الخروج",
+  "anonymous": "مجهول"
+}

package/lib/i18n/bn.json

@@ -0,0 +1,20 @@
+{
+  "init": "Gitalk লোড হচ্ছে ...",
+  "no-found-related": "মতামত করার জন্য সম্পর্কিত %{link} পাওয়া যায়নি",
+  "please-contact": "মন্তব্য আরম্ভ করতে %{user}-এর সাথে যোগাযোগ করুন",
+  "init-issue": "সমস্যা তৈরি করুন",
+  "leave-a-comment": "মন্তব্য করুন",
+  "preview": "পূর্বরূপ",
+  "edit": "সম্পাদনা",
+  "comment": "মন্তব্য",
+  "support-markdown": "Markdown সমর্থিত",
+  "login-with-github": "GitHub দিয়ে লগইন",
+  "first-comment-person": "প্রথম মন্তব্যকারী হন!",
+  "commented": "মন্তব্য করেছে",
+  "load-more": "আরও লোড করুন",
+  "counts": "%{counts} মন্তব্য",
+  "sort-asc": "প্রাচীন থেকে নতুন ক্রমানুসারে",
+  "sort-desc": "নতুন থেকে পুরাতন ক্রমানুসারে",
+  "logout": "লগ আউট",
+  "anonymous": "নামবিহীন"
+}

package/lib/i18n/hi.json

@@ -0,0 +1,20 @@
+{
+  "init": "Gitalk लोड हो रहा है ...",
+  "no-found-related": "टिप्पणी के लिए संबंधित %{link} नहीं मिला",
+  "please-contact": "कृपया टिप्पणी आरंभ करने के लिए %{user} से संपर्क करें",
+  "init-issue": "समस्या बनाएँ",
+  "leave-a-comment": "एक टिप्पणी छोड़ें",
+  "preview": "पूर्वावलोकन",
+  "edit": "संपादित करें",
+  "comment": "टिप्पणी",
+  "support-markdown": "Markdown समर्थित है",
+  "login-with-github": "GitHub से लॉगिन करें",
+  "first-comment-person": "पहला टिप्पणी करने वाला बनें!",
+  "commented": "टिप्पणी की",
+  "load-more": "और लोड करें",
+  "counts": "%{counts} टिप्पणी |||| %{counts} टिप्पणियाँ",
+  "sort-asc": "पुराने से नए क्रम में",
+  "sort-desc": "नए से पुराने क्रम में",
+  "logout": "लॉगआउट",
+  "anonymous": "अनाम"
+}

package/lib/i18n/index.ts

@@ -1,31 +1,44 @@
 import Polyglot from "node-polyglot";
 
 import { DEFAULT_LANG } from "../constants";
-import DE from "./de.json";
-import EN from "./en.json";
-import ES from "./es-ES.json";
-import FA from "./fa.json";
-import FR from "./fr.json";
-import JA from "./ja.json";
-import KO from "./ko.json";
-import PL from "./pl.json";
-import RU from "./ru.json";
-import ZHCN from "./zh-CN.json";
-import ZHTW from "./zh-TW.json";
+import ar from "./ar.json";
+import bn from "./bn.json";
+import de from "./de.json";
+import en from "./en.json";
+import es from "./es.json";
+import fa from "./fa.json";
+import fr from "./fr.json";
+import hi from "./hi.json";
+import ja from "./ja.json";
+import ko from "./ko.json";
+import pl from "./pl.json";
+import pt from "./pt.json";
+import ru from "./ru.json";
+import ur from "./ur.json";
+import zhCN from "./zh-CN.json";
+import zhTW from "./zh-TW.json";
 
 export const i18nMap = {
-  zh: ZHCN,
-  "zh-CN": ZHCN,
-  "zh-TW": ZHTW,
-  en: EN,
-  "es-ES": ES,
-  fr: FR,
-  ru: RU,
-  de: DE,
-  pl: PL,
-  ko: KO,
-  fa: FA,
-  ja: JA,
+  en,
+  zh: zhCN,
+  "zh-CN": zhCN,
+  "zh-SG": zhCN,
+  "zh-TW": zhTW,
+  "zh-HK": zhTW,
+  "zh-MO": zhTW,
+  hi,
+  es,
+  fr,
+  ar,
+  bn,
+  ru,
+  pt,
+  ur,
+  ko,
+  ja,
+  de,
+  pl,
+  fa,
 };
 
 export type Lang = keyof typeof i18nMap;

package/lib/i18n/pt.json

@@ -0,0 +1,20 @@
+{
+  "init": "Carregando Gitalk ...",
+  "no-found-related": "Não foi encontrado %{link} relacionado para comentar",
+  "please-contact": "Por favor contate %{user} para inicializar o comentário",
+  "init-issue": "Criar problema",
+  "leave-a-comment": "Deixe um comentário",
+  "preview": "Pré-visualizar",
+  "edit": "Editar",
+  "comment": "Comentar",
+  "support-markdown": "Suporta Markdown",
+  "login-with-github": "Entrar com GitHub",
+  "first-comment-person": "Seja a primeira pessoa a deixar um comentário!",
+  "commented": "comentou",
+  "load-more": "Carregar mais",
+  "counts": "%{counts} comentário |||| %{counts} comentários",
+  "sort-asc": "Ordenar do mais antigo",
+  "sort-desc": "Ordenar do mais recente",
+  "logout": "Sair",
+  "anonymous": "Anônimo"
+}

package/lib/i18n/ur.json

@@ -0,0 +1,20 @@
+{
+  "init": "Gitalk لوڈ ہو رہا ہے ...",
+  "no-found-related": "تبصرہ کرنے کے لیے متعلقہ %{link} نہیں ملا",
+  "please-contact": "تبصرہ شروع کرنے کے لیے براہ کرم %{user} سے رابطہ کریں",
+  "init-issue": "مسئلہ بنائیں",
+  "leave-a-comment": "ایک تبصرہ چھوڑیں",
+  "preview": "پیش نظارہ",
+  "edit": "ترمیم کریں",
+  "comment": "تبصرہ",
+  "support-markdown": "Markdown کی حمایت کرتا ہے",
+  "login-with-github": "GitHub کے ساتھ لاگ ان کریں",
+  "first-comment-person": "پہلا تبصرہ کرنے والا بنیں!",
+  "commented": "نے تبصرہ کیا",
+  "load-more": "مزید لوڈ کریں",
+  "counts": "%{counts} تبصرہ |||| %{counts} تبصرے",
+  "sort-asc": "سب سے پرانے سے ترتیب",
+  "sort-desc": "سب سے نئے سے ترتیب",
+  "logout": "لاگ آؤٹ",
+  "anonymous": "گمنام"
+}

package/lib/interfaces/index.ts

@@ -4,14 +4,10 @@ import type FlipMove from "react-flip-move";
 import type { Lang } from "../i18n";
 import type { IssueCommentsQLResponse } from "../services/graphql/comment";
 
-export interface GitalkProps
-  extends Omit<
-    React.DetailedHTMLProps<
-      React.HTMLAttributes<HTMLDivElement>,
-      HTMLDivElement
-    >,
-    "id" | "title"
-  > {
+export interface GitalkProps extends Omit<
+  React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+  "id" | "title"
+> {
   /**
    * GitHub Application Client ID.
    */
@@ -146,6 +142,12 @@ export interface GitalkProps
    * Default collapse the comment if meets the height (px)
    */
   collapsedHeight?: number;
+  /**
+   * Whether to highlight the comment created by admin users.
+   *
+   * @default true
+   */
+  highlightAdminComment?: boolean;
   /**
    * Callback method invoked when updating the number of comments.
    *