wimui 0.1.0

package/dist/components/form/RichTextEditor/RichTextEditor.js

@@ -0,0 +1,548 @@
+"use client";
+import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
+import { Button as t } from "../Button/Button.js";
+import { FieldTemplate as n } from "../FieldTemplate/FieldTemplate.js";
+import { Input as r } from "../Input/Input.js";
+import { Dialog as i, DialogClose as a, DialogContent as ee, DialogFooter as te, DialogHeader as ne, DialogTitle as re } from "../../overlay/Dialog/Dialog.js";
+import { createLink as ie, getActiveFormats as ae, getEditorRange as oe, removeAllFormatting as se, removeLink as ce, setBlock as o, toggleInline as s, toggleList as c } from "./commands.js";
+import l from "./rich-text-editor.module.js";
+import u from "react";
+import d from "classnames";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/form/RichTextEditor/RichTextEditor.tsx
+var le = () => /* @__PURE__ */ p("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2.5",
+	"aria-hidden": "true",
+	children: [/* @__PURE__ */ f("path", { d: "M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" }), /* @__PURE__ */ f("path", { d: "M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" })]
+}), ue = () => /* @__PURE__ */ p("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2.5",
+	"aria-hidden": "true",
+	children: [
+		/* @__PURE__ */ f("line", {
+			x1: "19",
+			y1: "4",
+			x2: "10",
+			y2: "4"
+		}),
+		/* @__PURE__ */ f("line", {
+			x1: "14",
+			y1: "20",
+			x2: "5",
+			y2: "20"
+		}),
+		/* @__PURE__ */ f("line", {
+			x1: "15",
+			y1: "4",
+			x2: "9",
+			y2: "20"
+		})
+	]
+}), de = () => /* @__PURE__ */ p("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2.5",
+	"aria-hidden": "true",
+	children: [/* @__PURE__ */ f("path", { d: "M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3" }), /* @__PURE__ */ f("line", {
+		x1: "4",
+		y1: "21",
+		x2: "20",
+		y2: "21"
+	})]
+}), fe = () => /* @__PURE__ */ p("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2.5",
+	"aria-hidden": "true",
+	children: [/* @__PURE__ */ f("path", { d: "M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" }), /* @__PURE__ */ f("line", {
+		x1: "4",
+		y1: "12",
+		x2: "20",
+		y2: "12"
+	})]
+}), pe = () => /* @__PURE__ */ p("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	"aria-hidden": "true",
+	children: [
+		/* @__PURE__ */ f("line", {
+			x1: "9",
+			y1: "6",
+			x2: "20",
+			y2: "6"
+		}),
+		/* @__PURE__ */ f("line", {
+			x1: "9",
+			y1: "12",
+			x2: "20",
+			y2: "12"
+		}),
+		/* @__PURE__ */ f("line", {
+			x1: "9",
+			y1: "18",
+			x2: "20",
+			y2: "18"
+		}),
+		/* @__PURE__ */ f("circle", {
+			cx: "4",
+			cy: "6",
+			r: "1.5",
+			fill: "currentColor",
+			stroke: "none"
+		}),
+		/* @__PURE__ */ f("circle", {
+			cx: "4",
+			cy: "12",
+			r: "1.5",
+			fill: "currentColor",
+			stroke: "none"
+		}),
+		/* @__PURE__ */ f("circle", {
+			cx: "4",
+			cy: "18",
+			r: "1.5",
+			fill: "currentColor",
+			stroke: "none"
+		})
+	]
+}), me = () => /* @__PURE__ */ p("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	"aria-hidden": "true",
+	children: [
+		/* @__PURE__ */ f("line", {
+			x1: "10",
+			y1: "6",
+			x2: "21",
+			y2: "6"
+		}),
+		/* @__PURE__ */ f("line", {
+			x1: "10",
+			y1: "12",
+			x2: "21",
+			y2: "12"
+		}),
+		/* @__PURE__ */ f("line", {
+			x1: "10",
+			y1: "18",
+			x2: "21",
+			y2: "18"
+		}),
+		/* @__PURE__ */ f("text", {
+			x: "1",
+			y: "8",
+			fontSize: "7",
+			fill: "currentColor",
+			stroke: "none",
+			fontWeight: "bold",
+			children: "1."
+		}),
+		/* @__PURE__ */ f("text", {
+			x: "1",
+			y: "14",
+			fontSize: "7",
+			fill: "currentColor",
+			stroke: "none",
+			fontWeight: "bold",
+			children: "2."
+		}),
+		/* @__PURE__ */ f("text", {
+			x: "1",
+			y: "20",
+			fontSize: "7",
+			fill: "currentColor",
+			stroke: "none",
+			fontWeight: "bold",
+			children: "3."
+		})
+	]
+}), he = () => /* @__PURE__ */ p("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	"aria-hidden": "true",
+	children: [/* @__PURE__ */ f("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }), /* @__PURE__ */ f("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })]
+}), ge = () => /* @__PURE__ */ p("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	"aria-hidden": "true",
+	children: [
+		/* @__PURE__ */ f("path", { d: "M18.84 12.25l1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07 5.006 5.006 0 0 0-6.95 0l-1.72 1.72" }),
+		/* @__PURE__ */ f("path", { d: "M5.17 11.75l-1.71 1.71a5.004 5.004 0 0 0 .12 7.07 5.006 5.006 0 0 0 6.95 0l1.71-1.71" }),
+		/* @__PURE__ */ f("line", {
+			x1: "8",
+			y1: "2",
+			x2: "8",
+			y2: "5"
+		}),
+		/* @__PURE__ */ f("line", {
+			x1: "2",
+			y1: "8",
+			x2: "5",
+			y2: "8"
+		}),
+		/* @__PURE__ */ f("line", {
+			x1: "16",
+			y1: "19",
+			x2: "16",
+			y2: "22"
+		}),
+		/* @__PURE__ */ f("line", {
+			x1: "19",
+			y1: "16",
+			x2: "22",
+			y2: "16"
+		})
+	]
+}), _e = () => /* @__PURE__ */ p("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	"aria-hidden": "true",
+	children: [/* @__PURE__ */ f("path", { d: "M20 20H7L3 16l10-10 7 7-3.5 3.5" }), /* @__PURE__ */ f("line", {
+		x1: "6",
+		y1: "7",
+		x2: "17",
+		y2: "18"
+	})]
+}), ve = [
+	"bold",
+	"italic",
+	"underline",
+	"strikethrough",
+	"separator",
+	"h1",
+	"h2",
+	"h3",
+	"separator",
+	"ul",
+	"ol",
+	"separator",
+	"link",
+	"unlink",
+	"separator",
+	"removeFormat"
+], m = u.memo(({ onClick: e, active: t, disabled: n, title: r, children: i }) => /* @__PURE__ */ f("button", {
+	type: "button",
+	className: d(l.toolbarBtn, t && l.active),
+	onClick: e,
+	disabled: n,
+	title: r,
+	"aria-label": r,
+	"aria-pressed": t,
+	tabIndex: -1,
+	children: i
+}));
+m.displayName = "ToolbarButton";
+var h = ({ value: h, defaultValue: ye = "", onChange: g, placeholder: be, disabled: xe, intent: Se = "default", variant: Ce = "outline", fullWidth: _ = !1, width: v, minHeight: y = 200, label: b, error: x, required: S, layout: we, className: Te, id: Ee, toolbar: De = ve, labels: Oe = {}, "aria-label": ke, "aria-labelledby": C }) => {
+	let { t: w } = e("components"), { bold: T = w("a11y.rte_bold"), italic: E = w("a11y.rte_italic"), underline: D = w("a11y.rte_underline"), strikethrough: O = w("a11y.rte_strikethrough"), h1: k = w("a11y.rte_h1"), h2: A = w("a11y.rte_h2"), h3: j = w("a11y.rte_h3"), ul: M = w("a11y.rte_ul"), ol: Ae = w("a11y.rte_ol"), link: N = w("a11y.rte_link"), unlink: je = w("a11y.rte_unlink"), removeFormat: Me = w("a11y.rte_remove_format"), toolbar: Ne = w("a11y.rte_toolbar"), linkPrompt: Pe = w("a11y.rte_link_prompt"), linkApply: Fe = w("a11y.rte_link_apply"), linkCancel: Ie = w("a11y.rte_link_cancel") } = Oe, P = u.useRef(null), F = u.useRef(!1), I = u.useRef(h ?? ye), [L, Le] = u.useState(/* @__PURE__ */ new Set()), Re = u.useId(), R = Ee || `wim-rte-${Re}`, ze = x ? `${R}-error` : void 0, Be = b ? `${R}-label` : void 0, z = xe, Ve = x ? "danger" : Se, He = typeof v == "string" && [
+		"xs",
+		"sm",
+		"md",
+		"lg",
+		"xl"
+	].includes(v), Ue = v !== void 0 && !He && !_, B = He && !_ ? v : void 0, We = B ? l[`width${B.charAt(0).toUpperCase()}${B.slice(1)}`] : void 0, V = u.useRef(h === void 0 ? ye : h), H = u.useCallback(() => {
+		P.current && Le(ae(P.current));
+	}, []), U = u.useRef([]), W = u.useRef(-1), G = u.useRef(void 0), K = u.useCallback((e) => {
+		let t = U.current, n = W.current;
+		if (t[n] === e) return;
+		let r = [...t.slice(0, n + 1), e];
+		r.length > 100 && (r = r.slice(1)), U.current = r, W.current = r.length - 1;
+	}, []), q = u.useCallback(() => {
+		G.current !== void 0 && (clearTimeout(G.current), G.current = void 0, K(I.current));
+	}, [K]), J = u.useCallback((e) => {
+		q();
+		let t = U.current, n = W.current + e;
+		if (n < 0 || n >= t.length || !P.current) return;
+		W.current = n;
+		let r = t[n];
+		P.current.innerHTML = r, I.current = r, g?.(r);
+		let i = document.createRange();
+		i.selectNodeContents(P.current), i.collapse(!1);
+		let a = window.getSelection();
+		a?.removeAllRanges(), a?.addRange(i), H();
+	}, [
+		q,
+		g,
+		H
+	]), Y = u.useCallback((e) => {
+		if (z || !P.current) return;
+		let t = P.current, n = oe(t)?.cloneRange() ?? null;
+		if (t.focus(), n) {
+			let e = window.getSelection();
+			e?.removeAllRanges(), e?.addRange(n);
+		}
+		q(), K(t.innerHTML), e(t), H();
+		let r = t.innerHTML;
+		I.current = r, K(r), g?.(r);
+	}, [
+		z,
+		q,
+		K,
+		g,
+		H
+	]), Ge = u.useCallback(() => {
+		Y((e) => se(e));
+	}, [Y]), [Ke, X] = u.useState(!1), [Z, qe] = u.useState("https://"), Q = u.useRef(null), Je = u.useCallback(() => {
+		if (z || !P.current) return;
+		P.current.focus();
+		let e = oe(P.current);
+		Q.current = e ? e.cloneRange() : null;
+		let t = e?.toString() ?? "";
+		qe(t.startsWith("http") ? t : "https://"), X(!0);
+	}, [z]), Ye = u.useCallback(() => {
+		let e = Z.trim();
+		if (X(!1), !e || !P.current) return;
+		let t = window.getSelection();
+		if (t?.removeAllRanges(), Q.current) t?.addRange(Q.current);
+		else {
+			let e = document.createRange();
+			e.selectNodeContents(P.current), e.collapse(!1), t?.addRange(e);
+		}
+		Y((t) => ie(t, e));
+	}, [Z, Y]), $ = u.useCallback(() => {
+		if (F.current) return;
+		let e = P.current?.innerHTML ?? "";
+		e !== I.current && (I.current = e, g?.(e), G.current !== void 0 && clearTimeout(G.current), G.current = setTimeout(() => {
+			G.current = void 0, K(I.current);
+		}, 400)), H();
+	}, [
+		g,
+		K,
+		H
+	]), Xe = u.useCallback((e) => {
+		let t = e.nativeEvent.inputType;
+		t === "historyUndo" ? (e.preventDefault(), J(-1)) : t === "historyRedo" && (e.preventDefault(), J(1));
+	}, [J]), Ze = u.useCallback((e) => {
+		if (!(e.ctrlKey || e.metaKey)) return;
+		let t = e.key.toLowerCase();
+		t === "z" ? (e.preventDefault(), J(e.shiftKey ? 1 : -1)) : t === "y" && (e.preventDefault(), J(1));
+	}, [J]), Qe = u.useCallback(() => {
+		H();
+	}, [H]), $e = u.useCallback(() => {
+		H();
+	}, [H]), et = u.useCallback(() => {
+		F.current = !0;
+	}, []), tt = u.useCallback(() => {
+		F.current = !1, $();
+	}, [$]), nt = u.useCallback((e) => {
+		e.preventDefault();
+	}, []);
+	u.useEffect(() => {
+		P.current && (P.current.innerHTML = V.current, I.current = V.current, U.current = [V.current], W.current = 0);
+	}, []), u.useEffect(() => {
+		h !== void 0 && P.current && P.current.innerHTML !== h && (P.current.innerHTML = h, I.current = h);
+	}, [h]);
+	let rt = u.useCallback((e, t) => {
+		if (e === "separator") return /* @__PURE__ */ f("span", {
+			className: l.toolbarSep,
+			"aria-hidden": "true"
+		}, `sep-${t}`);
+		let n = {
+			disabled: z,
+			active: L.has(e)
+		};
+		switch (e) {
+			case "bold": return /* @__PURE__ */ f(m, {
+				...n,
+				title: T,
+				onClick: () => Y((e) => s(e, "bold")),
+				children: /* @__PURE__ */ f(le, {})
+			}, "bold");
+			case "italic": return /* @__PURE__ */ f(m, {
+				...n,
+				title: E,
+				onClick: () => Y((e) => s(e, "italic")),
+				children: /* @__PURE__ */ f(ue, {})
+			}, "italic");
+			case "underline": return /* @__PURE__ */ f(m, {
+				...n,
+				title: D,
+				onClick: () => Y((e) => s(e, "underline")),
+				children: /* @__PURE__ */ f(de, {})
+			}, "underline");
+			case "strikethrough": return /* @__PURE__ */ f(m, {
+				...n,
+				title: O,
+				onClick: () => Y((e) => s(e, "strikethrough")),
+				children: /* @__PURE__ */ f(fe, {})
+			}, "strikethrough");
+			case "h1": return /* @__PURE__ */ f(m, {
+				...n,
+				active: L.has("h1"),
+				title: k,
+				onClick: () => Y((e) => o(e, "h1")),
+				children: /* @__PURE__ */ f("span", {
+					"aria-hidden": "true",
+					children: "H1"
+				})
+			}, "h1");
+			case "h2": return /* @__PURE__ */ f(m, {
+				...n,
+				active: L.has("h2"),
+				title: A,
+				onClick: () => Y((e) => o(e, "h2")),
+				children: /* @__PURE__ */ f("span", {
+					"aria-hidden": "true",
+					children: "H2"
+				})
+			}, "h2");
+			case "h3": return /* @__PURE__ */ f(m, {
+				...n,
+				active: L.has("h3"),
+				title: j,
+				onClick: () => Y((e) => o(e, "h3")),
+				children: /* @__PURE__ */ f("span", {
+					"aria-hidden": "true",
+					children: "H3"
+				})
+			}, "h3");
+			case "ul": return /* @__PURE__ */ f(m, {
+				...n,
+				title: M,
+				onClick: () => Y((e) => c(e, "ul")),
+				children: /* @__PURE__ */ f(pe, {})
+			}, "ul");
+			case "ol": return /* @__PURE__ */ f(m, {
+				...n,
+				title: Ae,
+				onClick: () => Y((e) => c(e, "ol")),
+				children: /* @__PURE__ */ f(me, {})
+			}, "ol");
+			case "link": return /* @__PURE__ */ f(m, {
+				...n,
+				title: N,
+				onClick: Je,
+				children: /* @__PURE__ */ f(he, {})
+			}, "link");
+			case "unlink": return /* @__PURE__ */ f(m, {
+				...n,
+				title: je,
+				onClick: () => Y((e) => ce(e)),
+				children: /* @__PURE__ */ f(ge, {})
+			}, "unlink");
+			case "removeFormat": return /* @__PURE__ */ f(m, {
+				...n,
+				title: Me,
+				onClick: Ge,
+				children: /* @__PURE__ */ f(_e, {})
+			}, "removeFormat");
+			default: return null;
+		}
+	}, [
+		L,
+		z,
+		T,
+		E,
+		D,
+		O,
+		k,
+		A,
+		j,
+		M,
+		Ae,
+		N,
+		je,
+		Me,
+		Y,
+		Je,
+		Ge
+	]);
+	return /* @__PURE__ */ f(n, {
+		label: b,
+		error: x,
+		required: S,
+		layout: we,
+		labelId: Be,
+		errorId: ze,
+		className: Te,
+		children: /* @__PURE__ */ p("div", {
+			className: d("wim-rich-text-editor", l.root, l[Ve], z && l.disabled, l[Ce], _ && l.fullWidth, Ue && l.hasCustomWidth, We),
+			style: Ue ? { "--wim-input-width": typeof v == "number" ? `${v}px` : v } : void 0,
+			children: [
+				/* @__PURE__ */ f("div", {
+					className: l.toolbar,
+					role: "toolbar",
+					"aria-label": Ne,
+					"aria-controls": R,
+					onMouseDown: nt,
+					children: De.map((e, t) => rt(e, t))
+				}),
+				/* @__PURE__ */ f("div", {
+					ref: P,
+					id: R,
+					className: l.content,
+					contentEditable: !z,
+					suppressContentEditableWarning: !0,
+					role: "textbox",
+					"aria-multiline": !0,
+					"aria-label": ke ?? (b || C ? void 0 : w("a11y.rte_editor")),
+					"aria-labelledby": C ?? (b ? Be : void 0),
+					"aria-invalid": Ve === "danger",
+					"aria-describedby": ze,
+					"aria-required": S,
+					"aria-disabled": z,
+					"aria-placeholder": be,
+					"data-placeholder": be,
+					tabIndex: z ? -1 : 0,
+					style: {
+						minHeight: typeof y == "number" ? `${y}px` : y,
+						outline: "none"
+					},
+					onInput: $,
+					onBeforeInput: Xe,
+					onKeyDown: Ze,
+					onKeyUp: Qe,
+					onMouseUp: $e,
+					onCompositionStart: et,
+					onCompositionEnd: tt
+				}),
+				/* @__PURE__ */ f(i, {
+					open: Ke,
+					onOpenChange: X,
+					children: /* @__PURE__ */ p(ee, { children: [/* @__PURE__ */ f(ne, { children: /* @__PURE__ */ f(re, { children: N }) }), /* @__PURE__ */ p("form", {
+						onSubmit: (e) => {
+							e.preventDefault(), Ye();
+						},
+						children: [/* @__PURE__ */ f(r, {
+							label: Pe,
+							type: "url",
+							value: Z,
+							onChange: (e) => qe(e.target.value),
+							fullWidth: !0
+						}), /* @__PURE__ */ p(te, { children: [/* @__PURE__ */ f(a, {
+							asChild: !0,
+							children: /* @__PURE__ */ f(t, {
+								variant: "ghost",
+								type: "button",
+								children: Ie
+							})
+						}), /* @__PURE__ */ f(t, {
+							variant: "solid",
+							type: "submit",
+							children: Fe
+						})] })]
+					})] })
+				})
+			]
+		})
+	});
+};
+h.displayName = "RichTextEditor";
+//#endregion
+export { h as RichTextEditor };

