wendang-react 0.0.0-stage → 0.5.5

package/dist/document/viewer.js

@@ -0,0 +1,287 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, createElement, Fragment, useState } from "react";
+import { resolveInlineComments, splitTextByMarks, safeHref, documentColorAttributes, effectiveCallout, calloutDOMAttributes, cellBackground, tableColumnWidths, tableMinWidth } from "wendang/shared";
+import { readMindMap } from "wendang/mindmap";
+import { isWorkbookDocument } from "wendang/spreadsheet";
+import { b as useContentHost } from "../chunks/host-C-V688Rq.js";
+import { M as MathView, V as VideoView, F as FileView, A as AttachmentImage } from "../chunks/mind-topic-text-BBNTbFSe.js";
+import { M as MindMapBlock } from "../chunks/MindMapViewer-DqKu_Kuz.js";
+import { S as SpreadsheetViewer } from "../chunks/SpreadsheetViewer-DN_QQGud.js";
+import { e as ensureCodeHighlight, c as codeTokens } from "../chunks/code-highlight-BmaqTe1m.js";
+import { h as hideCommentHint, s as showCommentHint, C as CodeToolbar } from "../chunks/comment-hint-DN7LKJAn.js";
+import { codeBlockDisplay, codeLineNumbers, codeBlockClass } from "wendang/internal/code-block";
+function CommentText({ marks, activeId, onMarkClick, children }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: [
+        "doc-inline-comment",
+        marks.some((mark) => mark.state === "shifted") ? "is-shifted" : "",
+        marks.some((mark) => mark.hasReplies) ? "has-replies" : "",
+        marks.some((mark) => mark.commentId === activeId) ? "is-active" : ""
+      ].filter(Boolean).join(" "),
+      "data-comment-id": marks[0].commentId,
+      "data-comment-ids": marks.map((mark) => mark.commentId).join(" "),
+      "data-comment-hint": "点击查看该处讨论",
+      onMouseEnter: (event) => showCommentHint(event.currentTarget, "点击查看该处讨论"),
+      onMouseLeave: () => hideCommentHint(),
+      onClick: (event) => {
+        event.stopPropagation();
+        hideCommentHint();
+        onMarkClick == null ? void 0 : onMarkClick(marks[0].commentId);
+      },
+      children
+    }
+  );
+}
+function CodeView({ text, language, allowExport, marks, activeId, onMarkClick }) {
+  const [, refresh] = useState(0);
+  const [display, setDisplay] = useState(codeBlockDisplay);
+  useEffect(() => {
+    let active = true;
+    void ensureCodeHighlight().then(() => {
+      if (active) refresh((value) => value + 1);
+    });
+    return () => {
+      active = false;
+    };
+  }, [text, language]);
+  const tokens = codeTokens(text, language);
+  let offset = 0;
+  function syntaxText(from, to) {
+    const parts2 = [];
+    let cursor = from;
+    for (const token of tokens) {
+      const start = Math.max(from, token.from), end = Math.min(to, token.to);
+      if (start >= end) continue;
+      if (start > cursor) parts2.push(text.slice(cursor, start));
+      parts2.push(/* @__PURE__ */ jsx("span", { className: token.classes, children: text.slice(start, end) }, start));
+      cursor = end;
+    }
+    if (cursor < to) parts2.push(text.slice(cursor, to));
+    return parts2;
+  }
+  const parts = splitTextByMarks(text, marks).map((piece, index) => {
+    const start = offset;
+    offset += piece.text.length;
+    const content = syntaxText(start, offset);
+    return piece.marks.length ? /* @__PURE__ */ jsx(CommentText, { marks: piece.marks, activeId, onMarkClick, children: content }, index) : /* @__PURE__ */ jsx("span", { children: content }, index);
+  });
+  return /* @__PURE__ */ jsxs("div", { className: ["doc-code-wrap", ...codeBlockClass(display)].join(" "), children: [
+    /* @__PURE__ */ jsx(CodeToolbar, { text, language, editable: false, canCopy: !!allowExport, display, onLanguage: () => {
+    }, onDisplay: setDisplay }),
+    /* @__PURE__ */ jsxs("div", { className: "code-scroll", hidden: display.collapsed, tabIndex: 0, "aria-label": "代码内容", children: [
+      display.lineNumbers && /* @__PURE__ */ jsx("div", { className: "code-line-numbers", "aria-hidden": "true", children: codeLineNumbers(text) }),
+      /* @__PURE__ */ jsx("pre", { className: "doc-code", children: /* @__PURE__ */ jsx("code", { children: parts }) })
+    ] })
+  ] });
+}
+const textOf = (node) => {
+  var _a;
+  return node.text ?? ((_a = node.content) == null ? void 0 : _a.map(textOf).join("")) ?? "";
+};
+function cssStyle(css) {
+  return Object.fromEntries(css.split(";").filter(Boolean).map((part) => {
+    const index = part.indexOf(":");
+    const property = part.slice(0, index).trim();
+    return [property.startsWith("--") ? property : property.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase()), part.slice(index + 1).trim()];
+  }));
+}
+function DocumentViewer(props) {
+  var _a;
+  const host = useContentHost(), doc = props.value ?? props.modelValue;
+  useEffect(() => () => hideCommentHint(), []);
+  if (!doc) return /* @__PURE__ */ jsx("div", { className: "doc-renderer ywiki-prose ywiki-content" });
+  const marks = ((_a = props.inlineMarks) == null ? void 0 : _a.size) ? props.inlineMarks : resolveInlineComments(doc, props.inlineComments ?? []).byTextIndex;
+  let run = 0;
+  function children(node, inImageGallery = false) {
+    var _a2;
+    return (_a2 = node.content) == null ? void 0 : _a2.map((child, index) => /* @__PURE__ */ jsx(Fragment, { children: render(child, inImageGallery) }, index));
+  }
+  function render(node, inImageGallery = false) {
+    var _a2, _b, _c;
+    const attrs = node.attrs ?? {};
+    if (node.type === "text") {
+      let text = node.text ?? "", index = run++;
+      const inline = marks.get(index) ?? [];
+      if (inline.length) text = /* @__PURE__ */ jsx("span", { children: splitTextByMarks(node.text ?? "", inline).map((piece, at) => piece.marks.length ? /* @__PURE__ */ jsx(CommentText, { marks: piece.marks, activeId: props.activeCommentId, onMarkClick: props.onMarkClick, children: piece.text }, at) : /* @__PURE__ */ jsx("span", { children: piece.text }, at)) });
+      for (const mark of node.marks ?? []) {
+        const a = mark.attrs ?? {};
+        const tag = { bold: "strong", italic: "em", strike: "s", underline: "u", code: "code" }[mark.type];
+        if (tag) text = createElement(tag, null, text);
+        else if (mark.type === "link") {
+          const href = safeHref(String(a.href ?? ""));
+          if (href) text = /* @__PURE__ */ jsx("a", { href, target: "_blank", rel: "noopener noreferrer", children: text });
+        } else if (mark.type === "textStyle" || mark.type === "highlight") {
+          const data = documentColorAttributes(mark.type === "highlight" ? "highlight" : "text", a.color);
+          text = /* @__PURE__ */ jsx("span", { ...Object.fromEntries(Object.entries(data).filter(([key]) => key !== "style")), style: cssStyle(data.style ?? ""), children: text });
+        }
+      }
+      return text;
+    }
+    const alignment = attrs.textAlign ?? attrs.align;
+    const style = { textAlign: ["left", "center", "right", "justify"].includes(String(alignment)) ? alignment : void 0, marginLeft: Number(attrs.indent) > 0 ? `${Math.min(6, Number(attrs.indent)) * 24}px` : void 0 };
+    switch (node.type) {
+      case "doc":
+        return children(node);
+      case "paragraph":
+        return /* @__PURE__ */ jsx("p", { style, children: children(node) || /* @__PURE__ */ jsx("br", {}) });
+      case "heading":
+        return createElement(`h${Math.max(1, Math.min(6, Number(attrs.level) || 1))}`, { style, id: typeof attrs.anchor === "string" ? attrs.anchor : typeof attrs.id === "string" ? attrs.id : void 0 }, children(node));
+      case "bulletList":
+        return /* @__PURE__ */ jsx("ul", { children: children(node) });
+      case "orderedList":
+        return /* @__PURE__ */ jsx("ol", { start: Number(attrs.start) || 1, children: children(node) });
+      case "listItem":
+        return /* @__PURE__ */ jsx("li", { children: children(node) });
+      case "taskList":
+        return /* @__PURE__ */ jsx("ul", { className: "doc-task-list", children: children(node) });
+      case "taskItem":
+        return /* @__PURE__ */ jsxs("li", { className: "doc-task-item", children: [
+          /* @__PURE__ */ jsx("input", { type: "checkbox", checked: attrs.checked === true, disabled: true, "aria-label": textOf(((_a2 = node.content) == null ? void 0 : _a2[0]) ?? node) || "未命名任务" }),
+          /* @__PURE__ */ jsx("span", { children: children(node) })
+        ] });
+      case "blockquote":
+        return /* @__PURE__ */ jsx("blockquote", { children: children(node) });
+      case "horizontalRule":
+        return /* @__PURE__ */ jsx("hr", {});
+      case "hardBreak":
+        return /* @__PURE__ */ jsx("br", {});
+      case "codeBlock": {
+        const codeMarks = [];
+        let offset = 0;
+        const visit = (child) => {
+          var _a3;
+          if (child.type === "text") {
+            for (const mark of marks.get(run++) ?? []) codeMarks.push({ ...mark, from: offset + mark.from, to: offset + mark.to });
+            offset += ((_a3 = child.text) == null ? void 0 : _a3.length) ?? 0;
+          } else for (const item of child.content ?? []) visit(item);
+        };
+        visit(node);
+        return /* @__PURE__ */ jsx(
+          CodeView,
+          {
+            text: textOf(node),
+            language: String(attrs.language ?? ""),
+            allowExport: props.allowExport,
+            marks: codeMarks,
+            activeId: props.activeCommentId,
+            onMarkClick: props.onMarkClick
+          }
+        );
+      }
+      case "table": {
+        const widths = tableColumnWidths(node), minWidth = tableMinWidth(widths), fixed = widths.length > 0 && widths.every((width) => width > 0);
+        return /* @__PURE__ */ jsx("div", { className: "doc-table-wrap", children: /* @__PURE__ */ jsxs("table", { className: "doc-table", style: minWidth ? fixed ? { width: minWidth } : { minWidth } : void 0, children: [
+          widths.length > 0 && /* @__PURE__ */ jsx("colgroup", { children: widths.map((width, index) => /* @__PURE__ */ jsx("col", { style: width > 0 ? { width } : { minWidth: 120 } }, index)) }),
+          /* @__PURE__ */ jsx("tbody", { children: children(node) })
+        ] }) });
+      }
+      case "tableRow":
+        return /* @__PURE__ */ jsx("tr", { children: children(node) });
+      case "tableCell":
+      case "tableHeader":
+        return createElement(node.type === "tableHeader" ? "th" : "td", {
+          colSpan: Number(attrs.colspan) || 1,
+          rowSpan: Number(attrs.rowspan) || 1,
+          style: { ...style, backgroundColor: cellBackground(attrs.backgroundColor) ?? void 0 }
+        }, children(node));
+      case "image": {
+        const aspectRatio = Number(attrs.aspectRatio) || null, galleryScale = Number(attrs.galleryScale) || null;
+        const align = ["left", "center", "right"].includes(String(attrs.align)) ? attrs.align : null;
+        const image = /* @__PURE__ */ jsx(
+          AttachmentImage,
+          {
+            id: String(attrs.attachmentId ?? "") || void 0,
+            src: String(attrs.src ?? ""),
+            alt: String(attrs.alt ?? ""),
+            width: inImageGallery ? void 0 : Number(attrs.width) || void 0,
+            align,
+            aspectRatio,
+            galleryScale,
+            fetcher: props.attachmentFetcher,
+            allowExport: props.allowExport
+          }
+        );
+        const caption = typeof attrs.caption === "string" ? attrs.caption.trim() : "";
+        if (!caption) return image;
+        return /* @__PURE__ */ jsxs("figure", { className: "doc-image-figure", style: inImageGallery ? {
+          "--doc-image-aspect-ratio": String(aspectRatio && aspectRatio > 0 ? aspectRatio : 1),
+          "--doc-image-weight": String(galleryScale && galleryScale > 0 ? galleryScale : 1)
+        } : void 0, children: [
+          image,
+          /* @__PURE__ */ jsx("figcaption", { className: "doc-image-caption", title: caption, children: caption })
+        ] });
+      }
+      case "imageGallery":
+        return /* @__PURE__ */ jsx("div", { className: "doc-image-gallery", "data-image-gallery": "true", style: { "--image-gallery-height": `${Math.min(480, Math.max(72, Number(attrs.height) || 120))}px` }, children: children(node, true) });
+      case "fileAttachment":
+        return /* @__PURE__ */ jsx(FileView, { id: String(attrs.attachmentId ?? ""), filename: String(attrs.filename ?? "附件"), mimeType: String(attrs.mimeType ?? ""), size: Number(attrs.size) || 0, fetcher: props.attachmentFetcher, allowExport: props.allowExport });
+      case "videoEmbed":
+        return /* @__PURE__ */ jsx(VideoView, { attrs });
+      case "mathInline":
+      case "mathBlock":
+        return /* @__PURE__ */ jsx(MathView, { latex: String(attrs.latex ?? ""), block: node.type === "mathBlock" });
+      case "callout": {
+        const { icon } = effectiveCallout(attrs), data = calloutDOMAttributes(attrs);
+        return /* @__PURE__ */ jsxs("div", { ...Object.fromEntries(Object.entries(data).filter(([key]) => key !== "style")), className: "doc-callout", style: cssStyle(data.style ?? ""), children: [
+          icon ? /* @__PURE__ */ jsx("span", { className: "callout-icon", "aria-hidden": "true", "data-callout-decoration": "true", children: icon }) : null,
+          /* @__PURE__ */ jsx("div", { className: "doc-callout-content", "data-callout-content": "true", children: children(node) })
+        ] });
+      }
+      case "columns":
+        return /* @__PURE__ */ jsx("div", { className: "doc-columns", children: children(node) });
+      case "column":
+        return /* @__PURE__ */ jsx("div", { className: "doc-column", children: children(node) });
+      case "pageLink": {
+        const label = String(attrs.label ?? "页面"), id = String(attrs.pageId ?? "");
+        if (!id) return /* @__PURE__ */ jsx("span", { children: label });
+        const target = (_c = props.resolvePageLink ?? ((_b = host.references) == null ? void 0 : _b.resolve)) == null ? void 0 : _c(id, label);
+        const href = safeHref((target == null ? void 0 : target.href) ?? "");
+        return href ? /* @__PURE__ */ jsx("a", { className: "doc-page-link", rel: "noopener noreferrer", href, onClick: (event) => {
+          var _a3;
+          if (!(target == null ? void 0 : target.external) && ((_a3 = host.references) == null ? void 0 : _a3.navigate) && event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey) {
+            event.preventDefault();
+            void host.references.navigate(href);
+          }
+        }, children: label }) : /* @__PURE__ */ jsx("span", { className: "doc-page-link-plain", children: label });
+      }
+      case "mention": {
+        const label = String(attrs.label ?? "用户");
+        return attrs.userId ? /* @__PURE__ */ jsxs("span", { className: "doc-mention", title: `提及：${label}`, children: [
+          "@",
+          label
+        ] }) : /* @__PURE__ */ jsxs("span", { children: [
+          "@",
+          label
+        ] });
+      }
+      case "mindMap": {
+        const count = (n) => (n.type === "text" ? 1 : 0) + (n.content ?? []).reduce((sum, child) => sum + count(child), 0);
+        run += count(node);
+        const model = readMindMap(node);
+        return model ? /* @__PURE__ */ jsx(MindMapBlock, { node, allowExport: props.allowExport, pageId: props.pageId, canComment: props.canComment, onCommentsChanged: props.onCommentsChanged, fetchAttachment: props.attachmentFetcher }) : /* @__PURE__ */ jsx("p", { role: "alert", children: "思维导图格式无效" });
+      }
+      case "workbook":
+        return isWorkbookDocument(node) ? /* @__PURE__ */ jsx(SpreadsheetViewer, { value: node, allowExport: props.allowExport }) : /* @__PURE__ */ jsx("p", { role: "alert", children: "工作表格式无效" });
+      case "mindMapTopic":
+      case "mindMapDescription":
+      case "mindMapNote":
+      case "mindMapRelation":
+        return null;
+      default:
+        return /* @__PURE__ */ jsxs("p", { role: "alert", children: [
+          "不支持的内容节点：",
+          node.type
+        ] });
+    }
+  }
+  return /* @__PURE__ */ jsx("div", { className: "doc-renderer ywiki-prose ywiki-content", children: render(doc) });
+}
+const DocRenderer = DocumentViewer;
+export {
+  DocRenderer,
+  DocumentViewer,
+  MindMapBlock
+};