@damiro/stylo 0.15.2 → 0.17.0

package/dist/stylo.js

@@ -1,94 +1,96 @@
-import { i as e, o as t } from "./highlight-BLdNzTxQ.js";
-import { S as n, n as r, t as i } from "./useCodeMirror-CXtuBlLf.js";
-import { n as a, r as o } from "./config-DTBxVhtH.js";
-import { Suspense as s, forwardRef as c, lazy as l, useEffect as u, useImperativeHandle as d, useReducer as f, useRef as p, useState as m, useSyncExternalStore as h } from "react";
-import { EditorView as g, showPanel as _ } from "@codemirror/view";
-import { createPortal as v } from "react-dom";
-import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { c as e, t, u as n } from "./embed-cache-CcBfVrc9.js";
+import { g as r, k as i, l as a, n as o, t as s } from "./useCodeMirror-B07wRexo.js";
+import { n as c, r as l } from "./config-DTBxVhtH.js";
+import { Suspense as u, forwardRef as d, lazy as f, useEffect as p, useImperativeHandle as m, useReducer as h, useRef as g, useState as _, useSyncExternalStore as v } from "react";
+import { EditorView as y, showPanel as b } from "@codemirror/view";
+import { createPortal as x } from "react-dom";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
 //#region src/editor/SourceView.tsx
