@ctrl-ui/react 0.9.5 → 0.9.8

package/dist/lib/infinite-canvas-navigation.js

@@ -0,0 +1,395 @@
+import { pinchTransform, wheelDeltaMultiplier, wheelDeltaPixels, zoomAroundPoint } from "./infinite-canvas-camera.js";
+//#region src/lib/infinite-canvas-navigation.ts
+const INFINITE_CANVAS_KEY_SHORTCUTS = "ArrowLeft ArrowRight ArrowUp ArrowDown + - 0 1";
+const ARROW_KEY_DIRECTIONS = {
+	ArrowLeft: {
+		x: -1,
+		y: 0
+	},
+	ArrowRight: {
+		x: 1,
+		y: 0
+	},
+	ArrowUp: {
+		x: 0,
+		y: -1
+	},
+	ArrowDown: {
+		x: 0,
+		y: 1
+	}
+};
+const KEYBOARD_ZOOM_FACTORS = {
+	"+": 1.15,
+	"=": 1.15,
+	"-": 1 / 1.15
+};
+const KEYBOARD_STEP_PX = 32;
+const WHEEL_ZOOM_SPEED = .004;
+const MAX_WHEEL_ZOOM_DELTA = 50;
+const NOTCHED_WHEEL_DELTA = 40;
+const CLICK_SLOP_PX = 3;
+const MIDDLE_BUTTON = 1;
+const SCROLLABLE_OVERFLOW = /auto|scroll|overlay/;
+const SPACE_CONSUMING_TARGET = [
+	"input",
+	"textarea",
+	"select",
+	"button",
+	"a[href]",
+	"[contenteditable]:not([contenteditable='false'])",
+	...[
+		"button",
+		"checkbox",
+		"combobox",
+		"menuitem",
+		"option",
+		"radio",
+		"slider",
+		"spinbutton",
+		"switch",
+		"tab",
+		"textbox"
+	].map((role) => `[role='${role}']`)
+].join(", ");
+function keyboardStep(shiftKey) {
+	return shiftKey ? 96 : KEYBOARD_STEP_PX;
+}
+function runInfiniteCanvasKeyCommand(camera, key, shiftKey) {
+	const direction = ARROW_KEY_DIRECTIONS[key];
+	if (direction) {
+		const current = camera.getTransform();
+		const step = keyboardStep(shiftKey);
+		camera.move({
+			...current,
+			x: current.x - direction.x * step,
+			y: current.y - direction.y * step
+		}, "keyboard");
+		return true;
+	}
+	const zoomFactor = KEYBOARD_ZOOM_FACTORS[key];
+	if (zoomFactor) camera.zoomBy(zoomFactor, { reason: "keyboard" });
+	else if (key === "0") camera.reset({ reason: "keyboard" });
+	else if (key === "1") camera.fit({ reason: "keyboard" });
+	else return false;
+	return true;
+}
+function canScrollFurther(element, delta) {
+	if (element.scrollHeight <= element.clientHeight && element.scrollWidth <= element.clientWidth) return false;
+	const { overflowX, overflowY } = getComputedStyle(element);
+	const verticalRoom = delta.y < 0 ? element.scrollTop > 0 : Math.ceil(element.scrollTop + element.clientHeight) < element.scrollHeight;
+	const horizontalRoom = delta.x < 0 ? element.scrollLeft > 0 : Math.ceil(element.scrollLeft + element.clientWidth) < element.scrollWidth;
+	return delta.y !== 0 && SCROLLABLE_OVERFLOW.test(overflowY) && verticalRoom || delta.x !== 0 && SCROLLABLE_OVERFLOW.test(overflowX) && horizontalRoom;
+}
+function nestedScrollerConsumes(target, root, delta) {
+	for (let element = target instanceof Element ? target : null; element && element !== root; element = element.parentElement) if (canScrollFurther(element, delta)) return true;
+	return false;
+}
+function gesturePointerIds(active) {
+	return active.kind === "pan" ? [active.pointerId] : active.pointerIds;
+}
+function clickAfterGesture(ended) {
+	if (ended.kind === "pinch") return "click";
+	if (!(ended.explicit || ended.moved)) return null;
+	return ended.button === MIDDLE_BUTTON ? "auxclick" : "click";
+}
+function gestureScale(event) {
+	return "scale" in event && typeof event.scale === "number" ? event.scale : null;
+}
+function gestureClientPoint(event) {
+	if (!("clientX" in event && "clientY" in event)) return null;
+	const { clientX, clientY } = event;
+	return typeof clientX === "number" && typeof clientY === "number" ? {
+		clientX,
+		clientY
+	} : null;
+}
+function attachInfiniteCanvasNavigation(root, camera, readOptions) {
+	const listeners = new AbortController();
+	const { signal } = listeners;
+	const touches = /* @__PURE__ */ new Map();
+	let gesture = null;
+	let spaceHeld = false;
+	let safariPinchStartScale = null;
+	let suppressedClick = null;
+	let suppressedClickTimer;
+	let pointerFocus = false;
+	let pointerFocusTimer;
+	function syncPanReady() {
+		root.toggleAttribute("data-pan-ready", spaceHeld || readOptions().panOnDrag === "anywhere");
+	}
+	function suppressNextClick(type) {
+		suppressedClick = type;
+		clearTimeout(suppressedClickTimer);
+		suppressedClickTimer = setTimeout(() => {
+			suppressedClick = null;
+		});
+	}
+	function startPan(event, explicit) {
+		root.setPointerCapture(event.pointerId);
+		root.toggleAttribute("data-panning", true);
+		gesture = {
+			kind: "pan",
+			pointerId: event.pointerId,
+			button: event.button,
+			explicit,
+			moved: false,
+			startPointer: {
+				x: event.clientX,
+				y: event.clientY
+			},
+			startTransform: camera.getTransform()
+		};
+	}
+	function startPinch() {
+		const [first, second] = [...touches.entries()];
+		if (!(first && second)) return;
+		for (const [pointerId] of [first, second]) if (!root.hasPointerCapture(pointerId)) root.setPointerCapture(pointerId);
+		root.toggleAttribute("data-panning", true);
+		gesture = {
+			kind: "pinch",
+			pointerIds: [first[0], second[0]],
+			startDistance: Math.max(1, Math.hypot(first[1].x - second[1].x, first[1].y - second[1].y)),
+			startMidpoint: camera.toLocalPoint({
+				clientX: (first[1].x + second[1].x) / 2,
+				clientY: (first[1].y + second[1].y) / 2
+			}),
+			startTransform: camera.getTransform()
+		};
+	}
+	function involvesPointer(pointerId) {
+		return gesture !== null && gesturePointerIds(gesture).includes(pointerId);
+	}
+	function finishGesture() {
+		const ended = gesture;
+		if (!ended) return;
+		gesture = null;
+		root.removeAttribute("data-panning");
+		for (const pointerId of gesturePointerIds(ended)) if (root.hasPointerCapture(pointerId)) root.releasePointerCapture(pointerId);
+		const click = clickAfterGesture(ended);
+		if (click) suppressNextClick(click);
+	}
+	function claim(event) {
+		event.preventDefault();
+		event.stopPropagation();
+	}
+	function isNavigableTarget(target) {
+		return target === root || target instanceof Node && camera.contentElement()?.contains(target) === true;
+	}
+	function markPointerFocus() {
+		pointerFocus = true;
+		clearTimeout(pointerFocusTimer);
+		pointerFocusTimer = setTimeout(() => {
+			pointerFocus = false;
+		});
+	}
+	function claimsTouchPinch(event) {
+		if (event.pointerType !== "touch") return false;
+		if (event.isPrimary) touches.clear();
+		touches.set(event.pointerId, {
+			x: event.clientX,
+			y: event.clientY
+		});
+		if (touches.size < 2) return false;
+		claim(event);
+		if (touches.size === 2) startPinch();
+		return true;
+	}
+	function isExplicitPan(event) {
+		if (!isNavigableTarget(event.target)) return false;
+		if (event.button === MIDDLE_BUTTON) return true;
+		return event.button === 0 && (spaceHeld || readOptions().panOnDrag === "anywhere");
+	}
+	function claimNavigationPointer(event) {
+		markPointerFocus();
+		if (claimsTouchPinch(event) || gesture || !event.isPrimary || !isExplicitPan(event)) return;
+		claim(event);
+		startPan(event, true);
+	}
+	function followPointer(event) {
+		if (touches.has(event.pointerId)) touches.set(event.pointerId, {
+			x: event.clientX,
+			y: event.clientY
+		});
+		if (!(gesture && involvesPointer(event.pointerId))) return;
+		if (gesture.kind === "pan") {
+			const deltaX = event.clientX - gesture.startPointer.x;
+			const deltaY = event.clientY - gesture.startPointer.y;
+			if (Math.hypot(deltaX, deltaY) > CLICK_SLOP_PX) gesture.moved = true;
+			const { startTransform } = gesture;
+			camera.move({
+				...startTransform,
+				x: startTransform.x + deltaX,
+				y: startTransform.y + deltaY
+			}, "pointer");
+			return;
+		}
+		const [first, second] = gesture.pointerIds.map((pointerId) => touches.get(pointerId));
+		if (!(first && second)) return;
+		const midpoint = camera.toLocalPoint({
+			clientX: (first.x + second.x) / 2,
+			clientY: (first.y + second.y) / 2
+		});
+		const ratio = Math.hypot(first.x - second.x, first.y - second.y) / gesture.startDistance;
+		const nextScale = camera.limitScale(gesture.startTransform.scale * ratio);
+		camera.move(pinchTransform(gesture.startTransform, gesture.startMidpoint, midpoint, nextScale), "pinch");
+	}
+	function releasePointer(event) {
+		touches.delete(event.pointerId);
+		if (involvesPointer(event.pointerId)) finishGesture();
+	}
+	function zoomWithWheel(event) {
+		event.preventDefault();
+		if (safariPinchStartScale !== null) return;
+		const current = camera.getTransform();
+		const zoomDelta = event.deltaY * wheelDeltaMultiplier(event.deltaMode, root.clientHeight);
+		const boundedDelta = Math.min(Math.max(zoomDelta, -50), MAX_WHEEL_ZOOM_DELTA);
+		const nextScale = camera.limitScale(current.scale * Math.exp(-boundedDelta * WHEEL_ZOOM_SPEED));
+		camera.move(zoomAroundPoint(current, nextScale, camera.toLocalPoint(event)), "wheel", Math.abs(zoomDelta) >= NOTCHED_WHEEL_DELTA);
+	}
+	function handleWheel(event) {
+		readOptions().onWheel?.(event);
+		if (event.defaultPrevented) return;
+		if (event.ctrlKey || event.metaKey) {
+			zoomWithWheel(event);
+			return;
+		}
+		const delta = wheelDeltaPixels(event, root.clientHeight);
+		if (nestedScrollerConsumes(event.target, root, delta)) return;
+		event.preventDefault();
+		const current = camera.getTransform();
+		camera.move({
+			...current,
+			x: current.x - delta.x,
+			y: current.y - delta.y
+		}, "wheel");
+	}
+	function startSafariPinch(event) {
+		event.preventDefault();
+		safariPinchStartScale = camera.getTransform().scale;
+	}
+	function followSafariPinch(event) {
+		event.preventDefault();
+		const scale = gestureScale(event);
+		if (safariPinchStartScale === null || scale === null || gesture?.kind === "pinch") return;
+		const clientPoint = gestureClientPoint(event);
+		const origin = clientPoint ? camera.toLocalPoint(clientPoint) : {
+			x: root.clientWidth / 2,
+			y: root.clientHeight / 2
+		};
+		camera.move(zoomAroundPoint(camera.getTransform(), camera.limitScale(safariPinchStartScale * scale), origin), "pinch");
+	}
+	function endSafariPinch(event) {
+		event.preventDefault();
+		safariPinchStartScale = null;
+	}
+	function armSpacePan(event) {
+		if (event.code !== "Space") return;
+		if (spaceHeld) {
+			event.preventDefault();
+			return;
+		}
+		if (event.defaultPrevented || event.repeat || event.isComposing || event.ctrlKey || event.metaKey || event.altKey) return;
+		const { target } = event;
+		if (target instanceof HTMLElement && (target.isContentEditable || target.matches(SPACE_CONSUMING_TARGET))) return;
+		if (!(root.contains(document.activeElement) || root.matches(":hover"))) return;
+		event.preventDefault();
+		spaceHeld = true;
+		syncPanReady();
+	}
+	function disarmSpacePan(event) {
+		if (event.code !== "Space" || !spaceHeld) return;
+		spaceHeld = false;
+		syncPanReady();
+	}
+	function releaseHeldInput() {
+		spaceHeld = false;
+		safariPinchStartScale = null;
+		touches.clear();
+		finishGesture();
+		syncPanReady();
+	}
+	function swallowClickAfterPan(event) {
+		if (event.type !== suppressedClick) return;
+		suppressedClick = null;
+		event.preventDefault();
+		event.stopPropagation();
+	}
+	function revealKeyboardFocus(event) {
+		if (pointerFocus || !(event.target instanceof Element)) return;
+		if (camera.contentElement()?.contains(event.target)) camera.revealElement(event.target);
+	}
+	function absorbNativeScroll() {
+		const { scrollLeft, scrollTop } = root;
+		if (scrollLeft === 0 && scrollTop === 0) return;
+		root.scrollTo(0, 0);
+		const current = camera.getTransform();
+		camera.moveNow({
+			...current,
+			x: current.x - scrollLeft,
+			y: current.y - scrollTop
+		}, "reveal");
+	}
+	root.addEventListener("pointerdown", claimNavigationPointer, {
+		capture: true,
+		signal
+	});
+	root.addEventListener("pointermove", followPointer, {
+		capture: true,
+		signal
+	});
+	root.addEventListener("pointerup", releasePointer, {
+		capture: true,
+		signal
+	});
+	root.addEventListener("pointercancel", releasePointer, {
+		capture: true,
+		signal
+	});
+	root.addEventListener("lostpointercapture", (event) => {
+		if (event.target === root && involvesPointer(event.pointerId)) finishGesture();
+	}, { signal });
+	root.addEventListener("click", swallowClickAfterPan, {
+		capture: true,
+		signal
+	});
+	root.addEventListener("auxclick", swallowClickAfterPan, {
+		capture: true,
+		signal
+	});
+	root.addEventListener("mousedown", (event) => {
+		if (event.button === MIDDLE_BUTTON && isNavigableTarget(event.target)) event.preventDefault();
+	}, { signal });
+	root.addEventListener("wheel", handleWheel, {
+		passive: false,
+		signal
+	});
+	root.addEventListener("gesturestart", startSafariPinch, { signal });
+	root.addEventListener("gesturechange", followSafariPinch, { signal });
+	root.addEventListener("gestureend", endSafariPinch, { signal });
+	root.addEventListener("focusin", revealKeyboardFocus, { signal });
+	root.addEventListener("scroll", absorbNativeScroll, { signal });
+	window.addEventListener("keydown", armSpacePan, { signal });
+	window.addEventListener("keyup", disarmSpacePan, { signal });
+	window.addEventListener("blur", releaseHeldInput, { signal });
+	document.addEventListener("visibilitychange", () => {
+		if (document.visibilityState === "hidden") releaseHeldInput();
+	}, { signal });
+	syncPanReady();
+	return {
+		beginBackgroundPan(event) {
+			if (gesture || event.defaultPrevented || event.target !== root || !event.isPrimary || event.button !== 0) return;
+			if (readOptions().panOnDrag === "background") startPan(event, false);
+		},
+		syncPanReady,
+		detach() {
+			listeners.abort();
+			clearTimeout(suppressedClickTimer);
+			clearTimeout(pointerFocusTimer);
+			releaseHeldInput();
+			root.removeAttribute("data-pan-ready");
+		}
+	};
+}
+//#endregion
+export { ARROW_KEY_DIRECTIONS, INFINITE_CANVAS_KEY_SHORTCUTS, attachInfiniteCanvasNavigation, keyboardStep, runInfiniteCanvasKeyCommand };

