nested-markdown 0.0.12 → 0.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,64 @@
1
+ import "./chunk-Q4XP6UTR.js";
2
+
3
+ // src/Mermaid.tsx
4
+ import { useEffect, useState, useId } from "react";
5
+ import { jsx } from "react/jsx-runtime";
6
+ var MermaidClient = ({ chart, theme }) => {
7
+ const id = useId().replace(/:/g, "");
8
+ const [svg, setSvg] = useState("");
9
+ const [hydrated, setHydrated] = useState(false);
10
+ useEffect(() => {
11
+ let cancelled = false;
12
+ setHydrated(true);
13
+ const renderChart = async () => {
14
+ try {
15
+ const { default: mermaid } = await import("mermaid");
16
+ let mermaidTheme = "default";
17
+ if (theme === "dark") {
18
+ mermaidTheme = "dark";
19
+ } else if (theme === "light") {
20
+ mermaidTheme = "default";
21
+ } else if (typeof window !== "undefined" && typeof document !== "undefined") {
22
+ mermaidTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "default";
23
+ }
24
+ mermaid.initialize({
25
+ startOnLoad: false,
26
+ theme: mermaidTheme,
27
+ securityLevel: "loose",
28
+ suppressErrorRendering: true
29
+ });
30
+ const { svg: svg2 } = await mermaid.render(`mermaid-${id}`, chart);
31
+ if (!cancelled) {
32
+ setSvg(svg2);
33
+ }
34
+ } catch (error) {
35
+ console.error("Failed to render mermaid chart:", error);
36
+ if (!cancelled) {
37
+ setSvg(
38
+ `<pre class="mermaid-error" style="color: var(--nmd-error, #ef4444); padding: 8px; background: var(--nmd-error-bg, #fee2e2); border-radius: 4px;">Mermaid syntax error</pre>`
39
+ );
40
+ }
41
+ }
42
+ };
43
+ if (chart) {
44
+ renderChart();
45
+ }
46
+ return () => {
47
+ cancelled = true;
48
+ };
49
+ }, [chart, id, theme]);
50
+ if (!hydrated) {
51
+ return /* @__PURE__ */ jsx("pre", { className: "mermaid", children: chart });
52
+ }
53
+ return /* @__PURE__ */ jsx("div", { className: "mermaid", dangerouslySetInnerHTML: { __html: svg } });
54
+ };
55
+ var Mermaid = ({ chart, theme }) => {
56
+ if (typeof window === "undefined" || typeof document === "undefined") {
57
+ return /* @__PURE__ */ jsx("pre", { className: "mermaid", children: chart });
58
+ }
59
+ return /* @__PURE__ */ jsx(MermaidClient, { chart, theme });
60
+ };
61
+ export {
62
+ Mermaid
63
+ };
64
+ //# sourceMappingURL=Mermaid-N3HH3ZBE.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/Mermaid.tsx"],"sourcesContent":["import { useEffect, useState, useId } from \"react\";\n\nexport interface MermaidProps {\n chart: string;\n theme?: \"light\" | \"dark\";\n}\n\nconst MermaidClient = ({ chart, theme }: MermaidProps) => {\n const id = useId().replace(/:/g, \"\");\n const [svg, setSvg] = useState(\"\");\n const [hydrated, setHydrated] = useState(false);\n\n useEffect(() => {\n let cancelled = false;\n setHydrated(true);\n\n const renderChart = async () => {\n try {\n const { default: mermaid } = await import(\"mermaid\");\n let mermaidTheme: \"default\" | \"dark\" = \"default\";\n if (theme === \"dark\") {\n mermaidTheme = \"dark\";\n } else if (theme === \"light\") {\n mermaidTheme = \"default\";\n } else if (\n typeof window !== \"undefined\" &&\n typeof document !== \"undefined\"\n ) {\n mermaidTheme = window.matchMedia(\"(prefers-color-scheme: dark)\")\n .matches\n ? \"dark\"\n : \"default\";\n }\n\n mermaid.initialize({\n startOnLoad: false,\n theme: mermaidTheme,\n securityLevel: \"loose\",\n suppressErrorRendering: true,\n });\n\n const { svg } = await mermaid.render(`mermaid-${id}`, chart);\n if (!cancelled) {\n setSvg(svg);\n }\n } catch (error) {\n console.error(\"Failed to render mermaid chart:\", error);\n if (!cancelled) {\n setSvg(\n `<pre class=\"mermaid-error\" style=\"color: var(--nmd-error, #ef4444); padding: 8px; background: var(--nmd-error-bg, #fee2e2); border-radius: 4px;\">Mermaid syntax error</pre>`,\n );\n }\n }\n };\n\n if (chart) {\n renderChart();\n }\n return () => {\n cancelled = true;\n };\n }, [chart, id, theme]);\n\n if (!hydrated) {\n return <pre className=\"mermaid\">{chart}</pre>;\n }\n\n return <div className=\"mermaid\" dangerouslySetInnerHTML={{ __html: svg }} />;\n};\n\nexport const Mermaid = ({ chart, theme }: MermaidProps) => {\n if (typeof window === \"undefined\" || typeof document === \"undefined\") {\n return <pre className=\"mermaid\">{chart}</pre>;\n }\n return <MermaidClient chart={chart} theme={theme} />;\n};\n"],"mappings":";;;AAAA,SAAS,WAAW,UAAU,aAAa;AAgEhC;AAzDX,IAAM,gBAAgB,CAAC,EAAE,OAAO,MAAM,MAAoB;AACxD,QAAM,KAAK,MAAM,EAAE,QAAQ,MAAM,EAAE;AACnC,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,EAAE;AACjC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,YAAU,MAAM;AACd,QAAI,YAAY;AAChB,gBAAY,IAAI;AAEhB,UAAM,cAAc,YAAY;AAC9B,UAAI;AACF,cAAM,EAAE,SAAS,QAAQ,IAAI,MAAM,OAAO,SAAS;AACnD,YAAI,eAAmC;AACvC,YAAI,UAAU,QAAQ;AACpB,yBAAe;AAAA,QACjB,WAAW,UAAU,SAAS;AAC5B,yBAAe;AAAA,QACjB,WACE,OAAO,WAAW,eAClB,OAAO,aAAa,aACpB;AACA,yBAAe,OAAO,WAAW,8BAA8B,EAC5D,UACC,SACA;AAAA,QACN;AAEA,gBAAQ,WAAW;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,UACP,eAAe;AAAA,UACf,wBAAwB;AAAA,QAC1B,CAAC;AAED,cAAM,EAAE,KAAAA,KAAI,IAAI,MAAM,QAAQ,OAAO,WAAW,EAAE,IAAI,KAAK;AAC3D,YAAI,CAAC,WAAW;AACd,iBAAOA,IAAG;AAAA,QACZ;AAAA,MACF,SAAS,OAAO;AACd,gBAAQ,MAAM,mCAAmC,KAAK;AACtD,YAAI,CAAC,WAAW;AACd;AAAA,YACE;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAEA,QAAI,OAAO;AACT,kBAAY;AAAA,IACd;AACA,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,OAAO,IAAI,KAAK,CAAC;AAErB,MAAI,CAAC,UAAU;AACb,WAAO,oBAAC,SAAI,WAAU,WAAW,iBAAM;AAAA,EACzC;AAEA,SAAO,oBAAC,SAAI,WAAU,WAAU,yBAAyB,EAAE,QAAQ,IAAI,GAAG;AAC5E;AAEO,IAAM,UAAU,CAAC,EAAE,OAAO,MAAM,MAAoB;AACzD,MAAI,OAAO,WAAW,eAAe,OAAO,aAAa,aAAa;AACpE,WAAO,oBAAC,SAAI,WAAU,WAAW,iBAAM;AAAA,EACzC;AACA,SAAO,oBAAC,iBAAc,OAAc,OAAc;AACpD;","names":["svg"]}
@@ -0,0 +1,47 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __typeError = (msg) => {
8
+ throw TypeError(msg);
9
+ };
10
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
11
+ var __commonJS = (cb, mod) => function __require() {
12
+ return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
13
+ };
14
+ var __export = (target, all) => {
15
+ for (var name in all)
16
+ __defProp(target, name, { get: all[name], enumerable: true });
17
+ };
18
+ var __copyProps = (to, from, except, desc) => {
19
+ if (from && typeof from === "object" || typeof from === "function") {
20
+ for (let key of __getOwnPropNames(from))
21
+ if (!__hasOwnProp.call(to, key) && key !== except)
22
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
23
+ }
24
+ return to;
25
+ };
26
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
27
+ // If the importer is in node compatibility mode or this is not an ESM
28
+ // file that has been converted to a CommonJS file using a Babel-
29
+ // compatible transform (i.e. "__esModule" has not been set), then set
30
+ // "default" to the CommonJS "module.exports" for node compatibility.
31
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
32
+ mod
33
+ ));
34
+ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
35
+ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
36
+ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
37
+ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
38
+
39
+ export {
40
+ __commonJS,
41
+ __export,
42
+ __toESM,
43
+ __publicField,
44
+ __privateAdd,
45
+ __privateMethod
46
+ };
47
+ //# sourceMappingURL=chunk-Q4XP6UTR.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
package/dist/index.cjs CHANGED
@@ -9,6 +9,9 @@ var __typeError = (msg) => {
9
9
  throw TypeError(msg);
10
10
  };
