@bendyline/docblocks-react 2.0.0 → 2.1.1

package/dist/ShareDialog-PAMOQQFB.js

@@ -0,0 +1,212 @@
+// src/Export/ShareDialog.tsx
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { SHARED_DOCUMENT_LIMITS as SHARED_DOCUMENT_LIMITS2 } from "@bendyline/docblocks/share";
+
+// src/Export/shared-document.ts
+import {
+  SHARED_DOCUMENT_LIMITS,
+  createSharedDocumentUrl
+} from "@bendyline/docblocks/share";
+var PUBLIC_DOCBLOCKS_SHARE_URL = "https://bendyline.github.io/docblocks/";
+function resolveSharedDocumentBaseUrl(currentUrl) {
+  try {
+    const current = new URL(currentUrl);
+    if (current.protocol === "http:" || current.protocol === "https:") {
+      current.hash = "";
+      current.searchParams.delete("action");
+      return current.toString();
+    }
+  } catch {
+  }
+  return PUBLIC_DOCBLOCKS_SHARE_URL;
+}
+function sharedDocumentFilename(selectedFile) {
+  const basename = selectedFile?.replace(/\\/gu, "/").split("/").pop() ?? "shared.md";
+  const stem = basename.replace(/\.md$/iu, "").replace(/[^A-Za-z0-9._-]+/gu, "-");
+  const bounded = stem.replace(/^-+|-+$/gu, "").slice(0, 80) || "shared";
+  return `${bounded}.md`;
+}
+async function createSharedDocumentArchive(markdown, selectedFile) {
+  const encoded = new TextEncoder().encode(markdown);
+  if (encoded.byteLength > SHARED_DOCUMENT_LIMITS.markdownBytes) {
+    throw new Error(
+      `This document is too large for a shared URL (maximum ${SHARED_DOCUMENT_LIMITS.markdownBytes.toLocaleString()} UTF-8 bytes).`
+    );
+  }
+  const [{ MemoryContentContainer }, { containerToZip }] = await Promise.all([
+    import("@bendyline/squisq/storage"),
+    import("@bendyline/squisq-formats/container")
+  ]);
+  const container = new MemoryContentContainer();
+  await container.writeFile(sharedDocumentFilename(selectedFile), encoded, "text/markdown");
+  const blob = await containerToZip(container, { compression: "DEFLATE", compressionLevel: 9 });
+  return new Uint8Array(await blob.arrayBuffer());
+}
+function buildSharedDocumentUrl(baseUrl, archive, mode) {
+  return createSharedDocumentUrl(resolveSharedDocumentBaseUrl(baseUrl), archive, mode);
+}
+
+// src/Export/ShareDialog.tsx
+import { 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 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]);
+  useEffect(() => setCopyStatus("idle"), [linkResult.url]);
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [onClose]);
+  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 isLong = linkResult.url.length > SHARED_DOCUMENT_LIMITS2.portableUrlCharacters;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "db-dialog-overlay",
+      onClick: (event) => {
+        if (event.target === event.currentTarget) onClose();
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "db-dialog db-export-dialog db-share-dialog",
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": "db-share-dialog-title",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "db-dialog-header", children: [
+              /* @__PURE__ */ jsx("h2", { className: "db-dialog-title", id: "db-share-dialog-title", children: "Share document via URL" }),
+              /* @__PURE__ */ jsx("button", { className: "db-dialog-close", type: "button", onClick: onClose, "aria-label": "Close", children: "\xD7" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "db-dialog-body", children: [
+              /* @__PURE__ */ jsx("div", { className: "db-share-warning", role: "note", children: "The contents of this document are embedded in the URL. Anyone with the link receives a copy of the document, so do not use it for secrets." }),
+              /* @__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.` : "Compressing this document into a Markdown-only DBK..."
+                  }
+                )
+              ] }),
+              /* @__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." })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "db-export-footer", 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"
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  ShareDialog
+};

package/dist/chunk-3CZ27FOA.js

@@ -0,0 +1,359 @@
+import {
+  loadTransformStyleSummaries
+} from "./chunk-YBEYTVU2.js";
+import {
+  Dialog
+} from "./chunk-LG6HAWCK.js";
+import {
+  FORMAT_LABELS,
+  saveExportOptions
+} from "./chunk-EBWYGTN7.js";
+
+// src/Export/ExportDialog.tsx
+import { useState, useCallback, useEffect, useMemo } from "react";
+import { getThemeSummaries } from "@bendyline/squisq/schemas";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var FORMATS = ["pdf", "docx", "pptx", "epub", "html", "md"];
+var FORMAT_CHIP_LABELS = {
+  pdf: "PDF",
+  docx: "Word",
+  pptx: "PowerPoint",
+  epub: "EPUB",
+  html: "HTML",
+  md: "Markdown"
+};
+var HTML_STYLE_CHIPS = [
+  {
+    key: "plain",
+    label: "Plain",
+    hint: "A lightweight static HTML document."
+  },
+  {
+    key: "rendered",
+    label: "Rendered",
+    hint: "Renders via SquisqPlayer with themes and playback support."
+  }
+];
+var HTML_BUNDLE_CHIPS = [
+  {
+    key: "single",
+    label: "Single file",
+    hint: "One .html file with images embedded as base64 data URIs."
+  },
+  {
+    key: "zip",
+    label: "ZIP archive",
+    hint: "A .zip with index.html plus separate image (and JS) files."
+  }
+];
+function ChipRadioGroup({
+  name,
+  value,
+  options,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "db-export-chips", role: "radiogroup", "aria-label": name, children: options.map((opt) => {
+    const active = opt.key === value;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        role: "radio",
+        "aria-checked": active,
+        className: `db-export-chip${active ? " db-export-chip--active" : ""}`,
+        onClick: () => onChange(opt.key),
+        title: opt.title,
+        children: opt.label
+      },
+      opt.key
+    );
+  }) });
+}
+function ExportDialog({
+  initial,
+  exporting,
+  error,
+  destination,
+  onExport,
+  onOptionsChange,
+  onAnimatedGifExport,
+  onClose
+}) {
+  const [format, setFormat] = useState(initial.format);
+  const [themeId, setThemeId] = useState(initial.themeId);
+  const [transformStyle, setTransformStyle] = useState(initial.transformStyle);
+  const [pageSize, setPageSize] = useState(initial.pageSize);
+  const [htmlStyle, setHtmlStyle] = useState(initial.htmlStyle);
+  const [htmlBundle, setHtmlBundle] = useState(initial.htmlBundle);
+  const [includeLinkedDocs, setIncludeLinkedDocs] = useState(initial.includeLinkedDocs);
+  const [entryAsIndex, setEntryAsIndex] = useState(initial.entryAsIndex);
+  const [transforms, setTransforms] = useState([]);
+  const themes = getThemeSummaries();
+  const showTheme = format === "docx" || format === "pdf" || format === "pptx" || format === "epub" || format === "html";
+  const showTransform = format === "pptx";
+  const showPageSize = format === "pdf";
+  const showHtmlOptions = format === "html";
+  const showIncludeLinked = format === "html";
+  const showHtmlBundle = showHtmlOptions && !includeLinkedDocs;
+  const showEntryAsIndex = showHtmlOptions && (htmlBundle === "single" || includeLinkedDocs);
+  useEffect(() => {
+    if (!showTransform) return;
+    let cancelled = false;
+    loadTransformStyleSummaries().then((nextTransforms) => {
+      if (!cancelled) setTransforms(nextTransforms);
+    }).catch(() => {
+      if (!cancelled) setTransforms([]);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [showTransform]);
+  const currentOptions = useMemo(
+    () => ({
+      format,
+      themeId,
+      transformStyle,
+      pageSize,
+      htmlStyle,
+      htmlBundle,
+      includeLinkedDocs: showIncludeLinked && includeLinkedDocs,
+      entryAsIndex: showEntryAsIndex && entryAsIndex
+    }),
+    [
+      format,
+      themeId,
+      transformStyle,
+      pageSize,
+      htmlStyle,
+      htmlBundle,
+      includeLinkedDocs,
+      entryAsIndex,
+      showIncludeLinked,
+      showEntryAsIndex
+    ]
+  );
+  useEffect(() => {
+    onOptionsChange?.(currentOptions);
+  }, [currentOptions, onOptionsChange]);
+  const handleExport = useCallback(() => {
+    if (destination?.error) return;
+    saveExportOptions(currentOptions);
+    onExport(currentOptions);
+  }, [currentOptions, destination?.error, onExport]);
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      title: "Export Document",
+      onClose,
+      className: "db-export-dialog",
+      footerClassName: "db-export-footer",
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "db-export-btn db-export-btn--secondary",
+            onClick: onClose,
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "db-export-btn db-export-btn--primary",
+            onClick: handleExport,
+            disabled: exporting || Boolean(destination?.error),
+            children: exporting ? "Exporting..." : "Export"
+          }
+        )
+      ] }),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "db-export-field", children: [
+          /* @__PURE__ */ jsx("span", { className: "db-export-label", children: "Format" }),
+          /* @__PURE__ */ jsx(
+            ChipRadioGroup,
+            {
+              name: "Format",
+              value: format,
+              options: FORMATS.map((f) => ({
+                key: f,
+                label: FORMAT_CHIP_LABELS[f],
+                title: FORMAT_LABELS[f]
+              })),
+              onChange: setFormat
+            }
+          )
+        ] }),
+        destination && /* @__PURE__ */ jsxs("div", { className: "db-export-field", children: [
+          /* @__PURE__ */ jsx("label", { className: "db-export-label", htmlFor: "db-export-path", children: "Export to" }),
+          /* @__PURE__ */ jsxs("div", { className: "db-export-path-row", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: "db-export-path",
+                className: "db-export-path-input",
+                value: destination.value,
+                onChange: destination.onChange ? (event) => destination.onChange?.(event.target.value, currentOptions) : void 0,
+                readOnly: !destination.onChange,
+                disabled: exporting,
+                spellCheck: false,
+                autoComplete: "off",
+                "aria-invalid": Boolean(destination.error),
+                "aria-describedby": destination.error ? "db-export-path-error" : void 0
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "db-export-path-pick",
+                onClick: () => void destination.onPick(currentOptions),
+                disabled: exporting,
+                "aria-label": "Choose export location",
+                title: "Choose export location",
+                children: "..."
+              }
+            )
+          ] }),
+          destination.error && /* @__PURE__ */ jsx(
+            "span",
+            {
+              id: "db-export-path-error",
+              className: "db-export-hint db-export-hint--error",
+              role: "alert",
+              children: destination.error
+            }
+          ),
+          destination.hint && /* @__PURE__ */ jsx("span", { className: "db-export-hint", children: destination.hint })
+        ] }),
+        showHtmlOptions && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "db-export-field", children: [
+            /* @__PURE__ */ jsx("span", { className: "db-export-label", children: "Style" }),
+            /* @__PURE__ */ jsx(
+              ChipRadioGroup,
+              {
+                name: "Style",
+                value: htmlStyle,
+                options: HTML_STYLE_CHIPS,
+                onChange: setHtmlStyle
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "db-export-hint", children: HTML_STYLE_CHIPS.find((c) => c.key === htmlStyle)?.hint })
+          ] }),
+          showHtmlBundle && /* @__PURE__ */ jsxs("div", { className: "db-export-field", children: [
+            /* @__PURE__ */ jsx("span", { className: "db-export-label", children: "Bundle" }),
+            /* @__PURE__ */ jsx(
+              ChipRadioGroup,
+              {
+                name: "Bundle",
+                value: htmlBundle,
+                options: HTML_BUNDLE_CHIPS,
+                onChange: setHtmlBundle
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "db-export-hint", children: HTML_BUNDLE_CHIPS.find((c) => c.key === htmlBundle)?.hint })
+          ] }),
+          showIncludeLinked && /* @__PURE__ */ jsxs("div", { className: "db-export-field", children: [
+            /* @__PURE__ */ jsxs("label", { className: "db-export-checkbox", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: includeLinkedDocs,
+                  onChange: (e) => setIncludeLinkedDocs(e.target.checked)
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { children: "Include linked-to documents" })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "db-export-hint", children: includeLinkedDocs ? "Follows relative .md links from this page and bundles every reachable document as its own .html in a ZIP. Cross-doc links rewrite from .md to .html." : "Only this document is exported." })
+          ] }),
+          showEntryAsIndex && /* @__PURE__ */ jsxs("div", { className: "db-export-field", children: [
+            /* @__PURE__ */ jsxs("label", { className: "db-export-checkbox", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: entryAsIndex,
+                  onChange: (e) => setEntryAsIndex(e.target.checked)
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { children: "Name entry page index.html" })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "db-export-hint", children: entryAsIndex ? includeLinkedDocs ? "Renames this page to index.html in the ZIP and rewrites any cross-doc links pointing back at it. Drops straight into a static-site host." : "Downloads as index.html instead of the document name. Drops straight into a static-site host." : "Exports under the document name." })
+          ] })
+        ] }),
+        showTheme && /* @__PURE__ */ jsxs("div", { className: "db-export-field", children: [
+          /* @__PURE__ */ jsx("label", { className: "db-export-label", htmlFor: "db-export-theme", children: "Theme" }),
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              id: "db-export-theme",
+              className: "db-export-select",
+              value: themeId,
+              onChange: (e) => setThemeId(e.target.value),
+              children: themes.map((t) => /* @__PURE__ */ jsx("option", { value: t.id, children: t.name }, t.id))
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "db-export-hint", children: themes.find((t) => t.id === themeId)?.description })
+        ] }),
+        showTransform && /* @__PURE__ */ jsxs("div", { className: "db-export-field", children: [
+          /* @__PURE__ */ jsx("label", { className: "db-export-label", htmlFor: "db-export-transform", children: "Transform" }),
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              id: "db-export-transform",
+              className: "db-export-select",
+              value: transformStyle,
+              onChange: (e) => setTransformStyle(e.target.value),
+              children: transforms.length === 0 ? /* @__PURE__ */ jsx("option", { value: transformStyle, children: "Loading..." }) : transforms.map((t) => /* @__PURE__ */ jsx("option", { value: t.id, children: t.name }, t.id))
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "db-export-hint", children: transforms.find((t) => t.id === transformStyle)?.description })
+        ] }),
+        showPageSize && /* @__PURE__ */ jsxs("div", { className: "db-export-field", children: [
+          /* @__PURE__ */ jsx("label", { className: "db-export-label", htmlFor: "db-export-pagesize", children: "Page Size" }),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              id: "db-export-pagesize",
+              className: "db-export-select",
+              value: pageSize,
+              onChange: (e) => setPageSize(e.target.value),
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "letter", children: "US Letter" }),
+                /* @__PURE__ */ jsx("option", { value: "a4", children: "A4" })
+              ]
+            }
+          )
+        ] }),
+        onAnimatedGifExport && /* @__PURE__ */ jsxs("div", { className: "db-export-field", children: [
+          /* @__PURE__ */ jsx("span", { className: "db-export-label", children: "Animated media" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "db-export-btn db-export-btn--secondary",
+              onClick: onAnimatedGifExport,
+              children: "Animated GIF..."
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "db-export-hint", children: "Opens timing, orientation, captions, looping, and color controls." })
+        ] }),
+        /* @__PURE__ */ jsxs("p", { className: "db-export-more-formats", children: [
+          "Need spreadsheets, ",
+          onAnimatedGifExport ? "" : "animated media, ",
+          "portable bundles, or automation?",
+          " ",
+          /* @__PURE__ */ jsx("a", { href: "https://docblocks.com/cli/", target: "_blank", rel: "noopener noreferrer", children: "More formats with the DocBlocks CLI" }),
+          "."
+        ] }),
+        error && /* @__PURE__ */ jsx("p", { className: "db-export-error", role: "alert", children: error })
+      ]
+    }
+  );
+}
+
+export {
+  ExportDialog
+};