@waline/client 2.3.0 → 2.4.0

package/src/config/highlighter.ts

@@ -0,0 +1,74 @@
+/**
+ * The MIT License (MIT)
+ *
+ * Copyright (c) egoist <0x142857@gmail.com> (https://egoistian.com)
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ *
+ */
+
+const WORD_REGEXP =
+  /[\u4E00-\u9FFF\u3400-\u4dbf\uf900-\ufaff\u3040-\u309f\uac00-\ud7af\u0400-\u04FF]+|\w+/;
+const LEFT_ANGLE_REGEXP = /</;
+const LINE_COMMENT_REGEXP = /(?:^|\s)\/\/(.+?)$/gm;
+const BLOCK_COMMENT_REGEXP = /\/\*([\S\s]*?)\*\//gm;
+const REGEXP = new RegExp(
+  `(${WORD_REGEXP.source}|${LEFT_ANGLE_REGEXP.source})|((?:${LINE_COMMENT_REGEXP.source})|(?:${BLOCK_COMMENT_REGEXP.source}))`,
+  'gmi'
+);
+
+const COLORS = [
+  '23AC69',
+  '91C132',
+  'F19726',
+  'E8552D',
+  '1AAB8E',
+  'E1147F',
+  '2980C1',
+  '1BA1E6',
+  '9FA0A0',
+  'F19726',
+  'E30B20',
+  'E30B20',
+  'A3338B',
+];
+const cache: Record<string, string> = {};
+
+export const defaultHighlighter = (input: string): string => {
+  let index = 0;
+
+  return input.replace(REGEXP, (_match, word: string, comment: string) => {
+    if (comment) return `<span style="color: slategray">${comment}</span>`;
+    if (word === '<') return '&lt;';
+
+    let color: string;
+
+    if (cache[word]) color = cache[word];
+    else {
+      color = COLORS[index];
+      cache[word] = color;
+    }
+
+    const out = `<span style="color: #${color}">${word}</span>`;
+
+    index = ++index % COLORS.length;
+
+    return out;
+  });
+};

package/src/config/i18n/en.ts