11
11
  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
12
+ var __esm = (fn, res) => function __init() {
13
+ return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
14
+ };
12
15
  var __commonJS = (cb, mod) => function __require() {
13
16
  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
14
17
  };
@@ -6678,6 +6681,75 @@ var require_parser = __commonJS({
6678
6681
  }
6679
6682
  });
6680
6683
 
6684
+ // src/Mermaid.tsx
6685
+ var Mermaid_exports = {};
6686
+ __export(Mermaid_exports, {
6687
+ Mermaid: () => Mermaid
6688
+ });
6689
+ var import_react2, import_jsx_runtime2, MermaidClient, Mermaid;
6690
+ var init_Mermaid = __esm({
6691
+ "src/Mermaid.tsx"() {
6692
+ "use strict";
6693
+ import_react2 = require("react");
6694
+ import_jsx_runtime2 = require("react/jsx-runtime");
6695
+ MermaidClient = ({ chart, theme }) => {
6696
+ const id = (0, import_react2.useId)().replace(/:/g, "");
6697
+ const [svg5, setSvg] = (0, import_react2.useState)("");
6698
+ const [hydrated, setHydrated] = (0, import_react2.useState)(false);
6699
+ (0, import_react2.useEffect)(() => {
6700
+ let cancelled = false;
6701
+ setHydrated(true);
6702
+ const renderChart = async () => {
6703
+ try {
6704
+ const { default: mermaid } = await import("mermaid");
6705
+ let mermaidTheme = "default";
6706
+ if (theme === "dark") {
6707
+ mermaidTheme = "dark";
6708
+ } else if (theme === "light") {
6709
+ mermaidTheme = "default";
6710
+ } else if (typeof window !== "undefined" && typeof document !== "undefined") {
6711
+ mermaidTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "default";
6712
+ }
6713
+ mermaid.initialize({
6714
+ startOnLoad: false,
6715
+ theme: mermaidTheme,
6716
+ securityLevel: "loose",
6717
+ suppressErrorRendering: true
6718
+ });
6719
+ const { svg: svg6 } = await mermaid.render(`mermaid-${id}`, chart);
6720
+ if (!cancelled) {
6721
+ setSvg(svg6);
6722
+ }
6723
+ } catch (error) {
6724
+ console.error("Failed to render mermaid chart:", error);
6725
+ if (!cancelled) {
6726
+ setSvg(
6727
+ `<pre class="mermaid-error" style="color: var(--nmd-error, #ef4444); padding: 8px; background: var(--nmd-error-bg, #fee2e2); border-radius: 4px;">Mermaid syntax error</pre>`
6728
+ );
6729
+ }
6730
+ }
6731
+ };
6732
+ if (chart) {
6733
+ renderChart();
6734
+ }
6735
+ return () => {
6736
+ cancelled = true;
6737
+ };
6738
+ }, [chart, id, theme]);
6739
+ if (!hydrated) {
6740
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("pre", { className: "mermaid", children: chart });
6741
+ }
6742
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mermaid", dangerouslySetInnerHTML: { __html: svg5 } });
6743
+ };
6744
+ Mermaid = ({ chart, theme }) => {
6745
+ if (typeof window === "undefined" || typeof document === "undefined") {
6746
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("pre", { className: "mermaid", children: chart });
6747
+ }
6748
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MermaidClient, { chart, theme });
6749
+ };
6750
+ }
6751
+ });
6752
+
6681
6753
  // src/index.ts
