@waline/client 2.5.0 → 2.6.1

package/src/styles/emoji.scss

@@ -1,118 +1,136 @@
-@mixin emoji() {
-  .wl-emoji-popup {
-    position: absolute;
-    top: 100%;
-    left: 1.25em;
-    z-index: 10;
-
-    max-width: 526px;
-    border: var(--waline-border);
-    border-radius: 6px;
-
-    background: var(--waline-bgcolor);
-    box-shadow: var(--waline-box-shadow);
-
-    opacity: 0;
-    visibility: hidden;
-
-    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
-    transform: scale(0.9, 0.9);
-    transform-origin: 0 0;
-
-    &.display {
-      opacity: 1;
-      visibility: visible;
-      transform: none;
-    }
+.wl-emoji-popup {
+  position: absolute;
+  top: 100%;
+  left: 1.25em;
+  z-index: 10;
+
+  max-width: 526px;
+  border: var(--waline-border);
+  border-radius: 6px;
+
+  background: var(--waline-bgcolor);
+  box-shadow: var(--waline-box-shadow);
+
+  opacity: 0;
+  visibility: hidden;
+
+  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
+  transform: scale(0.9, 0.9);
+  transform-origin: 0 0;
+
+  &.display {
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+  }
+
+  button {
+    display: inline-block;
+    vertical-align: middle;
+
+    width: 2em;
+    margin: 0.125em;
+    padding: 0;
+    border-width: 0;
 
-    button {
-      display: inline-block;
-      vertical-align: middle;
+    background: transparent;
 
-      width: 2em;
-      margin: 0.125em;
-      padding: 0;
-      border-width: 0;
+    font-size: inherit;
+    line-height: 2;
+    text-align: center;
 
-      background: transparent;
+    cursor: pointer;
 
-      font-size: inherit;
-      line-height: 2;
-      text-align: center;
+    &:hover {
+      background: var(--waline-bgcolor-hover);
+    }
+  }
+
+  .wl-emoji {
+    display: inline-block;
+    vertical-align: middle;
+    max-width: 1.5em;
+    max-height: 1.5em;
+  }
 
-      cursor: pointer;
+  .wl-tab-wrapper {
+    overflow-y: auto;
+    max-height: 145px;
+    padding: 0.5em;
 
-      &:hover {
-        background: var(--waline-bgcolor-hover);
-      }
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
     }
 
-    .wl-emoji {
-      display: inline-block;
-      vertical-align: middle;
-      max-width: 1.5em;
-      max-height: 1.5em;
+    &::-webkit-scrollbar-track-piece:vertical {
+      -webkit-border-radius: 6px;
+      border-radius: 6px;
+      background: rgb(0 0 0 / 10%);
     }
 
-    .wl-tab-wrapper {
-      overflow-y: auto;
-      max-height: 145px;
-      padding: 0.5em;
-
-      &::-webkit-scrollbar {
-        width: 6px;
-        height: 6px;
-      }
-
-      &::-webkit-scrollbar-track-piece:vertical {
-        -webkit-border-radius: 6px;
-        border-radius: 6px;
-        background: rgb(0 0 0 / 10%);
-      }
-
-      &::-webkit-scrollbar-thumb:vertical {
-        width: 6px;
-        -webkit-border-radius: 6px;
-        border-radius: 6px;
-        background: var(--waline-theme-color);
-      }
+    &::-webkit-scrollbar-thumb:vertical {
+      width: 6px;
+      -webkit-border-radius: 6px;
+      border-radius: 6px;
+      background: var(--waline-theme-color);
     }
+  }
+
+  .wl-tabs {
+    position: relative;
+    height: 2em;
+    padding: 0 6px 1px;
+    overflow-x: scroll;
+    white-space: nowrap;
+
+    &::before {
+      content: ' ';
+
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      z-index: 2;
 
-    .wl-tabs {
-      position: relative;
-      height: 2em;
-      padding: 0 6px 1px;
+      height: 1px;
 
-      &::before {
-        content: ' ';
+      background: var(--waline-border-color);
+    }
 
-        position: absolute;
-        top: 0;
-        right: 0;
-        left: 0;
-        z-index: 2;
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
 
-        height: 1px;
+    &::-webkit-scrollbar-track-piece:horizontal {
+      -webkit-border-radius: 6px;
+      border-radius: 6px;
+      background: rgb(0 0 0 / 10%);
+    }
 
-        background: var(--waline-border-color);
-      }
+    &::-webkit-scrollbar-thumb:horizontal {
+      height: 6px;
+      -webkit-border-radius: 6px;
+      border-radius: 6px;
+      background: var(--waline-theme-color);
     }
+  }
 
-    .wl-tab {
-      position: relative;
-      margin: 0;
-      padding: 0 0.5em;
+  .wl-tab {
+    position: relative;
+    margin: 0;
+    padding: 0 0.5em;
 
-      &.active {
-        z-index: 3;
+    &.active {
+      z-index: 3;
 
-        border: 1px solid var(--waline-border-color);
-        border-top-width: 0;
-        border-bottom-right-radius: 6px;
-        border-bottom-left-radius: 6px;
+      border: 1px solid var(--waline-border-color);
+      border-top-width: 0;
+      border-bottom-right-radius: 6px;
+      border-bottom-left-radius: 6px;
 
-        background: var(--waline-bgcolor);
-      }
+      background: var(--waline-bgcolor);
     }
   }
 }

package/src/styles/gif.scss

@@ -1,151 +1,70 @@
-@mixin gif() {
-  .wl-gif-popup {
-    position: absolute;
-    top: 100%;
-    left: 1.25em;
-    z-index: 10;
-
-    width: 436px;
-    padding: 12px 12px 4px;
-    border: var(--waline-border);
-    border-radius: 6px;
-
-    background: var(--waline-bgcolor);
-    box-shadow: var(--waline-box-shadow);
-
-    opacity: 0;
-    visibility: hidden;
-
-    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
-    transform: scale(0.9, 0.9);
-    transform-origin: 0 0;
-
-    &.display {
-      opacity: 1;
-      visibility: visible;
-      transform: none;
-    }
-
-    input {
-      box-sizing: border-box;
-
-      width: 100%;
-      margin-bottom: 10px;
-      padding: 3px 5px;
-      border: var(--waline-border);
-    }
-
-    img {
-      display: block;
-
-      box-sizing: border-box;
-
-      width: 100%;
-      border-width: 2px;
-      border-style: solid;
-      border-color: #fff;
-
-      cursor: pointer;
-
-      &:hover {
-        border-color: var(--waline-theme-color);
-        border-radius: 2px;
-      }
-    }
-
-    .wl-gif-waterfall {
-      overflow-y: auto;
-      max-height: 800px;
-    }
-
-    button {
-      display: inline-block;
-      vertical-align: middle;
-
-      width: 2em;
-      margin: 0.125em;
-      padding: 0;
-      border-width: 0;
-
-      background: transparent;
-
-      font-size: inherit;
-      line-height: 2;
-      text-align: center;
-
-      cursor: pointer;
-
-      &:hover {
-        background: var(--waline-bgcolor-hover);
-      }
-    }
-
-    .wl-gif {
-      display: inline-block;
-      vertical-align: middle;
-      max-width: 1.5em;
-      max-height: 1.5em;
-    }
-
-    .wl-tab-wrapper {
-      overflow-y: auto;
-      max-height: 145px;
-      padding: 0.5em;
-
-      &::-webkit-scrollbar {
-        width: 6px;
-        height: 6px;
-      }
+.wl-gif-popup {
+  position: absolute;
+  top: 100%;
+  left: 1.25em;
+  z-index: 10;
+
+  width: calc(100% - 3em);
+  padding: 0.75em 0.75em 0.25em;
+  border: var(--waline-border);
+  border-radius: 6px;
+
+  background: var(--waline-bgcolor);
+  box-shadow: var(--waline-box-shadow);
+
+  opacity: 0;
+  visibility: hidden;
+
+  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
+  transform: scale(0.9, 0.9);
+  transform-origin: 0 0;
+
+  &.display {
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+  }
 
-      &::-webkit-scrollbar-track-piece:vertical {
-        -webkit-border-radius: 6px;
-        border-radius: 6px;
-        background: rgb(0 0 0 / 10%);
-      }
+  input {
+    box-sizing: border-box;
 
-      &::-webkit-scrollbar-thumb:vertical {
-        width: 6px;
-        -webkit-border-radius: 6px;
-        border-radius: 6px;
-        background: var(--waline-theme-color);
-      }
-    }
+    width: 100%;
+    margin-bottom: 10px;
+    padding: 3px 5px;
+    border: var(--waline-border);
+  }
 
-    .wl-tabs {
-      position: relative;
-      height: 2em;
-      padding: 0 6px 1px;
+  img {
+    display: block;
 
-      &::before {
-        content: ' ';
+    box-sizing: border-box;
 
-        position: absolute;
-        top: 0;
-        right: 0;
-        left: 0;
-        z-index: 2;
+    width: 100%;
+    border-width: 2px;
+    border-style: solid;
+    border-color: #fff;
 
-        height: 1px;
+    cursor: pointer;
 
-        background: var(--waline-border-color);
-      }
+    &:hover {
+      border-color: var(--waline-theme-color);
+      border-radius: 2px;
     }
+  }
+}
 
-    .wl-tab {
-      position: relative;
-      margin: 0;
-      padding: 0 0.5em;
-
-      &.active {
-        z-index: 3;
+.wl-gallery {
+  max-height: 80vh;
+  display: flex;
+  overflow-y: auto;
+}
 
-        border: 1px solid var(--waline-border-color);
-        border-top-width: 0;
-        border-bottom-right-radius: 6px;
-        border-bottom-left-radius: 6px;
+.wl-gallery-column {
+  height: -webkit-max-content;
+  height: -moz-max-content;
+  height: max-content;
 
-        background: var(--waline-bgcolor);
-      }
-    }
-  }
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 }

package/src/styles/index.scss

@@ -4,6 +4,9 @@
 @use 'base';
 
 @use 'panel';
+@use 'emoji';
+@use 'gif';
+
 @use 'card';
 @use 'layout';
 

package/src/styles/panel.scss

@@ -1,6 +1,3 @@
-@use 'emoji';
-@use 'gif';
-
 .wl-comment {
   position: relative;
   display: flex;
@@ -287,6 +284,3 @@
     }
   }
 }
-
-@include emoji.emoji;
-@include gif.gif;

package/src/typings/base.ts

@@ -39,6 +39,46 @@ export interface WalineEmojiInfo {
 
 export type WalineEmojiMaps = Record<string, string>;
 
+export interface WalineSearchResult extends Record<string, unknown> {
+  /**
+   * Image link
+   */
+  src: string;
+
+  /**
+   * Image title, optional
+   */
+  title?: string;
+
+  /**
+   * Image preview link, optional
+   *
+   * @default src
+   */
+  preview?: string;
+}
+
+export interface WalineSearchOptions {
+  /**
+   * Search action
+   */
+  search: (word: string) => Promise<WalineSearchResult[]>;
+
+  /**
+   * Default search action
+   *
+   * @default () => search('')
+   */
+  default?: () => Promise<WalineSearchResult[]>;
+
+  /**
+   * Fetch more action
+   *
+   * @default (word) => search(word)
+   */
+  more?: (word: string, currectCount: number) => Promise<WalineSearchResult[]>;
+}
+
 export type WalineMeta = 'nick' | 'mail' | 'link';
 
 export type WalineImageUploader = (image: File) => Promise<string>;

package/src/typings/waline.ts

@@ -4,6 +4,7 @@ import type {
   WalineImageUploader,
   WalineMeta,
   WalineTexRenderer,
+  WalineSearchOptions,
 } from './base';
 import type { WalineLocale } from './locale';
 
@@ -148,6 +149,13 @@ export interface WalineProps {
    */
   emoji?: (string | WalineEmojiInfo)[] | false;
 
+  /**
+   * 设置搜索功能
+   *
+   * Customize Search feature
+   */
+  search?: WalineSearchOptions | false;
+
   /**
    * 代码高亮
    *

package/src/utils/config.ts

@@ -1,10 +1,11 @@
 import {
   defaultLang,
+  defaultLocales,
   defaultUploadImage,
   defaultHighlighter,
   defaultTexRenderer,
+  getDefaultSearchOptions,
   getMeta,
-  defaultLocales,
 } from '../config';
 
 import { decodePath, isLinkHttp, removeEndingSplash } from './path';
@@ -27,7 +28,7 @@ export interface WalineConfig extends Required<Omit<WalineProps, 'wordLimit'>> {
   // emoji: Promise<EmojiConfig>;
 }
 
-const getServerURL = (serverURL: string): string => {
+export const getServerURL = (serverURL: string): string => {
   const result = removeEndingSplash(serverURL);
 
   return isLinkHttp(result) ? result : `https://${result}`;
@@ -61,6 +62,7 @@ export const getConfig = ({
   texRenderer,
   copyright = true,
   login = 'enable',
+  search = getDefaultSearchOptions(),
   ...more
 }: WalineProps): WalineConfig => ({
   serverURL: getServerURL(serverURL),
@@ -81,5 +83,6 @@ export const getConfig = ({
   pageSize,
   login,
   copyright,
+  search,
   ...more,
 });

package/src/utils/index.ts

@@ -10,5 +10,3 @@ export * from './markdown';
 export * from './path';
 export * from './query';
 export * from './wordCount';
-export * from './fetchGif';
-export * from './throttle';

package/src/utils/fetchGif.ts

@@ -1,62 +0,0 @@
-export type GifFormat =
-  | 'gif'
-  | 'mediumgif'
-  | 'tinygif'
-  | 'nanogif'
-  | 'mp4'
-  | 'loopedmp4'
-  | 'tinymp4'
-  | 'nanomp4'
-  | 'webm'
-  | 'tinywebm'
-  | 'nanowebm';
-export interface MediaObject {
-  preview: string;
-  url: string;
-  dims: number[];
-  size: number;
-}
-
-export interface FetchGifRequest {
-  key?: string;
-  keyword: string;
-  pos?: string;
-  limit?: number;
-}
-
-export interface GifObject {
-  created: number;
-  hasaudio: boolean;
-  id: string;
-  media: Record<GifFormat, MediaObject>[];
-  tags: string[];
-  title: string;
-  itemurl: string;
-  hascaption: boolean;
-  url: string;
-}
-
-export interface FetchGifResponse {
-  next: string;
-  results: GifObject[];
-}
-
-export const fetchGif = ({
-  key,
-  keyword,
-  pos,
-  limit,
-}: FetchGifRequest): Promise<FetchGifResponse> => {
-  const baseUrl = `https://g.tenor.com/v1/search`;
-  const query = new URLSearchParams('media_filter=minimal');
-  query.set('key', key || 'PAY5JLFIH6V6');
-  query.set('limit', (limit || 20).toString());
-  query.set('pos', pos || '');
-  query.set('q', keyword);
-
-  return fetch(`${baseUrl}?${query.toString()}`, {
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  }).then((resp) => resp.json() as Promise<FetchGifResponse>);
-};

package/src/utils/throttle.ts

@@ -1,16 +0,0 @@
-export function throttle(
-  func: (...args: any[]) => void,
-  timeout = 300
-): (...args: []) => void {
-  let timer: number | null;
-  return (...args: []): void => {
-    if (timer) {
-      clearTimeout(timer);
-    }
-
-    timer = window.setTimeout(() => {
-      func(...args);
-      timer = null;
-    }, timeout);
-  };
-}