@waline/client 2.14.0 → 2.14.2

package/src/components/CommentBox.vue

@@ -5,7 +5,12 @@
       class="wl-login-info"
     >
       <div class="wl-avatar">
-        <button class="wl-logout-btn" :title="locale.logout" @click="onLogout">
+        <button
+          type="submit"
+          class="wl-logout-btn"
+          :title="locale.logout"
+          @click="onLogout"
+        >
           <CloseIcon :size="14" />
         </button>
 
@@ -19,6 +24,7 @@
           <img :src="userInfo.avatar" alt="avatar" />
         </a>
       </div>
+
       <a
         href="#"
         class="wl-login-nick"
@@ -32,7 +38,8 @@
     <div class="wl-panel">
       <div
         v-if="config.login !== 'force' && config.meta.length && !isLogin"
-        :class="['wl-header', `item${config.meta.length}`]"
+        class="wl-header"
+        :class="`item${config.meta.length}`"
       >
         <div v-for="kind in config.meta" :key="kind" class="wl-header-item">
           <label
@@ -44,6 +51,7 @@
                 : `(${locale.optional})`)
             "
           />
+
           <input
             :id="`wl-${kind}`"
             :ref="
@@ -52,7 +60,8 @@
               }
             "
             v-model="userMeta[kind]"
-            :class="['wl-input', `wl-${kind}`]"
+            class="wl-input"
+            :class="`wl-${kind}`"
             :name="kind"
             :type="kind === 'mail' ? 'email' : 'text'"
           />
@@ -72,6 +81,7 @@
 
       <div v-show="showPreview" class="wl-preview">
         <hr />
+
         <h4>{{ locale.preview }}:</h4>
         <!-- eslint-disable-next-line vue/no-v-html -->
         <div class="wl-content" v-html="previewText" />
@@ -85,7 +95,7 @@
             aria-label="Markdown is supported"
             class="wl-action"
             target="_blank"
-            rel="noreferrer"
+            rel="noopener noreferrer"
           >
             <MarkdownIcon />
           </a>
@@ -93,6 +103,7 @@
           <button
             v-show="emoji.tabs.length"
             ref="emojiButtonRef"
+            type="button"
             class="wl-action"
             :class="{ active: showEmoji }"
             :title="locale.emoji"
@@ -104,6 +115,7 @@
           <button
             v-if="config.search"
             ref="gifButtonRef"
+            type="button"
             class="wl-action"
             :class="{ active: showGif }"
             :title="locale.gif"
@@ -131,6 +143,7 @@
           </label>
 
           <button
+            type="button"
             class="wl-action"
             :class="{ active: showPreview }"
             :title="locale.preview"
@@ -157,6 +170,7 @@
 
           <button
             v-if="config.login !== 'disable' && !isLogin"
+            type="button"
             class="wl-btn"
             @click="onLogin"
             v-text="locale.login"
@@ -164,12 +178,14 @@
 
           <button
             v-if="config.login !== 'force' || isLogin"
-            class="wl-btn primary"
+            type="submit"
+            class="primary wl-btn"
             title="Cmd|Ctrl + Enter"
             :disabled="isSubmitting"
             @click="submitComment"
           >
             <LoadingIcon v-if="isSubmitting" :size="16" />
+
             <template v-else>
               {{ locale.submit }}
             </template>
@@ -189,7 +205,7 @@
           />
 
           <ImageWall
-            :items="gifData.list"
+            :items="searchResults.list"
             :column-width="200"
             :gap="6"
             @insert="insert($event)"
@@ -197,10 +213,11 @@
           >
           </ImageWall>
 
-          <div v-if="gifData.loading" class="wl-loading">
+          <div v-if="searchResults.loading" class="wl-loading">
             <LoadingIcon :size="30" />
           </div>
         </div>
+
         <div
           ref="emojiPopupRef"
           class="wl-emoji-popup"
@@ -214,6 +231,7 @@
               <button
                 v-for="key in emojiItem.items"
                 :key="key"
+                type="button"
                 :title="key"
                 @click="insert(`:${key}:`)"
               >
@@ -228,10 +246,12 @@
               </button>
             </div>
           </template>