package/dist/markdown-editor/bubble-menu.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+//#region src/markdown-editor/bubble-menu.d.ts
+export declare function MarkdownEditorBubbleMenu({ children }: {
+  children?: ReactNode;
+}): import("react").JSX.Element | null;
+//#endregion

package/dist/markdown-editor/bubble-menu.js

@@ -0,0 +1,45 @@
+"use client";
+import { TooltipProvider } from "../ui/tooltip.js";
+import { useMarkdownEditor } from "./context.js";
+import { Toolbar, ToolbarSeparator } from "../ui/toolbar.js";
+import { MarkdownEditorFormatButton, MarkdownEditorHeading, MarkdownEditorLink, useMarkdownEditorFormatActions } from "./toolbar.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NodeSelection } from "@tiptap/pm/state";
+import { BubbleMenu } from "@tiptap/react/menus";
+//#region src/markdown-editor/bubble-menu.tsx
+const showForFormattableText = ({ editor, view, state, element }) => {
+	const { selection } = state;
+	return !(selection instanceof NodeSelection) && !selection.empty && state.doc.textBetween(selection.from, selection.to).trim() !== "" && !editor.isActive("codeBlock") && editor.isEditable && (view.hasFocus() || element.contains(document.activeElement));
+};
+const floatingOptions = {
+	placement: "top",
+	offset: 8,
+	flip: { padding: 8 },
+	shift: { padding: 8 }
+};
+function MarkdownEditorBubbleMenu({ children }) {
+	const { editor, disabled, source } = useMarkdownEditor();
+	const { marks } = useMarkdownEditorFormatActions();
+	if (!editor || disabled || source) return null;
+	return /* @__PURE__ */ jsx(BubbleMenu, {
+		editor,
+		shouldShow: showForFormattableText,
+		options: floatingOptions,
+		"data-control-ui": "markdown-editor",
+		"data-control-family": "markdown-editor",
+		"data-slot": "bubble-menu",
+		children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Toolbar, {
+			"aria-label": "Selection formatting",
+			variant: "floating",
+			children: [
+				/* @__PURE__ */ jsx(MarkdownEditorHeading, {}),
+				/* @__PURE__ */ jsx(ToolbarSeparator, {}),
+				marks.map((action) => /* @__PURE__ */ jsx(MarkdownEditorFormatButton, { action }, action.label)),
+				/* @__PURE__ */ jsx(MarkdownEditorLink, {}),
+				children
+			]
+		}) })
+	});
+}
+//#endregion
+export { MarkdownEditorBubbleMenu };

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