package/dist/components/form/RichTextEditor/commands.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e={bold:[`strong`,`b`],italic:[`em`,`i`],underline:[`u`],strikethrough:[`s`,`strike`,`del`]},t=Object.values(e).flat(),n=[`h1`,`h2`,`h3`,`p`,`div`,`li`,`blockquote`,`pre`];function r(e){let t=e.ownerDocument.defaultView?.getSelection();if(!t||t.rangeCount===0)return null;let n=t.getRangeAt(0);return e.contains(n.commonAncestorContainer)?n:null}function i(e,t){let n=e.ownerDocument.defaultView?.getSelection();n&&(n.removeAllRanges(),n.addRange(t))}function a(e,t){let n=[],r=e;for(;r&&r!==t;)r instanceof HTMLElement&&n.push(r),r=r.parentNode;return n}function o(t){let n=new Set,i=r(t);if(!i)return n;let o=i.startContainer;if(!i.collapsed&&o.nodeType===Node.ELEMENT_NODE){let e=o.childNodes[i.startOffset];if(e&&i.intersectsNode(e))for(o=e;o.firstChild;)o=o.firstChild}let s=a(o,t);for(let t of s){let r=t.tagName.toLowerCase();for(let[t,i]of Object.entries(e))i.includes(r)&&n.add(t);if((r===`h1`||r===`h2`||r===`h3`)&&n.add(r),r===`a`&&n.add(`link`),r===`li`){let e=t.parentElement?.tagName.toLowerCase();(e===`ul`||e===`ol`)&&n.add(e)}}return n}function s(e){let t=e.parentNode;if(t){for(;e.firstChild;)t.insertBefore(e.firstChild,e);t.removeChild(e)}}function c(e,t){let n=t.join(`,`),r=e.querySelector(n);for(;r;)s(r),r=e.querySelector(n)}function l(e,t,r){if(Array.from(e.childNodes).filter(e=>e instanceof HTMLElement&&n.includes(e.tagName.toLowerCase())).length===0){if(e.childNodes.length===0)return;let n=r.createElement(t);for(;e.firstChild;)n.appendChild(e.firstChild);e.appendChild(n);return}for(let i of Array.from(e.childNodes))if(i instanceof HTMLElement&&n.includes(i.tagName.toLowerCase()))l(i,t,r);else if(i.nodeType===Node.TEXT_NODE||i instanceof HTMLElement){if(i.textContent===``)continue;let e=r.createElement(t);i.replaceWith(e),e.appendChild(i)}}function u(e,t,n){let r=n.firstChild,a=n.lastChild;if(t.insertNode(n),r&&a){let t=e.ownerDocument.createRange();t.setStartBefore(r),t.setEndAfter(a),i(e,t)}e.normalize()}function d(t,n){let s=t.ownerDocument,d=r(t);if(!d)return;let f=e[n],p=f[0],m=o(t).has(n);if(d.collapsed){let e=s.createElement(p);e.textContent=`​`,d.insertNode(e);let n=s.createRange();n.setStart(e.firstChild,1),n.collapse(!0),i(t,n);return}let h=d.extractContents();if(m){c(h,f);let e=a(d.startContainer,t).find(e=>f.includes(e.tagName.toLowerCase()));if(e){let n=s.createRange();n.setStart(d.startContainer,d.startOffset),n.setEnd(e,e.childNodes.length);let r=n.extractContents(),i=s.createRange();if(i.setStartAfter(e),i.collapse(!0),r.textContent!==``){let t=e.cloneNode(!1);t.appendChild(r),i.insertNode(t)}u(t,i,h),e.textContent===``&&e.remove();return}}else c(h,f),l(h,p,s);u(t,d,h)}function f(e,t){let r=t=>a(t,e).find(e=>n.includes(e.tagName.toLowerCase()))??null,i=r(t.startContainer),o=r(t.endContainer);if(!i)return o?[o]:[];if(i===o||!o)return[i];let s=[],c=e.ownerDocument.createTreeWalker(e,NodeFilter.SHOW_ELEMENT,{acceptNode:e=>e instanceof HTMLElement&&n.includes(e.tagName.toLowerCase())&&t.intersectsNode(e)?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP}),l=c.nextNode();for(;l;){let e=l;s.some(t=>t.contains(e))||s.push(e),l=c.nextNode()}return s}function p(e,t){let n=e.ownerDocument.createElement(t);for(;e.firstChild;)n.appendChild(e.firstChild);return e.replaceWith(n),n}function m(e,t){let n=e.ownerDocument,a=r(e);if(!a)return;let o=f(e,a);if(o.length===0){let r=n.createElement(t);for(;e.firstChild;)r.appendChild(e.firstChild);e.appendChild(r);let a=n.createRange();a.selectNodeContents(r),a.collapse(!1),i(e,a);return}for(let r of o){let a=r.tagName.toLowerCase();if(a===`li`)continue;let s=p(r,a===t?`p`:t);if(o.length===1){let t=n.createRange();t.selectNodeContents(s),t.collapse(!1),i(e,t)}}}function h(e,t){let n=e.ownerDocument,o=r(e);if(!o)return;let s=a(o.startContainer,e).find(e=>e.tagName.toLowerCase()===`li`)?.parentElement??null;if(s&&(s.tagName.toLowerCase()===`ul`||s.tagName.toLowerCase()===`ol`)){if(s.tagName.toLowerCase()===t){let t=s.parentNode;if(!t)return;let r=null;for(let e of Array.from(s.children)){let i=n.createElement(`p`);for(;e.firstChild;)i.appendChild(e.firstChild);t.insertBefore(i,s),r=i}if(s.remove(),r){let t=n.createRange();t.selectNodeContents(r),t.collapse(!1),i(e,t)}}else p(s,t);return}let c=f(e,o).filter(e=>e.tagName.toLowerCase()!==`li`),l=n.createElement(t);if(c.length===0){let t=n.createElement(`li`);for(;e.firstChild;)t.appendChild(e.firstChild);l.appendChild(t),e.appendChild(l)}else{c[0].before(l);for(let e of c){let t=n.createElement(`li`);for(;e.firstChild;)t.appendChild(e.firstChild);e.remove(),l.appendChild(t)}}let u=l.lastElementChild;if(u){let t=n.createRange();t.selectNodeContents(u),t.collapse(!1),i(e,t)}}function g(e,t){let n=e.ownerDocument,a=r(e);if(!a)return;let o=n.createElement(`a`);if(o.setAttribute(`href`,t),a.collapsed)o.textContent=t,a.insertNode(o);else{let e=a.extractContents();c(e,[`a`]),o.appendChild(e),a.insertNode(o)}let s=n.createRange();s.setStartAfter(o),s.collapse(!0),i(e,s),e.normalize()}function _(e){let t=r(e);if(!t)return;let n=a(t.startContainer,e).find(e=>e.tagName.toLowerCase()===`a`);if(n){s(n);return}if(!t.collapsed){let n=t.extractContents();c(n,[`a`]),u(e,t,n)}}function v(e){let n=r(e);if(n&&!n.collapsed){let r=n.extractContents();c(r,[...t,`span`,`font`]);for(let e of Array.from(r.querySelectorAll(`h1,h2,h3`)))p(e,`p`);u(e,n,r);return}c(e,[...t,`span`,`font`]);for(let t of Array.from(e.querySelectorAll(`h1,h2,h3`)))p(t,`p`);e.normalize()}exports.createLink=g,exports.getActiveFormats=o,exports.getEditorRange=r,exports.removeAllFormatting=v,exports.removeLink=_,exports.setBlock=m,exports.toggleInline=d,exports.toggleList=h;

