@flanksource/clicky-ui 0.3.1 → 0.3.3

package/dist/data/MarkdownEditor.js

@@ -0,0 +1,616 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId, useMemo, useState, useEffect } from "react";
+import { Button } from "../components/button.js";
+import { IconButton } from "../components/IconButton.js";
+import { SegmentedControl } from "../components/SegmentedControl.js";
+import { cn } from "../lib/utils.js";
+import { Clicky } from "./Clicky.js";
+import { Icon } from "./Icon.js";
+import { JsonView } from "./JsonView.js";
+import { Markdown } from "./Markdown.js";
+import { MARKDOWN_EDITOR_PREVIEW_FORMATS, buildMarkdownPreviewUrl } from "./MarkdownEditor.model.js";
+import { UiFileSpreadsheet } from "../icons/components/UiFileSpreadsheet.js";
+import { UiJson } from "../icons/components/UiJson.js";
+import { UiFileText } from "../icons/components/UiFileText.js";
+import { UiMarkdown } from "../icons/components/UiMarkdown.js";
+import { UiFileCode } from "../icons/components/UiFileCode.js";
+import { UiEye } from "../icons/components/UiEye.js";
+import { UiEdit } from "../icons/components/UiEdit.js";
+import { UiRefresh } from "../icons/components/UiRefresh.js";
+import { UiCopy } from "../icons/components/UiCopy.js";
+const FORMAT_META = {
+  react: {
+    label: "React",
+    icon: UiEye
+  },
+  html: {
+    label: "HTML",
+    icon: UiFileCode
+  },
+  markdown: {
+    label: "Markdown",
+    icon: UiMarkdown
+  },
+  pdf: {
+    label: "PDF",
+    icon: UiFileText,
+    iconClassName: "text-rose-600 dark:text-rose-400"
+  },
+  json: {
+    label: "JSON",
+    icon: UiJson
+  },
+  csv: {
+    label: "CSV",
+    icon: UiFileSpreadsheet,
+    iconClassName: "text-emerald-600 dark:text-emerald-400"
+  },
+  excel: {
+    label: "Excel",
+    icon: UiFileSpreadsheet,
+    iconClassName: "text-emerald-700 dark:text-emerald-300"
+  }
+};
+function MarkdownEditor({
+  value,
+  defaultValue = "",
+  onChange,
+  label = "Markdown",
+  placeholder = "Write markdown...",
+  previewFormats,
+  previewFormat,
+  defaultPreviewFormat,
+  onPreviewFormatChange,
+  previewEndpoint,
+  previewMethod = "POST",
+  previewHeaders,
+  buildPreviewUrl,
+  loadPreview,
+  clickyData,
+  previewDebounceMs = 350,
+  minHeight = 420,
+  disabled = false,
+  readOnly = false,
+  className,
+  editorClassName,
+  previewClassName,
+  toolbar
+}) {
+  const editorId = useId();
+  const formats = useMemo(
+    () => normalizePreviewFormats(previewFormats),
+    [previewFormats]
+  );
+  const firstFormat = formats[0] ?? "react";
+  const [draft, setDraft] = useState(defaultValue);
+  const markdown = value ?? draft;
+  const [internalFormat, setInternalFormat] = useState(
+    () => normalizeInitialFormat(defaultPreviewFormat, formats) ?? firstFormat
+  );
+  const activeFormat = formats.includes(previewFormat ?? internalFormat) ? previewFormat ?? internalFormat : firstFormat;
+  const [refreshKey, setRefreshKey] = useState(0);
+  const [previewState, setPreviewState] = useState({
+    status: "idle"
+  });
+  const contentStyle = useMemo(
+    () => ({ minHeight: cssSize(minHeight) }),
+    [minHeight]
+  );
+  const remoteEnabled = Boolean(loadPreview || previewEndpoint || buildPreviewUrl);
+  const currentMeta = FORMAT_META[activeFormat];
+  const segmentOptions = useMemo(
+    () => formats.map((format) => {
+      const meta = FORMAT_META[format];
+      return {
+        id: format,
+        label: meta.label,
+        icon: meta.icon,
+        title: `${meta.label} preview`
+      };
+    }),
+    [formats]
+  );
+  useEffect(() => {
+    if (formats.includes(activeFormat)) return;
+    setInternalFormat(firstFormat);
+  }, [activeFormat, firstFormat, formats]);
+  useEffect(() => {
+    if (!remoteEnabled) {
+      setPreviewState({ status: "idle" });
+      return;
+    }
+    const controller = new AbortController();
+    const timeout = window.setTimeout(() => {
+      setPreviewState(
+        (current) => current.status === "success" ? { status: "loading", result: current.result } : { status: "loading" }
+      );
+      resolvePreview({
+        markdown,
+        format: activeFormat,
+        signal: controller.signal,
+        previewEndpoint,
+        previewMethod,
+        previewHeaders,
+        buildPreviewUrl,
+        loadPreview
+      }).then((result) => {
+        if (!controller.signal.aborted) {
+          setPreviewState({ status: "success", result });
+        }
+      }).catch((error) => {
+        if (controller.signal.aborted) return;
+        setPreviewState((current) => ({
+          status: "error",
+          error: error instanceof Error ? error.message : "Preview failed",
+          ...current.status === "loading" && current.result ? { result: current.result } : {}
+        }));
+      });
+    }, Math.max(0, previewDebounceMs));
+    return () => {
+      window.clearTimeout(timeout);
+      controller.abort();
+    };
+  }, [
+    activeFormat,
+    buildPreviewUrl,
+    loadPreview,
+    markdown,
+    previewDebounceMs,
+    previewEndpoint,
+    previewHeaders,
+    previewMethod,
+    refreshKey,
+    remoteEnabled
+  ]);
+  const updateMarkdown = (next) => {
+    if (value === void 0) setDraft(next);
+    onChange == null ? void 0 : onChange(next);
+  };
+  const updateFormat = (next) => {
+    if (previewFormat === void 0) setInternalFormat(next);
+    onPreviewFormatChange == null ? void 0 : onPreviewFormatChange(next);
+  };
+  const copySource = () => {
+    var _a;
+    const clipboard = (_a = globalThis.navigator) == null ? void 0 : _a.clipboard;
+    if (clipboard == null ? void 0 : clipboard.writeText) {
+      void clipboard.writeText(markdown).catch(() => void 0);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("rounded-md border border-border bg-card", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-density-2 border-b border-border px-density-3 py-density-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Icon, { icon: UiEdit, className: "text-base text-muted-foreground" }),
+        /* @__PURE__ */ jsx(
+          "label",
+          {
+            htmlFor: editorId,
+            className: "truncate text-sm font-medium text-card-foreground",
+            children: label
+          }
+        ),
+        previewState.status === "loading" && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Refreshing..." })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-center justify-end gap-2", children: [
+        /* @__PURE__ */ jsx(
+          SegmentedControl,
+          {
+            value: activeFormat,
+            options: segmentOptions,
+            onChange: updateFormat,
+            size: "sm",
+            "aria-label": "Markdown preview format",
+            className: "max-w-full flex-wrap"
+          }
+        ),
+        remoteEnabled && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            icon: UiRefresh,
+            label: "Refresh preview",
+            disabled,
+            onClick: () => setRefreshKey((current) => current + 1)
+          }
+        ),
+        /* @__PURE__ */ jsx(IconButton, { icon: UiCopy, label: "Copy markdown", onClick: copySource }),
+        toolbar
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-density-3 p-density-3 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 overflow-hidden rounded-md border border-border bg-background", children: [
+        /* @__PURE__ */ jsx("div", { className: "border-b border-border px-density-3 py-density-2 text-xs font-medium text-muted-foreground", children: "Source" }),
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            id: editorId,
+            value: markdown,
+            placeholder,
+            disabled,
+            readOnly,
+            spellCheck: true,
+            onChange: (event) => updateMarkdown(event.currentTarget.value),
+            className: cn(
+              "block w-full resize-y border-0 bg-transparent px-density-3 py-density-3 font-mono text-sm leading-6 text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-60",
+              editorClassName
+            ),
+            style: contentStyle
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 overflow-hidden rounded-md border border-border bg-background", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border px-density-3 py-density-2 text-xs font-medium text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              icon: currentMeta.icon,
+              className: cn("text-sm", currentMeta.iconClassName)
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: currentMeta.label })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "overflow-auto px-density-3 py-density-3",
+              previewClassName
+            ),
+            style: contentStyle,
+            children: /* @__PURE__ */ jsx(
+              MarkdownEditorPreview,
+              {
+                format: activeFormat,
+                markdown,
+                state: previewState,
+                clickyData
+              }
+            )
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function MarkdownEditorPreview({
+  format,
+  markdown,
+  state,
+  clickyData
+}) {
+  const result = state.status === "success" || state.status === "loading" || state.status === "error" ? state.result : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-density-3", children: [
+    state.status === "error" && /* @__PURE__ */ jsx(PreviewNotice, { title: "Preview failed", message: state.error, tone: "danger" }),
+    result ? /* @__PURE__ */ jsx(PreviewResult, { format, result }) : /* @__PURE__ */ jsx(
+      LocalPreview,
+      {
+        format,
+        markdown,
+        clickyData
+      }
+    )
+  ] });
+}
+function LocalPreview({
+  format,
+  markdown,
+  clickyData
+}) {
+  if (format === "react") {
+    const data = typeof clickyData === "function" ? clickyData(markdown) : clickyData;
+    return data === void 0 ? /* @__PURE__ */ jsx(Markdown, { text: markdown }) : /* @__PURE__ */ jsx(Clicky, { data });
+  }
+  if (format === "markdown") {
+    return /* @__PURE__ */ jsx(TextPreview, { label: "Markdown source", text: markdown });
+  }
+  return /* @__PURE__ */ jsx(
+    PreviewNotice,
+    {
+      title: `${FORMAT_META[format].label} preview not configured`,
+      message: "Pass previewEndpoint or loadPreview to render this format from Clicky."
+    }
+  );
+}
+function PreviewResult({
+  format,
+  result
+}) {
+  switch (result.kind) {
+    case "clicky":
+      return /* @__PURE__ */ jsx(Clicky, { data: result.data });
+    case "html":
+      return /* @__PURE__ */ jsx(HtmlPreview, { html: result.html });
+    case "json":
+      return /* @__PURE__ */ jsx(JsonView, { data: result.data });
+    case "url":
+      return /* @__PURE__ */ jsx(UrlPreview, { format, url: result.url });
+    case "blob":
+      return /* @__PURE__ */ jsx(BlobPreview, { format, result });
+    case "text":
+      return /* @__PURE__ */ jsx(TextResult, { format, result });
+  }
+}
+function TextResult({
+  format,
+  result
+}) {
+  if (format === "react") {
+    return /* @__PURE__ */ jsx(Clicky, { data: result.text });
+  }
+  if (format === "html" || isHtmlContent(result.contentType)) {
+    return /* @__PURE__ */ jsx(HtmlPreview, { html: result.text });
+  }
+  if (format === "json" || isJsonContent(result.contentType)) {
+    const parsed = parseJson(result.text);
+    return parsed.ok ? /* @__PURE__ */ jsx(JsonView, { data: parsed.value }) : /* @__PURE__ */ jsx(TextPreview, { label: "JSON output", text: result.text });
+  }
+  return /* @__PURE__ */ jsx(
+    TextPreview,
+    {
+      label: `${FORMAT_META[format].label} output`,
+      text: result.text
+    }
+  );
+}
+function UrlPreview({
+  format,
+  url
+}) {
+  if (format === "react") {
+    return /* @__PURE__ */ jsx(Clicky, { url, view: ["clicky"], download: { all: false } });
+  }
+  if (format === "html") {
+    return /* @__PURE__ */ jsx(HtmlPreview, { src: url });
+  }
+  if (format === "pdf") {
+    return /* @__PURE__ */ jsx(FramePreview, { title: "PDF preview", src: url });
+  }
+  if (format === "excel") {
+    return /* @__PURE__ */ jsx(DownloadPreview, { label: "Open Excel workbook", href: url });
+  }
+  return /* @__PURE__ */ jsx(TextPreview, { label: `${FORMAT_META[format].label} URL`, text: url });
+}
+function BlobPreview({
+  format,
+  result
+}) {
+  const [url, setUrl] = useState();
+  useEffect(() => {
+    const next = URL.createObjectURL(result.blob);
+    setUrl(next);
+    return () => URL.revokeObjectURL(next);
+  }, [result.blob]);
+  if (!url) {
+    return /* @__PURE__ */ jsx(PreviewNotice, { title: "Preparing preview", message: "Creating object URL." });
+  }
+  if (format === "pdf") {
+    return /* @__PURE__ */ jsx(FramePreview, { title: "PDF preview", src: url });
+  }
+  return /* @__PURE__ */ jsx(
+    DownloadPreview,
+    {
+      label: `Open ${FORMAT_META[format].label}`,
+      href: url,
+      ...result.filename ? { download: result.filename } : {}
+    }
+  );
+}
+function HtmlPreview({
+  html,
+  src
+}) {
+  return /* @__PURE__ */ jsx(
+    FramePreview,
+    {
+      title: "HTML preview",
+      ...src ? { src } : {},
+      ...html ? { srcDoc: html } : {},
+      sandbox: "allow-same-origin"
+    }
+  );
+}
+function FramePreview({
+  title,
+  src,
+  srcDoc,
+  sandbox
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-md border border-border bg-background", children: /* @__PURE__ */ jsx(
+    "iframe",
+    {
+      title,
+      ...src ? { src } : {},
+      ...srcDoc ? { srcDoc } : {},
+      ...sandbox ? { sandbox } : {},
+      className: "h-[720px] w-full bg-background"
+    }
+  ) });
+}
+function DownloadPreview({
+  label,
+  href,
+  download
+}) {
+  return /* @__PURE__ */ jsx(
+    PreviewNotice,
+    {
+      title: "Inline preview unavailable",
+      message: /* @__PURE__ */ jsx(Button, { asChild: true, variant: "outline", size: "sm", children: /* @__PURE__ */ jsx(
+        "a",
+        {
+          href,
+          target: "_blank",
+          rel: "noreferrer",
+          ...download ? { download } : {},
+          children: label
+        }
+      ) })
+    }
+  );
+}
+function TextPreview({ label, text }) {
+  return /* @__PURE__ */ jsx(
+    "pre",
+    {
+      "aria-label": label,
+      className: "overflow-auto whitespace-pre-wrap break-words rounded-md border border-border bg-muted/30 px-density-3 py-density-3 font-mono text-xs text-foreground",
+      children: text || "No content"
+    }
+  );
+}
+function PreviewNotice({
+  title,
+  message,
+  tone = "default"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-md border p-density-3",
+        tone === "danger" ? "border-destructive/30 bg-destructive/5" : "border-border bg-muted/30"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "text-sm font-medium",
+              tone === "danger" && "text-destructive"
+            ),
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-muted-foreground", children: message })
+      ]
+    }
+  );
+}
+function normalizePreviewFormats(formats) {
+  const seen = /* @__PURE__ */ new Set();
+  const source = formats && formats.length > 0 ? formats : MARKDOWN_EDITOR_PREVIEW_FORMATS;
+  for (const format of source) {
+    seen.add(format);
+  }
+  return [...seen];
+}
+function normalizeInitialFormat(format, formats) {
+  return format && formats.includes(format) ? format : void 0;
+}
+function cssSize(size) {
+  return typeof size === "number" ? `${size}px` : size;
+}
+async function resolvePreview({
+  markdown,
+  format,
+  signal,
+  previewEndpoint,
+  previewMethod,
+  previewHeaders,
+  buildPreviewUrl,
+  loadPreview
+}) {
+  if (loadPreview) {
+    return loadPreview({ markdown, format, signal });
+  }
+  const url = (buildPreviewUrl == null ? void 0 : buildPreviewUrl({ markdown, format })) ?? (previewEndpoint ? buildMarkdownPreviewUrl(previewEndpoint, format) : void 0);
+  if (!url) {
+    throw new Error("No preview endpoint configured");
+  }
+  const headers = new Headers(
+    typeof previewHeaders === "function" ? previewHeaders({ markdown, format }) : previewHeaders
+  );
+  headers.set("Accept", previewAccept(format));
+  const init = {
+    method: previewMethod,
+    headers,
+    signal
+  };
+  if (previewMethod !== "GET") {
+    headers.set("Content-Type", "text/markdown; charset=utf-8");
+    init.body = markdown;
+  }
+  const response = await fetch(url, init);
+  if (!response.ok) {
+    throw new Error(
+      `Preview failed with ${response.status} ${response.statusText}`.trim()
+    );
+  }
+  const contentType = response.headers.get("Content-Type") ?? "";
+  if (format === "pdf" || format === "excel" || isBinaryContent(contentType)) {
+    return {
+      kind: "blob",
+      blob: await response.blob(),
+      contentType,
+      filename: previewFilename(format)
+    };
+  }
+  const text = await response.text();
+  if (format === "react") {
+    return { kind: "clicky", data: text };
+  }
+  if (format === "html" || isHtmlContent(contentType)) {
+    return { kind: "html", html: text };
+  }
+  if (format === "json" || isJsonContent(contentType)) {
+    const parsed = parseJson(text);
+    return parsed.ok ? { kind: "json", data: parsed.value } : { kind: "text", text, contentType };
+  }
+  return { kind: "text", text, contentType };
+}
+function previewAccept(format) {
+  switch (format) {
+    case "react":
+      return "application/json+clicky, application/clicky+json;q=0.9, application/json;q=0.8,*/*;q=0.7";
+    case "html":
+      return "text/html, */*;q=0.7";
+    case "markdown":
+      return "text/markdown, text/plain;q=0.8,*/*;q=0.7";
+    case "pdf":
+      return "application/pdf, */*;q=0.7";
+    case "json":
+      return "application/json, text/plain;q=0.8,*/*;q=0.7";
+    case "csv":
+      return "text/csv, text/plain;q=0.8,*/*;q=0.7";
+    case "excel":
+      return "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, */*;q=0.7";
+  }
+}
+function previewFilename(format) {
+  switch (format) {
+    case "react":
+      return "preview.clicky.json";
+    case "html":
+      return "preview.html";
+    case "markdown":
+      return "preview.md";
+    case "pdf":
+      return "preview.pdf";
+    case "json":
+      return "preview.json";
+    case "csv":
+      return "preview.csv";
+    case "excel":
+      return "preview.xlsx";
+  }
+}
+function parseJson(text) {
+  try {
+    return { ok: true, value: JSON.parse(text) };
+  } catch {
+    return { ok: false };
+  }
+}
+function isJsonContent(contentType) {
+  return (contentType == null ? void 0 : contentType.toLowerCase().includes("json")) ?? false;
+}
+function isHtmlContent(contentType) {
+  return (contentType == null ? void 0 : contentType.toLowerCase().includes("html")) ?? false;
+}
+function isBinaryContent(contentType) {
+  const normalized = (contentType == null ? void 0 : contentType.toLowerCase()) ?? "";
+  return normalized.includes("application/pdf") || normalized.includes("spreadsheetml") || normalized.includes("application/vnd.ms-excel");
+}
+export {
+  MarkdownEditor
+};
+//# sourceMappingURL=MarkdownEditor.js.map