@@ -10,6 +10,8 @@ export default generateLocale([
   'Comment here...',
   'No comment yet.',
   'Submit',
+  'Like',
+  'Cancel like',
   'Reply',
   'Cancel reply',
   'Comments',

package/src/config/i18n/generate.ts

@@ -10,6 +10,8 @@ const localeKeys = [
   'placeholder',
   'sofa',
   'submit',
+  'like',
+  'cancelLike',
   'reply',
   'cancelReply',
   'comment',

package/src/config/i18n/jp.ts

@@ -10,6 +10,8 @@ export default generateLocale([
   'ここにコメント',
   'コメントしましょう~',
   '提出する',
+  'Like',
+  'Cancel like',
   '返信する',
   'キャンセル',
   'コメント',

package/src/config/i18n/pt-BR.ts

@@ -10,6 +10,8 @@ export default generateLocale([
   'Comente aqui...',
   'Nenhum comentário, ainda.',
   'Enviar',
+  'Like',
+  'Cancel like',
   'Responder',
   'Cancelar resposta',
   'Comentários',

package/src/config/i18n/ru.ts

@@ -10,6 +10,8 @@ export default generateLocale([
   'Комментарий здесь...',
   'Пока нет комментариев.',
   'Отправить',
+  'Like',
+  'Cancel like',
   'Отвечать',
   'Отменить ответ',
   'Комментарии',

package/src/config/i18n/vi-VN.ts

@@ -10,6 +10,8 @@ export default generateLocale([
   'Hãy bình luận có văn hoá!',
   'Chưa có bình luận',
   'Gửi',
+  'Like',
+  'Cancel like',
   'Trả lời',
   'Hủy bỏ',
   'bình luận',

package/src/config/i18n/zh-CN.ts

@@ -10,6 +10,8 @@ export default generateLocale([
   '欢迎评论',
   '来发评论吧~',
   '提交',
+  '喜欢',
+  '取消喜欢',
   '回复',
   '取消回复',
   '评论',

package/src/config/i18n/zh-TW.ts

@@ -10,6 +10,8 @@ export default generateLocale([
   '歡迎評論',
   '來發評論吧~',
   '提交',
+  '喜歡',
+  '取消喜歡',
   '回覆',
   '取消回覆',
   '評論',

package/src/config/index.ts

@@ -1,2 +1,3 @@
 export * from './default';
+export * from './highlighter';
 export * from './i18n';

package/src/styles/card.scss

@@ -101,6 +101,8 @@
     font-size: 0.75em;
   }
 
+  .wl-delete,
+  .wl-like,
   .wl-reply {
     float: right;
 
@@ -213,6 +215,28 @@
     }
   }
 
+  .wl-admin-actions {
+    margin: 8px 0;
+    text-align: right;
+    font-size: 12px;
+  }
+
+  .wl-comment-status {
+    margin: 0 8px;
+
+    .wl-btn {
+      border-radius: 0;
+
+      &:first-child {
+        border-radius: 0.5em 0 0 0.5em;
+      }
+
+      &:last-child {
+        border-radius: 0 0.5em 0.5em 0;
+      }
+    }
+  }
+
   .wl-quote {
     border-left: 1px dashed rgb(237 237 237 / 50%);
 

package/src/typings/base.ts

@@ -43,12 +43,6 @@ export type WalineMeta = 'nick' | 'mail' | 'link';
 
 export type WalineImageUploader = (image: File) => Promise<string>;
 
-export type WalineHighlighter =
-  | ((code: string, lang: string) => string)
-  | ((
-      code: string,
-      lang: string,
-      callback?: (error: unknown | undefined, code?: string) => void
-    ) => void);
+export type WalineHighlighter = (code: string, lang: string) => string;
 
 export type WalineTexRenderer = (blockMode: boolean, tex: string) => string;

package/src/typings/comment.ts

@@ -1,21 +1,71 @@
 export interface WalineCommentData {
+  /**
+   * User Nickname
+   */
   nick: string;
+
+  /**
+   * User email
+   */
   mail: string;
+
+  /**
+   * User link
+   */
   link?: string;
+
+  /**
+   * Content of comment
+   */
   comment: string;
+
+  /**
+   * User Agent
+   */
   ua: string;
 
+  /**
+   * Parent comment id
+   */
+
   pid?: string;
+
+  /**
+   * Root comment id
+   */
   rid?: string;
+
+  /**
+   * User id being at
+   */
   at?: string;
+
+  /**
+   * Comment link
+   */
   url: string;
 }
 
+export type WalineCommentStatus = 'approved' | 'waiting' | 'spam';
+
 export interface WalineComment extends Exclude<WalineCommentData, 'ua'> {
+  /**
+   * User avatar
+   */
   avatar: string;
-  type?: string;
+
+  /**
+   * User type
+   */
+  type?: 'administrator' | 'guest' | `verify:${string}`;
+
   objectId: string;
+
+  /**
+   * Time ISOString when the comment is created
+   */
   createdAt: string;
+
   insertedAt: string;
   updatedAt: string;
   children: WalineComment[];
@@ -25,4 +75,9 @@ export interface WalineComment extends Exclude<WalineCommentData, 'ua'> {
   level?: number;
   addr?: string;
   label?: string;
+  // TODO: Rename it to `userId` in next major version
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  user_id?: string | number;
+  status?: WalineCommentStatus;
+  like?: number;
 }

package/src/typings/locale.ts

@@ -6,14 +6,7 @@ export interface WalineDateLocale {
   now: string;
 }
 
-export interface WalineLevelLocale {
-  level0: string;
-  level1: string;
-  level2: string;
-  level3: string;
-  level4: string;
-  level5: string;
-}
+export type WalineLevelLocale = Record<`level${number}`, string>;
 
 export interface WalineLocale extends WalineDateLocale, WalineLevelLocale {
   nick: string;
@@ -25,6 +18,8 @@ export interface WalineLocale extends WalineDateLocale, WalineLevelLocale {
   placeholder: string;
   sofa: string;
   submit: string;
+  like: string;
+  cancelLike: string;
   reply: string;
   cancelReply: string;
   comment: string;

package/src/utils/config.ts

@@ -1,6 +1,7 @@
 import {
   defaultLang,
   defaultUploadImage,
+  defaultHighlighter,
   defaultTexRenderer,
   getMeta,
   defaultLocales,
@@ -14,7 +15,6 @@ import type {
   WalineLocale,
   WalineProps,
 } from '../typings';
-import hanabi from 'hanabi';
 
 export interface WalineEmojiConfig {
   tabs: Pick<WalineEmojiInfo, 'name' | 'icon' | 'items'>[];
@@ -68,12 +68,12 @@ export const getConfig = ({
   locale: {
     ...(defaultLocales[lang] || defaultLocales[defaultLang]),
     ...(typeof locale === 'object' ? locale : {}),
-  },
+  } as WalineLocale,
   wordLimit: getWordLimit(wordLimit),
   meta: getMeta(meta),
   requiredMeta: getMeta(requiredMeta),
   imageUploader: fallback(imageUploader, defaultUploadImage),
-  highlighter: fallback(highlighter, hanabi),
+  highlighter: fallback(highlighter, defaultHighlighter),
   texRenderer: fallback(texRenderer, defaultTexRenderer),
   lang,
   dark,

package/src/utils/fetch.ts

@@ -5,6 +5,11 @@ export interface FetchErrorData {
   errmsg: string;
 }
 
+const JSON_HEADERS: Record<string, string> = {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  'Content-Type': 'application/json',
+};
+
 const errorCheck = <T = unknown>(data: T | FetchErrorData, name = ''): T => {
   if (typeof data === 'object' && (data as FetchErrorData).errno)
     throw new TypeError(
@@ -143,6 +148,77 @@ export const postComment = ({
   }).then((resp) => resp.json() as Promise<PostCommentResponse>);
 };
 
+export interface DeleteCommentOptions {
+  serverURL: string;
+  lang: string;
+  token: string;
+  objectId: string | number;
+}
+
+export const deleteComment = ({
+  serverURL,
+  lang,
+  token,
+  objectId,
+}: DeleteCommentOptions): Promise<void> => {
+  const headers: Record<string, string> = {
+    Authorization: `Bearer ${token}`,
+  };
+
+  return fetch(`${serverURL}/comment/${objectId}?lang=${lang}`, {
+    method: 'DELETE',
+    headers,
+  }).then((resp) => resp.json() as Promise<void>);
+};
+
+export interface LikeCommentOptions {
+  serverURL: string;
+  lang: string;
+  objectId: number | string;
+  like: boolean;
+}
+
+export const likeComment = ({
+  serverURL,
+  lang,
+  objectId,
+  like,
+}: LikeCommentOptions): Promise<void> =>
+  fetch(`${serverURL}/comment/${objectId}?lang=${lang}`, {
+    method: 'PUT',
+    headers: JSON_HEADERS,
+    body: JSON.stringify({ like }),
+  }).then((resp) => resp.json() as Promise<void>);
+
+export interface UpdateCommentOptions {
+  serverURL: string;
+  lang: string;
+  token: string;
+  objectId: number | string;
+  status?: 'approved' | 'waiting' | 'spam';
+  sticky?: number;
+}
+
+export const updateComment = ({
+  serverURL,
+  lang,
+  token,
+  objectId,
+  ...data
+}: UpdateCommentOptions): Promise<void> => {
+  const headers: Record<string, string> = {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    'Content-Type': 'application/json',
+    Authorization: `Bearer ${token}`,
+  };
+
+  return fetch(`${serverURL}/comment/${objectId}?lang=${lang}`, {
+    method: 'PUT',
+    headers,
+    body: JSON.stringify(data),
+  }).then((resp) => resp.json() as Promise<void>);
+};
+
 export interface FetchPageviewsOptions {
   serverURL: string;
   lang: string;
@@ -180,10 +256,7 @@ export const updatePageviews = ({
 }: UpdatePageviewsOptions): Promise<number> =>
   fetch(`${serverURL}/article?lang=${lang}`, {
     method: 'POST',
-    headers: {
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      'Content-Type': 'application/json',
-    },
+    headers: JSON_HEADERS,
     body: JSON.stringify({ path }),
   })
     .then((resp) => resp.json() as Promise<number>)

package/src/shims-hanabi.d.ts

@@ -1,9 +0,0 @@
-declare module 'hanabi' {
-  const hanabi: (
-    code: string,
-    lang: string,
-    callback?: (error: unknown, code?: string | undefined) => void
-  ) => string | void;
-
-  export default hanabi;
-}