@waline/client 2.15.0 → 2.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.15.0",
+  "version": "2.15.1",
   "description": "client for waline comment system",
   "keywords": [
     "valine",

package/src/components/CommentBox.vue

@@ -207,6 +207,7 @@
           />
 
           <ImageWall
+            v-if="searchResults.list.length"
             :items="searchResults.list"
             :column-width="200"
             :gap="6"
@@ -313,10 +314,10 @@ import { addComment, login, updateComment, UserInfo } from '../api/index.js';
 import {
   useEditor,
   useReCaptcha,
+  useTurnstile,
   useUserInfo,
   useUserMeta,
 } from '../composables/index.js';
-import { useTurnstile } from '../composables/turnstile';
 import {
   type WalineComment,
   type WalineCommentData,
@@ -563,7 +564,9 @@ const submitComment = async (): Promise<void> => {
 
   try {
     if (recaptchaV3Key)
-      comment.recaptchaV3 = await useReCaptcha(recaptchaV3Key).execute('social');
+      comment.recaptchaV3 = await useReCaptcha(recaptchaV3Key).execute(
+        'social'
+      );
 
     if (turnstileKey)
       comment.turnstile = await useTurnstile(turnstileKey).execute('social');

package/src/composables/index.ts

@@ -2,4 +2,5 @@ export * from './inputs';
 export * from './like';
 export * from './reaction';
 export * from './recaptchaV3';
+export * from './turnstile';
 export * from './userInfo';

package/src/composables/turnstile.ts

@@ -1,3 +1,5 @@
+import { useScriptTag } from '@vueuse/core';
+
 interface TurnstileOptions {
   sitekey: string;
   action?: string;
@@ -19,61 +21,29 @@ interface Turnstile {
   execute: (action: string) => Promise<string>;
 }
 
-interface LoadScriptParameters {
-  src: string;
-  async?: boolean;
-  defer?: boolean;
-}
-
-const isBrowser =
-  typeof window !== 'undefined' && typeof window.document !== 'undefined';
-
-async function loadScript(
-  options: LoadScriptParameters
-): Promise<Event | undefined> {
-  if (!isBrowser) {
-    return Promise.resolve(undefined);
-  }
-
-  const el = document.createElement('script');
-
-  el.async = Boolean(options.async);
-  el.defer = Boolean(options.defer);
-
-  return new Promise((resolve, reject) => {
-    el.onload = resolve;
-    el.onerror = reject;
-    el.src = options.src;
-
-    document.head.appendChild(el);
-  });
-}
-
-const turnstileScriptPromise = loadScript({
-  src: 'https://challenges.cloudflare.com/turnstile/v0/api.js',
-  async: false,
-});
-
 export const useTurnstile = (key: string): Turnstile => {
-  async function execute(action: string): Promise<string> {
-    await turnstileScriptPromise;
-    const turnstile = window?.turnstile;
-
-    return new Promise((resolve) => {
-      const options: TurnstileOptions = {
-        sitekey: key,
-        action,
-        size: 'compact',
-        callback(token: string): void {
-          resolve(token);
-        },
-      };
-
-      turnstile?.ready(() =>
-        turnstile?.render('.wl-captcha-container', options)
+  const execute = (action: string): Promise<string> =>
+    new Promise((resolve) => {
+      useScriptTag(
+        'https://challenges.cloudflare.com/turnstile/v0/api.js',
+        () => {
+          const turnstile = window?.turnstile;
+
+          const options: TurnstileOptions = {
+            sitekey: key,
+            action,
+            size: 'compact',
+            callback(token: string): void {
+              resolve(token);
+            },
+          };
+
+          turnstile?.ready(() =>
+            turnstile?.render('.wl-captcha-container', options)
+          );
+        }
       );
     });
-  }
 
   return { execute };
 };