@xiping/react-components 1.0.43 → 1.0.49

package/dist/es/components/txt-editor/TxtEditor.js

@@ -1,54 +1,116 @@
-import { jsx as m } from "react/jsx-runtime";
-import h from "@monaco-editor/react";
-import { useRef as c } from "react";
-const M = ({
-  height: e = "500px",
-  width: t = "100%",
-  language: i = "plaintext",
-  defaultValue: a,
-  value: r,
-  theme: l = "light",
-  readOnly: o = !1,
-  onChange: d,
+import { jsxs as k, jsx as c } from "react/jsx-runtime";
+import { useEditor as M, EditorContent as w } from "@tiptap/react";
+import C from "@tiptap/starter-kit";
+import { useMemo as P, useEffect as a } from "react";
+const U = ({
+  height: t = "500px",
+  width: i = "100%",
+  language: y = "plaintext",
+  // eslint-disable-line @typescript-eslint/no-unused-vars
+  defaultValue: d,
+  value: o,
+  theme: p = "light",
+  readOnly: n = !1,
+  onChange: m,
   onMount: s,
   className: u
 }) => {
-  const f = c(null);
-  return /* @__PURE__ */ m(
-    h,
+  const l = o !== void 0, g = P(
+    () => d || o || "",
+    [d, o]
+  ), e = M({
+    extensions: [
+      C.configure({
+        // 禁用大部分格式化功能，保持纯文本编辑体验
+        bold: !1,
+        italic: !1,
+        strike: !1,
+        code: !1,
+        heading: !1,
+        blockquote: !1,
+        horizontalRule: !1,
+        hardBreak: !1
+        // 保留历史记录、拖拽光标和间隙光标功能（使用默认配置）
+      })
+    ],
+    content: g,
+    editable: !n,
+    immediatelyRender: !1,
+    onUpdate: ({ editor: f }) => {
+      const b = f.getText();
+      m?.(b);
+    }
+  });
+  if (a(() => {
+    if (!e || !l) return;
+    const f = e.getText();
+    o !== f && e.commands.setContent(o || "", { emitUpdate: !1 });
+  }, [e, o, l]), a(() => {
+    e && e.setEditable(!n);
+  }, [e, n]), a(() => {
+    e && s && s(e);
+  }, [e, s]), !e)
+    return null;
+  const x = typeof t == "number" ? `${t}px` : t, h = typeof i == "number" ? `${i}px` : i, r = p === "vs-dark";
+  return /* @__PURE__ */ k(
+    "div",
     {
       className: u,
-      height: e,
-      width: t,
-      defaultLanguage: i,
-      defaultValue: a,
-      value: r,
-      theme: l,
-      onMount: (n, p) => {
-        f.current = n, s?.(n, p), n.updateOptions({
-          minimap: { enabled: !1 },
-          // 禁用小地图
-          lineNumbers: "on",
-          // 显示行号
-          roundedSelection: !1,
-          // 方形选区
-          scrollBeyondLastLine: !1,
-          // 禁止滚动到最后一行之后
-          readOnly: o,
-          // 是否只读
-          fontSize: 14
-          // 字体大小
-        });
-      },
-      onChange: (n) => {
-        d?.(n || "");
+      style: {
+        width: h,
+        height: x,
+        border: `1px solid ${r ? "#3e3e3e" : "#d4d4d4"}`,
+        borderRadius: "4px",
+        overflow: "hidden",
+        backgroundColor: r ? "#1e1e1e" : "#ffffff"
       },
-      options: {
-        readOnly: o
-      }
+      children: [
+        /* @__PURE__ */ c(
+          w,
+          {
+            editor: e,
+            style: {
+              height: "100%",
+              overflow: "auto"
+            }
+          }
+        ),
+        /* @__PURE__ */ c("style", { children: `
+        .ProseMirror {
+          outline: none;
+          padding: 12px;
+          min-height: 100%;
+          font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
+          font-size: 14px;
+          line-height: 1.5;
+          color: ${r ? "#d4d4d4" : "#333333"};
+          white-space: pre-wrap;
+          word-wrap: break-word;
+        }
+        .ProseMirror p {
+          margin: 0;
+          padding: 0;
+        }
+        .ProseMirror p + p {
+          margin-top: 0;
+        }
+        .ProseMirror:focus {
+          outline: none;
+        }
+        ${r ? `
+          .ProseMirror {
+            background-color: #1e1e1e;
+          }
+        ` : `
+          .ProseMirror {
+            background-color: #ffffff;
+          }
+        `}
+      ` })
+      ]
     }
   );
 };
 export {
-  M as TxtEditor
+  U as TxtEditor
 };

package/dist/es/components/txt-reader/TxtReader.js

@@ -1,83 +1,76 @@
-import { jsxs as w, Fragment as E, jsx as e } from "react/jsx-runtime";
-import { useRef as n } from "react";
-import t from "clsx";
-import { useScroll as F, useTransform as _, useMotionTemplate as v, motion as i } from "motion/react";
-import y from "./index.module.css.js";
-const I = 16, L = 1.5, R = "normal", k = ({
-  content: c,
-  lineHeight: a = L,
-  fontSize: f = I,
-  fontWeight: m = R,
-  className: p = "",
-  style: d = {},
+import { jsxs as h, Fragment as v, jsx as t } from "react/jsx-runtime";
+import { useRef as c } from "react";
+import r from "clsx";
+import { useScroll as y, useTransform as I, useMotionTemplate as L, motion as l } from "motion/react";
+import e from "./index.module.css.js";
+const R = 16, S = 1.5, A = "normal", O = ({
+  content: a,
+  lineHeight: m = S,
+  fontSize: p = R,
+  fontWeight: d = A,
+  className: f = "",
+  style: g = {},
   onProgressChange: u,
-  initialScrollPosition: S,
-  cacheKey: A,
-  showTopProgress: h = !0,
-  topProgressClassName: x,
-  showBottomProgress: g = !0,
-  bottomProgressClassName: T
+  initialScrollPosition: D,
+  cacheKey: H,
+  showTopProgress: x = !0,
+  topProgressClassName: T,
+  showBottomProgress: N = !0,
+  bottomProgressClassName: E
 }) => {
-  const r = n(null), o = n(null), { scrollYProgress: l } = F({
-    container: r,
-    target: o
-  }), s = _(() => (l.get() * 100).toFixed(2).replace(/\.0*$/, "")), N = v`${s}%`;
-  return s.on("change", (b) => {
-    u?.(Number(b));
-  }), /* @__PURE__ */ w(E, { children: [
-    h && /* @__PURE__ */ e(
-      i.div,
+  const o = c(null), n = c(null), { scrollYProgress: s } = y({
+    container: o,
+    target: n
+  }), i = I(() => (s.get() * 100).toFixed(2).replace(/\.0*$/, "")), F = L`${i}%`;
+  return i.on("change", (_) => {
+    u?.(Number(_));
+  }), /* @__PURE__ */ h(v, { children: [
+    x && /* @__PURE__ */ t(
+      l.div,
       {
         id: "scroll-indicator",
-        className: t(
-          "fixed left-0 top-0 right-0 bg-[#ff0088] h-2.5",
-          x
-        ),
+        className: r(e["xiping-top-progress"], T),
         style: {
-          scaleX: l,
+          scaleX: s,
           originX: 0
         }
       }
     ),
-    /* @__PURE__ */ e(
+    /* @__PURE__ */ t(
       "div",
       {
-        className: t(
-          "relative w-full h-full overflow-y-auto",
-          y.textContent
-          // "scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar scrollbar-thumb-slate-700 scrollbar-track-slate-300",
-        ),
-        ref: r,
-        children: /* @__PURE__ */ e(
+        className: r(e["xiping-container"], e.textContent),
+        ref: o,
+        children: /* @__PURE__ */ t(
           "div",
           {
-            ref: o,
-            className: t("w-full whitespace-pre-wrap break-words", p),
+            ref: n,
+            className: r(e["xiping-content"], f),
             style: {
-              fontSize: `${f}px`,
-              lineHeight: a,
-              fontWeight: m,
-              ...d
+              fontSize: `${p}px`,
+              lineHeight: m,
+              fontWeight: d,
+              ...g
             },
-            children: c
+            children: a
           }
         )
       }
     ),
-    g && /* @__PURE__ */ e(
-      i.div,
+    N && /* @__PURE__ */ t(
+      l.div,
       {
         id: "scroll-present",
-        className: t(
-          "fixed text-white rounded text-sm bg-black/70 pl-2 pr-2 pb-1 pt-1 right-5 bottom-5",
-          T
+        className: r(
+          e["xiping-bottom-progress"],
+          E
         ),
-        children: N
+        children: F
       }
     )
   ] });
 };
 export {
-  k as TxtReader,
-  k as default
+  O as TxtReader,
+  O as default
 };

package/dist/es/components/txt-reader/index.module.css.js

@@ -1,7 +1,11 @@
-const t = "_textContent_8n59h_23", e = {
+const t = "_textContent_yv2bi_63", n = {
+  "xiping-top-progress": "_xiping-top-progress_yv2bi_23",
+  "xiping-container": "_xiping-container_yv2bi_33",
+  "xiping-content": "_xiping-content_yv2bi_41",
+  "xiping-bottom-progress": "_xiping-bottom-progress_yv2bi_48",
   textContent: t
 };
 export {
-  e as default,
+  n as default,
   t as textContent
 };

package/dist/es/components/variable-proximity/index.d.ts

@@ -9,6 +9,16 @@ interface VariableProximityProps extends HTMLAttributes<HTMLSpanElement> {
     className?: string;
     onClick?: () => void;
     style?: React.CSSProperties;
+    /**
+     * 自定义字体族，如果不提供则使用默认的可变字体
+     * 例如: "'Custom Font', 'Roboto Flex', sans-serif"
+     */
+    fontFamily?: string;
+    /**
+     * 是否自动加载默认字体（当 fontFamily 未提供时）
+     * @default true
+     */
+    autoLoadFonts?: boolean;
 }
 declare const VariableProximity: import('react').ForwardRefExoticComponent<VariableProximityProps & import('react').RefAttributes<HTMLSpanElement>>;
 export { VariableProximity };

package/dist/es/components/variable-proximity/index.js

@@ -1,140 +1,212 @@
-import { jsxs as $, jsx as C } from "react/jsx-runtime";
-import { forwardRef as k, useRef as d, useMemo as D, useEffect as F } from "react";
-import { motion as T } from "motion/react";
+import { jsxs as G, jsx as k } from "react/jsx-runtime";
+import { forwardRef as H, useRef as y, useMemo as N, useEffect as w } from "react";
+import { motion as J } from "motion/react";
 /* empty css          */
-function z(c) {
-  F(() => {
-    let i;
-    const s = () => {
-      c(), i = requestAnimationFrame(s);
+const l = {
+  robotoFlex: !1,
+  notoSansSC: !1,
+  loading: !1
+};
+function V(n) {
+  if (typeof document > "u") return !1;
+  try {
+    return document.fonts.check(`1em "${n}"`);
+  } catch {
+    return !0;
+  }
+}
+function K() {
+  if (l.loading || l.robotoFlex && l.notoSansSC) return;
+  l.loading = !0;
+  const n = V("Roboto Flex"), r = V("Noto Sans SC");
+  if (n && (l.robotoFlex = !0), r && (l.notoSansSC = !0), n && r) {
+    l.loading = !1;
+    return;
+  }
+  const i = (t, s) => {
+    if (document.querySelector(`link[href="${t}"]`)) {
+      s?.();
+      return;
+    }
+    const c = document.createElement("link");
+    c.rel = "stylesheet", c.href = t, c.onload = () => s?.(), document.head.appendChild(c);
+  }, f = [
+    // 国内镜像（优先）
+    {
+      roboto: "https://fonts.loli.net/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap",
+      noto: "https://fonts.loli.net/css2?family=Noto+Sans+SC:wght@100..900&display=swap"
+    },
+    // Google Fonts（备选）
+    {
+      roboto: "https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap",
+      noto: "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap"
+    }
+  ], d = (t) => {
+    if (t >= f.length) {
+      l.loading = !1;
+      return;
+    }
+    const s = f[t];
+    let m = 0;
+    const c = () => {
+      m++, m === 2 && (l.loading = !1);
+    };
+    n ? c() : i(s.roboto, () => {
+      l.robotoFlex = !0, c();
+    }), r ? c() : i(s.noto, () => {
+      l.notoSansSC = !0, c();
+    }), setTimeout(() => {
+      (!l.robotoFlex || !l.notoSansSC) && d(t + 1);
+    }, 3e3);
+  };
+  d(0);
+}
+function O(n = !0) {
+  w(() => {
+    n && typeof document < "u" && K();
+  }, [n]);
+}
+function Q(n) {
+  w(() => {
+    let r;
+    const i = () => {
+      n(), r = requestAnimationFrame(i);
     };
-    return i = requestAnimationFrame(s), () => cancelAnimationFrame(i);
-  }, [c]);
+    return r = requestAnimationFrame(i), () => cancelAnimationFrame(r);
+  }, [n]);
 }
-function G(c) {
-  const i = d({ x: 0, y: 0 });
-  return F(() => {
-    const s = (r, a) => {
-      if (c?.current) {
-        const p = c.current.getBoundingClientRect();
-        i.current = { x: r - p.left, y: a - p.top };
+function W(n) {
+  const r = y({ x: 0, y: 0 });
+  return w(() => {
+    const i = (t, s) => {
+      if (n?.current) {
+        const m = n.current.getBoundingClientRect();
+        r.current = { x: t - m.left, y: s - m.top };
       } else
-        i.current = { x: r, y: a };
-    }, u = (r) => s(r.clientX, r.clientY), f = (r) => {
-      const a = r.touches[0];
-      s(a.clientX, a.clientY);
+        r.current = { x: t, y: s };
+    }, f = (t) => i(t.clientX, t.clientY), d = (t) => {
+      const s = t.touches[0];
+      i(s.clientX, s.clientY);
     };
-    return window.addEventListener("mousemove", u), window.addEventListener("touchmove", f), () => {
-      window.removeEventListener("mousemove", u), window.removeEventListener("touchmove", f);
+    return window.addEventListener("mousemove", f), window.addEventListener("touchmove", d), () => {
+      window.removeEventListener("mousemove", f), window.removeEventListener("touchmove", d);
     };
-  }, [c]), i;
+  }, [n]), r;
 }
-const H = k(
-  (c, i) => {
+const Z = H(
+  (n, r) => {
     const {
-      label: s,
-      fromFontVariationSettings: u,
-      toFontVariationSettings: f,
-      containerRef: r,
-      radius: a = 50,
-      falloff: p = "linear",
-      className: R = "",
-      onClick: V,
-      style: P,
-      ...E
-    } = c, x = d([]), v = d([]), h = G(r), g = d({
+      label: i,
+      fromFontVariationSettings: f,
+      toFontVariationSettings: d,
+      containerRef: t,
+      radius: s = 50,
+      falloff: m = "linear",
+      className: c = "",
+      onClick: E,
+      style: C,
+      fontFamily: g,
+      autoLoadFonts: P = !0,
+      ...A
+    } = n;
+    O(P && !g);
+    const b = y([]), v = y([]), S = W(t), F = y({
       x: null,
       y: null
-    }), A = D(() => {
-      const e = (t) => new Map(
-        t.split(",").map((l) => l.trim()).map((l) => {
-          const [m, y] = l.split(" ");
-          return [m.replace(/['"]/g, ""), parseFloat(y)];
+    }), $ = N(() => {
+      const e = (o) => new Map(
+        o.split(",").map((p) => p.trim()).map((p) => {
+          const [h, x] = p.split(" ");
+          return [h.replace(/['"]/g, ""), parseFloat(x)];
         })
-      ), n = e(u), o = e(f);
-      return Array.from(n.entries()).map(([t, l]) => ({
-        axis: t,
-        fromValue: l,
-        toValue: o.get(t) ?? l
+      ), a = e(f), u = e(d);
+      return Array.from(a.entries()).map(([o, p]) => ({
+        axis: o,
+        fromValue: p,
+        toValue: u.get(o) ?? p
       }));
-    }, [u, f]), L = (e, n, o, t) => Math.sqrt((o - e) ** 2 + (t - n) ** 2), b = (e) => {
-      const n = Math.min(Math.max(1 - e / a, 0), 1);
-      switch (p) {
+    }, [f, d]), q = (e, a, u, o) => Math.sqrt((u - e) ** 2 + (o - a) ** 2), I = (e) => {
+      const a = Math.min(Math.max(1 - e / s, 0), 1);
+      switch (m) {
         case "exponential":
-          return n ** 2;
+          return a ** 2;
         case "gaussian":
-          return Math.exp(-((e / (a / 2)) ** 2) / 2);
+          return Math.exp(-((e / (s / 2)) ** 2) / 2);
         case "linear":
         default:
-          return n;
+          return a;
       }
     };
-    z(() => {
-      if (!r?.current) return;
-      const { x: e, y: n } = h.current;
-      if (g.current.x === e && g.current.y === n)
+    Q(() => {
+      if (!t?.current) return;
+      const { x: e, y: a } = S.current;
+      if (F.current.x === e && F.current.y === a)
         return;
-      g.current = { x: e, y: n };
-      const o = r.current.getBoundingClientRect();
-      x.current.forEach((t, l) => {
-        if (!t) return;
-        const m = t.getBoundingClientRect(), y = m.left + m.width / 2 - o.left, q = m.top + m.height / 2 - o.top, w = L(
-          h.current.x,
-          h.current.y,
-          y,
-          q
+      F.current = { x: e, y: a };
+      const u = t.current.getBoundingClientRect();
+      b.current.forEach((o, p) => {
+        if (!o) return;
+        const h = o.getBoundingClientRect(), x = h.left + h.width / 2 - u.left, Y = h.top + h.height / 2 - u.top, L = q(
+          S.current.x,
+          S.current.y,
+          x,
+          Y
         );
-        if (w >= a) {
-          t.style.fontVariationSettings = u;
+        if (L >= s) {
+          o.style.fontVariationSettings = f;
           return;
         }
-        const B = b(w), M = A.map(({ axis: I, fromValue: S, toValue: X }) => {
-          const Y = S + (X - S) * B;
-          return `'${I}' ${Y}`;
+        const z = I(L), M = $.map(({ axis: T, fromValue: R, toValue: D }) => {
+          const U = R + (D - R) * z;
+          return `'${T}' ${U}`;
         }).join(", ");
-        v.current[l] = M, t.style.fontVariationSettings = M;
+        v.current[p] = M, o.style.fontVariationSettings = M;
       });
     });
-    const N = /[\u4e00-\u9fa5]/.test(s) ? s.split("") : s.split(" ").flatMap((e, n, o) => {
-      const t = e.split("");
-      return n < o.length - 1 ? [...t, " "] : t;
+    const j = /[\u4e00-\u9fa5]/.test(i) ? i.split("") : i.split(" ").flatMap((e, a, u) => {
+      const o = e.split("");
+      return a < u.length - 1 ? [...o, " "] : o;
     });
-    let j = 0;
-    return /* @__PURE__ */ $(
+    let B = 0;
+    const X = N(() => {
+      const e = { display: "inline", ...C };
+      return g && (e.fontFamily = g), e;
+    }, [g, C]);
+    return /* @__PURE__ */ G(
       "span",
       {
-        ref: i,
-        className: `${R} variable-proximity`,
-        onClick: V,
-        style: { display: "inline", ...P },
-        ...E,
+        ref: r,
+        className: `${c} variable-proximity`,
+        onClick: E,
+        style: X,
+        ...A,
         children: [
-          N.map((e, n) => {
-            const o = j++;
-            return /* @__PURE__ */ C(
-              T.span,
+          j.map((e, a) => {
+            const u = B++;
+            return /* @__PURE__ */ k(
+              J.span,
               {
-                ref: (t) => {
-                  x.current[o] = t;
+                ref: (o) => {
+                  b.current[u] = o;
                 },
                 style: {
                   display: e === " " ? "inline" : "inline-block",
-                  fontVariationSettings: v.current[o]
+                  fontVariationSettings: v.current[u]
                 },
                 "aria-hidden": "true",
                 children: e
               },
-              n
+              a
             );
           }),
-          /* @__PURE__ */ C("span", { className: "sr-only", children: s })
+          /* @__PURE__ */ k("span", { className: "sr-only", children: i })
         ]
       }
     );
   }
 );
-H.displayName = "VariableProximity";
+Z.displayName = "VariableProximity";
 export {
-  H as VariableProximity,
-  H as default
+  Z as VariableProximity,
+  Z as default
 };

package/dist/es/components/video-subtitle-player/VideoSubtitlePlayer.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+import { SubtitleData, HoverTarget } from '../subtitle-player/SubtitlePlayer';
+export interface VideoSubtitlePlayerProps {
+    /** 视频URL */
+    videoUrl: string;
+    /** 字幕数据 */
+    subtitles: SubtitleData[];
+    /** 视频封面图 */
+    poster?: string;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 自定义详情获取函数，用于调用大模型API */
+    onFetchDetail?: (target: HoverTarget | null) => Promise<void>;
+}
+/**
+ * 视频字幕播放器组件
+ * 左侧：上部分16:9视频播放器，下部分字幕显示
+ * 右侧：字幕详情（单词/短语的发音、解释等）
+ */
+export declare const VideoSubtitlePlayer: React.FC<VideoSubtitlePlayerProps>;
+export default VideoSubtitlePlayer;