6682
6754
  var index_exports = {};
6683
6755
  __export(index_exports, {
@@ -28245,67 +28317,6 @@ function expandNestedMarkdownSync(markdown, options2) {
28245
28317
  );
28246
28318
  }
28247
28319
 
28248
- // src/Mermaid.tsx
28249
- var import_react2 = require("react");
28250
- var import_jsx_runtime2 = require("react/jsx-runtime");
28251
- var MermaidClient = ({ chart, theme }) => {
28252
- const id = (0, import_react2.useId)().replace(/:/g, "");
28253
- const [svg5, setSvg] = (0, import_react2.useState)("");
28254
- const [hydrated, setHydrated] = (0, import_react2.useState)(false);
28255
- (0, import_react2.useEffect)(() => {
28256
- let cancelled = false;
28257
- setHydrated(true);
28258
- const renderChart = async () => {
28259
- try {
28260
- const { default: mermaid } = await import("mermaid");
28261
- let mermaidTheme = "default";
28262
- if (theme === "dark") {
28263
- mermaidTheme = "dark";
28264
- } else if (theme === "light") {
28265
- mermaidTheme = "default";
28266
- } else {
28267
- if (typeof window !== "undefined" || typeof document === "undefined") {
28268
- mermaidTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "default";
28269
- }
28270
- }
28271
- mermaid.initialize({
28272
- startOnLoad: false,
28273
- theme: mermaidTheme,
28274
- securityLevel: "loose",
28275
- suppressErrorRendering: true
28276
- });
28277
- const { svg: svg6 } = await mermaid.render(`mermaid-${id}`, chart);
28278
- if (!cancelled) {
28279
- setSvg(svg6);
28280
- }
28281
- } catch (error) {
28282
- console.error("Failed to render mermaid chart:", error);
28283
- if (!cancelled) {
28284
- setSvg(
28285
- `<pre class="mermaid-error" style="color: var(--nmd-error, #ef4444); padding: 8px; background: var(--nmd-error-bg, #fee2e2); border-radius: 4px;">Mermaid syntax error</pre>`
28286
- );
28287
- }
28288
- }
28289
- };
28290
- if (chart) {
28291
- renderChart();
28292
- }
28293
- return () => {
28294
- cancelled = true;
28295
- };
28296
- }, [chart, id, theme]);
28297
- if (!hydrated) {
28298
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("pre", { className: "mermaid", children: chart });
28299
- }
28300
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mermaid", dangerouslySetInnerHTML: { __html: svg5 } });
28301
- };
28302
- var Mermaid = ({ chart, theme }) => {
28303
- if (typeof window === "undefined" || typeof document === "undefined") {
28304
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("pre", { className: "mermaid", children: chart });
28305
- }
28306
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MermaidClient, { chart, theme });
28307
- };
28308
-
28309
28320
  // src/NestedMarkdown.tsx