package/dist/components/form/RichTextEditor/commands.d.ts

@@ -0,0 +1,49 @@
+/**
+ * RichTextEditor のコマンド層（純 DOM、React 非依存）。
+ *
+ * 旧実装は非推奨の document.execCommand / queryCommandState に依存していた
+ * （IMPROVEMENTS.md T15）。ここでは Selection / Range API で同等のコマンドを
+ * 実装する。部分選択時の書式分割は Range.extractContents() の仕様
+ * （partial containment chain を複製してフラグメント側に書式ラッパーを残す）
+ * を利用する。
+ *
+ * 注意: execCommand と違いブラウザのネイティブ undo スタックには乗らないため、
+ * undo/redo はコンポーネント側の履歴（beforeinput の historyUndo/Redo 横取り）
+ * で一元管理する。
+ */
+export type InlineFormat = "bold" | "italic" | "underline" | "strikethrough";
+export type BlockFormat = "h1" | "h2" | "h3";
+export type ListFormat = "ul" | "ol";
+/** root 内に完全に収まっている選択 Range を返す（無ければ null） */
+export declare function getEditorRange(root: HTMLElement): Range | null;
+/** 選択位置のアクティブ書式（bold / italic / h1 / ul など）を返す */
+export declare function getActiveFormats(root: HTMLElement): Set<string>;
+/**
+ * インライン書式のトグル。
+ * - 選択あり: extractContents で切り出し、アクティブなら該当タグを除去、
+ *   非アクティブなら正規タグでラップして挿入し直す
+ * - 選択なし（キャレットのみ）: ZWSP 入りの書式要素を挿入してキャレットを
+ *   中に置き、以降の入力に書式が乗るようにする
+ */
+export declare function toggleInline(root: HTMLElement, format: InlineFormat): void;
+/**
+ * ブロック書式（h1/h2/h3）のトグル。既に同じ見出しなら p に戻す。
+ * 選択がブロックに属さない（root 直下の裸テキスト）場合はラップする。
+ */
+export declare function setBlock(root: HTMLElement, tag: BlockFormat | "p"): void;
+/**
+ * リストのトグル。
+ * - 同種リスト内 → リスト全体を p の並びに展開
+ * - 異種リスト内 → リストのタグを付け替え
+ * - リスト外 → 選択ブロック（無ければ全内容）を li 化して包む
+ */
+export declare function toggleList(root: HTMLElement, listTag: ListFormat): void;
+/** 選択範囲をリンク化する。キャレットのみの場合は URL テキストを挿入してリンク化 */
+export declare function createLink(root: HTMLElement, url: string): void;
+/** 選択位置を含むリンク（または選択範囲内のリンク）を解除する */
+export declare function removeLink(root: HTMLElement): void;
+/**
+ * 書式を除去する。選択があれば選択範囲のみ、キャレットのみなら editor 全体。
+ * execCommand("removeFormat") と同様、リンクは残す。
+ */
+export declare function removeAllFormatting(root: HTMLElement): void;