@ootc/markdown 0.0.9 → 0.2.0

package/dist/plugin-mermaid.js

@@ -0,0 +1,266 @@
+import { useRef as R, useState as M, useId as ne, useMemo as $, useEffect as Y, useCallback as _, createElement as ie } from "react";
+import { j as N } from "./jsx-runtime-DXgJBoQh.js";
+const oe = "_mermaidContainer_1x453_1", ae = "_mermaidCanPan_1x453_9", se = "_mermaidPanning_1x453_17", ce = "_mermaidViewport_1x453_22", de = "_mermaidDiagram_1x453_30", le = "_mermaidError_1x453_41", ue = "_mermaidErrorDetails_1x453_51", C = {
+  mermaidContainer: oe,
+  mermaidCanPan: ae,
+  mermaidPanning: se,
+  mermaidViewport: ce,
+  mermaidDiagram: de,
+  mermaidError: le,
+  mermaidErrorDetails: ue
+}, me = "markdown-mermaid";
+let S = null;
+function fe() {
+  return S || (S = import("mermaid")), S;
+}
+function X(t, i, n) {
+  if (typeof window > "u" || typeof document > "u")
+    return i;
+  const l = n ?? document.documentElement;
+  return l && getComputedStyle(l).getPropertyValue(t).trim() || i;
+}
+function W(t = "system") {
+  if (t === "light" || t === "dark")
+    return t;
+  if (typeof window > "u" || typeof document > "u" || !document.documentElement)
+    return "light";
+  const n = document.documentElement.getAttribute("data-theme");
+  return n === "dark" ? "dark" : n === "light" ? "light" : window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function ge(t, i) {
+  const n = t === "dark" ? "#d4d4d4" : "#222222", l = t === "dark" ? "#569cd6" : "#1f6feb", u = t === "dark" ? "#1e1e1e" : "#ffffff", g = t === "dark" ? "#2d2d30" : "#f6f8fa", h = X("--md-text", n, i), a = X("--md-heading", l, i), k = X("--preview-bg", u, i), c = X("--md-pre-bg", g, i), P = X("--md-code-bg", c, i), m = a;
+  return {
+    startOnLoad: !1,
+    theme: "base",
+    themeVariables: {
+      background: k,
+      fontFamily: "inherit",
+      primaryColor: c,
+      primaryTextColor: h,
+      primaryBorderColor: m,
+      secondaryColor: P,
+      secondaryTextColor: h,
+      tertiaryColor: c,
+      lineColor: m,
+      arrowheadColor: m,
+      textColor: h,
+      edgeLabelBackground: c,
+      clusterBkg: c,
+      clusterBorder: m,
+      labelBoxBorderColor: m,
+      nodeBorder: m,
+      actorBorder: m,
+      actorLineColor: m,
+      noteBorderColor: m
+    }
+  };
+}
+function he(t = "system") {
+  const [i, n] = M(() => W(t));
+  return Y(() => {
+    if (t === "light" || t === "dark") {
+      n(t);
+      return;
+    }
+    if (typeof window > "u" || typeof document > "u" || !document.documentElement)
+      return;
+    const l = () => n(W(t));
+    l();
+    const u = window.matchMedia("(prefers-color-scheme: dark)"), g = () => l();
+    try {
+      u.addEventListener("change", g);
+    } catch {
+      u.addListener(g);
+    }
+    const h = new MutationObserver((a) => {
+      for (const k of a)
+        if (k.type === "attributes") {
+          l();
+          break;
+        }
+    });
+    return h.observe(document.documentElement, { attributes: !0, attributeFilter: ["data-theme"] }), () => {
+      try {
+        u.removeEventListener("change", g);
+      } catch {
+        u.removeListener(g);
+      }
+      h.disconnect();
+    };
+  }, [t]), i;
+}
+function pe({ code: t, theme: i }) {
+  const n = R(null), l = R(null), u = R(null), [g, h] = M(null), [a, k] = M(1), [c, P] = M(null), [m, v] = M({ x: 0, y: 0 }), [A, j] = M(!1), H = ne(), T = $(() => `${me}-${H.replace(/[:]/g, "-")}`, [H]), V = he(i), E = R({
+    pointerId: null,
+    lastX: 0,
+    lastY: 0,
+    active: !1
+  });
+  Y(() => {
+    k(1), v({ x: 0, y: 0 });
+  }, [t]), Y(() => {
+    let e = !1;
+    h(null);
+    const r = n.current;
+    return r && (r.innerHTML = ""), u.current = null, P(null), (async () => {
+      try {
+        const { default: o } = await fe();
+        if (e) return;
+        o.initialize(ge(V, n.current));
+        const { svg: p, bindFunctions: f } = await o.render(T, t.trim());
+        if (e) return;
+        const D = n.current;
+        if (!D) return;
+        D.innerHTML = p, f && f(D);
+        const s = D.querySelector("svg");
+        if (s) {
+          s.style.maxWidth = "none", u.current = s;
+          const B = s.getAttribute("width") || "", L = s.getAttribute("height") || "", I = Number.parseFloat(B), F = Number.parseFloat(L), ee = B.includes("%"), te = L.includes("%");
+          let y = !Number.isNaN(I) && Number.isFinite(I) && I > 0 && !ee ? I : 0, x = !Number.isNaN(F) && Number.isFinite(F) && F > 0 && !te ? F : 0;
+          if (!y || !x) {
+            const w = s.getBoundingClientRect();
+            y = y || w.width, x = x || w.height;
+          }
+          if ((!y || !x) && s.viewBox) {
+            const { width: w, height: re } = s.viewBox.baseVal;
+            y = y || w, x = x || re;
+          }
+          e || (y > 0 && x > 0 ? P((w) => w && w.width === y && w.height === x ? w : { width: y, height: x }) : P(null));
+        } else e || P(null);
+      } catch (o) {
+        if (e) return;
+        const p = o instanceof Error ? o.message : String(o);
+        h(p);
+        const f = n.current;
+        f && (f.innerHTML = ""), u.current = null, P(null);
+      }
+    })(), () => {
+      e = !0;
+    };
+  }, [t, T, V]);
+  const b = _((e) => {
+    const { pointerId: r, active: d } = E.current;
+    if (d) {
+      if (r !== null) {
+        const o = e ?? l.current;
+        if (o && typeof o.releasePointerCapture == "function")
+          try {
+            o.releasePointerCapture(r);
+          } catch {
+          }
+      }
+      E.current = { pointerId: null, lastX: 0, lastY: 0, active: !1 }, j(!1);
+    }
+  }, []), q = _((e) => {
+    const r = l.current;
+    if (r) {
+      if (e.ctrlKey || e.metaKey) {
+        e.preventDefault();
+        const d = r.getBoundingClientRect(), o = e.clientX - d.left, p = e.clientY - d.top;
+        k((f) => {
+          const D = f * (e.deltaY > 0 ? 0.9 : 1.1), s = Math.min(Math.max(D, 0.25), 4);
+          return !Number.isFinite(s) || s === f ? f : (v((B) => {
+            if (s <= 1.0001)
+              return { x: 0, y: 0 };
+            const L = (o - B.x) / f, I = (p - B.y) / f;
+            return {
+              x: o - L * s,
+              y: p - I * s
+            };
+          }), s);
+        });
+        return;
+      }
+      a <= 1 || (e.preventDefault(), v((d) => ({
+        x: d.x - e.deltaX,
+        y: d.y - e.deltaY
+      })));
+    }
+  }, [a]), z = _((e) => {
+    if (e.button !== 0 || a <= 1)
+      return;
+    e.preventDefault();
+    const r = e.currentTarget;
+    if (E.current = {
+      pointerId: e.pointerId,
+      lastX: e.clientX,
+      lastY: e.clientY,
+      active: !0
+    }, j(!0), typeof r.setPointerCapture == "function")
+      try {
+        r.setPointerCapture(e.pointerId);
+      } catch {
+      }
+  }, [a]), O = _((e) => {
+    const r = E.current;
+    if (!r.active || r.pointerId !== e.pointerId)
+      return;
+    e.preventDefault();
+    const d = e.clientX - r.lastX, o = e.clientY - r.lastY;
+    !d && !o || (r.lastX = e.clientX, r.lastY = e.clientY, v((p) => ({
+      x: p.x + d,
+      y: p.y + o
+    })));
+  }, []), K = _((e) => {
+    E.current.pointerId === e.pointerId && b(e.currentTarget);
+  }, [b]), U = _((e) => {
+    E.current.pointerId === e.pointerId && b(e.currentTarget);
+  }, [b]), G = _((e) => {
+    E.current.active && b(e.currentTarget);
+  }, [b]);
+  Y(() => () => {
+    b();
+  }, [b]), Y(() => {
+    const e = u.current;
+    if (!e || !c)
+      return;
+    const r = c.width * a, d = c.height * a;
+    e.style.width = `${r}px`, e.style.height = `${d}px`;
+  }, [c, a]);
+  const J = $(() => {
+    if (c)
+      return {
+        width: `${c.width * a}px`,
+        height: `${c.height * a}px`
+      };
+  }, [c, a]), Q = a > 1, Z = [
+    C.mermaidContainer,
+    Q ? C.mermaidCanPan : "",
+    A ? C.mermaidPanning : ""
+  ].filter(Boolean).join(" ");
+  return g ? /* @__PURE__ */ N.jsx("div", { className: C.mermaidContainer, children: /* @__PURE__ */ N.jsx("div", { className: C.mermaidError, children: /* @__PURE__ */ N.jsx("div", { className: C.mermaidErrorDetails, children: g }) }) }) : /* @__PURE__ */ N.jsx("div", { className: Z, onWheel: q, children: /* @__PURE__ */ N.jsx(
+    "div",
+    {
+      ref: l,
+      className: C.mermaidViewport,
+      style: J,
+      onPointerDown: z,
+      onPointerMove: O,
+      onPointerUp: K,
+      onPointerCancel: U,
+      onPointerLeave: G,
+      children: /* @__PURE__ */ N.jsx(
+        "div",
+        {
+          ref: n,
+          className: C.mermaidDiagram,
+          role: "img",
+          "aria-label": "Mermaid diagram",
+          style: {
+            transform: `translate(${m.x}px, ${m.y}px)`,
+            transformOrigin: "0 0"
+          }
+        }
+      )
+    }
+  ) });
+}
+const we = {
+  name: "mermaid",
+  renderFence: ({ code: t, language: i, theme: n }) => i !== "mermaid" ? null : ie(pe, { code: t, theme: n })
+};
+export {
+  pe as MermaidDiagram,
+  we as default,
+  we as mermaidPlugin
+};

package/dist/plugins/types.d.ts

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+import type { Options as ReactMarkdownOptions } from 'react-markdown';
+import type { MarkdownThemeMode } from '../theme-mode';
+type PluginList = NonNullable<ReactMarkdownOptions['remarkPlugins']>;
+export interface FenceContext {
+    /** Fence body, with the trailing newline already stripped. */
+    code: string;
+    /** Language flag on the fence, e.g. `mermaid` in ```mermaid. */
+    language: string;
+    theme: MarkdownThemeMode;
+}
+/**
+ * Opt-in extension point for the heavy dependencies (Mermaid, syntax highlighting
+ * grammars, KaTeX). The base package references none of them; each lives behind its
+ * own entrypoint so a consumer's bundler can prove it unreachable when unused.
+ *
+ * Plugins are consulted in array order.
+ */
+export interface MarkdownPlugin {
+    name: string;
+    /**
+     * Claim a fenced code block and render it. Return `null` to decline, in which
+     * case the next plugin is tried and the fence ultimately falls back to a plain
+     * code block.
+     */
+    renderFence?: (context: FenceContext) => ReactNode | null;
+    /**
+     * Turn a code block into highlighted HTML. Return `null` to decline, in which
+     * case the code renders unhighlighted. The first plugin to return a non-null
+     * result wins.
+     */
+    highlight?: (code: string, language: string) => Promise<string | null>;
+    /** remark plugins to add to the markdown pipeline. */
+    remarkPlugins?: PluginList;
+    /** rehype plugins to add to the markdown pipeline. */
+    rehypePlugins?: PluginList;
+}
+export {};

package/dist/preview.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("./CodeBlock-CJ6j8Wkl.cjs");const e=require("./MarkdownPreview-DcWMewhy.cjs");exports.MarkdownPreview=e.MarkdownPreview;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require("./CodeBlock-BquZ4WRk.cjs");const e=require("./MarkdownPreview-DfDx-wep.cjs");exports.MarkdownPreview=e.MarkdownPreview;exports.default=e.MarkdownPreview;

package/dist/preview.css

@@ -0,0 +1,2 @@
+@import "./css/CodeBlock.css";
+@import "./css/MarkdownPreview.css";

package/dist/preview.d.ts

@@ -1,4 +1,6 @@
 import './theme.css';
-export { default as MarkdownPreview } from './components/markdown/MarkdownPreview';
+import MarkdownPreview from './components/markdown/MarkdownPreview';
+export { MarkdownPreview };
 export type { MarkdownPreviewProps } from './components/markdown/MarkdownPreview';
 export type { MarkdownThemeMode } from './theme-mode';
+export default MarkdownPreview;

package/dist/preview.js

@@ -1,5 +1,6 @@
-import "./CodeBlock-BYxQBfWO.js";
-import { M as a } from "./MarkdownPreview-lqJAnu4B.js";
+import "./CodeBlock-DSwq2gw5.js";
+import { M as a } from "./MarkdownPreview-CMvzqhTd.js";
 export {
-  a as MarkdownPreview
+  a as MarkdownPreview,
+  a as default
 };