@plitzi/sdk-elements 0.38.6 → 0.38.8

package/dist/elements/basic/RichText/RichText.mjs

@@ -1,30 +1,37 @@
 import e from "../../../Element/hocs/withElement.mjs";
-import { RootElement as t } from "../../../Element/RootElement.mjs";
-import { rebaseHtmlMedia as n, sanitizeHtml as r } from "./sanitizeHtml.mjs";
-import { useMemo as i } from "react";
-import a from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import c from "clsx";
-import l from "@plitzi/plitzi-ui/Markdown";
+import t from "../../../Element/hooks/useElement.mjs";
+import { RootElement as n } from "../../../Element/RootElement.mjs";
+import r from "../../../components/MarkdownDocument/index.mjs";
+import i from "../Markdown/hooks/useMarkdownClassNames.mjs";
+import { classHtmlParts as a } from "./classHtmlParts.mjs";
+import { rebaseHtmlMedia as o, sanitizeHtml as s } from "./sanitizeHtml.mjs";
+import { useMemo as c } from "react";
+import l from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import f from "clsx";
 //#region src/elements/basic/RichText/RichText.tsx
-var u = ({ ref: e, className: u = "", content: d = "", format: f = "html", mediaBaseUrl: p = "" }) => {
-	let { settings: { previewMode: m } } = a(), h = i(() => f === "html" ? n(r(d), p) : "", [
-		f,
-		d,
-		p
+var p = ({ ref: e, className: p = "", content: m = "", format: h = "html", mediaBaseUrl: g = "" }) => {
+	let { settings: { previewMode: _ } } = l(), { definition: { styleSelectors: v } } = t(), y = i(v), b = c(() => h === "html" ? a(o(s(m), g), y) : "", [
+		h,
+		m,
+		g,
+		y
 	]);
-	return /* @__PURE__ */ s(t, {
+	return /* @__PURE__ */ d(n, {
 		ref: e,
-		className: c("plitzi-component__rich-text", { "plitzi-component__rich-text--edit-mode": !m }, u),
+		className: f("plitzi-component__rich-text", { "plitzi-component__rich-text--edit-mode": !_ }, p),
 		children: [
-			f === "html" && /* @__PURE__ */ o("div", { dangerouslySetInnerHTML: { __html: h } }),
-			f === "markdown" && /* @__PURE__ */ o(l, { children: d }),
-			f === "text" && /* @__PURE__ */ o("div", {
+			h === "html" && /* @__PURE__ */ u("div", { dangerouslySetInnerHTML: { __html: b } }),
+			h === "markdown" && /* @__PURE__ */ u(r, {
+				classNames: y,
+				children: m
+			}),
+			h === "text" && /* @__PURE__ */ u("div", {
 				className: "plitzi-component__rich-text-plain",
-				children: d
+				children: m
 			})
 		]
 	});
-}, d = e(u);
+}, m = e(p);
 //#endregion
-export { u as RichText, d as default };
+export { p as RichText, m as default };

package/dist/elements/basic/RichText/classHtmlParts.d.ts

@@ -0,0 +1,14 @@
+import { MarkdownClassNames, MarkdownPart } from '../../../components/MarkdownDocument';
+/**
+ * The part each tag of a body's HTML is, named as the parts of a Markdown document are, so one set of slots dresses
+ * a body whichever format the CMS returns it in. `b` and `i` are the `strong` and `emphasis` an older editor writes.
+ */
+export declare const HTML_TAG_PARTS: Readonly<Partial<Record<string, readonly MarkdownPart[]>>>;
+/**
+ * A body's HTML with the class of each of its parts on the tags that are that part.
+ *
+ * Read off the markup as a string, as the sanitizer reads it, so the server renders the same classes the browser does.
+ * `code` is inline code, as in a Markdown document: the `code` of a `pre` is the block's, and the `pre` takes
+ * `codeBlock`.
+ */
+export declare const classHtmlParts: (html: string, classNames: MarkdownClassNames) => string;

package/dist/elements/basic/RichText/classHtmlParts.mjs

@@ -0,0 +1,48 @@
+import e from "clsx";
+//#region src/elements/basic/RichText/classHtmlParts.ts
+var t = {
+	h1: ["heading", "heading1"],
+	h2: ["heading", "heading2"],
+	h3: ["heading", "heading3"],
+	h4: ["heading", "heading4"],
+	h5: ["heading", "heading5"],
+	h6: ["heading", "heading6"],
+	p: ["paragraph"],
+	a: ["link"],
+	strong: ["strong"],
+	b: ["strong"],
+	em: ["emphasis"],
+	i: ["emphasis"],
+	ul: ["list"],
+	ol: ["list"],
+	li: ["listItem"],
+	blockquote: ["quote"],
+	hr: ["divider"],
+	code: ["code"],
+	pre: ["codeBlock"],
+	img: ["image"],
+	table: ["table"],
+	thead: ["tableHead"],
+	tr: ["tableRow"],
+	th: ["tableHeaderCell"],
+	td: ["tableCell"]
+}, n = /<(\/?)([a-zA-Z][a-zA-Z0-9]*)((?:[^>"']|"[^"]*"|'[^']*')*)>/g, r = /\sclass\s*=\s*("[^"]*"|'[^']*'|[^\s"'>]+)/i, i = /^["']|["']$/g, a = /\s*\/$/, o = (t, n) => {
+	let o = r.exec(t);
+	if (o) {
+		let a = o[1].replace(i, "");
+		return t.replace(r, ` class="${e(a, n)}"`);
+	}
+	let s = a.exec(t)?.[0] ?? "";
+	return `${t.slice(0, t.length - s.length)} class="${n}"${s}`;
+}, s = (r, i) => {
+	if (!Object.values(i).some(Boolean)) return r;
+	let a = 0;
+	return r.replace(n, (n, r, s, c) => {
+		let l = s.toLowerCase();
+		if (l === "pre" && (a = Math.max(a + (r ? -1 : 1), 0)), r || l === "code" && a > 0) return n;
+		let u = e((t[l] ?? []).map((e) => i[e]));
+		return u ? `<${s}${o(c, u)}>` : n;
+	});
+};
+//#endregion
+export { t as HTML_TAG_PARTS, s as classHtmlParts };

package/dist/elements/basic/RichText/declaration.d.ts

@@ -16,11 +16,38 @@ declare const declaration: {
         readonly definition: {
             readonly label: "Rich Text";
             readonly type: "richText";
-            readonly description: "Renders a body field coming from a CMS — HTML, markdown or plain text. Scripts and event handlers are stripped before rendering, so third-party content cannot execute.";
+            readonly description: string;
             readonly items: readonly [];
             readonly bindings: {};
             readonly styleSelectors: {
                 readonly base: "";
+                readonly heading: "";
+                readonly heading1: "";
+                readonly heading2: "";
+                readonly heading3: "";
+                readonly heading4: "";
+                readonly heading5: "";
+                readonly heading6: "";
+                readonly paragraph: "";
+                readonly link: "";
+                readonly strong: "";
+                readonly emphasis: "";
+                readonly list: "";
+                readonly listItem: "";
+                readonly quote: "";
+                readonly divider: "";
+                readonly code: "";
+                readonly codeBlock: "";
+                readonly codeBlockFrame: "";
+                readonly codeBlockHeader: "";
+                readonly codeBlockLanguage: "";
+                readonly codeBlockCopy: "";
+                readonly image: "";
+                readonly table: "";
+                readonly tableHead: "";
+                readonly tableRow: "";
+                readonly tableHeaderCell: "";
+                readonly tableCell: "";
             };
             readonly initialState: {
                 readonly visibility: true;

package/dist/elements/basic/RichText/declaration.mjs

@@ -16,10 +16,39 @@ var n = e()({
 		definition: {
 			label: "Rich Text",
 			type: "richText",
-			description: "Renders a body field coming from a CMS — HTML, markdown or plain text. Scripts and event handlers are stripped before rendering, so third-party content cannot execute.",
+			description: "Renders a body field coming from a CMS — HTML, markdown or plain text. Scripts and event handlers are stripped before rendering, so third-party content cannot execute. The parts of an HTML or markdown body take a class through the slots a `markdown` has, by the same names: `heading` and `heading1`…`heading6` (a property on one of the two, never both), `paragraph`, `link`, `strong` (`strong`/`b`), `emphasis` (`em`/`i`), `list`, `listItem`, `quote`, `divider`, `code` (inline), `codeBlock` (`pre`), `image`, `table`, `tableHead`, `tableRow`, `tableHeaderCell`, `tableCell`; the fenced block of a markdown body also sits in `codeBlockFrame`, under `codeBlockHeader` with `codeBlockLanguage` and `codeBlockCopy`. Unstyled, a body reads as a document from the base layer of the SDK, which a class on the slot of a part replaces property by property.",
 			items: [],
 			bindings: {},
-			styleSelectors: { base: "" },
+			styleSelectors: {
+				base: "",
+				heading: "",
+				heading1: "",
+				heading2: "",
+				heading3: "",
+				heading4: "",
+				heading5: "",
+				heading6: "",
+				paragraph: "",
+				link: "",
+				strong: "",
+				emphasis: "",
+				list: "",
+				listItem: "",
+				quote: "",
+				divider: "",
+				code: "",
+				codeBlock: "",
+				codeBlockFrame: "",
+				codeBlockHeader: "",
+				codeBlockLanguage: "",
+				codeBlockCopy: "",
+				image: "",
+				table: "",
+				tableHead: "",
+				tableRow: "",
+				tableHeaderCell: "",
+				tableCell: ""
+			},
 			initialState: { visibility: !0 }
 		},
 		builder: {

package/dist/elements/basic/RichText/index.d.ts

@@ -15,11 +15,38 @@ declare const RichText: {
         readonly definition: {
             readonly label: "Rich Text";
             readonly type: "richText";
-            readonly description: "Renders a body field coming from a CMS — HTML, markdown or plain text. Scripts and event handlers are stripped before rendering, so third-party content cannot execute.";
+            readonly description: string;
             readonly items: readonly [];
             readonly bindings: {};
             readonly styleSelectors: {
                 readonly base: "";
+                readonly heading: "";
+                readonly heading1: "";
+                readonly heading2: "";
+                readonly heading3: "";
+                readonly heading4: "";
+                readonly heading5: "";
+                readonly heading6: "";
+                readonly paragraph: "";
+                readonly link: "";
+                readonly strong: "";
+                readonly emphasis: "";
+                readonly list: "";
+                readonly listItem: "";
+                readonly quote: "";
+                readonly divider: "";
+                readonly code: "";
+                readonly codeBlock: "";
+                readonly codeBlockFrame: "";
+                readonly codeBlockHeader: "";
+                readonly codeBlockLanguage: "";
+                readonly codeBlockCopy: "";
+                readonly image: "";
+                readonly table: "";
+                readonly tableHead: "";
+                readonly tableRow: "";
+                readonly tableHeaderCell: "";
+                readonly tableCell: "";
             };
             readonly initialState: {
                 readonly visibility: true;

package/dist/elements/basic/Text/declaration.d.ts

@@ -44,8 +44,6 @@ declare const declaration: {
             readonly style: {
                 readonly base: {
                     readonly default: {
-                        readonly 'font-size': "14px";
-                        readonly 'line-height': "1.714";
                         readonly display: "inline";
                     };
                 };

package/dist/elements/basic/Text/declaration.mjs

@@ -33,11 +33,7 @@ var t = e()({
 		defaultStyle: {
 			name: "Text",
 			displayMode: "desktop",
-			style: { base: { default: {
-				"font-size": "14px",
-				"line-height": "1.714",
-				display: "inline"
-			} } }
+			style: { base: { default: { display: "inline" } } }
 		},
 		settings: {}
 	}

package/dist/elements/basic/Text/index.d.ts

@@ -43,8 +43,6 @@ declare const Text: {
             readonly style: {
                 readonly base: {
                     readonly default: {
-                        readonly 'font-size': "14px";
-                        readonly 'line-height': "1.714";
                         readonly display: "inline";
                     };
                 };

package/dist/elements/basic/ThemeToggle/ThemeToggle.mjs

@@ -37,11 +37,11 @@ var h = () => () => {}, g = () => !0, _ = () => !1, v = () => /* @__PURE__ */ f(
 		d: "M20.5 14.3A8.6 8.6 0 0 1 9.7 3.5a8.6 8.6 0 1 0 10.8 10.8Z"
 	})
 }), b = ({ ref: e, className: b = "", subType: x = "switch", lightLabel: S = "Light", darkLabel: C = "Dark", systemLabel: w = "System", showSystem: T = !1 }) => {
-	let { theme: E, setTheme: D, toggleTheme: O } = m(), { id: k, definition: { styleSelectors: A } } = t(), { settings: { previewMode: j }, contexts: { InteractionsContext: M } } = u(), { interactionsManager: N } = i(M), P = l(h, g, _), F = a((e) => (t) => {
-		t.preventDefault(), j && D(e);
-	}, [j, D]), I = a((e) => {
-		e.preventDefault(), j && O();
-	}, [j, O]), L = s(() => [
+	let { theme: E, resolvedTheme: D, setTheme: O, toggleTheme: k } = m(), { id: A, definition: { styleSelectors: j } } = t(), { settings: { previewMode: M }, contexts: { InteractionsContext: N } } = u(), { interactionsManager: P } = i(N), F = l(h, g, _), I = a((e) => (t) => {
+		t.preventDefault(), M && O(e);
+	}, [M, O]), L = a((e) => {
+		e.preventDefault(), M && k();
+	}, [M, k]), R = s(() => [
 		...T ? [{
 			value: "system",
 			label: w,
@@ -62,14 +62,14 @@ var h = () => () => {}, g = () => !0, _ = () => !1, v = () => /* @__PURE__ */ f(
 		w,
 		S,
 		C
-	]), R = c(null);
+	]), z = c(null);
 	return o(() => {
-		let e = R.current;
-		R.current = E, e !== null && e !== E && N.interactionTrigger(k, "onThemeChange", { theme: E });
+		let e = z.current;
+		z.current = E, e !== null && e !== E && P.interactionTrigger(A, "onThemeChange", { theme: E });
 	}, [
 		E,
-		N,
-		k
+		P,
+		A
 	]), x === "segmented" ? /* @__PURE__ */ d(n, {
 		ref: e,
 		tag: "div",
@@ -77,13 +77,13 @@ var h = () => () => {}, g = () => !0, _ = () => !1, v = () => /* @__PURE__ */ f(
 		"aria-label": `${S} / ${C}`,
 		className: p("plitzi-component__theme-toggle plitzi-component__theme-toggle--segmented", b),
 		interactionTriggers: r.triggers,
-		children: L.map((e) => /* @__PURE__ */ f("button", {
+		children: R.map((e) => /* @__PURE__ */ f("button", {
 			type: "button",
-			className: p("plitzi-component__theme-toggle-option", A.option),
-			"data-active": P && E === e.value ? "true" : void 0,
-			"aria-pressed": P ? E === e.value : void 0,
+			className: p("plitzi-component__theme-toggle-option", j.option),
+			"data-active": F && E === e.value ? "true" : void 0,
+			"aria-pressed": F ? E === e.value : void 0,
 			"data-theme-option": e.value,
-			onClick: F(e.value),
+			onClick: I(e.value),
 			children: [e.icon, /* @__PURE__ */ d("span", { children: e.label })]
 		}, e.value))
 	}) : /* @__PURE__ */ f(n, {
@@ -92,16 +92,18 @@ var h = () => () => {}, g = () => !0, _ = () => !1, v = () => /* @__PURE__ */ f(
 		className: p("plitzi-component__theme-toggle plitzi-component__theme-toggle--switch", b),
 		interactionTriggers: r.triggers,
 		type: "button",
-		onClick: I,
+		onClick: L,
 		"aria-label": `${S} / ${C}`,
 		title: `${S} / ${C}`,
 		children: [/* @__PURE__ */ d("span", {
-			className: p("plitzi-component__theme-toggle-icon", A.icon),
+			className: p("plitzi-component__theme-toggle-icon", j.icon),
 			"data-theme-icon": "light",
+			"aria-current": F && D === "light" ? "true" : void 0,
 			children: /* @__PURE__ */ d(v, {})
 		}), /* @__PURE__ */ d("span", {
-			className: p("plitzi-component__theme-toggle-icon", A.icon),
+			className: p("plitzi-component__theme-toggle-icon", j.icon),
 			"data-theme-icon": "dark",
+			"aria-current": F && D === "dark" ? "true" : void 0,
 			children: /* @__PURE__ */ d(y, {})
 		})]
 	});

package/dist/elements/basic/ThemeToggle/declaration.d.ts

@@ -29,7 +29,7 @@ declare const declaration: {
         readonly definition: {
             readonly label: "Theme Toggle";
             readonly type: "themeToggle";
-            readonly description: "Lets a visitor choose light or dark. It writes the choice on the document root, where a space stylesheet is already looking for it, and remembers it — so the machine decides until somebody says otherwise. It ships no colours of its own: style it with the space own classes. It shows the icon of the scheme in use by default; key a rule off `data-theme-icon` to change that.";
+            readonly description: string;
             readonly items: readonly [];
             readonly bindings: {};
             readonly styleSelectors: {
@@ -65,9 +65,53 @@ declare const declaration: {
             readonly style: {
                 readonly base: {
                     readonly default: {
-                        readonly display: "inline-flex";
-                        readonly 'align-items': "center";
-                        readonly cursor: "pointer";
+                        'margin-top': string;
+                        'margin-right': string;
+                        'margin-bottom': string;
+                        'margin-left': string;
+                        'padding-top': string;
+                        'padding-right': string;
+                        'padding-bottom': string;
+                        'padding-left': string;
+                        display: string;
+                        'align-items': string;
+                        'background-color': string;
+                        color: string;
+                        'font-family': string;
+                        'font-size': string;
+                        'font-style': string;
+                        'font-weight': string;
+                        'line-height': string;
+                        'letter-spacing': string;
+                        cursor: string;
+                    };
+                };
+                readonly icon: {
+                    readonly default: {};
+                };
+                readonly option: {
+                    readonly default: {
+                        readonly 'row-gap': "4px";
+                        readonly 'column-gap': "4px";
+                        readonly 'margin-top': string;
+                        readonly 'margin-right': string;
+                        readonly 'margin-bottom': string;
+                        readonly 'margin-left': string;
+                        readonly 'padding-top': string;
+                        readonly 'padding-right': string;
+                        readonly 'padding-bottom': string;
+                        readonly 'padding-left': string;
+                        readonly display: string;
+                        readonly 'align-items': string;
+                        readonly 'background-color': string;
+                        readonly color: string;
+                        readonly 'font-family': string;
+                        readonly 'font-size': string;
+                        readonly 'font-style': string;
+                        readonly 'font-weight': string;
+                        readonly 'line-height': string;
+                        readonly 'letter-spacing': string;
+                        readonly cursor: string;
                     };
                 };
             };

package/dist/elements/basic/ThemeToggle/declaration.mjs

@@ -1,6 +1,26 @@
 import { elementDeclaration as e, valuesOf as t } from "@plitzi/sdk-shared/authoring/declare";
 //#region src/elements/basic/ThemeToggle/declaration.ts
-var n = e()({
+var n = {
+	"margin-top": "0px",
+	"margin-right": "0px",
+	"margin-bottom": "0px",
+	"margin-left": "0px",
+	"padding-top": "0px",
+	"padding-right": "0px",
+	"padding-bottom": "0px",
+	"padding-left": "0px",
+	display: "inline-flex",
+	"align-items": "center",
+	"background-color": "transparent",
+	color: "inherit",
+	"font-family": "inherit",
+	"font-size": "inherit",
+	"font-style": "inherit",
+	"font-weight": "inherit",
+	"line-height": "inherit",
+	"letter-spacing": "inherit",
+	cursor: "pointer"
+}, r = e()({
 	type: "themeToggle",
 	attributeValues: { subType: t()(["switch", "segmented"]) },
 	triggers: { onThemeChange: {
@@ -21,7 +41,7 @@ var n = e()({
 		definition: {
 			label: "Theme Toggle",
 			type: "themeToggle",
-			description: "Lets a visitor choose light or dark. It writes the choice on the document root, where a space stylesheet is already looking for it, and remembers it — so the machine decides until somebody says otherwise. It ships no colours of its own: style it with the space own classes. It shows the icon of the scheme in use by default; key a rule off `data-theme-icon` to change that.",
+			description: "Lets a visitor choose light or dark. It writes the choice on the document root, where a space stylesheet is already looking for it, and remembers it — so the machine decides until somebody says otherwise. It ships no colours of its own: its buttons carry no browser look and take the colour and type around them — style them with the space own classes. A `segmented` one marks the chosen option with `aria-pressed`, which is the `current` state of its `option` slot. It shows the icon of the scheme in use by default; key a rule off `data-theme-icon` to change that. A `switch` marks the icon of the scheme in use — the one chosen, or the machine one while none is — with `aria-current`, the `current` state of its `icon` slot.",
 			items: [],
 			bindings: {},
 			styleSelectors: {
@@ -52,15 +72,19 @@ var n = e()({
 		defaultStyle: {
 			name: "Theme Toggle",
 			displayMode: "desktop",
-			style: { base: { default: {
-				display: "inline-flex",
-				"align-items": "center",
-				cursor: "pointer"
-			} } },
+			style: {
+				base: { default: n },
+				icon: { default: {} },
+				option: { default: {
+					...n,
+					"row-gap": "4px",
+					"column-gap": "4px"
+				} }
+			},
 			subTypes: {}
 		},
 		settings: {}
 	}
 });
 //#endregion
-export { n as default };
+export { r as default };

package/dist/elements/basic/ThemeToggle/index.d.ts

@@ -28,7 +28,7 @@ declare const ThemeToggle: {
         readonly definition: {
             readonly label: "Theme Toggle";
             readonly type: "themeToggle";
-            readonly description: "Lets a visitor choose light or dark. It writes the choice on the document root, where a space stylesheet is already looking for it, and remembers it — so the machine decides until somebody says otherwise. It ships no colours of its own: style it with the space own classes. It shows the icon of the scheme in use by default; key a rule off `data-theme-icon` to change that.";
+            readonly description: string;
             readonly items: readonly [];
             readonly bindings: {};
             readonly styleSelectors: {
@@ -64,9 +64,53 @@ declare const ThemeToggle: {
             readonly style: {
                 readonly base: {
                     readonly default: {
-                        readonly display: "inline-flex";
-                        readonly 'align-items': "center";
-                        readonly cursor: "pointer";
+                        'margin-top': string;
+                        'margin-right': string;
+                        'margin-bottom': string;
+                        'margin-left': string;
+                        'padding-top': string;
+                        'padding-right': string;
+                        'padding-bottom': string;
+                        'padding-left': string;
+                        display: string;
+                        'align-items': string;
+                        'background-color': string;
+                        color: string;
+                        'font-family': string;
+                        'font-size': string;
+                        'font-style': string;
+                        'font-weight': string;
+                        'line-height': string;
+                        'letter-spacing': string;
+                        cursor: string;
+                    };
+                };
+                readonly icon: {
+                    readonly default: {};
+                };
+                readonly option: {
+                    readonly default: {
+                        readonly 'row-gap': "4px";
+                        readonly 'column-gap': "4px";
+                        readonly 'margin-top': string;
+                        readonly 'margin-right': string;
+                        readonly 'margin-bottom': string;
+                        readonly 'margin-left': string;
+                        readonly 'padding-top': string;
+                        readonly 'padding-right': string;
+                        readonly 'padding-bottom': string;
+                        readonly 'padding-left': string;
+                        readonly display: string;
+                        readonly 'align-items': string;
+                        readonly 'background-color': string;
+                        readonly color: string;
+                        readonly 'font-family': string;
+                        readonly 'font-size': string;
+                        readonly 'font-style': string;
+                        readonly 'font-weight': string;
+                        readonly 'line-height': string;
+                        readonly 'letter-spacing': string;
+                        readonly cursor: string;
                     };
                 };
             };