@@ -1,8 +1,24 @@
-import { ReactNode } from "react";
+import { MouseEventHandler, ReactNode } from "react";
+import { BoldIcon } from "lucide-react";
 //#region src/markdown-editor/toolbar.d.ts
+type MarkdownEditorFormatAction = {
+  label: string;
+  Icon: typeof BoldIcon;
+  active: boolean;
+  run: () => void;
+};
+export declare function useMarkdownEditorFormatActions(): {
+  marks: MarkdownEditorFormatAction[];
+  blocks: MarkdownEditorFormatAction[];
+};
+export declare function MarkdownEditorFormatButton({ action, onMouseDown }: {
+  action: MarkdownEditorFormatAction;
+  onMouseDown?: MouseEventHandler<HTMLButtonElement>;
+}): import("react").JSX.Element;
 export declare function MarkdownEditorToolbar({ children }: {
   children?: ReactNode;
 }): import("react").JSX.Element;
+export declare function MarkdownEditorHeading(): import("react").JSX.Element;
 export declare function MarkdownEditorLink(): import("react").JSX.Element;
 export declare function MarkdownEditorImage(): import("react").JSX.Element;
 export declare function MarkdownEditorUploads(): import("react").JSX.Element;

package/dist/markdown-editor/toolbar.js

@@ -17,80 +17,110 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { BoldIcon, ChevronDownIcon, CodeIcon, ImageIcon, ItalicIcon, LinkIcon, ListChecksIcon, ListIcon, ListOrderedIcon, QuoteIcon, RedoIcon, SquareCodeIcon, StrikethroughIcon, UndoIcon } from "lucide-react";
 import { useEditorState } from "@tiptap/react";
 //#region src/markdown-editor/toolbar.tsx
