@ctrl-ui/react 0.8.20 → 0.9.0

package/dist/lib/color.js

@@ -3,7 +3,7 @@ const clamp = (n, min, max) => Math.min(max, Math.max(min, n));
 const clamp01 = (n) => clamp(n, 0, 1);
 const wrapHue = (h) => (h % 360 + 360) % 360;
 const round = (n) => Math.round(n);
-function hsvaToRgba({ h, s, v, a }) {
+function hsvaToUnroundedRgba({ h, s, v, a }) {
 	const S = clamp01(s / 100);
 	const V = clamp01(v / 100);
 	const c = V * S;
@@ -44,12 +44,21 @@ function hsvaToRgba({ h, s, v, a }) {
 		x
 	];
 	return {
-		r: round((r + m) * 255),
-		g: round((g + m) * 255),
-		b: round((b + m) * 255),
+		r: (r + m) * 255,
+		g: (g + m) * 255,
+		b: (b + m) * 255,
 		a: clamp01(a)
 	};
 }
+function hsvaToRgba(hsva) {
+	const { r, g, b, a } = hsvaToUnroundedRgba(hsva);
+	return {
+		r: round(r),
+		g: round(g),
+		b: round(b),
+		a
+	};
+}
 function rgbaToHsva({ r, g, b, a }) {
 	const R = clamp(r, 0, 255) / 255;
 	const G = clamp(g, 0, 255) / 255;
@@ -124,28 +133,44 @@ function rgbToOklch(r255, g255, b255) {
 		H
 	};
 }
-function oklchToRgb(L, C, H) {
+function oklchToLinearRgb(L, C, H) {
 	const hr = H * Math.PI / 180;
 	const a = C * Math.cos(hr);
 	const b = C * Math.sin(hr);
-	const l_ = L + .3963377774 * a + .2158037573 * b;
-	const m_ = L - .1055613458 * a - .0638541728 * b;
-	const s_ = L - .0894841775 * a - 1.291485548 * b;
-	const l = l_ ** 3;
-	const m = m_ ** 3;
-	const s = s_ ** 3;
-	const r = 4.0767416621 * l - 3.3077115913 * m + .2309699292 * s;
-	const g = -1.2684380046 * l + 2.6097574011 * m - .3413193965 * s;
-	const bl = -.0041960863 * l - .7034186147 * m + 1.707614701 * s;
-	const to = (c) => clamp(round(linearToSrgb(c) * 255), 0, 255);
+	const l = (L + .3963377774 * a + .2158037573 * b) ** 3;
+	const m = (L - .1055613458 * a - .0638541728 * b) ** 3;
+	const s = (L - .0894841775 * a - 1.291485548 * b) ** 3;
+	return [
+		4.0767416621 * l - 3.3077115913 * m + .2309699292 * s,
+		-1.2684380046 * l + 2.6097574011 * m - .3413193965 * s,
+		-.0041960863 * l - .7034186147 * m + 1.707614701 * s
+	];
+}
+const CHROMA_BISECTION_STEPS = 20;
+const fitsSrgb = (linear) => linear.every((channel) => channel >= -1e-4 && channel <= 1.0001);
+function oklchToRgb(L, C, H) {
+	const lightness = clamp01(L);
+	let linear = oklchToLinearRgb(lightness, C, H);
+	if (!fitsSrgb(linear)) {
+		let fitting = 0;
+		let overflowing = C;
+		for (let step = 0; step < CHROMA_BISECTION_STEPS; step++) {
+			const candidate = (fitting + overflowing) / 2;
+			if (fitsSrgb(oklchToLinearRgb(lightness, candidate, H))) fitting = candidate;
+			else overflowing = candidate;
+		}
+		linear = oklchToLinearRgb(lightness, fitting, H);
+	}
+	const [r, g, b] = linear;
+	const encode = (channel) => clamp(linearToSrgb(channel) * 255, 0, 255);
 	return {
-		r: to(r),
-		g: to(g),
-		b: to(bl)
+		r: encode(r),
+		g: encode(g),
+		b: encode(b)
 	};
 }
 function hsvaToOklcha(hsva) {
-	const { r, g, b } = hsvaToRgba(hsva);
+	const { r, g, b } = hsvaToUnroundedRgba(hsva);
 	const { L, C, H } = rgbToOklch(r, g, b);
 	return {
 		L,
@@ -463,14 +488,6 @@ function pointToSaturationValue(rect, offsetX, offsetY) {
 		v: rect.height <= 0 ? 0 : (1 - clamp01(offsetY / rect.height)) * 100
 	};
 }
-function formatGradient(stops, type, angle) {
-	const list = [...stops].sort((a, b) => a.position - b.position).map((stop) => `${stop.color} ${round(clamp01(stop.position) * 100)}%`).join(", ");
-	switch (type) {
-		case "linear": return `linear-gradient(${round(angle)}deg, ${list})`;
-		case "radial": return `radial-gradient(circle, ${list})`;
-		case "conic": return `conic-gradient(from ${round(angle)}deg, ${list})`;
-	}
-}
 function pointToHueSat(rect, offsetX, offsetY) {
 	const cx = rect.width / 2;
 	const cy = rect.height / 2;
@@ -487,4 +504,4 @@ function pointToHueSat(rect, offsetX, offsetY) {
 	};
 }
 //#endregion
-export { formatColor, formatGradient, getChannels, hexToRgba, hslaToHsva, hslaToRgba, hsvaToHsla, hsvaToOklcha, hsvaToRgba, oklchaToHsva, parseColor, pointToHueSat, pointToSaturationValue, rgbaToHex, rgbaToHsla, rgbaToHsva, setChannel };
+export { formatColor, getChannels, hexToRgba, hslaToHsva, hslaToRgba, hsvaToHsla, hsvaToOklcha, hsvaToRgba, oklchaToHsva, parseColor, pointToHueSat, pointToSaturationValue, preserveAchromatic, rgbaToHex, rgbaToHsla, rgbaToHsva, setChannel };

package/dist/lib/contrast.d.ts

@@ -27,4 +27,10 @@ export declare function nextFixLevel(levels: WcagLevels): WcagLevel | null;
 export declare function contrastOf(color: Hsva, background: Rgba): number;
 export declare function formatContrastRatio(ratio: number): string;
 export declare function fixColorForContrast(color: Hsva, background: Rgba, target?: number): Hsva | null;
+export type ContrastFailBand = {
+  saturation: number;
+  failsFrom: number;
+  failsTo: number;
+};
+export declare function contrastFailBands(color: Pick<Hsva, "h" | "a">, background: Rgba, target: number, columns?: number): ContrastFailBand[];
 //#endregion

package/dist/lib/contrast.js

@@ -72,5 +72,37 @@ function fixColorForContrast(color, background, target = AA_RATIO) {
 	if (best) return pick(best.L);
 	return ratioAtL(0) >= ratioAtL(1) ? pick(0) : pick(1);
 }
+const BRIGHTNESS_BISECTION_STEPS = 12;
+function lastPassingBrightness(passes, passing, failing) {
+	if (!passes(passing)) return passing;
+	let pass = passing;
+	let fail = failing;
+	for (let step = 0; step < BRIGHTNESS_BISECTION_STEPS; step++) {
+		const middle = (pass + fail) / 2;
+		if (passes(middle)) pass = middle;
+		else fail = middle;
+	}
+	return pass;
+}
+function contrastFailBands(color, background, target, columns = 32) {
+	const backgroundLuminance = luminanceFromRgb(background);
+	return Array.from({ length: columns + 1 }, (_, column) => {
+		const saturation = column / columns * 100;
+		const at = (brightness) => ({
+			h: color.h,
+			s: saturation,
+			v: brightness,
+			a: color.a
+		});
+		const darkerThanBackground = (brightness) => luminanceFromRgb(paintedOver(hsvaToRgba(at(brightness)), background)) <= backgroundLuminance;
+		const meetsTarget = (brightness) => contrastOf(at(brightness), background) >= target;
+		const matchingBackground = lastPassingBrightness(darkerThanBackground, 0, 100);
+		return {
+			saturation,
+			failsFrom: lastPassingBrightness(meetsTarget, 0, matchingBackground),
+			failsTo: lastPassingBrightness(meetsTarget, 100, matchingBackground)
+		};
+	});
+}
 //#endregion
-export { AAA_RATIO, AA_RATIO, TARGET_RATIO, contrastOf, contrastRatio, fixColorForContrast, formatContrastRatio, luminanceFromRgb, nextFixLevel, wcagLevels };
+export { AAA_RATIO, AA_RATIO, TARGET_RATIO, contrastFailBands, contrastOf, contrastRatio, fixColorForContrast, formatContrastRatio, luminanceFromRgb, nextFixLevel, wcagLevels };

package/dist/lib/gradient.d.ts

@@ -0,0 +1,17 @@
+//#region src/lib/gradient.d.ts
+export type GradientType = "linear" | "radial" | "conic";
+export type GradientInterpolation = "srgb" | "oklab" | "oklch";
+export type GradientStop = {
+  id: string;
+  position: number;
+  color: string;
+};
+export type GradientValue = {
+  type: GradientType;
+  angle: number;
+  interpolation: GradientInterpolation;
+  stops: GradientStop[];
+};
+export declare function formatGradient({ type, angle, interpolation, stops }: GradientValue): string;
+export declare function gradientColorAt({ stops, interpolation }: Pick<GradientValue, "stops" | "interpolation">, position: number): string;
+//#endregion

package/dist/lib/gradient.js

@@ -0,0 +1,69 @@
+import { formatColor, hsvaToOklcha, hsvaToRgba, oklchaToHsva, parseColor, rgbaToHsva } from "./color.js";
+//#region src/lib/gradient.ts
+const clamp01 = (n) => Math.min(1, Math.max(0, n));
+const lerp = (from, to, t) => from + (to - from) * t;
+const byPosition = (a, b) => a.position - b.position;
+function formatGradient({ type, angle, interpolation, stops }) {
+	const space = interpolation === "srgb" ? "" : ` in ${interpolation}`;
+	const list = [...stops].sort(byPosition).map((stop) => `${stop.color} ${Math.round(clamp01(stop.position) * 100)}%`).join(", ");
+	switch (type) {
+		case "linear": return `linear-gradient(${Math.round(angle)}deg${space}, ${list})`;
+		case "radial": return `radial-gradient(circle${space}, ${list})`;
+		case "conic": return `conic-gradient(from ${Math.round(angle)}deg${space}, ${list})`;
+	}
+}
+function mixSrgb(from, to, t) {
+	const a = hsvaToRgba(from);
+	const b = hsvaToRgba(to);
+	return rgbaToHsva({
+		r: lerp(a.r, b.r, t),
+		g: lerp(a.g, b.g, t),
+		b: lerp(a.b, b.b, t),
+		a: lerp(a.a, b.a, t)
+	});
+}
+function mixOklab(from, to, t) {
+	const a = hsvaToOklcha(from);
+	const b = hsvaToOklcha(to);
+	const radians = (hue) => hue * Math.PI / 180;
+	const greenRed = lerp(a.C * Math.cos(radians(a.H)), b.C * Math.cos(radians(b.H)), t);
+	const blueYellow = lerp(a.C * Math.sin(radians(a.H)), b.C * Math.sin(radians(b.H)), t);
+	return oklchaToHsva({
+		L: lerp(a.L, b.L, t),
+		C: Math.hypot(greenRed, blueYellow),
+		H: Math.atan2(blueYellow, greenRed) * 180 / Math.PI,
+		a: lerp(a.a, b.a, t)
+	});
+}
+function mixOklch(from, to, t) {
+	const a = hsvaToOklcha(from);
+	const b = hsvaToOklcha(to);
+	const shorterArc = (b.H - a.H + 540) % 360 - 180;
+	return oklchaToHsva({
+		L: lerp(a.L, b.L, t),
+		C: lerp(a.C, b.C, t),
+		H: a.H + shorterArc * t,
+		a: lerp(a.a, b.a, t)
+	});
+}
+const MIX = {
+	srgb: mixSrgb,
+	oklab: mixOklab,
+	oklch: mixOklch
+};
+function gradientColorAt({ stops, interpolation }, position) {
+	const sorted = [...stops].sort(byPosition);
+	const before = sorted.findLast((stop) => stop.position <= position);
+	const after = sorted.find((stop) => stop.position >= position);
+	const nearest = before ?? after;
+	if (!nearest) return "#ffffff";
+	if (!before || !after) return nearest.color;
+	const from = parseColor(before.color);
+	const to = parseColor(after.color);
+	if (!from || !to) return nearest.color;
+	const span = after.position - before.position;
+	const t = span === 0 ? 0 : (position - before.position) / span;
+	return formatColor(MIX[interpolation](from, to, t), "hex");
+}
+//#endregion
+export { formatGradient, gradientColorAt };

package/dist/markdown-editor/drag-handle.js

@@ -2,6 +2,7 @@
 import { Button } from "../ui/button.js";
 import { LiveStatus } from "../ui/live-status.js";
 import { useMarkdownEditor } from "./context.js";
+import { createDragPreview } from "./drag-preview.js";
 import { useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { GripVerticalIcon } from "lucide-react";
@@ -14,9 +15,14 @@ function MarkdownEditorDragHandle({ container }) {
 	const [announcement, setAnnouncement] = useState("");
 	const button = useRef(null);
 	const dragging = useRef(false);
+	const preview = useRef(null);
+	const preparedDrag = useRef(null);
 	useEffect(() => {
 		const surface = container.current;
-		if (!editor || !surface || disabled || source) return;
+		if (!editor || editor.isDestroyed || !surface || disabled || source) return;
+		const view = editor.view;
+		let frame = 0;
+		let latestEvent = null;
 		function show(blockPosition) {
 			if (!editor || !surface) return;
 			const node = editor.view.nodeDOM(blockPosition);
@@ -27,7 +33,7 @@ function MarkdownEditorDragHandle({ container }) {
 				top
 			});
 		}
-		function track(event) {
+		function updateHandle(event) {
 			if (!editor || dragging.current || button.current?.contains(event.target instanceof Node ? event.target : null)) return;
 			const rect = editor.view.dom.getBoundingClientRect();
 			const padding = Number.parseFloat(getComputedStyle(editor.view.dom).paddingInlineStart);
@@ -39,22 +45,38 @@ function MarkdownEditorDragHandle({ container }) {
 			const resolved = editor.state.doc.resolve(hit.pos);
 			show(resolved.depth > 0 ? resolved.before(1) : hit.pos);
 		}
+		function track(event) {
+			latestEvent = event;
+			if (frame) return;
+			frame = requestAnimationFrame(() => {
+				frame = 0;
+				if (latestEvent) updateHandle(latestEvent);
+			});
+		}
 		function selectionChanged() {
 			if (!editor || dragging.current) return;
 			const { $from } = editor.state.selection;
 			show($from.depth > 0 ? $from.before(1) : $from.pos);
 		}
 		function hide() {
+			cancelAnimationFrame(frame);
+			frame = 0;
+			latestEvent = null;
 			if (!dragging.current && document.activeElement !== button.current) setBlock(null);
 		}
 		surface.addEventListener("mousemove", track);
 		surface.addEventListener("mouseleave", hide);
 		editor.on("transaction", selectionChanged).on("focus", selectionChanged);
 		return () => {
+			cancelAnimationFrame(frame);
 			surface.removeEventListener("mousemove", track);
 			surface.removeEventListener("mouseleave", hide);
 			editor.off("transaction", selectionChanged).off("focus", selectionChanged);
-			editor.view.dragging = null;
+			view.dragging = null;
+			preview.current?.remove();
+			preview.current = null;
+			preparedDrag.current = null;
+			dragging.current = false;
 		};
 	}, [
 		editor,
@@ -65,6 +87,21 @@ function MarkdownEditorDragHandle({ container }) {
 	if (!editor || disabled || source) return null;
 	const selected = editor.state.selection.$from;
 	const position = block?.position ?? (selected.depth > 0 ? selected.before(1) : selected.pos);
+	function prepareDrag() {
+		if (!editor || editor.isDestroyed) return null;
+		const selection = NodeSelection.create(editor.state.doc, position);
+		const node = editor.view.nodeDOM(position);
+		const { dom, text, slice } = editor.view.serializeForClipboard(selection.content());
+		return {
+			position,
+			document: editor.state.doc,
+			selection,
+			html: dom.innerHTML,
+			text,
+			slice,
+			preview: node instanceof HTMLElement ? createDragPreview(node) : null
+		};
+	}
 	function move(direction) {
 		if (!editor) return;
 		const { doc, tr } = editor.state;
@@ -90,33 +127,59 @@ function MarkdownEditorDragHandle({ container }) {
 		"aria-description": "Drag this block, or use Alt+ArrowUp and Alt+ArrowDown to move it.",
 		title: "Drag to reorder · Alt+↑/↓ to move",
 		draggable: true,
-		style: { top: block?.top },
+		style: {
+			top: block?.top,
+			"--cui-button-background": "transparent",
+			"--cui-button-hover-background": "transparent",
+			"--cui-button-press-background": "transparent",
+			"--cui-button-shadow": "none",
+			"--cui-button-hover-shadow": "none"
+		},
 		onClick: () => editor.commands.setNodeSelection(position),
+		onPointerDown: () => {
+			preparedDrag.current = prepareDrag();
+		},
+		onPointerUp: () => {
+			preparedDrag.current = null;
+		},
 		onKeyDown: (event) => {
 			if (!event.altKey || !["ArrowUp", "ArrowDown"].includes(event.key)) return;
 			event.preventDefault();
 			move(event.key === "ArrowUp" ? -1 : 1);
 		},
 		onDragStart: (event) => {
+			const prepared = preparedDrag.current;
+			const payload = prepared?.position === position && prepared.document === editor.state.doc ? prepared : prepareDrag();
+			preparedDrag.current = null;
+			if (!payload) {
+				event.preventDefault();
+				return;
+			}
 			const { view } = editor;
-			const selection = NodeSelection.create(view.state.doc, position);
-			const node = view.nodeDOM(position);
+			const { html, text, slice, selection, preview: ghost } = payload;
+			dragging.current = true;
 			view.dispatch(view.state.tr.setSelection(selection));
-			const { dom, text, slice } = view.serializeForClipboard(selection.content());
 			event.dataTransfer.clearData();
-			event.dataTransfer.setData("text/html", dom.innerHTML);
+			event.dataTransfer.setData("text/html", html);
 			event.dataTransfer.setData("text/plain", text);
 			event.dataTransfer.effectAllowed = "copyMove";
-			if (node instanceof HTMLElement) event.dataTransfer.setDragImage(node, 0, 0);
+			if (ghost) {
+				preview.current?.remove();
+				container.current?.append(ghost);
+				preview.current = ghost;
+				event.dataTransfer.setDragImage(ghost, 0, 0);
+			}
 			view.dragging = {
 				slice,
 				move: true
 			};
-			dragging.current = true;
 		},
 		onDragEnd: () => {
 			editor.view.dragging = null;
 			dragging.current = false;
+			preview.current?.remove();
+			preview.current = null;
+			preparedDrag.current = null;
 			setBlock(null);
 		},
 		children: /* @__PURE__ */ jsx(GripVerticalIcon, { "aria-hidden": "true" })

package/dist/markdown-editor/drag-preview.d.ts

@@ -0,0 +1,3 @@
+//#region src/markdown-editor/drag-preview.d.ts
+export declare function createDragPreview(node: HTMLElement): HTMLDivElement;
+//#endregion

package/dist/markdown-editor/drag-preview.js

@@ -0,0 +1,31 @@
+//#region src/markdown-editor/drag-preview.ts
+function createDragPreview(node) {
+	const preview = document.createElement("div");
+	preview.className = "tiptap";
+	preview.dataset.markdownDragPreview = "";
+	preview.setAttribute("aria-hidden", "true");
+	preview.style.inlineSize = `${Math.min(node.getBoundingClientRect().width, 320)}px`;
+	let remainingNodes = 80;
+	let remainingText = 2e3;
+	function clonePreview(source) {
+		remainingNodes--;
+		const clone = source.cloneNode(false);
+		if (clone instanceof HTMLElement) {
+			clone.classList.remove("ProseMirror-selectednode");
+			clone.removeAttribute("id");
+		}
+		if (clone instanceof Text) {
+			clone.data = clone.data.slice(0, remainingText);
+			remainingText -= clone.data.length;
+		}
+		for (const child of source.childNodes) {
+			if (remainingNodes === 0 || remainingText === 0) break;
+			clone.appendChild(clonePreview(child));
+		}
+		return clone;
+	}
+	preview.append(clonePreview(node));
+	return preview;
+}
+//#endregion
+export { createDragPreview };

package/dist/markdown-editor/extensions.d.ts

@@ -1,9 +1,9 @@
-import { JSONContent, Node } from "@tiptap/core";
+import { Extension, JSONContent, Node } from "@tiptap/core";
 import { MarkdownManager } from "@tiptap/markdown";
 //#region src/markdown-editor/extensions.d.ts
 export declare function isEditorUrl(value: string, image?: boolean): boolean;
 export declare const ImageUpload: Node<any, any>;
-export declare function markdownExtensions(): (import("@tiptap/core").Extension<import("@tiptap/markdown").MarkdownExtensionOptions, import("@tiptap/markdown").MarkdownExtensionStorage> | import("@tiptap/core").Extension<import("@tiptap/starter-kit").StarterKitOptions, any> | import("@tiptap/core").Extension<import("@tiptap/extension-table").TableKitOptions, any> | Node<any, any> | Node<import("@tiptap/extension-image").ImageOptions, any> | Node<import("@tiptap/extension-paragraph").ParagraphOptions, any> | Node<import("@tiptap/extension-list").TaskItemOptions, any> | Node<import("@tiptap/extension-list").TaskListOptions, any>)[];
+export declare function markdownExtensions(): (Extension<any, any> | Extension<import("@tiptap/markdown").MarkdownExtensionOptions, import("@tiptap/markdown").MarkdownExtensionStorage> | Extension<import("@tiptap/starter-kit").StarterKitOptions, any> | Extension<import("@tiptap/extension-table").TableKitOptions, any> | Node<any, any> | Node<import("@tiptap/extension-image").ImageOptions, any> | Node<import("@tiptap/extension-paragraph").ParagraphOptions, any> | Node<import("@tiptap/extension-list").TaskItemOptions, any> | Node<import("@tiptap/extension-list").TaskListOptions, any>)[];
 export declare function createMarkdownCodec(): MarkdownManager;
 export declare function requiresMarkdownSource(markdown: string, codec: MarkdownManager): boolean;
 export declare function hasMarkdownContent(document: JSONContent): boolean;

package/dist/markdown-editor/extensions.js

@@ -1,11 +1,32 @@
-import { Node } from "@tiptap/core";
+import { markdownHeadingAttributes } from "../ui/markdown-heading.js";
+import { MarkdownTaskItem } from "./task-item.js";
+import { Extension, Node } from "@tiptap/core";
 import Image from "@tiptap/extension-image";
-import { TaskItem, TaskList } from "@tiptap/extension-list";
+import { TaskList } from "@tiptap/extension-list";
 import Paragraph from "@tiptap/extension-paragraph";
 import { TableKit } from "@tiptap/extension-table";
 import { Markdown, MarkdownManager } from "@tiptap/markdown";
 import StarterKit from "@tiptap/starter-kit";
 //#region src/markdown-editor/extensions.ts
+const MarkdownHeadings = Extension.create({
+	name: "markdownHeadings",
+	addGlobalAttributes() {
+		return [{
+			types: ["heading"],
+			attributes: { markdownHeading: {
+				default: null,
+				renderHTML: (attributes) => markdownHeadingAttributes([
+					1,
+					2,
+					3,
+					4,
+					5,
+					6
+				].find((level) => level === attributes.level) ?? 1)
+			} }
+		}];
+	}
+});
 function isEditorUrl(value, image = false) {
 	if (!value || /[\s\\]/.test(value) || Array.from(value).some((character) => character.charCodeAt(0) < 32)) return false;
 	if (value.startsWith("/") && !value.startsWith("//")) return true;
@@ -78,12 +99,13 @@ function markdownExtensions() {
 			}
 		}),
 		MarkdownParagraph,
+		MarkdownHeadings,
 		SafeImage.configure({
 			allowBase64: false,
 			inline: true
 		}),
 		TaskList,
-		TaskItem.configure({
+		MarkdownTaskItem.configure({
 			nested: true,
 			HTMLAttributes: { "data-type": "taskItem" }
 		}),

package/dist/markdown-editor/suggestions.js

@@ -133,20 +133,20 @@ function MarkdownEditorSuggestions({ mentions = [], onMentionSelect }) {
 		}
 	});
 	const report = useEffectEvent(() => {
-		if (!editor) return;
+		if (!editor || editor.isDestroyed) return;
 		const match = enabled ? readTrigger(editor) : null;
 		const coords = match ? editor.view.coordsAtPos(match.end) : null;
 		controller.report(match, coords ? new DOMRect(coords.left, coords.top, 1, coords.bottom - coords.top) : null);
 	});
 	const handleKeyDown = useEffectEvent((event) => {
-		if (!editor || !enabled || isComposingKey(event) || event.metaKey || event.ctrlKey || event.altKey || !readTrigger(editor)) return;
+		if (!editor || editor.isDestroyed || !enabled || isComposingKey(event) || event.metaKey || event.ctrlKey || event.altKey || !readTrigger(editor)) return;
 		if (controller.handleKeyDown(event.key)) {
 			event.preventDefault();
 			event.stopImmediatePropagation();
 		}
 	});
 	useEffect(() => {
-		if (!editor || !enabled) return;
+		if (!editor || editor.isDestroyed || !enabled) return;
 		const dom = editor.view.dom;
 		editor.on("transaction", report).on("focus", report).on("blur", report);
 		dom.addEventListener("keydown", handleKeyDown, true);
@@ -157,7 +157,7 @@ function MarkdownEditorSuggestions({ mentions = [], onMentionSelect }) {
 	}, [editor, enabled]);
 	const open = enabled && controller.open;
 	useEffect(() => {
-		if (!editor || !open) return;
+		if (!editor || editor.isDestroyed || !open) return;
 		const owner = editor.view.dom.ownerDocument;
 		owner.addEventListener("scroll", report, {
 			capture: true,
@@ -180,7 +180,7 @@ function MarkdownEditorSuggestions({ mentions = [], onMentionSelect }) {
 	]);
 	const { "aria-controls": controls, "aria-activedescendant": activeDescendant } = controller.inputAria;
 	useEffect(() => {
-		if (!editor || !enabled) return;
+		if (!editor || editor.isDestroyed || !enabled) return;
 		const dom = editor.view.dom;
 		const attributes = {
 			"aria-autocomplete": "list",

package/dist/markdown-editor/task-item.d.ts

@@ -0,0 +1,3 @@
+//#region src/markdown-editor/task-item.d.ts
+export declare const MarkdownTaskItem: import("@tiptap/core").Node<import("@tiptap/extension-list").TaskItemOptions, any>;
+//#endregion

package/dist/markdown-editor/task-item.js

@@ -0,0 +1,50 @@
+"use client";
+import { Checkbox } from "../ui/checkbox.js";
+import { useMarkdownEditor } from "./context.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NodeViewContent, NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
+import { closeHistory } from "@tiptap/pm/history";
+import { TaskItem } from "@tiptap/extension-list";
+//#region src/markdown-editor/task-item.tsx
+function MarkdownTaskItemView({ editor, node, getPos }) {
+	const { disabled } = useMarkdownEditor();
+	return /* @__PURE__ */ jsxs(NodeViewWrapper, {
+		"data-control-ui": "markdown-editor",
+		"data-control-family": "markdown-editor",
+		"data-slot": "task-item",
+		children: [/* @__PURE__ */ jsx("span", {
+			contentEditable: false,
+			"data-control-ui": "markdown-editor",
+			"data-control-family": "markdown-editor",
+			"data-slot": "task-checkbox",
+			children: /* @__PURE__ */ jsx(Checkbox, {
+				checked: Boolean(node.attrs.checked),
+				disabled,
+				"aria-label": node.firstChild?.textContent || "Task item",
+				onCheckedChange: (checked) => {
+					const position = getPos();
+					if (!editor.isEditable || position === void 0) return;
+					editor.view.dispatch(closeHistory(editor.state.tr).setNodeMarkup(position, void 0, {
+						...node.attrs,
+						checked
+					}));
+				}
+			})
+		}), /* @__PURE__ */ jsx(NodeViewContent, {
+			"data-control-ui": "markdown-editor",
+			"data-control-family": "markdown-editor",
+			"data-slot": "task-content"
+		})]
+	});
+}
+const MarkdownTaskItem = TaskItem.extend({ addNodeView() {
+	return ReactNodeViewRenderer(MarkdownTaskItemView, {
+		as: "li",
+		attrs: ({ node }) => ({
+			"data-type": "taskItem",
+			"data-checked": String(node.attrs.checked)
+		})
+	});
+} });
+//#endregion
+export { MarkdownTaskItem };