-var x = () => () => {}, S = () => null;
-function C({ value: e, onChange: r, readOnly: a, placeholder: o, codeLanguages: s, wikiLinkSource: c, tagSource: l, onResolveError: u, onSave: d, onViewChange: f, canvasHeader: g }) {
-	let [b, C] = m(null), w = p(f);
-	w.current = f;
-	let T = p((e) => {
-		C(e), w.current?.(e);
-	}).current, E = p(g);
-	E.current = g;
-	let [D] = m(() => g ? new n() : null), O = h(D?.subscribe ?? x, D?.getSnapshot ?? S), [k] = m(() => D ? [_.of(D.panel)] : []), A = i({
+var w = () => () => {}, T = () => null;
+function E({ value: e, onChange: t, readOnly: r, placeholder: a, codeLanguages: o, wikiLinkSource: c, tagSource: l, onResolveError: u, onSave: d, onViewChange: f, canvasHeader: p, hostExtensions: m }) {
+	let [h, y] = _(null), C = g(f);
+	C.current = f;
+	let E = g((e) => {
+		y(e), C.current?.(e);
+	}).current, D = g(p);
+	D.current = p;
+	let [O] = _(() => p ? new i() : null), k = v(O?.subscribe ?? w, O?.getSnapshot ?? T), [A] = _(() => O ? [b.of(O.panel)] : []), j = s({
 		value: e,
-		onChange: r,
-		readOnly: a,
-		placeholder: o,
-		codeLanguages: s,
+		onChange: t,
+		readOnly: r,
+		placeholder: a,
+		codeLanguages: o,
 		wikiLinkSource: c,
 		tagSource: l,
 		onResolveError: u,
 		onSave: d,
-		onViewChange: T,
-		extensions: k
+		onViewChange: E,
+		hostExtensions: m,
+		extensions: A
 	});
-	return /* @__PURE__ */ y("div", {
-		className: t.source,
-		ref: A,
-		children: O && E.current && v(E.current({ view: b }), O)
+	return /* @__PURE__ */ S("div", {
+		className: n.source,
+		ref: j,
+		children: k && D.current && x(D.current({ view: h }), k)
 	});
 }
 //#endregion
 //#region src/inplace/lazyInPlace.ts
-var w = l(async () => ({ default: (await import("./InPlaceView-DVX9qV68.js")).InPlaceView })), T = l(async () => ({ default: (await import("./Preview-BcdSr09-.js")).Preview }));
+var D = f(async () => ({ default: (await import("./InPlaceView-CRb5AkfX.js")).InPlaceView })), O = f(async () => ({ default: (await import("./Preview-5lm2uUVj.js")).Preview }));
 //#endregion
 //#region src/SplitView.tsx
-function E({ value: e, onChange: n, onWikiLinkClick: r, readOnly: i, placeholder: a, codeLanguages: o, wikiLinkSource: c, tagSource: l, embedSource: d, onResolveError: f, frontmatter: h, softBreaks: g, onTaskToggle: _, onSave: v, onViewChange: x, canvasHeader: S }) {
-	let [w, E] = m(null), D = p(null), O = p(!1);
-	return u(() => {
+function k({ value: e, onChange: t, onWikiLinkClick: r, readOnly: i, placeholder: a, codeLanguages: o, wikiLinkSource: s, tagSource: c, embedSource: l, onResolveError: d, frontmatter: f, softBreaks: m, onTaskToggle: h, onSave: v, onViewChange: y, canvasHeader: b, hostExtensions: x }) {
+	let [w, T] = _(null), D = g(null), k = g(!1);
+	return p(() => {
 		let e = w?.scrollDOM, t = D.current;
 		if (!e || !t) return;
 		let n = (e, t) => {
-			if (O.current) return;
+			if (k.current) return;
 			let n = e.scrollHeight - e.clientHeight;
-			n <= 0 || (O.current = !0, t.scrollTop = e.scrollTop / n * (t.scrollHeight - t.clientHeight), requestAnimationFrame(() => {
-				O.current = !1;
+			n <= 0 || (k.current = !0, t.scrollTop = e.scrollTop / n * (t.scrollHeight - t.clientHeight), requestAnimationFrame(() => {
+				k.current = !1;
 			}));
 		}, r = () => n(e, t), i = () => n(t, e);
 		return e.addEventListener("scroll", r, { passive: !0 }), t.addEventListener("scroll", i, { passive: !0 }), () => {
 			e.removeEventListener("scroll", r), t.removeEventListener("scroll", i);
 		};
-	}, [w]), /* @__PURE__ */ b("div", {
-		className: t.split,
-		children: [/* @__PURE__ */ y("div", {
-			className: t.splitPane,
-			children: /* @__PURE__ */ y(C, {
+	}, [w]), /* @__PURE__ */ C("div", {
+		className: n.split,
+		children: [/* @__PURE__ */ S("div", {
+			className: n.splitPane,
+			children: /* @__PURE__ */ S(E, {
 				value: e,
-				onChange: n,
+				onChange: t,
 				readOnly: i,
 				placeholder: a,
 				codeLanguages: o,
-				wikiLinkSource: c,
-				tagSource: l,
-				onResolveError: f,
+				wikiLinkSource: s,
+				tagSource: c,
+				onResolveError: d,
 				onSave: v,
 				onViewChange: (e) => {
-					E(e), x?.(e);
+					T(e), y?.(e);
 				},
-				canvasHeader: S
+				canvasHeader: b,
+				hostExtensions: x
 			})
-		}), /* @__PURE__ */ y("div", {
-			className: t.splitPane,
+		}), /* @__PURE__ */ S("div", {
+			className: n.splitPane,
 			ref: D,
-			children: /* @__PURE__ */ y(s, {
-				fallback: /* @__PURE__ */ y("div", {
-					className: t.preview,
+			children: /* @__PURE__ */ S(u, {
+				fallback: /* @__PURE__ */ S("div", {
+					className: n.preview,
 					"aria-busy": "true"
 				}),
-				children: /* @__PURE__ */ y(T, {
+				children: /* @__PURE__ */ S(O, {
 					value: e,
 					onWikiLinkClick: r,
-					embedSource: d,
-					onResolveError: f,
-					frontmatter: h,
+					embedSource: l,
+					onResolveError: d,
+					frontmatter: f,
 					codeLanguages: o,
-					softBreaks: g,
-					onTaskToggle: _
+					softBreaks: m,
+					onTaskToggle: h
 				})
 			})
 		})]
@@ -96,8 +98,8 @@ function E({ value: e, onChange: n, onWikiLinkClick: r, readOnly: i, placeholder
 }
 //#endregion
 //#region src/toolbar/floating-watchdog.ts
-function D(e, t) {
-	u(() => {
+function A(e, t) {
+	p(() => {
 		if (!t) return;
 		let n = 0, r = !1, i = () => {
 			let t = e.current;
@@ -108,9 +110,9 @@ function D(e, t) {
 }
 //#endregion
 //#region src/toolbar/keyboard-inset.ts
-function O(e) {
-	let [t, n] = m(0);
-	return u(() => {
+function j(e) {
+	let [t, n] = _(0);
+	return p(() => {
 		let t = typeof window > "u" ? null : window.visualViewport;
 		if (!e || !t) {
 			n(0);
@@ -124,7 +126,7 @@ function O(e) {
 }
 //#endregion
 //#region src/toolbar/Toolbar.tsx
-function k(e) {
+function M(e) {
 	let t = [], n = [];
 	for (let r of e) {
 		if (r !== "|") {
@@ -135,7 +137,7 @@ function k(e) {
 	}
 	return n.length && t.push(n), t;
 }
-function A(e, t) {
+function N(e, t) {
 	if (typeof e != "string") {
 		let { id: t, icon: n, title: r, run: i, isActive: a, disabled: o } = e;
 		return {
@@ -147,208 +149,223 @@ function A(e, t) {
 			disabled: o
 		};
 	}
-	let n = r[e];
+	let n = o[e];
 	return n ? {
 		key: e,
-		icon: t?.[e] ?? o[e],
+		icon: t?.[e] ?? l[e],
 		title: n.title,
 		run: n.run,
 		isActive: n.isActive,
 		disabled: n.disabled
 	} : null;
 }
-function j({ view: e, items: n, icons: r, disabled: i, sticky: a, stickyVisibility: o }) {
-	let [, s] = f((e) => e + 1, 0), [c, l] = m(!1), d = O(a === "bottom"), h = p(null);
-	D(h, a === "top"), u(() => {
+function P({ view: e, items: t, icons: i, disabled: s, sticky: c, stickyVisibility: l }) {
+	let [, u] = h((e) => e + 1, 0), [d, f] = _(!1), m = j(c === "bottom"), v = g(null);
+	A(v, c === "top"), p(() => {
 		if (!e) return;
 		let t = e.contentDOM;
-		l(e.hasFocus);
+		f(e.hasFocus);
 		let n = () => {
-			l(!0), s();
+			f(!0), u();
 		}, r = () => {
-			l(!1), s();
+			f(!1), u();
 		}, i = [
 			"keyup",
 			"mouseup",
 			"input"
 		];
-		for (let e of i) t.addEventListener(e, s);
+		for (let e of i) t.addEventListener(e, u);
 		return t.addEventListener("focus", n), t.addEventListener("blur", r), () => {
-			for (let e of i) t.removeEventListener(e, s);
+			for (let e of i) t.removeEventListener(e, u);
 			t.removeEventListener("focus", n), t.removeEventListener("blur", r);
 		};
 	}, [e]);
-	let g = !!a && o === "dynamic" && !c, _ = [
-		t.toolbar,
-		a && t.toolbarSticky,
-		a === "top" && t.toolbarStickyTop,
-		a === "bottom" && t.toolbarStickyBottom,
-		g && t.toolbarStickyHidden
-	].filter(Boolean).join(" "), v = a === "bottom" ? { transform: `translateY(-${d}px)` } : void 0;
-	return /* @__PURE__ */ y("div", {
-		ref: h,
-		className: _,
+	let y = !!c && l === "dynamic" && !d, b = e ? !!r(e) : !1, x = [
+		n.toolbar,
+		c && n.toolbarSticky,
+		c === "top" && n.toolbarStickyTop,
+		c === "bottom" && n.toolbarStickyBottom,
+		y && n.toolbarStickyHidden
+	].filter(Boolean).join(" "), C = c === "bottom" ? { transform: `translateY(-${m}px)` } : void 0;
+	return /* @__PURE__ */ S("div", {
+		ref: v,
+		className: x,
 		role: "toolbar",
 		"aria-label": "Formatting",
-		"aria-hidden": g || void 0,
-		style: v,
-		children: k(n).map((n, a) => n === "|" ? /* @__PURE__ */ y("span", {
-			className: t.toolbarSep,
+		"aria-hidden": y || void 0,
+		style: C,
+		children: M(t).map((t, r) => t === "|" ? /* @__PURE__ */ S("span", {
+			className: n.toolbarSep,
 			"aria-hidden": "true"
-		}, `sep-${a}`) : /* @__PURE__ */ y("div", {
-			className: t.toolbarGroup,
-			children: n.map((n) => {
-				let a = A(n, r);
-				if (!a) return null;
-				let o = i || !e || !!a.disabled?.(e.state), c = !!(!o && e && a.isActive?.(e.state));
-				return /* @__PURE__ */ y("button", {
+		}, `sep-${r}`) : /* @__PURE__ */ S("div", {
+			className: n.toolbarGroup,
+			children: t.map((t) => {
+				let r = N(t, i);
+				if (!r) return null;
+				let c = typeof t == "string" ? o[t] : void 0, l = e ? c ? a(e.state, c, b) : {
+					disabled: !!r.disabled?.(e.state),
+					active: !!r.isActive?.(e.state)
+				} : {
+					disabled: !0,
+					active: !1
+				}, d = s || !e || l.disabled, f = !d && l.active;
+				return /* @__PURE__ */ S("button", {
 					type: "button",
-					className: t.toolbarButton,
-					"data-command": a.key,
-					title: a.title,
-					"aria-label": a.title,
-					"aria-pressed": a.isActive ? c : void 0,
-					"data-active": c ? "" : void 0,
-					disabled: o,
+					className: n.toolbarButton,
+					"data-command": r.key,
+					title: r.title,
+					"aria-label": r.title,
+					"aria-pressed": r.isActive ? f : void 0,
+					"data-active": f ? "" : void 0,
+					disabled: d,
 					onMouseDown: (e) => e.preventDefault(),
 					onClick: () => {
-						e && (a.run(e), s());
+						e && (r.run(e), u());
 					},
-					children: a.icon
-				}, a.key);
+					children: r.icon
+				}, r.key);
 			})
-		}, `group-${a}`))
+		}, `group-${r}`))
 	});
 }
 //#endregion
 //#region src/Stylo.tsx
-var M = c(function({ value: n, onChange: r, mode: i = "in-place", onSave: o, onFrontmatter: c, onWikiLinkClick: l, onLinkClick: f, readOnly: h, placeholder: _, className: v, inPlace: x, codeLanguages: S, wikiLinkSource: D, tagSource: O, embedSource: k, onResolveError: A, toolbar: M, icons: N, frontmatter: P, softBreaks: F, onTaskToggle: I, canvasHeader: L }, R) {
-	let z = i === "preview" || i === "split" || i === "in-place" ? i : "source", [B, V] = m(null), H = z === "preview" ? null : a(M), U = M && typeof M == "object" ? M.render : void 0, W = M && typeof M == "object" ? M.sticky : void 0, G = W === "top" ? "top" : W ? "bottom" : !1, K = M && typeof M == "object" ? M.stickyVisibility : void 0, q = p(c);
-	q.current = c;
-	let J = p(A);
-	J.current = A;
-	let Y = p((e, t) => {
-		J.current?.(e, t);
-	}).current, X = p(void 0);
-	u(() => {
-		let t = e(n)?.frontmatter ?? null;
-		t !== X.current && (X.current = t, q.current?.(t));
-	}, [n]), d(R, () => ({
-		focus: () => B?.focus(),
-		getView: () => B,
+var F = d(function({ value: r, onChange: i, mode: a = "in-place", onSave: o, onFrontmatter: s, onWikiLinkClick: l, onLinkClick: d, readOnly: f, placeholder: h, className: v, inPlace: b, codeLanguages: x, wikiLinkSource: w, tagSource: T, embedSource: A, onResolveError: j, toolbar: M, icons: N, frontmatter: F, softBreaks: I, onTaskToggle: L, canvasHeader: R, extensions: z }, B) {
+	let V = a === "preview" || a === "split" || a === "in-place" ? a : "source", [H, U] = _(null), W = V === "preview" ? null : c(M), G = M && typeof M == "object" ? M : void 0, K = G?.render, q = G?.sticky === "top" ? "top" : G?.sticky ? "bottom" : !1, J = G?.stickyVisibility, Y = g(s);
+	Y.current = s;
+	let X = g(j);
+	X.current = j;
+	let Z = g((e, t) => {
+		X.current?.(e, t);
+	}).current, Q = g(A);
+	Q.current = A;
+	let $ = g(void 0);
+	p(() => {
+		let t = e(r)?.frontmatter ?? null;
+		t !== $.current && ($.current = t, Y.current?.(t));
+	}, [r]), m(B, () => ({
+		focus: () => H?.focus(),
+		getView: () => H,
 		insertAtCursor: (e) => {
-			B && (B.dispatch(B.state.replaceSelection(e)), B.focus());
+			H && (H.dispatch(H.state.replaceSelection(e)), H.focus());
 		},
 		scrollToHeading: (e) => {
-			if (!B) return !1;
-			let t = e.trim().toLowerCase(), { doc: n } = B.state;
+			if (!H) return !1;
+			let t = e.trim().toLowerCase(), { doc: n } = H.state;
 			for (let e = 1; e <= n.lines; e++) {
 				let r = n.line(e), i = /^ {0,3}#{1,6}[ \t]+(.*?)(?:[ \t]+#+)?[ \t]*$/.exec(r.text);
-				if (!(!i || i[1] === void 0) && i[1].trim().toLowerCase() === t) return B.dispatch({
+				if (!(!i || i[1] === void 0) && i[1].trim().toLowerCase() === t) return H.dispatch({
 					selection: { anchor: r.from },
-					effects: g.scrollIntoView(r.from, { y: "start" })
-				}), B.focus(), !0;
+					effects: y.scrollIntoView(r.from, { y: "start" })
+				}), H.focus(), !0;
 			}
 			return !1;
+		},
+		invalidateEmbed: (e) => {
+			let n = Q.current;
+			n && t(n, e);
 		}
-	}), [B]);
-	let Z = [
-		t.root,
-		G === "bottom" && t.stickyToolbarRootBottom,
-		G === "top" && t.stickyToolbarRootTop,
+	}), [H]);
+	let ee = [
+		n.root,
+		q === "bottom" && n.stickyToolbarRootBottom,
+		q === "top" && n.stickyToolbarRootTop,
 		"stylo",
 		v
 	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ b("div", {
-		className: Z,
-		"data-stylo-mode": z,
+	return /* @__PURE__ */ C("div", {
+		className: ee,
+		"data-stylo-mode": V,
 		children: [
-			H && (() => {
-				let e = /* @__PURE__ */ y(j, {
-					view: B,
-					items: H,
+			W && (() => {
+				let e = /* @__PURE__ */ S(P, {
+					view: H,
+					items: W,
 					icons: N,
-					disabled: h,
-					sticky: G,
-					stickyVisibility: K
+					disabled: f,
+					sticky: q,
+					stickyVisibility: J
 				});
-				return U ? U(e, { view: B }) : e;
+				return K ? K(e, { view: H }) : e;
 			})(),
-			z === "source" && /* @__PURE__ */ y(C, {
-				value: n,
-				onChange: r,
-				readOnly: h,
-				placeholder: _,
-				codeLanguages: S,
-				wikiLinkSource: D,
-				tagSource: O,
-				onResolveError: Y,
+			V === "source" && /* @__PURE__ */ S(E, {
+				value: r,
+				onChange: i,
+				readOnly: f,
+				placeholder: h,
+				codeLanguages: x,
+				wikiLinkSource: w,
+				tagSource: T,
+				onResolveError: Z,
 				onSave: o,
-				onViewChange: V,
-				canvasHeader: L
+				onViewChange: U,
+				canvasHeader: R,
+				hostExtensions: z
 			}),
-			z === "preview" && /* @__PURE__ */ y(s, {
-				fallback: /* @__PURE__ */ y("div", {
-					className: t.preview,
+			V === "preview" && /* @__PURE__ */ S(u, {
+				fallback: /* @__PURE__ */ S("div", {
+					className: n.preview,
 					"aria-busy": "true"
 				}),
-				children: /* @__PURE__ */ y(T, {
-					value: n,
+				children: /* @__PURE__ */ S(O, {
+					value: r,
 					onWikiLinkClick: l,
-					embedSource: k,
-					onResolveError: Y,
-					frontmatter: P,
-					codeLanguages: S,
-					softBreaks: F,
-					onTaskToggle: I
+					embedSource: A,
+					onResolveError: Z,
+					frontmatter: F,
+					codeLanguages: x,
+					softBreaks: I,
+					onTaskToggle: L
 				})
 			}),
-			z === "split" && /* @__PURE__ */ y(E, {
-				value: n,
-				onChange: r,
+			V === "split" && /* @__PURE__ */ S(k, {
+				value: r,
+				onChange: i,
 				onWikiLinkClick: l,
-				readOnly: h,
-				placeholder: _,
-				codeLanguages: S,
-				wikiLinkSource: D,
-				tagSource: O,
-				embedSource: k,
-				onResolveError: Y,
-				frontmatter: P,
-				softBreaks: F,
-				onTaskToggle: I,
+				readOnly: f,
+				placeholder: h,
+				codeLanguages: x,
+				wikiLinkSource: w,
+				tagSource: T,
+				embedSource: A,
+				onResolveError: Z,
+				frontmatter: F,
+				softBreaks: I,
+				onTaskToggle: L,
 				onSave: o,
-				onViewChange: V,
-				canvasHeader: L
+				onViewChange: U,
+				canvasHeader: R,
+				hostExtensions: z
 			}),
-			z === "in-place" && /* @__PURE__ */ y(s, {
-				fallback: /* @__PURE__ */ y("div", {
-					className: t.inplace,
+			V === "in-place" && /* @__PURE__ */ S(u, {
+				fallback: /* @__PURE__ */ S("div", {
+					className: n.inplace,
 					"aria-busy": "true"
 				}),
-				children: /* @__PURE__ */ y(w, {
-					value: n,
-					onChange: r,
-					readOnly: h,
-					placeholder: _,
+				children: /* @__PURE__ */ S(D, {
+					value: r,
+					onChange: i,
+					readOnly: f,
+					placeholder: h,
 					onWikiLinkClick: l,
-					onLinkClick: f,
-					inPlace: x,
-					codeLanguages: S,
-					wikiLinkSource: D,
-					tagSource: O,
-					embedSource: k,
-					onResolveError: Y,
+					onLinkClick: d,
+					inPlace: b,
+					codeLanguages: x,
+					wikiLinkSource: w,
+					tagSource: T,
+					embedSource: A,
+					onResolveError: Z,
 					onSave: o,
-					onViewChange: V,
-					canvasHeader: L
+					onViewChange: U,
+					canvasHeader: R,
+					hostExtensions: z
 				})
 			})
 		]
 	});
 });
-M.displayName = "Stylo";
+F.displayName = "Stylo";
 //#endregion
-export { M as Stylo, e as splitFrontmatter };
+export { F as Stylo, e as splitFrontmatter };
 
 //# sourceMappingURL=stylo.js.map