+function useMarkdownEditorFormatActions() {
+	const { editor } = useMarkdownEditor();
+	const state = useEditorState({
+		editor,
+		selector: ({ editor: current }) => ({
+			bold: Boolean(current?.isActive("bold")),
+			italic: Boolean(current?.isActive("italic")),
+			strike: Boolean(current?.isActive("strike")),
+			code: Boolean(current?.isActive("code")),
+			bulletList: Boolean(current?.isActive("bulletList")),
+			orderedList: Boolean(current?.isActive("orderedList")),
+			taskList: Boolean(current?.isActive("taskList")),
+			blockquote: Boolean(current?.isActive("blockquote")),
+			codeBlock: Boolean(current?.isActive("codeBlock"))
+		})
+	});
+	const focused = () => editor?.chain().focus();
+	return {
+		marks: [
+			{
+				label: "Bold",
+				Icon: BoldIcon,
+				active: Boolean(state?.bold),
+				run: () => focused()?.toggleBold().run()
+			},
+			{
+				label: "Italic",
+				Icon: ItalicIcon,
+				active: Boolean(state?.italic),
+				run: () => focused()?.toggleItalic().run()
+			},
+			{
+				label: "Strikethrough",
+				Icon: StrikethroughIcon,
+				active: Boolean(state?.strike),
+				run: () => focused()?.toggleStrike().run()
+			},
+			{
+				label: "Inline code",
+				Icon: CodeIcon,
+				active: Boolean(state?.code),
+				run: () => focused()?.toggleCode().run()
+			}
+		],
+		blocks: [
+			{
+				label: "Bullet list",
+				Icon: ListIcon,
+				active: Boolean(state?.bulletList),
+				run: () => focused()?.toggleBulletList().run()
+			},
+			{
+				label: "Numbered list",
+				Icon: ListOrderedIcon,
+				active: Boolean(state?.orderedList),
+				run: () => focused()?.toggleOrderedList().run()
+			},
+			{
+				label: "Task list",
+				Icon: ListChecksIcon,
+				active: Boolean(state?.taskList),
+				run: () => focused()?.toggleTaskList().run()
+			},
+			{
+				label: "Quote",
+				Icon: QuoteIcon,
+				active: Boolean(state?.blockquote),
+				run: () => focused()?.toggleBlockquote().run()
+			},
+			{
+				label: "Code block",
+				Icon: SquareCodeIcon,
+				active: Boolean(state?.codeBlock),
+				run: () => focused()?.toggleCodeBlock().run()
+			}
+		]
+	};
+}
+function MarkdownEditorFormatButton({ action, onMouseDown }) {
+	const { editor, disabled, source } = useMarkdownEditor();
+	const { label, Icon, active, run } = action;
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		render: /* @__PURE__ */ jsx(ToolbarButton, {
+			type: "button",
+			iconOnly: true,
+			"aria-label": label,
+			"aria-pressed": active,
+			disabled: disabled || source || !editor,
+			onMouseDown,
+			onClick: run
+		}),
+		children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" })
+	}), /* @__PURE__ */ jsx(TooltipContent, { children: label })] });
+}
 function MarkdownEditorToolbar({ children }) {
 	const { editor, disabled, source, sourceRequired, setSource, uploads } = useMarkdownEditor();
-	const state = useEditorState({
+	const { marks, blocks } = useMarkdownEditorFormatActions();
+	const history = useEditorState({
 		editor,
 		selector: ({ editor: current }) => ({
-			bold: current?.isActive("bold"),
-			italic: current?.isActive("italic"),
-			strike: current?.isActive("strike"),
-			code: current?.isActive("code"),
-			bulletList: current?.isActive("bulletList"),
-			orderedList: current?.isActive("orderedList"),
-			taskList: current?.isActive("taskList"),
-			blockquote: current?.isActive("blockquote"),
-			codeBlock: current?.isActive("codeBlock"),
 			undo: current?.can().undo(),
 			redo: current?.can().redo()
 		})
 	});
-	const actions = [
-		{
-			label: "Bold",
-			Icon: BoldIcon,
-			active: state?.bold,
-			run: () => editor?.chain().focus().toggleBold().run()
-		},
-		{
-			label: "Italic",
-			Icon: ItalicIcon,
-			active: state?.italic,
-			run: () => editor?.chain().focus().toggleItalic().run()
-		},
-		{
-			label: "Strikethrough",
-			Icon: StrikethroughIcon,
-			active: state?.strike,
-			run: () => editor?.chain().focus().toggleStrike().run()
-		},
-		{
-			label: "Inline code",
-			Icon: CodeIcon,
-			active: state?.code,
-			run: () => editor?.chain().focus().toggleCode().run()
-		},
-		{
-			label: "Bullet list",
-			Icon: ListIcon,
-			active: state?.bulletList,
-			run: () => editor?.chain().focus().toggleBulletList().run()
-		},
-		{
-			label: "Numbered list",
-			Icon: ListOrderedIcon,
-			active: state?.orderedList,
-			run: () => editor?.chain().focus().toggleOrderedList().run()
-		},
-		{
-			label: "Task list",
-			Icon: ListChecksIcon,
-			active: state?.taskList,
-			run: () => editor?.chain().focus().toggleTaskList().run()
-		},
-		{
-			label: "Quote",
-			Icon: QuoteIcon,
-			active: state?.blockquote,
-			run: () => editor?.chain().focus().toggleBlockquote().run()
-		},
-		{
-			label: "Code block",
-			Icon: SquareCodeIcon,
-			active: state?.codeBlock,
-			run: () => editor?.chain().focus().toggleCodeBlock().run()
-		}
-	];
 	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "markdown-editor",
 		"data-control-family": "markdown-editor",
@@ -106,18 +136,10 @@ function MarkdownEditorToolbar({ children }) {
 				children: [
 					/* @__PURE__ */ jsx(MarkdownEditorHeading, {}),
 					/* @__PURE__ */ jsx(ToolbarSeparator, {}),
-					actions.map(({ label, Icon, active, run }) => /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-						render: /* @__PURE__ */ jsx(ToolbarButton, {
-							type: "button",
-							iconOnly: true,
-							"aria-label": label,
-							"aria-pressed": Boolean(active),
-							disabled: disabled || source || !editor,
-							onMouseDown: (event) => event.preventDefault(),
-							onClick: run
-						}),
-						children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" })
-					}), /* @__PURE__ */ jsx(TooltipContent, { children: label })] }, label)),
+					[...marks, ...blocks].map((action) => /* @__PURE__ */ jsx(MarkdownEditorFormatButton, {
+						action,
+						onMouseDown: (event) => event.preventDefault()
+					}, action.label)),
 					/* @__PURE__ */ jsx(MarkdownEditorLink, {}),
 					/* @__PURE__ */ jsx(MarkdownEditorImage, {}),
 					/* @__PURE__ */ jsx(ToolbarSeparator, {}),
