@waline/client 2.7.1 → 2.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.7.1",
+  "version": "2.8.0",
   "description": "client for waline comment system",
   "keywords": [
     "valine",
@@ -83,25 +83,25 @@
     "@vueuse/core": "^9.2.0",
     "autosize": "^5.0.1",
     "marked": "^4.1.0",
-    "vue": "^3.2.38"
+    "vue": "^3.2.39"
   },
   "devDependencies": {
-    "@babel/core": "7.18.13",
-    "@babel/preset-env": "7.18.10",
+    "@babel/core": "7.19.0",
+    "@babel/preset-env": "7.19.0",
     "@rollup/plugin-babel": "5.3.1",
     "@rollup/plugin-commonjs": "22.0.2",
-    "@rollup/plugin-node-resolve": "13.3.0",
+    "@rollup/plugin-node-resolve": "14.0.1",
     "@rollup/plugin-replace": "4.0.0",
     "@types/autosize": "4.0.1",
-    "@types/marked": "4.0.6",
-    "@types/node": "18.7.15",
+    "@types/marked": "4.0.7",
+    "@types/node": "18.7.16",
     "@vitejs/plugin-vue": "3.1.0",
     "rimraf": "3.0.2",
     "rollup": "2.79.0",
     "rollup-plugin-dts": "4.2.2",
     "rollup-plugin-terser": "7.0.2",
     "rollup-plugin-ts": "3.0.2",
-    "typescript": "4.8.2",
+    "typescript": "4.8.3",
     "vite": "3.1.0"
   },
   "engines": {

package/src/components/CommentBox.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="wl-comment">
-    <div v-if="config.login !== 'disable' && isLogin" class="wl-login-info">
+    <div v-if="config.login !== 'disable' && isLogin && !edit?.objectId" class="wl-login-info">
       <div class="wl-avatar">
         <button class="wl-logout-btn" :title="locale.logout" @click="onLogout">
           <CloseIcon :size="14" />
@@ -248,10 +248,10 @@
     </div>
 
     <button
-      v-if="replyId"
+      v-if="replyId || edit?.objectId"
       class="wl-close"
       :title="locale.cancelReply"
-      @click="$emit('cancel-reply')"
+      @click="$emit(replyId ? 'cancel-reply' : 'cancel-edit')"
     >
       <CloseIcon :size="24" />
     </button>
@@ -267,6 +267,7 @@ import {
   inject,
   onMounted,
   onUnmounted,
+  PropType,
   reactive,
   ref,
   watch,
@@ -294,6 +295,7 @@ import {
 
 import type { ComputedRef, DeepReadonly } from 'vue';
 import type {
+  WalineComment,
   WalineCommentData,
   WalineImageUploader,
   WalineSearchOptions,
@@ -328,9 +330,13 @@ export default defineComponent({
       type: String,
       default: '',
     },
+    edit: {
+      type: Object as PropType<WalineComment | null>,
+      default: null,
+    },
   },
 
-  emits: ['submit', 'cancel-reply'],
+  emits: ['submit', 'cancel-reply', 'cancel-edit'],
 
   setup(props, { emit }) {
     const config = inject<ComputedRef<WalineConfig>>(
@@ -510,6 +516,8 @@ export default defineComponent({
         comment.pid = props.replyId;
         comment.rid = props.rootId;
         comment.at = props.replyUser;
+      } else if (props.edit) {
+        comment.eid = props.edit.objectId;
       }
 
       isSubmitting.value = true;
@@ -532,6 +540,7 @@ export default defineComponent({
           previewText.value = '';
 
           if (props.replyId) emit('cancel-reply');
+          if (props.edit?.objectId) emit('cancel-edit');
         })
         .catch((err: TypeError) => {
           isSubmitting.value = false;
@@ -701,6 +710,9 @@ export default defineComponent({
     onMounted(() => {
       document.body.addEventListener('click', popupHandler);
       window.addEventListener('message', onMessageRecive);
+      if (props.edit?.objectId) {
+        editor.value = props.edit.orig;
+      }
 
       // watch editor
       watch(

package/src/components/CommentCard.vue

@@ -32,6 +32,14 @@
         <span class="wl-time" v-text="time" />
 
         <div class="wl-comment-actions">
+          <button
+            v-if="isAdmin || isOwner"
+            class="wl-edit"
+            @click="$emit('edit', comment)"
+          >
+            <EditIcon />
+          </button>
+
           <button
             v-if="isAdmin || isOwner"
             class="wl-delete"
@@ -60,14 +68,14 @@
         </div>
       </div>
       <div class="wl-meta" aria-hidden="true">
-        <span v-if="comment.addr" v-text="comment.addr" />
-        <span v-if="comment.browser" v-text="comment.browser" />
-        <span v-if="comment.os" v-text="comment.os" />
+        <span v-if="comment.addr" class="wl-addr" :data-value="comment.addr" v-text="comment.addr" />
+        <span v-if="comment.browser" class="wl-browser" :data-value="comment.browser" v-text="comment.browser" />
+        <span v-if="comment.os" class="wl-os" :data-value="comment.os" v-text="comment.os" />
       </div>
       <!-- eslint-disable-next-line vue/no-v-html -->
-      <div class="wl-content" v-html="comment.comment" />
+      <div v-if="!isEditingCurrent" class="wl-content" v-html="comment.comment" />
 
-      <div v-if="isAdmin" class="wl-admin-actions">
+      <div v-if="isAdmin && !isEditingCurrent" class="wl-admin-actions">
         <span class="wl-comment-status">
           <button
             v-for="status in commentStatus"
@@ -88,13 +96,18 @@
         </button>
       </div>
 
-      <div v-if="isReplyingCurrent" class="wl-reply-wrapper">
+      <div 
+        v-if="isReplyingCurrent || isEditingCurrent" 
+        :class="{'wl-reply-wrapper': isReplyingCurrent, 'wl-edit-wrapper': isEditingCurrent}"
+      >
         <CommentBox
-          :reply-id="comment.objectId"
+          :edit="edit"
+          :reply-id="reply?.objectId"
           :reply-user="comment.nick"
           :root-id="rootId"
           @submit="$emit('submit', $event)"
           @cancel-reply="$emit('reply', null)"
+          @cancel-edit="$emit('edit', null)"
         />
       </div>
       <div v-if="comment.children" class="wl-quote">
@@ -103,10 +116,12 @@
           :key="child.objectId"
           :comment="child"
           :reply="reply"
+          :edit="edit"
           :root-id="rootId"
           @reply="$emit('reply', $event)"
           @submit="$emit('submit', $event)"
           @like="$emit('like', $event)"
+          @edit="$emit('edit', $event)"
           @delete="$emit('delete', $event)"
           @status="$emit('status', $event)"
           @sticky="$emit('sticky', $event)"
@@ -119,7 +134,7 @@
 <script lang="ts">
 import { computed, defineComponent, inject } from 'vue';
 import CommentBox from './CommentBox.vue';
-import { DeleteIcon, LikeIcon, ReplyIcon, VerifiedIcon } from './Icons';
+import { DeleteIcon, LikeIcon, ReplyIcon, EditIcon, VerifiedIcon } from './Icons';
 import { isLinkHttp } from '../utils';
 import { useTimeAgo, useLikeStorage, useUserInfo } from '../composables';
 
@@ -135,6 +150,7 @@ export default defineComponent({
     DeleteIcon,
     LikeIcon,
     ReplyIcon,
+    EditIcon,
     VerifiedIcon,
   },
 
@@ -151,9 +167,13 @@ export default defineComponent({
       type: Object as PropType<WalineComment | null>,
       default: null,
     },
+    edit: {
+      type: Object as PropType<WalineComment | null>,
+      default: null,
+    }
   },
 
-  emits: ['submit', 'reply', 'like', 'delete', 'status', 'sticky'],
+  emits: ['submit', 'reply', 'like', 'delete', 'status', 'sticky', 'edit'],
 
   setup(props) {
     const config = inject<ComputedRef<WalineConfig>>(
@@ -181,16 +201,22 @@ export default defineComponent({
         props.comment.user_id &&
         userInfo.value.objectId === props.comment.user_id
     );
+    console.log('lizheming:', props.comment.user_id, userInfo.value.objectId, isOwner.value);
 
     const isReplyingCurrent = computed(
       () => props.comment.objectId === props.reply?.objectId
     );
 
+    const isEditingCurrent = computed(
+      () => props.comment.objectId === props.edit?.objectId
+    )
+
     return {
       config,
       locale,
 
       isReplyingCurrent,
+      isEditingCurrent,
       link,
       like,
       time,

package/src/components/Icons.ts

@@ -102,6 +102,16 @@ export const ReplyIcon: FunctionalComponent = () =>
     })
   );
 
+export const EditIcon: FunctionalComponent = () => 
+  h(
+    'svg', 
+    { viewBox: '0 0 1024 1024', width: '24', height: '24'},
+    h('path', {
+      d: 'M813.039 318.772L480.53 651.278H360.718V531.463L693.227 198.961C697.904 194.284 704.027 192 710.157 192C716.302 192 722.436 194.284 727.114 198.961L813.039 284.88C817.72 289.561 820 295.684 820 301.825C820 307.95 817.72 314.093 813.039 318.772ZM710.172 261.888L420.624 551.431V591.376H460.561L750.109 301.825L710.172 261.888ZM490.517 291.845H240.906V771.09H720.156V521.479C720.156 504.947 733.559 491.529 750.109 491.529C766.653 491.529 780.063 504.947 780.063 521.479V791.059C780.063 813.118 762.18 831 740.125 831H220.937C198.882 831 181 813.118 181 791.059V271.872C181 249.817 198.882 231.935 220.937 231.935H490.517C507.06 231.935 520.47 245.352 520.47 261.888C520.47 278.424 507.06 291.845 490.517 291.845Z',
+      fill: 'currentColor',
+    })
+  );
+
 export const VerifiedIcon: FunctionalComponent = () =>
   h(
     'svg',

package/src/components/Waline.vue

@@ -25,7 +25,9 @@
         :root-id="comment.objectId"
         :comment="comment"
         :reply="reply"
+        :edit="edit"
         @reply="onReply"
+        @edit="onEdit"
         @submit="onSubmit"
         @status="onStatusChange"
         @delete="onDelete"
@@ -263,6 +265,7 @@ export default defineComponent({
 
     const data = ref<WalineComment[]>([]);
     const reply = ref<WalineComment | null>(null);
+    const edit = ref<WalineComment | null>(null);
 
     const darkmodeStyle = computed(() => getDarkStyle(config.value.dark));
 
@@ -326,8 +329,15 @@ export default defineComponent({
       reply.value = comment;
     };
 
+    const onEdit = (comment: WalineComment | null): void => {
+      edit.value = comment;
+    };
+
     const onSubmit = (comment: WalineComment): void => {
-      if (comment.rid) {
+      if (edit.value) {
+        edit.value.comment = comment.comment;
+        edit.value.orig = comment.orig;
+      } else if (comment.rid) {
         const repliedComment = data.value.find(
           ({ objectId }) => objectId === comment.rid
         );
@@ -456,6 +466,7 @@ export default defineComponent({
       sortByItems,
       data,
       reply,
+      edit,
 
       loadMore,
       refresh,
@@ -466,6 +477,7 @@ export default defineComponent({
       onDelete,
       onSticky,
       onLike,
+      onEdit,
 
       version: VERSION,
     };

package/src/styles/card.scss

@@ -118,10 +118,6 @@
       font-size: var(--waline-info-font-size);
       line-height: 1.5;
 
-      @media (max-width: 520px) {
-        display: none;
-      }
-
       &:empty {
         display: none;
       }
@@ -134,7 +130,8 @@
 
   .wl-delete,
   .wl-like,
-  .wl-reply {
+  .wl-reply,
+  .wl-edit {
     display: inline-flex;
     align-items: center;
 

package/src/typings/comment.ts

@@ -40,6 +40,11 @@ export interface WalineCommentData {
    */
   at?: string;
 
+  /**
+   * edit comment id
+   */
+  eid?: string;
+
   /**
    * Comment link
    */
@@ -80,4 +85,5 @@ export interface WalineComment extends Exclude<WalineCommentData, 'ua'> {
   user_id?: string | number;
   status?: WalineCommentStatus;
   like?: number;
+  orig?: string;
 }

package/src/utils/fetch.ts

@@ -146,6 +146,14 @@ export const postComment = ({
 
   if (token) headers.Authorization = `Bearer ${token}`;
 
+  if (comment.eid) {
+    return fetch(`${serverURL}/comment/${comment.eid}?lang=${lang}`, {
+      method: 'PUT',
+      headers,
+      body: JSON.stringify(comment),
+    }).then((resp) => resp.json() as Promise<PostCommentResponse>);
+  }
+
   return fetch(`${serverURL}/comment?lang=${lang}`, {
     method: 'POST',
     headers,