28310
28321
  var import_jsx_runtime3 = require("react/jsx-runtime");
28311
28322
  function toKebabCase(propertyName) {
@@ -28399,6 +28410,45 @@ var remarkForceLooseLists = () => {
28399
28410
  visit3(tree);
28400
28411
  };
28401
28412
  };
28413
+ var MermaidRenderer = ({
28414
+ chart,
28415
+ theme,
28416
+ className,
28417
+ codeProps
28418
+ }) => {
28419
+ const [MermaidComponent, setMermaidComponent] = (0, import_react3.useState)(null);
28420
+ (0, import_react3.useEffect)(() => {
28421
+ let mounted = true;
28422
+ if (typeof window === "undefined" || typeof document === "undefined") {
28423
+ return () => {
28424
+ mounted = false;
28425
+ };
28426
+ }
28427
+ Promise.resolve().then(() => (init_Mermaid(), Mermaid_exports)).then((mod) => {
28428
+ if (mounted) {
28429
+ setMermaidComponent(() => mod.Mermaid);
28430
+ }
28431
+ }).catch(() => {
28432
+ if (mounted) {
28433
+ setMermaidComponent(null);
28434
+ }
28435
+ });
28436
+ return () => {
28437
+ mounted = false;
28438
+ };
28439
+ }, []);
28440
+ if (!MermaidComponent) {
28441
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("pre", { className: "nmd-pre", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
28442
+ "code",
28443
+ {
28444
+ ...codeProps,
28445
+ className: [className, "nmd-code"].filter(Boolean).join(" "),
28446
+ children: chart
28447
+ }
28448
+ ) });
28449
+ }
28450
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MermaidComponent, { chart, theme });
28451
+ };
28402
28452
  var NestedMarkdown = ({
28403
28453
  content: content3,
28404
28454
  children: children2,
@@ -28458,17 +28508,15 @@ var NestedMarkdown = ({
28458
28508
  const isMermaid = match && match[1] === "mermaid";
28459
28509
  if (!inline2 && isMermaid) {
28460
28510
  const chart = String(children3).replace(/\n$/, "");
28461
- if (typeof window === "undefined" || typeof document === "undefined") {
28462
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("pre", { className: "nmd-pre", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
28463
- "code",
28464
- {
28465
- ...props,
28466
- className: [className2, "nmd-code"].filter(Boolean).join(" "),
28467
- children: chart
28468
- }
28469
- ) });
28470
- }
28471
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Mermaid, { chart, theme: theme === "auto" ? void 0 : theme });
28511
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
28512
+ MermaidRenderer,
28513
+ {
28514
+ chart,
28515
+ theme: theme === "auto" ? void 0 : theme,
28516
+ className: className2,
28517
+ codeProps: props
28518
+ }
28519
+ );
28472
28520
  }
28473
28521
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
28474
28522
  "code",