@voltro/cms 0.85.0 → 0.87.0

package/dist/RichDocumentEditor.js

@@ -0,0 +1,550 @@
+import { blockMarkup as e, inlineMarkupOf as t, listNumberedAt as n, newBlockId as r, normalizeRichDocument as i, withBlockMarkup as a } from "./richDocument.js";
+import { inlineText as o, mergeInline as s } from "./richInline.js";
+import { blockHasChanges as c, pendingChanges as l, resolveChanges as u } from "./trackChanges.js";
+import { contentFormStrings as d } from "./formStrings.js";
+import { RichDocumentView as f } from "./RichDocumentView.js";
+import { RichTextSurface as p } from "./RichTextSurface.js";
+import { useId as m, useMemo as h, useState as g } from "react";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+//#region src/RichDocumentEditor.tsx
+var b = (e) => {
+	let t = i(e ?? ""), n = t.blocks;
+	return Array.isArray(n) ? t : {
+		type: "doc",
+		blocks: []
+	};
+}, x = (e, t) => {
+	let n = r();
+	switch (e) {
+		case "paragraph": return {
+			id: n,
+			type: e,
+			content: []
+		};
+		case "heading": return {
+			id: n,
+			type: e,
+			level: t.profile?.headings[0] ?? 2,
+			content: []
+		};
+		case "list": return {
+			id: n,
+			type: e,
+			ordered: !1,
+			items: []
+		};
+		case "table": return {
+			id: n,
+			type: e,
+			header: !0,
+			rows: []
+		};
+		case "image": return {
+			id: n,
+			type: e,
+			asset: ""
+		};
+		case "file": return {
+			id: n,
+			type: e,
+			asset: "",
+			label: ""
+		};
+		case "component": return {
+			id: n,
+			type: e,
+			componentId: t.profile?.components[0]?.id ?? "",
+			props: {}
+		};
+	}
+}, S = ({ id: e, options: t, renderPicker: n, onInsert: r, words: i }) => {
+	let a = t.profile?.contactPoints !== void 0 && n !== void 0 ? t.profile.contactPoints : void 0, o = t.profile?.contactLiterals === !0, [s, c] = g(a === void 0 ? "email" : "point"), [l, u] = g(""), [d, f] = g("");
+	if (a === void 0 && !o) return null;
+	let p = s === "point" ? { target: l } : {
+		channel: s,
+		value: l.trim()
+	};
+	return /* @__PURE__ */ y("div", {
+		"data-cms-rich-contact": !0,
+		children: [
+			/* @__PURE__ */ v("label", {
+				htmlFor: `${e}-contact-kind`,
+				children: i.contactKind
+			}),
+			/* @__PURE__ */ y("select", {
+				id: `${e}-contact-kind`,
+				value: s,
+				onChange: (e) => {
+					c(e.target.value), u("");
+				},
+				children: [
+					a === void 0 ? null : /* @__PURE__ */ v("option", {
+						value: "point",
+						children: i.contactPoint
+					}),
+					o ? /* @__PURE__ */ v("option", {
+						value: "email",
+						children: i.contactEmail
+					}) : null,
+					o ? /* @__PURE__ */ v("option", {
+						value: "phone",
+						children: i.contactPhone
+					}) : null
+				]
+			}),
+			s === "point" && a !== void 0 ? /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v("label", {
+				htmlFor: `${e}-contact-value`,
+				children: i.contactPoint
+			}), n?.({
+				id: `${e}-contact-value`,
+				type: a,
+				value: l,
+				onChange: u,
+				role: "contact"
+			})] }) : /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v("label", {
+				htmlFor: `${e}-contact-value`,
+				children: i.contactValue
+			}), /* @__PURE__ */ v("input", {
+				id: `${e}-contact-value`,
+				type: s === "email" ? "email" : "tel",
+				value: l,
+				onChange: (e) => u(e.target.value)
+			})] }),
+			/* @__PURE__ */ v("label", {
+				htmlFor: `${e}-contact-text`,
+				children: i.contactText
+			}),
+			/* @__PURE__ */ v("input", {
+				id: `${e}-contact-text`,
+				value: d,
+				onChange: (e) => f(e.target.value)
+			}),
+			/* @__PURE__ */ v("button", {
+				type: "button",
+				disabled: l.trim() === "" || d.trim() === "",
+				onClick: () => {
+					r({
+						type: "contact",
+						text: d.trim(),
+						contact: p
+					}), u(""), f("");
+				},
+				children: i.insertContact
+			})
+		]
+	});
+}, C = ({ id: e, type: t, renderPicker: n, onInsert: r, words: i, target: a }) => {
+	let [o, s] = g(""), [c, l] = g("");
+	return /* @__PURE__ */ y("div", {
+		"data-cms-rich-link": !0,
+		role: "group",
+		"aria-labelledby": `${e}-link-label`,
+		children: [
+			/* @__PURE__ */ v("span", {
+				id: `${e}-link-label`,
+				children: i.linkTo
+			}),
+			n({
+				id: `${e}-link-target`,
+				type: t,
+				value: o,
+				onChange: s,
+				target: a,
+				role: "link",
+				labelledBy: `${e}-link-label`
+			}),
+			o === "" ? null : /* @__PURE__ */ y(_, { children: [
+				/* @__PURE__ */ v("label", {
+					htmlFor: `${e}-link-text`,
+					children: i.linkText
+				}),
+				/* @__PURE__ */ v("input", {
+					id: `${e}-link-text`,
+					value: c,
+					onChange: (e) => l(e.target.value)
+				}),
+				/* @__PURE__ */ v("button", {
+					type: "button",
+					disabled: c.trim() === "",
+					onClick: () => {
+						r({
+							type: "link",
+							target: o,
+							text: c.trim()
+						}), s(""), l("");
+					},
+					children: i.insertLink
+				})
+			] })
+		]
+	});
+}, w = (r) => {
+	let { id: i, name: w, field: T, value: E, onChange: D, renderPicker: O, renderBlockAside: k, renderComponentProps: A } = r, j = d(r.strings), M = T.richText ?? {}, N = M.profile, P = Object.keys(N?.styles?.tokens ?? {}), F = h(() => b(E), [E]), I = m(), [L, R] = g({}), [z, B] = g("paragraph"), V = Object.keys(j.blockNames).filter((e) => e !== "image" || M.images !== void 0 && O !== void 0).filter((e) => e !== "file" || M.files !== void 0 && O !== void 0).filter((e) => N === void 0 ? e !== "component" : N.blocks.includes(e)).filter((e) => e !== "component" || A !== void 0), H = (e) => D({
+		type: "doc",
+		blocks: e
+	}), U = (e, t) => H(F.blocks.map((n, r) => r === e ? t : n)), W = (e, t) => {
+		if (t < 0 || t >= F.blocks.length) return;
+		let n = [...F.blocks], [r] = n.splice(e, 1);
+		r !== void 0 && n.splice(t, 0, r), H(n);
+	}, G = (e, t, n) => {
+		R((e) => ({
+			...e,
+			[t.id]: n
+		})), U(e, a(t, n, P));
+	}, K = (e, n, r, i) => G(e, n, `${r}${r === "" || r.endsWith(" ") || r.endsWith("\n") ? "" : " "}${t([i])}`), q = F.blocks.map((t, i) => {
+		let a = `${j.blockNames[t.type]} ${i + 1}`, d = `${I}-${t.id}`, m = L[t.id] ?? e(t);
+		if (c(t)) {
+			let e = l({
+				type: "doc",
+				blocks: [t]
+			});
+			return /* @__PURE__ */ y("fieldset", {
+				"data-cms-rich-block": t.type,
+				"data-cms-block-id": t.id,
+				"data-cms-rich-suggested": !0,
+				children: [
+					/* @__PURE__ */ v("legend", { children: a }),
+					/* @__PURE__ */ v("p", { children: j.suggestedChanges }),
+					/* @__PURE__ */ v("div", {
+						"data-cms-rich-preview": !0,
+						children: /* @__PURE__ */ v(f, { document: {
+							type: "doc",
+							blocks: [t]
+						} })
+					}),
+					/* @__PURE__ */ v("ul", { children: e.map((e) => /* @__PURE__ */ y("li", { children: [
+						j.changeBy(e.by, e.inserted, e.deleted),
+						" ",
+						/* @__PURE__ */ v("button", {
+							type: "button",
+							"aria-label": j.acceptLabel(e.by),
+							onClick: () => D(u(F, (t) => t.id === e.id ? "accept" : "keep")),
+							children: j.accept
+						}),
+						" ",
+						/* @__PURE__ */ v("button", {
+							type: "button",
+							"aria-label": j.rejectLabel(e.by),
+							onClick: () => D(u(F, (t) => t.id === e.id ? "reject" : "keep")),
+							children: j.reject
+						})
+					] }, e.id)) }),
+					k?.(t.id, a) ?? null
+				]
+			}, t.id);
+		}
+		return /* @__PURE__ */ y("fieldset", {
+			"data-cms-rich-block": t.type,
+			"data-cms-block-id": t.id,
+			children: [
+				/* @__PURE__ */ v("legend", { children: a }),
+				t.type === "heading" ? /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v("label", {
+					htmlFor: `${d}-level`,
+					children: j.level
+				}), /* @__PURE__ */ v("select", {
+					id: `${d}-level`,
+					value: t.level,
+					onChange: (e) => U(i, {
+						...t,
+						level: e.target.value === "3" ? 3 : 2
+					}),
+					children: (N?.headings ?? [2, 3]).map((e) => /* @__PURE__ */ v("option", {
+						value: e,
+						children: e
+					}, e))
+				})] }) : null,
+				N?.styles !== void 0 && (t.type === "paragraph" || t.type === "heading" || t.type === "list") ? /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v("label", {
+					htmlFor: `${d}-style`,
+					children: j.style
+				}), /* @__PURE__ */ y("select", {
+					id: `${d}-style`,
+					value: t.style ?? "",
+					onChange: (e) => {
+						let { style: n, ...r } = t;
+						U(i, e.target.value === "" ? r : {
+							...r,
+							style: e.target.value
+						});
+					},
+					children: [/* @__PURE__ */ v("option", {
+						value: "",
+						children: j.noStyle
+					}), Object.entries(N.styles.tokens).map(([e, t]) => /* @__PURE__ */ v("option", {
+						value: e,
+						children: `${e} — ${t}`
+					}, e))]
+				})] }) : null,
+				t.type === "list" ? /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ y("label", { children: [
+					/* @__PURE__ */ v("input", {
+						type: "checkbox",
+						checked: t.ordered,
+						onChange: (e) => U(i, {
+							...t,
+							ordered: e.target.checked
+						})
+					}),
+					" ",
+					j.numbered
+				] }), Array.from({ length: Math.max(0, ...t.levels ?? []) }, (e, t) => t + 1).map((e) => /* @__PURE__ */ y("label", { children: [
+					/* @__PURE__ */ v("input", {
+						type: "checkbox",
+						checked: n(t, e),
+						onChange: (r) => U(i, {
+							...t,
+							sublists: Array.from({ length: Math.max(e, t.sublists?.length ?? 0) }, (i, a) => a === e - 1 ? r.target.checked ? "ordered" : "unordered" : n(t, a + 1) ? "ordered" : "unordered")
+						})
+					}),
+					" ",
+					j.numberedAt(e + 1)
+				] }, e))] }) : null,
+				t.type === "table" ? /* @__PURE__ */ y("label", { children: [
+					/* @__PURE__ */ v("input", {
+						type: "checkbox",
+						checked: t.header,
+						onChange: (e) => U(i, {
+							...t,
+							header: e.target.checked
+						})
+					}),
+					" ",
+					j.headerRow
+				] }) : null,
+				t.type === "component" ? /* @__PURE__ */ y(_, { children: [
+					/* @__PURE__ */ v("label", {
+						htmlFor: `${d}-component`,
+						children: j.component
+					}),
+					/* @__PURE__ */ v("select", {
+						id: `${d}-component`,
+						value: t.componentId,
+						onChange: (e) => U(i, {
+							id: t.id,
+							type: "component",
+							componentId: e.target.value,
+							props: {}
+						}),
+						children: (N?.components ?? []).map((e) => /* @__PURE__ */ v("option", {
+							value: e.id,
+							children: e.displayName
+						}, e.id))
+					}),
+					((e) => e === void 0 ? /* @__PURE__ */ v("p", { children: j.unknownComponent(t.componentId) }) : /* @__PURE__ */ v("div", {
+						"data-cms-instance": t.id,
+						"data-cms-component": t.componentId,
+						children: A?.(e, t.props, (e) => U(i, {
+							...t,
+							props: e
+						}))
+					}))(N?.components.find((e) => e.id === t.componentId))
+				] }) : t.type === "image" ? /* @__PURE__ */ y(_, { children: [
+					/* @__PURE__ */ v("label", {
+						htmlFor: `${d}-asset`,
+						children: j.image
+					}),
+					O?.({
+						id: `${d}-asset`,
+						type: M.images ?? "",
+						value: t.asset,
+						onChange: (e) => U(i, {
+							...t,
+							asset: e
+						}),
+						target: {
+							field: w,
+							blockId: t.id
+						},
+						role: "image"
+					}),
+					/* @__PURE__ */ v("label", {
+						htmlFor: `${d}-caption`,
+						children: j.caption
+					}),
+					/* @__PURE__ */ v("input", {
+						id: `${d}-caption`,
+						value: t.caption ?? "",
+						onChange: (e) => U(i, e.target.value === "" ? {
+							id: t.id,
+							type: "image",
+							asset: t.asset
+						} : {
+							...t,
+							caption: e.target.value
+						})
+					})
+				] }) : t.type === "file" ? /* @__PURE__ */ y(_, { children: [
+					/* @__PURE__ */ v("label", {
+						htmlFor: `${d}-asset`,
+						children: j.file
+					}),
+					O?.({
+						id: `${d}-asset`,
+						type: M.files ?? "",
+						value: t.asset,
+						onChange: (e) => U(i, {
+							...t,
+							asset: e
+						}),
+						target: {
+							field: w,
+							blockId: t.id
+						},
+						role: "file"
+					}),
+					/* @__PURE__ */ v("label", {
+						htmlFor: `${d}-label`,
+						children: j.fileLabel
+					}),
+					/* @__PURE__ */ v("input", {
+						id: `${d}-label`,
+						value: t.label,
+						onChange: (e) => U(i, {
+							...t,
+							label: e.target.value
+						})
+					})
+				] }) : r.surface === "visual" && (t.type === "paragraph" || t.type === "heading") ? /* @__PURE__ */ y(_, { children: [
+					/* @__PURE__ */ v("span", {
+						id: `${d}-label`,
+						"data-cms-rich-label": !0,
+						children: j.text
+					}),
+					/* @__PURE__ */ v(p, {
+						id: `${d}-text`,
+						labelledBy: `${d}-label`,
+						content: t.content,
+						onChange: (e) => U(i, {
+							...t,
+							content: e
+						}),
+						words: {
+							bold: j.bold,
+							italic: j.italic,
+							underline: j.underline
+						}
+					}),
+					M.links !== void 0 && O !== void 0 && t.type === "paragraph" ? /* @__PURE__ */ v(C, {
+						id: d,
+						type: M.links,
+						renderPicker: O,
+						words: j,
+						target: {
+							field: w,
+							blockId: t.id
+						},
+						onInsert: (e) => U(i, {
+							...t,
+							content: s([
+								...t.content,
+								...o(t.content).match(/(^|\s)$/) ? [] : [{
+									type: "text",
+									text: " "
+								}],
+								e
+							])
+						})
+					}) : null,
+					t.type === "paragraph" ? /* @__PURE__ */ v(S, {
+						id: d,
+						options: M,
+						renderPicker: O,
+						words: j,
+						onInsert: (e) => U(i, {
+							...t,
+							content: s([
+								...t.content,
+								...o(t.content).match(/(^|\s)$/) ? [] : [{
+									type: "text",
+									text: " "
+								}],
+								e
+							])
+						})
+					}) : null
+				] }) : /* @__PURE__ */ y(_, { children: [
+					/* @__PURE__ */ v("label", {
+						htmlFor: `${d}-text`,
+						children: t.type === "list" ? j.listItems : t.type === "table" ? j.tableRows : j.text
+					}),
+					/* @__PURE__ */ v("textarea", {
+						id: `${d}-text`,
+						value: m,
+						onChange: (e) => G(i, t, e.target.value)
+					}),
+					M.links !== void 0 && O !== void 0 && (t.type === "paragraph" || t.type === "list") ? /* @__PURE__ */ v(C, {
+						id: d,
+						type: M.links,
+						renderPicker: O,
+						words: j,
+						target: {
+							field: w,
+							blockId: t.id
+						},
+						onInsert: (e) => K(i, t, m, e)
+					}) : null,
+					t.type === "paragraph" || t.type === "list" ? /* @__PURE__ */ v(S, {
+						id: d,
+						options: M,
+						renderPicker: O,
+						words: j,
+						onInsert: (e) => K(i, t, m, e)
+					}) : null
+				] }),
+				/* @__PURE__ */ y("div", {
+					"data-cms-rich-actions": !0,
+					children: [
+						/* @__PURE__ */ v("button", {
+							type: "button",
+							"aria-label": j.moveUpLabel(a),
+							disabled: i === 0,
+							onClick: () => W(i, i - 1),
+							children: j.moveUp
+						}),
+						/* @__PURE__ */ v("button", {
+							type: "button",
+							"aria-label": j.moveDownLabel(a),
+							disabled: i === F.blocks.length - 1,
+							onClick: () => W(i, i + 1),
+							children: j.moveDown
+						}),
+						/* @__PURE__ */ v("button", {
+							type: "button",
+							"aria-label": j.removeLabel(a),
+							onClick: () => H(F.blocks.filter((e, t) => t !== i)),
+							children: j.remove
+						})
+					]
+				}),
+				k?.(t.id, a) ?? null
+			]
+		}, t.id);
+	});
+	return /* @__PURE__ */ y("div", {
+		id: i,
+		"data-cms-rich-document": !0,
+		children: [q, /* @__PURE__ */ y("div", {
+			"data-cms-rich-add": !0,
+			children: [
+				/* @__PURE__ */ v("label", {
+					htmlFor: `${i}-add`,
+					children: j.addBlock
+				}),
+				/* @__PURE__ */ v("select", {
+					id: `${i}-add`,
+					value: V.includes(z) ? z : V[0] ?? "paragraph",
+					onChange: (e) => B(e.target.value),
+					children: V.map((e) => /* @__PURE__ */ v("option", {
+						value: e,
+						children: j.blockNames[e]
+					}, e))
+				}),
+				/* @__PURE__ */ v("button", {
+					type: "button",
+					onClick: () => H([...F.blocks, x(V.includes(z) ? z : V[0] ?? "paragraph", M)]),
+					children: j.add
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { w as RichDocumentEditor };