+
           <div v-if="emoji.tabs.length > 1" class="wl-tabs">
             <button
               v-for="(emojiItem, index) in emoji.tabs"
               :key="emojiItem.name"
+              type="button"
               class="wl-tab"
               :class="{ active: emojiTabIndex === index }"
               @click="emojiTabIndex = index"
@@ -252,26 +272,24 @@
 
     <button
       v-if="replyId || edit?.objectId"
+      type="button"
       class="wl-close"
       :title="locale.cancelReply"
-      @click="$emit(replyId ? 'cancel-reply' : 'cancel-edit')"
+      @click="$emit(replyId ? 'cancelReply' : 'cancelEdit')"
     >
       <CloseIcon :size="24" />
     </button>
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useDebounceFn } from '@vueuse/core';
-import { useReCaptcha } from '../composables';
 import autosize from 'autosize';
 import {
   computed,
-  defineComponent,
   inject,
   onMounted,
   onUnmounted,
-  PropType,
   reactive,
   ref,
   watch,
@@ -280,22 +298,27 @@ import {
 import {
   CloseIcon,
   EmojiIcon,
+  GifIcon,
   ImageIcon,
+  LoadingIcon,
   MarkdownIcon,
   PreviewIcon,
-  LoadingIcon,
-  GifIcon,
 } from './Icons';
 import ImageWall from './ImageWall.vue';
-import { addComment, login, updateComment } from '../api';
-import { useEditor, useUserMeta, useUserInfo } from '../composables';
+import { addComment, login, updateComment, UserInfo } from '../api/index.js';
+import {
+  useEditor,
+  useReCaptcha,
+  useUserInfo,
+  useUserMeta,
+} from '../composables/index.js';
 import {
   getEmojis,
-  getImagefromDataTransfer,
+  getImageFromDataTransfer,
   getWordNumber,
   parseEmoji,
   parseMarkdown,
-} from '../utils';
+} from '../utils/index.js';
 
 import type { ComputedRef, DeepReadonly } from 'vue';
 import type {
@@ -304,510 +327,450 @@ import type {
   WalineImageUploader,
   WalineSearchOptions,
   WalineSearchResult,
-} from '../typings';
-import type { WalineConfig, WalineEmojiConfig } from '../utils';
-
-export default defineComponent({
-  name: 'CommentBox',
-
-  components: {
-    CloseIcon,
-    EmojiIcon,
-    ImageIcon,
-    ImageWall,
-    MarkdownIcon,
-    PreviewIcon,
-    LoadingIcon,
-    GifIcon,
-  },
-
-  props: {
-    rootId: {
-      type: String,
-      default: '',
-    },
-    replyId: {
-      type: String,
-      default: '',
-    },
-    replyUser: {
-      type: String,
-      default: '',
-    },
-    edit: {
-      type: Object as PropType<WalineComment | null>,
-      default: null,
-    },
-  },
-
-  emits: ['submit', 'cancel-reply', 'cancel-edit'],
-
-  setup(props, { emit }) {
-    const config = inject<ComputedRef<WalineConfig>>('config')!;
-
-    const editor = useEditor();
-    const userMeta = useUserMeta();
-    const userInfo = useUserInfo();
-
-    const inputRefs = ref<Record<string, HTMLInputElement>>({});
-    const editorRef = ref<HTMLTextAreaElement | null>(null);
-    const imageUploadRef = ref<HTMLInputElement | null>(null);
-    const emojiButtonRef = ref<HTMLDivElement | null>(null);
-    const emojiPopupRef = ref<HTMLDivElement | null>(null);
-    const gifButtonRef = ref<HTMLDivElement | null>(null);
-    const gifPopupRef = ref<HTMLDivElement | null>(null);
-    const gifSearchInputRef = ref<HTMLInputElement | null>(null);
-
-    const emoji = ref<DeepReadonly<WalineEmojiConfig>>({ tabs: [], map: {} });
-    const emojiTabIndex = ref(0);
-    const showEmoji = ref(false);
-    const showGif = ref(false);
-    const showPreview = ref(false);
-    const previewText = ref('');
-    const wordNumber = ref(0);
-
-    const searchResults = reactive({
-      loading: true,
-      list: [] as WalineSearchResult,
-    });
-
-    const wordLimit = ref(0);
-    const isWordNumberLegal = ref(false);
-
-    const content = ref('');
-
-    const isSubmitting = ref(false);
-
-    const locale = computed(() => config.value.locale);
-
-    const isLogin = computed(() => Boolean(userInfo.value?.token));
-
-    const canUploadImage = computed(() => config.value.imageUploader !== false);
-
-    const insert = (content: string): void => {
-      const textArea = editorRef.value!;
-      const startPosition = textArea.selectionStart;
-      const endPosition = textArea.selectionEnd || 0;
-      const scrollTop = textArea.scrollTop;
-
-      editor.value =
-        textArea.value.substring(0, startPosition) +
-        content +
-        textArea.value.substring(endPosition, textArea.value.length);
-      textArea.focus();
-      textArea.selectionStart = startPosition + content.length;
-      textArea.selectionEnd = startPosition + content.length;
-      textArea.scrollTop = scrollTop;
-    };
-
-    const onKeyDown = (event: KeyboardEvent): void => {
-      const key = event.key;
-
-      // Shortcut key
-      if ((event.ctrlKey || event.metaKey) && key === 'Enter') submitComment();
-    };
-
-    const uploadImage = (file: File): Promise<void> => {
-      const uploadText = `![${config.value.locale.uploading} ${file.name}]()`;
-
-      insert(uploadText);
-
-      return Promise.resolve()
-        .then(() => (config.value.imageUploader as WalineImageUploader)(file))
-        .then((url) => {
-          editor.value = editor.value.replace(
-            uploadText,
-            `\r\n![${file.name}](${url})`
-          );
-        })
-        .catch((e) => {
-          alert(e.message);
-          editor.value = editor.value.replace(uploadText, '');
-        });
-    };
-
-    const onDrop = (event: DragEvent): void => {
-      if (event.dataTransfer?.items) {
-        const file = getImagefromDataTransfer(event.dataTransfer.items);
-
-        if (file && canUploadImage.value) {
-          uploadImage(file);
-          event.preventDefault();
-        }
-      }
-    };
-
-    const onPaste = (event: ClipboardEvent): void => {
-      if (event.clipboardData) {
-        const file = getImagefromDataTransfer(event.clipboardData.items);
-
-        if (file && canUploadImage.value) uploadImage(file);
-      }
-    };
-
-    const onChange = (): void => {
-      const inputElement = imageUploadRef.value!;
-
-      if (inputElement.files && canUploadImage.value)
-        uploadImage(inputElement.files[0]).then(() => {
-          // clear input so a same image can be uploaded later
-          inputElement.value = '';
-        });
-    };
-
-    const submitComment = async (): Promise<void> => {
-      const { serverURL, lang, login, wordLimit, requiredMeta } = config.value;
-
-      let token = '';
-
-      if (config.value.recaptchaV3Key)
-        token = await useReCaptcha(config.value.recaptchaV3Key).execute(
-          'social'
-        );
-
-      const comment: WalineCommentData = {
-        comment: content.value,
-        nick: userMeta.value.nick,
-        mail: userMeta.value.mail,
-        link: userMeta.value.link,
-        ua: navigator.userAgent,
-        url: config.value.path,
-        recaptchaV3: token,
-      };
-
-      if (userInfo.value?.token) {
-        // login user
-
-        comment.nick = userInfo.value.display_name;
-        comment.mail = userInfo.value.email;
-        comment.link = userInfo.value.url;
-      } else {
-        if (login === 'force') return;
-
-        // check nick
-        if (requiredMeta.indexOf('nick') > -1 && !comment.nick) {
-          inputRefs.value.nick?.focus();
-
-          return alert(locale.value.nickError);
-        }
-
-        // check mail
-        if (
-          (requiredMeta.indexOf('mail') > -1 && !comment.mail) ||
-          (comment.mail &&
-            !/^\w(?:[\w._-]*\w)?@(?:\w(?:[\w-]*\w)?\.)*\w+$/.exec(comment.mail))
-        ) {
-          inputRefs.value.mail?.focus();
+} from '../typings/index.js';
+import type { WalineConfig, WalineEmojiConfig } from '../utils/index.js';
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Current comment to be edited
+     */
+    edit?: WalineComment | null;
+    /**
+     * Root comment id
+     */
+    rootId?: string;
+    /**
+     * Comment id to be replied
+     */
+    replyId?: string;
+    /**
+     * User name to be replied
+     */
+    replyUser?: string;
+  }>(),
+  {
+    edit: null,
+    rootId: '',
+    replyId: '',
+    replyUser: '',
+  }
+);
+
+const emit = defineEmits<{
+  (event: 'log'): void;
+  (event: 'cancelEdit'): void;
+  (event: 'cancelReply'): void;
+  (event: 'submit', comment: WalineComment): void;
+}>();
+
+defineExpose();
+
+const config = inject<ComputedRef<WalineConfig>>('config')!;
+
+const editor = useEditor();
+const userMeta = useUserMeta();
+const userInfo = useUserInfo();
+
+const inputRefs = ref<Record<string, HTMLInputElement>>({});
+const editorRef = ref<HTMLTextAreaElement | null>(null);
+const imageUploadRef = ref<HTMLInputElement | null>(null);
+const emojiButtonRef = ref<HTMLDivElement | null>(null);
+const emojiPopupRef = ref<HTMLDivElement | null>(null);
+const gifButtonRef = ref<HTMLDivElement | null>(null);
+const gifPopupRef = ref<HTMLDivElement | null>(null);
+const gifSearchInputRef = ref<HTMLInputElement | null>(null);
+
+const emoji = ref<DeepReadonly<WalineEmojiConfig>>({ tabs: [], map: {} });
+const emojiTabIndex = ref(0);
+const showEmoji = ref(false);
+const showGif = ref(false);
+const showPreview = ref(false);
+const previewText = ref('');
+const wordNumber = ref(0);
+
+const searchResults = reactive({
+  loading: true,
+  list: [] as WalineSearchResult,
+});
 
-          return alert(locale.value.mailError);
-        }
+const wordLimit = ref(0);
+const isWordNumberLegal = ref(false);
 
-        // check comment
-        if (!comment.comment) {
-          editorRef.value?.focus();
+const content = ref('');
 
-          return;
-        }
+const isSubmitting = ref(false);
 
-        if (!comment.nick) comment.nick = locale.value.anonymous;
-      }
+const locale = computed(() => config.value.locale);
 
-      if (!isWordNumberLegal.value)
-        return alert(
-          locale.value.wordHint
-            .replace('$0', (wordLimit as [number, number])[0].toString())
-            .replace('$1', (wordLimit as [number, number])[1].toString())
-            .replace('$2', wordNumber.value.toString())
-        );
+const isLogin = computed(() => Boolean(userInfo.value?.token));
 
-      comment.comment = parseEmoji(comment.comment, emoji.value.map);
+const canUploadImage = computed(() => config.value.imageUploader !== false);
 
-      if (props.replyId && props.rootId) {
-        comment.pid = props.replyId;
-        comment.rid = props.rootId;
-        comment.at = props.replyUser;
-      }
+const insert = (content: string): void => {
+  const textArea = editorRef.value!;
+  const startPosition = textArea.selectionStart;
+  const endPosition = textArea.selectionEnd || 0;
+  const scrollTop = textArea.scrollTop;
 
-      isSubmitting.value = true;
+  editor.value =
+    textArea.value.substring(0, startPosition) +
+    content +
+    textArea.value.substring(endPosition, textArea.value.length);
+  textArea.focus();
+  textArea.selectionStart = startPosition + content.length;
+  textArea.selectionEnd = startPosition + content.length;
+  textArea.scrollTop = scrollTop;
+};
 
-      const options = {
-        serverURL,
-        lang,
-        token: userInfo.value?.token,
-        comment,
-      };
+const onKeyDown = (event: KeyboardEvent): void => {
+  const key = event.key;
 
-      (props.edit
-        ? updateComment({ objectId: props.edit.objectId, ...options })
-        : addComment(options)
-      )
-        .then((resp) => {
-          isSubmitting.value = false;
+  // Shortcut key
+  if ((event.ctrlKey || event.metaKey) && key === 'Enter') void submitComment();
+};
 
-          if (resp.errmsg) return alert(resp.errmsg);
+const uploadImage = (file: File): Promise<void> => {
+  const uploadText = `![${config.value.locale.uploading} ${file.name}]()`;
 
-          emit('submit', resp.data!);
+  insert(uploadText);
 
-          editor.value = '';
-
-          previewText.value = '';
-
-          if (props.replyId) emit('cancel-reply');
-          if (props.edit?.objectId) emit('cancel-edit');
-        })
-        .catch((err: TypeError) => {
-          isSubmitting.value = false;
+  return Promise.resolve()
+    .then(() => (config.value.imageUploader as WalineImageUploader)(file))
+    .then((url) => {
+      editor.value = editor.value.replace(
+        uploadText,
+        `\r\n![${file.name}](${url})`
+      );
+    })
+    .catch((err: Error) => {
+      alert(err.message);
+      editor.value = editor.value.replace(uploadText, '');
+    });
+};
 
-          alert(err.message);
-        });
-    };
+const onDrop = (event: DragEvent): void => {
+  if (event.dataTransfer?.items) {
+    const file = getImageFromDataTransfer(event.dataTransfer.items);
 
-    const onLogin = (event: Event): void => {
+    if (file && canUploadImage.value) {
+      void uploadImage(file);
       event.preventDefault();
-      const { lang, serverURL } = config.value;
-
-      login({
-        serverURL,
-        lang,
-      }).then((data) => {
-        userInfo.value = data;
-        (data.remember ? localStorage : sessionStorage).setItem(
-          'WALINE_USER',
-          JSON.stringify(data)
-        );
-      });
-    };
+    }
+  }
+};
 
-    const onLogout = (): void => {
-      userInfo.value = {};
-      localStorage.setItem('WALINE_USER', 'null');
-      sessionStorage.setItem('WALINE_USER', 'null');
-    };
+const onPaste = (event: ClipboardEvent): void => {
+  if (event.clipboardData) {
+    const file = getImageFromDataTransfer(event.clipboardData.items);
 
-    const onProfile = (event: Event): void => {
-      event.preventDefault();
+    if (file && canUploadImage.value) void uploadImage(file);
+  }
+};
 
-      const { lang, serverURL } = config.value;
+const onChange = (): void => {
+  const inputElement = imageUploadRef.value!;
 
-      const width = 800;
-      const height = 800;
-      const left = (window.innerWidth - width) / 2;
-      const top = (window.innerHeight - height) / 2;
-      const query = new URLSearchParams({
-        lng: lang,
-        token: userInfo.value!.token,
-      });
-      const handler = window.open(
-        `${serverURL}/ui/profile?${query.toString()}`,
-        '_blank',
-        `width=${width},height=${height},left=${left},top=${top},scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no`
-      );
-
-      handler?.postMessage({ type: 'TOKEN', data: userInfo.value!.token }, '*');
-    };
-
-    const popupHandler = (event: MouseEvent): void => {
-      if (
-        !emojiButtonRef.value!.contains(event.target as Node) &&
-        !emojiPopupRef.value!.contains(event.target as Node)
-      )
-        showEmoji.value = false;
-
-      if (
-        !gifButtonRef.value!.contains(event.target as Node) &&
-        !gifPopupRef.value!.contains(event.target as Node)
-      )
-        showGif.value = false;
-    };
-
-    const onImageWallScroll = async (event: Event): Promise<void> => {
-      const { scrollTop, clientHeight, scrollHeight } =
-        event.target as HTMLDivElement;
-      const percent = (clientHeight + scrollTop) / scrollHeight;
-      const searchOptions = config.value.search as WalineSearchOptions;
-      const keyword = gifSearchInputRef.value?.value || '';
-
-      if (percent < 0.9 || searchResults.loading) return;
-
-      searchResults.loading = true;
-
-      searchResults.list = [
-        ...searchResults.list,
-        ...(searchOptions.more && searchResults.list.length
-          ? await searchOptions.more(keyword, searchResults.list.length)
-          : await searchOptions.search(keyword)),
-      ];
-
-      searchResults.loading = false;
-
-      setTimeout(() => {
-        (event.target as HTMLDivElement).scrollTop = scrollTop;
-      }, 50);
-    };
-
-    const onGifSearch = useDebounceFn((event: Event) => {
-      searchResults.list = [];
-      onImageWallScroll(event);
-    }, 300);
-
-    // update wordNumber
-    watch(
-      [config, wordNumber],
-      ([config, wordNumber]) => {
-        const { wordLimit: limit } = config;
-
-        if (limit) {
-          if (wordNumber < limit[0] && limit[0] !== 0) {
-            wordLimit.value = limit[0];
-            isWordNumberLegal.value = false;
-          } else if (wordNumber > limit[1]) {
-            wordLimit.value = limit[1];
-            isWordNumberLegal.value = false;
-          } else {
-            wordLimit.value = limit[1];
-            isWordNumberLegal.value = true;
-          }
-        } else {
-          wordLimit.value = 0;
-          isWordNumberLegal.value = true;
-        }
-      },
-      { immediate: true }
+  if (inputElement.files && canUploadImage.value)
+    void uploadImage(inputElement.files[0]).then(() => {
+      // clear input so a same image can be uploaded later
+      inputElement.value = '';
+    });
+};
+
+const submitComment = async (): Promise<void> => {
+  const { serverURL, lang, login, wordLimit, requiredMeta } = config.value;
+
+  let token = '';
+
+  if (config.value.recaptchaV3Key)
+    token = await useReCaptcha(config.value.recaptchaV3Key).execute('social');
+
+  const comment: WalineCommentData = {
+    comment: content.value,
+    nick: userMeta.value.nick,
+    mail: userMeta.value.mail,
+    link: userMeta.value.link,
+    ua: navigator.userAgent,
+    url: config.value.path,
+    recaptchaV3: token,
+  };
+
+  if (userInfo.value?.token) {
+    // login user
+
+    comment.nick = userInfo.value.display_name;
+    comment.mail = userInfo.value.email;
+    comment.link = userInfo.value.url;
+  } else {
+    if (login === 'force') return;
+
+    // check nick
+    if (requiredMeta.indexOf('nick') > -1 && !comment.nick) {
+      inputRefs.value.nick?.focus();
+
+      return alert(locale.value.nickError);
+    }
+
+    // check mail
+    if (
+      (requiredMeta.indexOf('mail') > -1 && !comment.mail) ||
+      (comment.mail &&
+        !/^\w(?:[\w._-]*\w)?@(?:\w(?:[\w-]*\w)?\.)*\w+$/.exec(comment.mail))
+    ) {
+      inputRefs.value.mail?.focus();
+
+      return alert(locale.value.mailError);
+    }
+
+    // check comment
+    if (!comment.comment) {
+      editorRef.value?.focus();
+
+      return;
+    }
+
+    if (!comment.nick) comment.nick = locale.value.anonymous;
+  }
+
+  if (!isWordNumberLegal.value)
+    return alert(
+      locale.value.wordHint
+        .replace('$0', (wordLimit as [number, number])[0].toString())
+        .replace('$1', (wordLimit as [number, number])[1].toString())
+        .replace('$2', wordNumber.value.toString())
     );
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const onMessageReceive = ({ data }: any): void => {
-      if (!data || data.type !== 'profile') return;
+  comment.comment = parseEmoji(comment.comment, emoji.value.map);
 
-      userInfo.value = { ...userInfo.value, ...data.data };
+  if (props.replyId && props.rootId) {
+    comment.pid = props.replyId;
+    comment.rid = props.rootId;
+    comment.at = props.replyUser;
+  }
 
-      [localStorage, sessionStorage]
-        .filter((store) => store.getItem('WALINE_USER'))
-        .forEach((store) =>
-          store.setItem('WALINE_USER', JSON.stringify(userInfo))
-        );
-    };
+  isSubmitting.value = true;
 
-    onMounted(() => {
-      document.body.addEventListener('click', popupHandler);
-      window.addEventListener('message', onMessageReceive);
-      if (props.edit?.objectId) {
-        editor.value = props.edit.orig;
-      }
-
-      // watch gif
-      watch(showGif, async (showGif) => {
-        if (!showGif) return;
+  const options = {
+    serverURL,
+    lang,
+    token: userInfo.value?.token,
+    comment,
+  };
 
-        const searchOptions = config.value.search as WalineSearchOptions;
+  void (
+    props.edit
+      ? updateComment({ objectId: props.edit.objectId, ...options })
+      : addComment(options)
+  )
+    .then((resp) => {
+      isSubmitting.value = false;
 
-        // clear input
-        if (gifSearchInputRef.value) gifSearchInputRef.value.value = '';
+      if (resp.errmsg) return alert(resp.errmsg);
 
-        searchResults.loading = true;
+      emit('submit', resp.data!);
 
-        searchResults.list = searchOptions.default
-          ? await searchOptions.default()
-          : await searchOptions.search('');
+      editor.value = '';
 
-        searchResults.loading = false;
-      });
+      previewText.value = '';
 
-      // watch editor
-      watch(
-        () => editor.value,
-        (value) => {
-          const { highlighter, texRenderer } = config.value;
-
-          content.value = value;
-          previewText.value = parseMarkdown(value, {
-            emojiMap: emoji.value.map,
-            highlighter,
-            texRenderer,
-          });
-          wordNumber.value = getWordNumber(value);
-
-          if (value) autosize(editorRef.value!);
-          else autosize.destroy(editorRef.value!);
-        },
-        { immediate: true }
-      );
+      if (props.replyId) emit('cancelReply');
+      if (props.edit?.objectId) emit('cancelEdit');
+    })
+    .catch((err: TypeError) => {
+      isSubmitting.value = false;
 
-      // watch emoji value change
-      watch(
-        () => config.value.emoji,
-        (emojiConfig) =>
-          getEmojis(Array.isArray(emojiConfig) ? emojiConfig : []).then(
-            (config) => {
-              emoji.value = config;
-            }
-          ),
-        { immediate: true }
-      );
+      alert(err.message);
     });
+};
+
+const onLogin = (event: Event): void => {
+  event.preventDefault();
+  const { lang, serverURL } = config.value;
+
+  void login({
+    serverURL,
+    lang,
+  }).then((data) => {
+    userInfo.value = data;
+    (data.remember ? localStorage : sessionStorage).setItem(
+      'WALINE_USER',
+      JSON.stringify(data)
+    );
+    emit('log');
+  });
+};
+
+const onLogout = (): void => {
+  userInfo.value = {};
+  localStorage.setItem('WALINE_USER', 'null');
+  sessionStorage.setItem('WALINE_USER', 'null');
+  emit('log');
+};
+
+const onProfile = (event: Event): void => {
+  event.preventDefault();
+
+  const { lang, serverURL } = config.value;
+
+  const width = 800;
+  const height = 800;
+  const left = (window.innerWidth - width) / 2;
+  const top = (window.innerHeight - height) / 2;
+  const query = new URLSearchParams({
+    lng: lang,
+    token: userInfo.value.token,
+  });
+  const handler = window.open(
+    `${serverURL}/ui/profile?${query.toString()}`,
+    '_blank',
+    `width=${width},height=${height},left=${left},top=${top},scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no`
+  );
+
+  handler?.postMessage({ type: 'TOKEN', data: userInfo.value.token }, '*');
+};
+
+const popupHandler = (event: MouseEvent): void => {
+  if (
+    !emojiButtonRef.value?.contains(event.target as Node) &&
+    !emojiPopupRef.value?.contains(event.target as Node)
+  )
+    showEmoji.value = false;
+
+  if (
+    !gifButtonRef.value?.contains(event.target as Node) &&
+    !gifPopupRef.value?.contains(event.target as Node)
+  )
+    showGif.value = false;
+};
+
+const onImageWallScroll = async (event: Event): Promise<void> => {
+  const { scrollTop, clientHeight, scrollHeight } =
+    event.target as HTMLDivElement;
+  const percent = (clientHeight + scrollTop) / scrollHeight;
+  const searchOptions = config.value.search as WalineSearchOptions;
+  const keyword = gifSearchInputRef.value?.value || '';
+
+  if (percent < 0.9 || searchResults.loading) return;
+
+  searchResults.loading = true;
+
+  searchResults.list = [
+    ...searchResults.list,
+    ...(searchOptions.more && searchResults.list.length
+      ? await searchOptions.more(keyword, searchResults.list.length)
+      : await searchOptions.search(keyword)),
+  ];
+
+  searchResults.loading = false;
+
+  setTimeout(() => {
+    (event.target as HTMLDivElement).scrollTop = scrollTop;
+  }, 50);
+};
+
+const onGifSearch = useDebounceFn((event: Event) => {
+  searchResults.list = [];
+  void onImageWallScroll(event);
+}, 300);
+
+// update wordNumber
+watch(
+  [config, wordNumber],
+  ([config, wordNumber]) => {
+    const { wordLimit: limit } = config;
+
+    if (limit) {
+      if (wordNumber < limit[0] && limit[0] !== 0) {
+        wordLimit.value = limit[0];
+        isWordNumberLegal.value = false;
+      } else if (wordNumber > limit[1]) {
+        wordLimit.value = limit[1];
+        isWordNumberLegal.value = false;
+      } else {
+        wordLimit.value = limit[1];
+        isWordNumberLegal.value = true;
+      }
+    } else {
+      wordLimit.value = 0;
+      isWordNumberLegal.value = true;
+    }
+  },
+  { immediate: true }
+);
+
+const onMessageReceive = ({
+  data,
+}: {
+  data: { type: 'profile'; data: UserInfo };
+}): void => {
+  if (!data || data.type !== 'profile') return;
+
+  userInfo.value = { ...userInfo.value, ...data.data };
+
+  [localStorage, sessionStorage]
+    .filter((store) => store.getItem('WALINE_USER'))
+    .forEach((store) => store.setItem('WALINE_USER', JSON.stringify(userInfo)));
+};
+
+onMounted(() => {
+  document.body.addEventListener('click', popupHandler);
+  window.addEventListener('message', onMessageReceive);
+  if (props.edit?.objectId) {
+    editor.value = props.edit.orig;
+  }
+
+  // watch gif
+  watch(showGif, async (showGif) => {
+    if (!showGif) return;
+
+    const searchOptions = config.value.search as WalineSearchOptions;
+
+    // clear input
+    if (gifSearchInputRef.value) gifSearchInputRef.value.value = '';
+
+    searchResults.loading = true;
+
+    searchResults.list = searchOptions.default
+      ? await searchOptions.default()
+      : await searchOptions.search('');
+
+    searchResults.loading = false;
+  });
+
+  // watch editor
+  watch(
+    () => editor.value,
+    (value) => {
+      const { highlighter, texRenderer } = config.value;
+
+      content.value = value;
+      previewText.value = parseMarkdown(value, {
+        emojiMap: emoji.value.map,
+        highlighter,
+        texRenderer,
+      });
+      wordNumber.value = getWordNumber(value);
 
-    onUnmounted(() => {
-      document.body.removeEventListener('click', popupHandler);
-      window.removeEventListener('message', onMessageReceive);
-    });
+      if (value) autosize(editorRef.value!);
+      else autosize.destroy(editorRef.value!);
+    },
+    { immediate: true }
+  );
+
+  // watch emoji value change
+  watch(
+    () => config.value.emoji,
+    (emojiConfig) =>
+      getEmojis(emojiConfig).then((config) => {
+        emoji.value = config;
+      }),
+    { immediate: true }
+  );
+});
 
-    return {
-      // config
-      config,
-      locale,
-
-      // events
-      insert,
-      onChange,
-      onDrop,
-      onKeyDown,
-      onPaste,
-      onLogin,
-      onLogout,
-      onProfile,
-      submitComment,
-      onImageWallScroll,
-      onGifSearch,
-
-      isLogin,
-      userInfo,
-      isSubmitting,
-
-      // word
-      wordNumber,
-      wordLimit,
-      isWordNumberLegal,
-
-      // inputs
-      editor,
-      userMeta,
-
-      // emoji
-      emoji,
-      emojiTabIndex,
-      showEmoji,
-
-      // gif
-      gifData: searchResults,
-      showGif,
-
-      // image
-      canUploadImage,
-
-      // preview
-      previewText,
-      showPreview,
-
-      // ref
-      inputRefs,
-      editorRef,
-      emojiButtonRef,
-      emojiPopupRef,
-      gifButtonRef,
-      gifPopupRef,
-      imageUploadRef,
-      gifSearchInputRef,
-    };
-  },
+onUnmounted(() => {
+  document.body.removeEventListener('click', popupHandler);
+  window.removeEventListener('message', onMessageReceive);
 });
 </script>