@@ -125,7 +147,7 @@ function MarkdownEditorToolbar({ children }) {
 						type: "button",
 						iconOnly: true,
 						"aria-label": "Undo",
-						disabled: disabled || source || !state?.undo,
+						disabled: disabled || source || !history?.undo,
 						onClick: () => editor?.chain().focus().undo().run(),
 						children: /* @__PURE__ */ jsx(UndoIcon, { "aria-hidden": "true" })
 					}),
@@ -133,7 +155,7 @@ function MarkdownEditorToolbar({ children }) {
 						type: "button",
 						iconOnly: true,
 						"aria-label": "Redo",
-						disabled: disabled || source || !state?.redo,
+						disabled: disabled || source || !history?.redo,
 						onClick: () => editor?.chain().focus().redo().run(),
 						children: /* @__PURE__ */ jsx(RedoIcon, { "aria-hidden": "true" })
 					}),
@@ -395,4 +417,4 @@ function MarkdownEditorUploads() {
 	}) : null] });
 }
 //#endregion
-export { MarkdownEditorImage, MarkdownEditorLink, MarkdownEditorToolbar, MarkdownEditorUploads };
+export { MarkdownEditorFormatButton, MarkdownEditorHeading, MarkdownEditorImage, MarkdownEditorLink, MarkdownEditorToolbar, MarkdownEditorUploads, useMarkdownEditorFormatActions };