@bendyline/docblocks-react 2.6.2 → 2.7.1

package/dist/ShareDialog-XUA2OVGI.js

@@ -0,0 +1,292 @@
+import {
+  buildSharedDocumentQrUrl,
+  buildSharedDocumentUrl,
+  createSharedDocumentArchive,
+  sharedDocumentQrFilename
+} from "./chunk-SPUPWCSI.js";
+import {
+  Dialog
+} from "./chunk-56KO2LYN.js";
+
+// src/Export/ShareDialog.tsx
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { SHARED_DOCUMENT_LIMITS } from "@bendyline/docblocks/share";
+
+// src/Export/share-qr.ts
+import QRCode from "qrcode";
+async function renderSharedDocumentQrPng(url) {
+  return QRCode.toDataURL(url, {
+    type: "image/png",
+    errorCorrectionLevel: "M",
+    margin: 4,
+    width: 1024,
+    color: {
+      dark: "#111111ff",
+      light: "#ffffffff"
+    }
+  });
+}
+function qrPngDataUrlToBlob(dataUrl) {
+  const prefix = "data:image/png;base64,";
+  if (!dataUrl.startsWith(prefix)) {
+    throw new Error("The QR code renderer returned an unsupported image format.");
+  }
+  const binary = atob(dataUrl.slice(prefix.length));
+  const bytes = new Uint8Array(binary.length);
+  for (let index = 0; index < binary.length; index += 1) {
+    bytes[index] = binary.charCodeAt(index);
+  }
+  return new Blob([bytes], { type: "image/png" });
+}
+
+// src/Export/ShareDialog.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var MODES = [
+  { value: "", label: "Write (no default)" },
+  { value: "slideshow", label: "Slideshow" },
+  { value: "video", label: "Video" },
+  { value: "page", label: "Page" },
+  { value: "document", label: "Document" },
+  { value: "narrate", label: "Narrate" }
+];
+function ShareDialog({
+  markdown,
+  selectedFile,
+  baseUrl,
+  onClose
+}) {
+  const [mode, setMode] = useState("");
+  const [archive, setArchive] = useState(null);
+  const [archiveError, setArchiveError] = useState(null);
+  const [copyStatus, setCopyStatus] = useState("idle");
+  const [qrDataUrl, setQrDataUrl] = useState(null);
+  const [qrRenderError, setQrRenderError] = useState(null);
+  const [qrCopyStatus, setQrCopyStatus] = useState("idle");
+  const linkRef = useRef(null);
+  useEffect(() => {
+    let cancelled = false;
+    setArchive(null);
+    setArchiveError(null);
+    void createSharedDocumentArchive(markdown, selectedFile).then((nextArchive) => {
+      if (!cancelled) setArchive(nextArchive);
+    }).catch((error) => {
+      if (!cancelled) {
+        setArchiveError(
+          error instanceof Error ? error.message : "DocBlocks could not create the shared link."
+        );
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [markdown, selectedFile]);
+  const linkResult = useMemo(() => {
+    if (!archive) return { url: "", error: archiveError };
+    try {
+      return { url: buildSharedDocumentUrl(baseUrl, archive, mode || null), error: null };
+    } catch (error) {
+      return {
+        url: "",
+        error: error instanceof Error ? error.message : "DocBlocks could not create the shared link."
+      };
+    }
+  }, [archive, archiveError, baseUrl, mode]);
+  const qrLinkResult = useMemo(() => {
+    if (!archive) return { url: "", error: archiveError };
+    try {
+      return { url: buildSharedDocumentQrUrl(archive, mode || null), error: null };
+    } catch (error) {
+      return {
+        url: "",
+        error: error instanceof Error ? error.message : "DocBlocks could not create the QR code."
+      };
+    }
+  }, [archive, archiveError, mode]);
+  useEffect(() => {
+    let cancelled = false;
+    setQrDataUrl(null);
+    setQrRenderError(null);
+    setQrCopyStatus("idle");
+    if (!qrLinkResult.url) return;
+    void renderSharedDocumentQrPng(qrLinkResult.url).then((dataUrl) => {
+      if (!cancelled) setQrDataUrl(dataUrl);
+    }).catch((error) => {
+      if (!cancelled) {
+        setQrRenderError(
+          error instanceof Error ? error.message : "DocBlocks could not render the QR code."
+        );
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [qrLinkResult.url]);
+  useEffect(() => setCopyStatus("idle"), [linkResult.url]);
+  const copyLink = useCallback(async () => {
+    if (!linkResult.url) return;
+    try {
+      if (navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(linkResult.url);
+      } else {
+        linkRef.current?.focus();
+        linkRef.current?.select();
+        if (typeof document.execCommand !== "function" || !document.execCommand("copy")) {
+          throw new Error("Clipboard access is unavailable.");
+        }
+      }
+      setCopyStatus("copied");
+    } catch {
+      linkRef.current?.focus();
+      linkRef.current?.select();
+      setCopyStatus("failed");
+    }
+  }, [linkResult.url]);
+  const copyQrImage = useCallback(async () => {
+    if (!qrDataUrl) return;
+    try {
+      if (!navigator.clipboard?.write || typeof ClipboardItem === "undefined") {
+        throw new Error("Image clipboard access is unavailable.");
+      }
+      const png = qrPngDataUrlToBlob(qrDataUrl);
+      await navigator.clipboard.write([new ClipboardItem({ "image/png": png })]);
+      setQrCopyStatus("copied");
+    } catch {
+      setQrCopyStatus("failed");
+    }
+  }, [qrDataUrl]);
+  const saveQrImage = useCallback(() => {
+    if (!qrDataUrl) return;
+    const download = document.createElement("a");
+    download.href = qrDataUrl;
+    download.download = sharedDocumentQrFilename(selectedFile);
+    download.style.display = "none";
+    document.body.append(download);
+    download.click();
+    download.remove();
+  }, [qrDataUrl, selectedFile]);
+  const isLong = linkResult.url.length > SHARED_DOCUMENT_LIMITS.portableUrlCharacters;
+  const qrError = qrLinkResult.error ?? qrRenderError;
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      title: "Share document",
+      onClose,
+      className: "db-export-dialog db-share-dialog",
+      footerClassName: "db-export-footer",
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "db-export-btn db-export-btn--secondary",
+            type: "button",
+            onClick: onClose,
+            children: "Close"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "db-export-btn db-export-btn--primary",
+            type: "button",
+            onClick: () => void copyLink(),
+            disabled: !linkResult.url,
+            children: copyStatus === "copied" ? "Copied" : copyStatus === "failed" ? "Select and copy" : "Copy link"
+          }
+        )
+      ] }),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "db-share-warning", role: "note", children: "The text and formatting of this document are embedded in the URL. Anyone with the link can read the shared copy, so do not use it for secrets." }),
+        /* @__PURE__ */ jsx("p", { className: "db-export-hint", role: "note", children: "Images are excluded from share links. Image descriptions are kept when available. Your original document is unchanged." }),
+        /* @__PURE__ */ jsxs("div", { className: "db-export-field", children: [
+          /* @__PURE__ */ jsx("label", { className: "db-export-label", htmlFor: "db-share-mode", children: "Default mode (optional)" }),
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              id: "db-share-mode",
+              className: "db-export-select",
+              value: mode,
+              onChange: (event) => setMode(event.target.value),
+              children: MODES.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value || "write"))
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "db-export-hint", children: "Without a default, the copied document opens in Write. Other choices open directly in Use." })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "db-export-field", children: [
+          /* @__PURE__ */ jsx("label", { className: "db-export-label", htmlFor: "db-share-link", children: "Share link" }),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ref: linkRef,
+              id: "db-share-link",
+              className: "db-share-link",
+              value: linkResult.url,
+              readOnly: true,
+              rows: 3,
+              spellCheck: false,
+              "aria-describedby": "db-share-link-status",
+              placeholder: linkResult.error ? "" : "Creating link..."
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              id: "db-share-link-status",
+              className: `db-export-hint${isLong ? " db-share-length-warning" : ""}`,
+              children: linkResult.error ? linkResult.error : linkResult.url ? isLong ? `${linkResult.url.length.toLocaleString()} characters. Links longer than 4,096 characters may be truncated by messaging or email tools.` : `${linkResult.url.length.toLocaleString()} characters.` : "Creating a link with the shared text and formatting..."
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("section", { className: "db-share-qr", "aria-labelledby": "db-share-qr-title", children: [
+          /* @__PURE__ */ jsxs("div", { className: "db-share-qr-heading", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h3", { id: "db-share-qr-title", children: "QR code" }),
+              /* @__PURE__ */ jsx("span", { className: "db-export-hint", children: "A self-contained docblocks.com link to the shared text. No document content is uploaded." })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "db-share-qr-actions", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "db-export-btn db-export-btn--secondary",
+                  type: "button",
+                  onClick: () => void copyQrImage(),
+                  disabled: !qrDataUrl,
+                  children: qrCopyStatus === "copied" ? "Copied QR" : qrCopyStatus === "failed" ? "Copy unavailable" : "Copy QR image"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "db-export-btn db-export-btn--secondary",
+                  type: "button",
+                  onClick: saveQrImage,
+                  disabled: !qrDataUrl,
+                  children: "Save QR PNG"
+                }
+              )
+            ] })
+          ] }),
+          qrDataUrl ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              className: "db-share-qr-image",
+              src: qrDataUrl,
+              alt: "QR code for this shared DocBlocks document"
+            }
+          ) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `db-share-qr-placeholder${qrError ? " db-share-qr-placeholder--error" : ""}`,
+              role: qrError ? "note" : "status",
+              children: qrError ?? "Rendering QR code..."
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "db-export-hint db-share-qr-status", "aria-live": "polite", children: qrCopyStatus === "failed" ? "This browser could not copy the PNG. Save it instead." : qrDataUrl ? `${qrLinkResult.url.length.toLocaleString()} of ${SHARED_DOCUMENT_LIMITS.qrUrlCharacters.toLocaleString()} supported QR characters.` : "" })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "db-share-temporary-note", children: "Opening the link creates a temporary workspace. Changes there do not alter this document or the link." })
+      ]
+    }
+  );
+}
+export {
+  ShareDialog
+};