wendang-react 0.0.0-stage → 0.5.5

package/dist/chunks/mind-topic-text-BBNTbFSe.js

@@ -0,0 +1,446 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect, Fragment as Fragment$1 } from "react";
+import { w as whenNearViewport, e as ensureKatexCss, r as renderMathAsync } from "./katex-WjrodtTU.js";
+import { a as useContentContext, b as useContentHost, f as formatBytes, c as attachmentObjectUrl, u as unavailableAttachment, d as downloadAttachment } from "./host-C-V688Rq.js";
+import { safeHref, documentColorAttributes } from "wendang/shared";
+import { normalizeVideoEmbed, videoSourceUrl, VIDEO_PROVIDER_LABELS, videoPlayerUrl } from "wendang/internal/video-embed";
+import { createPortal } from "react-dom";
+import { l as lockScroll, t as trapTab } from "./index-Ii536CFG.js";
+import { setMindTextMeasureFactory, MIND_TOPIC_FONT } from "wendang/internal/mind-topic-text";
+const ROW_SELECTOR = ".ywiki-image-gallery, .doc-image-gallery";
+function previewItemsFrom(image, fallbackLabel = "图片预览") {
+  const toItem = (img) => ({
+    src: img.getAttribute("src") ?? "",
+    label: img.getAttribute("alt") || fallbackLabel
+  });
+  const lonely = () => {
+    if (!(image instanceof HTMLImageElement)) return { items: [], index: 0 };
+    const src = image.getAttribute("src");
+    return src ? { items: [{ src, label: image.getAttribute("alt") || fallbackLabel }], index: 0 } : { items: [], index: 0 };
+  };
+  if (!image || typeof image.closest !== "function") return { items: [], index: 0 };
+  const row = image.closest(ROW_SELECTOR);
+  if (!row) return lonely();
+  const images = Array.from(row.querySelectorAll("img")).filter(
+    (el) => el instanceof HTMLImageElement && !!el.getAttribute("src")
+  );
+  if (images.length === 0) return { items: [], index: 0 };
+  const found = images.indexOf(image);
+  if (found < 0) return lonely();
+  return { items: images.map(toItem), index: found };
+}
+function stepPreviewIndex(index, length, delta) {
+  if (!Number.isFinite(index) || length <= 0) return 0;
+  const next = index + (Number.isFinite(delta) ? delta : 0);
+  return Math.max(0, Math.min(length - 1, Math.round(next)));
+}
+function canStepPreview(index, length, delta) {
+  if (length <= 1) return false;
+  return stepPreviewIndex(index, length, delta) !== stepPreviewIndex(index, length, 0);
+}
+function ImagePreview({ src, label = "图片预览", items, index = 0, onClose }) {
+  const { portal } = useContentContext();
+  const [current, setCurrent] = useState(index), [scale, setScale] = useState(1), [rotation, setRotation] = useState(0);
+  const [offset, setOffset] = useState({ x: 0, y: 0 }), [dragging, setDragging] = useState(false);
+  const mask = useRef(null), panel = useRef(null);
+  const drag = useRef(null), closeRef = useRef(onClose);
+  closeRef.current = onClose;
+  const list = (items == null ? void 0 : items.length) ? items : [{ src, label }], listRef = useRef(list);
+  listRef.current = list;
+  const currentRef = useRef(current);
+  currentRef.current = current;
+  const active = list[current] ?? list[0];
+  function reset() {
+    setScale(1);
+    setRotation(0);
+    setOffset({ x: 0, y: 0 });
+  }
+  function zoomBy(factor) {
+    setScale((value) => Math.min(8, Math.max(0.25, value * factor)));
+  }
+  function step(delta) {
+    const next = stepPreviewIndex(currentRef.current, listRef.current.length, delta);
+    if (next !== currentRef.current) {
+      currentRef.current = next;
+      setCurrent(next);
+      reset();
+    }
+  }
+  useEffect(() => {
+    currentRef.current = index;
+    setCurrent(index);
+    reset();
+  }, [src, index]);
+  useEffect(() => {
+    if (!portal) return;
+    const previous = document.activeElement, scroll = lockScroll();
+    const keydown = (event) => {
+      if (event.isComposing) return;
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        closeRef.current();
+      } else if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        step(-1);
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        step(1);
+      } else if (event.key === "+" || event.key === "=") {
+        event.preventDefault();
+        zoomBy(1.2);
+      } else if (event.key === "-" || event.key === "_") {
+        event.preventDefault();
+        zoomBy(1 / 1.2);
+      } else if (event.key === "0") {
+        event.preventDefault();
+        reset();
+      } else if (mask.current && trapTab(mask.current, event)) event.preventDefault();
+    };
+    window.addEventListener("keydown", keydown, true);
+    const frame = requestAnimationFrame(() => {
+      var _a;
+      return (_a = panel.current) == null ? void 0 : _a.focus();
+    });
+    return () => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener("keydown", keydown, true);
+      scroll.release();
+      if (previous == null ? void 0 : previous.isConnected) previous.focus();
+    };
+  }, [portal]);
+  useEffect(() => {
+    const node = mask.current;
+    if (!node) return;
+    const wheel = (event) => {
+      event.preventDefault();
+      zoomBy(event.deltaY < 0 ? 1.12 : 1 / 1.12);
+    };
+    node.addEventListener("wheel", wheel, { passive: false });
+    return () => node.removeEventListener("wheel", wheel);
+  }, [portal]);
+  function endDrag() {
+    drag.current = null;
+    setDragging(false);
+  }
+  if (!portal) return null;
+  return createPortal(/* @__PURE__ */ jsxs("div", { ref: mask, className: "img-preview-mask", onMouseDown: (event) => {
+    if (drag.current || !(event.target instanceof Element) || event.target.closest(".img-preview-image,.img-preview-toolbar,.img-preview-nav")) return;
+    closeRef.current();
+  }, children: [
+    /* @__PURE__ */ jsx("div", { ref: panel, className: "img-preview-stage", role: "dialog", "aria-modal": "true", "aria-label": active.label, tabIndex: -1, children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        className: `img-preview-image${dragging ? " is-dragging" : ""}`,
+        src: active.src,
+        alt: active.label,
+        draggable: false,
+        style: { transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale}) rotate(${rotation}deg)` },
+        onPointerDown: (event) => {
+          var _a, _b;
+          if (event.button !== 0) return;
+          drag.current = { x: event.clientX, y: event.clientY, ox: offset.x, oy: offset.y };
+          setDragging(true);
+          (_b = (_a = event.currentTarget).setPointerCapture) == null ? void 0 : _b.call(_a, event.pointerId);
+        },
+        onPointerMove: (event) => {
+          const origin = drag.current;
+          if (origin) setOffset({ x: origin.ox + event.clientX - origin.x, y: origin.oy + event.clientY - origin.y });
+        },
+        onPointerUp: endDrag,
+        onPointerCancel: endDrag,
+        onLostPointerCapture: endDrag
+      }
+    ) }),
+    list.length > 1 && /* @__PURE__ */ jsxs("div", { className: "img-preview-nav", role: "group", "aria-label": "图片翻页", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "img-preview-nav-btn is-prev",
+          "aria-label": "上一张",
+          title: "上一张（←）",
+          disabled: !canStepPreview(current, list.length, -1),
+          onClick: () => step(-1),
+          children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "22", height: "22", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }) })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "img-preview-nav-btn is-next",
+          "aria-label": "下一张",
+          title: "下一张（→）",
+          disabled: !canStepPreview(current, list.length, 1),
+          onClick: () => step(1),
+          children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "22", height: "22", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "img-preview-toolbar", role: "toolbar", "aria-label": "图片预览操作", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "缩小", title: "缩小（-）", onClick: () => zoomBy(1 / 1.2), children: "−" }),
+      /* @__PURE__ */ jsxs("span", { className: "img-preview-scale", "aria-live": "polite", children: [
+        Math.round(scale * 100),
+        "%"
+      ] }),
+      /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "放大", title: "放大（+）", onClick: () => zoomBy(1.2), children: "＋" }),
+      /* @__PURE__ */ jsx("span", { className: "img-preview-divider" }),
+      /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "向左旋转", title: "向左旋转", onClick: () => setRotation((value) => value - 90), children: "↺" }),
+      /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "向右旋转", title: "向右旋转", onClick: () => setRotation((value) => value + 90), children: "↻" }),
+      /* @__PURE__ */ jsx("span", { className: "img-preview-divider" }),
+      /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "还原", title: "还原（0）", onClick: reset, children: "还原" }),
+      list.length > 1 && /* @__PURE__ */ jsxs("span", { className: "img-preview-count", "aria-live": "polite", children: [
+        current + 1,
+        " / ",
+        list.length
+      ] }),
+      /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "关闭预览", title: "关闭（Esc）", onClick: onClose, children: "关闭" })
+    ] })
+  ] }), portal);
+}
+function AttachmentImage({ id, alt = "", width, fetcher, src, align, aspectRatio, galleryScale, className = "" }) {
+  var _a;
+  const host = useContentHost(), element = useRef(null);
+  const [result, setResult] = useState({ id: "", url: "", failed: false });
+  const [preview, setPreview] = useState(null);
+  useEffect(() => {
+    setResult({ id: id ?? "", url: "", failed: false });
+    const node = element.current;
+    if (!id || !node) return;
+    let alive = true, release;
+    const stop = whenNearViewport(node, () => {
+      var _a2;
+      release = attachmentObjectUrl(
+        id,
+        (url) => {
+          if (alive) setResult({ id, url, failed: false });
+        },
+        fetcher ?? ((_a2 = host.attachments) == null ? void 0 : _a2.fetch) ?? unavailableAttachment,
+        () => {
+          if (alive) setResult({ id, url: "", failed: true });
+        },
+        host.scope
+      );
+    });
+    return () => {
+      alive = false;
+      stop();
+      release == null ? void 0 : release();
+    };
+  }, [id, fetcher, (_a = host.attachments) == null ? void 0 : _a.fetch, host.scope]);
+  const source = id ? result.id === id ? result.url : "" : safeHref(src);
+  const failed = result.id === (id ?? "") && result.failed;
+  const transparent = "data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%221%22 height=%221%22 preserveAspectRatio=%22none%22%3E%3C/svg%3E";
+  function open(image) {
+    if (source && !failed) setPreview(previewItemsFrom(image, alt || "图片预览"));
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        ref: element,
+        className: `doc-image${className ? ` ${className}` : ""}`,
+        "data-attachment-id": id,
+        src: source || (failed ? transparent : void 0),
+        alt: source ? alt : void 0,
+        title: failed ? alt : void 0,
+        "data-sized": width ? "true" : void 0,
+        "data-align": align ?? void 0,
+        "data-aspect-ratio": aspectRatio && aspectRatio > 0 ? aspectRatio : void 0,
+        "data-gallery-scale": galleryScale && galleryScale !== 1 ? galleryScale : void 0,
+        "data-loading": !source && !failed ? "true" : void 0,
+        "data-image-error": failed ? "true" : void 0,
+        style: {
+          ...width ? { width: `${width}px` } : {},
+          ...aspectRatio && aspectRatio > 0 ? { "--doc-image-aspect-ratio": String(aspectRatio) } : {},
+          ...galleryScale && galleryScale > 0 && galleryScale !== 1 ? { "--doc-image-weight": String(galleryScale) } : {}
+        },
+        tabIndex: 0,
+        onError: () => setResult((previous) => ({ ...previous, failed: true })),
+        onClick: (event) => open(event.currentTarget),
+        onKeyDown: (event) => {
+          if (event.key === "Enter") open(event.currentTarget);
+        }
+      }
+    ),
+    preview && /* @__PURE__ */ jsx(ImagePreview, { src: source, label: alt || "图片预览", items: preview.items, index: preview.index, onClose: () => setPreview(null) })
+  ] });
+}
+function MathView({ latex, block = false }) {
+  const [result, setResult] = useState({ html: "", error: null });
+  useEffect(() => {
+    let active = true;
+    void ensureKatexCss();
+    void renderMathAsync(latex, block).then((value) => {
+      if (active) setResult(value);
+    });
+    return () => {
+      active = false;
+    };
+  }, [latex, block]);
+  return result.html ? /* @__PURE__ */ jsx("span", { className: block ? "doc-math-block" : "doc-math-inline", dangerouslySetInnerHTML: { __html: result.html } }) : /* @__PURE__ */ jsx("span", { role: result.error ? "alert" : void 0, children: result.error ? `公式错误：${latex}` : latex });
+}
+function FileVideo({ id, mimeType, fetcher }) {
+  var _a;
+  const host = useContentHost(), root = useRef(null), [state, setState] = useState({ id: "", url: "", failed: false });
+  useEffect(() => {
+    setState({ id, url: "", failed: false });
+    if (!root.current || !id) return;
+    let active = true, release;
+    const stop = whenNearViewport(root.current, () => {
+      var _a2;
+      release = attachmentObjectUrl(
+        id,
+        (url2) => {
+          if (active) setState({ id, url: url2, failed: false });
+        },
+        fetcher ?? ((_a2 = host.attachments) == null ? void 0 : _a2.fetch) ?? unavailableAttachment,
+        () => {
+          if (active) setState({ id, url: "", failed: true });
+        },
+        host.scope
+      );
+    });
+    return () => {
+      active = false;
+      stop();
+      release == null ? void 0 : release();
+    };
+  }, [id, fetcher, (_a = host.attachments) == null ? void 0 : _a.fetch, host.scope]);
+  const url = state.id === id ? state.url : "", failed = state.id === id && state.failed;
+  return /* @__PURE__ */ jsx("div", { ref: root, className: "doc-file-video", children: url && !failed ? /* @__PURE__ */ jsx("video", { src: url, controls: true, preload: "metadata", onError: () => setState((value) => ({ ...value, failed: true })), children: /* @__PURE__ */ jsx("source", { src: url, type: mimeType }) }) : /* @__PURE__ */ jsx("p", { className: "doc-file-video-fallback", children: failed ? "视频加载失败。" : "视频加载中…" }) });
+}
+function FileView({ id, filename, mimeType = "", size = 0, fetcher, allowExport = false }) {
+  const host = useContentHost(), [failure, setFailure] = useState(""), [busy, setBusy] = useState(false), allowed = useRef(allowExport), alive = useRef(true);
+  allowed.current = allowExport;
+  useEffect(() => {
+    alive.current = true;
+    return () => {
+      alive.current = false;
+    };
+  }, []);
+  useEffect(() => {
+    setFailure("");
+  }, [id]);
+  async function download() {
+    if (busy || !allowed.current) return;
+    setBusy(true);
+    setFailure("");
+    try {
+      await downloadAttachment(id, filename, async (value) => {
+        var _a;
+        const blob = await (fetcher ?? ((_a = host.attachments) == null ? void 0 : _a.fetch) ?? unavailableAttachment)(value);
+        if (!alive.current || !allowed.current) throw new Error("当前不允许导出附件");
+        return blob;
+      });
+    } catch (error) {
+      if (alive.current) setFailure(error instanceof Error ? error.message : "附件下载失败");
+    } finally {
+      if (alive.current) setBusy(false);
+    }
+  }
+  if (!id) return /* @__PURE__ */ jsx("div", { className: "doc-file is-missing", children: "［附件缺失］" });
+  return /* @__PURE__ */ jsxs("div", { className: "doc-file", children: [
+    /* @__PURE__ */ jsxs("div", { className: "doc-file-head", children: [
+      /* @__PURE__ */ jsx("span", { className: "doc-file-icon", children: mimeType.startsWith("video/") ? "▶" : mimeType.startsWith("image/") ? "🖼" : "📎" }),
+      /* @__PURE__ */ jsx("span", { className: "doc-file-name", title: filename, children: filename }),
+      /* @__PURE__ */ jsx("span", { className: "doc-file-size", children: formatBytes(size) }),
+      allowExport && /* @__PURE__ */ jsx("button", { type: "button", className: "doc-file-action", disabled: busy, onClick: () => void download(), children: busy ? "下载中…" : "下载" })
+    ] }),
+    mimeType.startsWith("video/") ? /* @__PURE__ */ jsx(FileVideo, { id, mimeType, fetcher }) : mimeType.startsWith("image/") ? /* @__PURE__ */ jsx(AttachmentImage, { id, alt: filename, fetcher, className: "doc-file-image" }) : null,
+    failure && /* @__PURE__ */ jsx("p", { role: "alert", className: "doc-file-video-fallback", children: failure })
+  ] });
+}
+function VideoView({ attrs }) {
+  const data = normalizeVideoEmbed(attrs), source = data ? videoSourceUrl(data) : "", platform = data ? VIDEO_PROVIDER_LABELS[data.provider] : "外部";
+  const [playing, setPlaying] = useState(""), [fits, setFits] = useState(true), [delayed, setDelayed] = useState(false);
+  const root = useRef(null), timer = useRef(void 0);
+  useEffect(() => {
+    if (!root.current || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(([entry]) => setFits(entry.contentRect.width >= 200));
+    observer.observe(root.current);
+    return () => observer.disconnect();
+  }, []);
+  useEffect(() => {
+    setPlaying("");
+    setDelayed(false);
+    clearTimeout(timer.current);
+    return () => clearTimeout(timer.current);
+  }, [source, fits]);
+  const active = !!source && playing === source;
+  return /* @__PURE__ */ jsx("section", { ref: root, className: "doc-video-embed", contentEditable: false, "aria-label": `${platform} 视频`, children: data ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    !active || !fits ? /* @__PURE__ */ jsxs("div", { className: "video-placeholder", children: [
+      /* @__PURE__ */ jsx("span", { className: "video-play-icon", "aria-hidden": "true", children: "▶" }),
+      /* @__PURE__ */ jsxs("strong", { children: [
+        platform,
+        " 视频",
+        data.page > 1 ? ` · 第 ${data.page} P` : ""
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "video-id", children: data.videoId }),
+      fits && /* @__PURE__ */ jsx("button", { type: "button", className: "video-load", onClick: () => {
+        setPlaying(source);
+        timer.current = setTimeout(() => setDelayed(true), 12e3);
+      }, children: "加载视频" }),
+      /* @__PURE__ */ jsx("span", { className: "small muted", children: fits ? `点击后连接 ${platform} 播放器` : "当前栏宽较窄，请在原站观看" })
+    ] }) : /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        src: videoPlayerUrl(data),
+        title: `${platform} 视频 ${data.videoId}`,
+        loading: "lazy",
+        allow: "fullscreen; picture-in-picture; encrypted-media",
+        allowFullScreen: true,
+        sandbox: "allow-scripts allow-same-origin allow-presentation allow-popups",
+        referrerPolicy: "strict-origin-when-cross-origin",
+        onLoad: () => {
+          clearTimeout(timer.current);
+          setDelayed(false);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "video-footer", children: [
+      /* @__PURE__ */ jsx("span", { className: "small muted", children: active ? delayed ? "加载较慢，可在原站观看" : "无法播放时可在原站观看" : "外部视频" }),
+      /* @__PURE__ */ jsx("a", { href: source, target: "_blank", rel: "noopener noreferrer", onClick: (event) => event.stopPropagation(), children: "在原站打开 ↗" })
+    ] })
+  ] }) : /* @__PURE__ */ jsx("p", { className: "muted", children: "视频地址无效，请重新插入。" }) });
+}
+function TopicLabel({ topic }) {
+  return /* @__PURE__ */ jsx("span", { children: (topic.runs ?? [{ text: topic.text || "未命名主题" }]).map((run, index) => {
+    var _a, _b, _c, _d;
+    let child = run.text;
+    for (const mark of run.marks ?? []) {
+      if (mark.type === "bold") child = /* @__PURE__ */ jsx("strong", { children: child });
+      else if (mark.type === "italic") child = /* @__PURE__ */ jsx("em", { children: child });
+      else if (mark.type === "strike") child = /* @__PURE__ */ jsx("s", { children: child });
+      else if (mark.type === "link") child = /* @__PURE__ */ jsx("a", { href: safeHref((_a = mark.attrs) == null ? void 0 : _a.href), target: "_blank", rel: "noopener noreferrer", onClick: (event) => event.stopPropagation(), children: child });
+      else if (mark.type === "textStyle" || mark.type === "highlight") {
+        const data = documentColorAttributes(mark.type === "highlight" ? "highlight" : "text", (_b = mark.attrs) == null ? void 0 : _b.color);
+        const style = mark.type === "highlight" ? { backgroundColor: (_c = data.style) == null ? void 0 : _c.slice(data.style.indexOf(":") + 1).trim() } : { color: (_d = data.style) == null ? void 0 : _d.slice(data.style.indexOf(":") + 1).trim() };
+        child = /* @__PURE__ */ jsx("span", { style, children: child });
+      }
+    }
+    return /* @__PURE__ */ jsx(Fragment$1, { children: child }, index);
+  }) });
+}
+let context;
+setMindTextMeasureFactory((fontSize, weight) => {
+  if (typeof document === "undefined") return null;
+  context ?? (context = document.createElement("canvas").getContext("2d"));
+  if (!context) return null;
+  const canvas = context, font = `${weight} ${fontSize}px ${MIND_TOPIC_FONT}`;
+  return (text) => {
+    canvas.font = font;
+    return canvas.measureText(text).width;
+  };
+});
+export {
+  AttachmentImage as A,
+  FileView as F,
+  ImagePreview as I,
+  MathView as M,
+  TopicLabel as T,
+  VideoView as V,
+  previewItemsFrom as p
+};