@ctrl-ui/react 0.8.18 → 0.8.20

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

@@ -0,0 +1,126 @@
+"use client";
+import { Button } from "../ui/button.js";
+import { LiveStatus } from "../ui/live-status.js";
+import { useMarkdownEditor } from "./context.js";
+import { useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { GripVerticalIcon } from "lucide-react";
+import { NodeSelection } from "@tiptap/pm/state";
+import { closeHistory } from "@tiptap/pm/history";
+//#region src/markdown-editor/drag-handle.tsx
+function MarkdownEditorDragHandle({ container }) {
+	const { editor, disabled, source } = useMarkdownEditor();
+	const [block, setBlock] = useState(null);
+	const [announcement, setAnnouncement] = useState("");
+	const button = useRef(null);
+	const dragging = useRef(false);
+	useEffect(() => {
+		const surface = container.current;
+		if (!editor || !surface || disabled || source) return;
+		function show(blockPosition) {
+			if (!editor || !surface) return;
+			const node = editor.view.nodeDOM(blockPosition);
+			if (!(node instanceof HTMLElement)) return;
+			const top = node.getBoundingClientRect().top - surface.getBoundingClientRect().top + surface.scrollTop;
+			setBlock((current) => current?.position === blockPosition && current.top === top ? current : {
+				position: blockPosition,
+				top
+			});
+		}
+		function track(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);
+			const hit = editor.view.posAtCoords({
+				left: Math.max(event.clientX, rect.left + padding),
+				top: event.clientY
+			});
+			if (!hit) return;
+			const resolved = editor.state.doc.resolve(hit.pos);
+			show(resolved.depth > 0 ? resolved.before(1) : hit.pos);
+		}
+		function selectionChanged() {
+			if (!editor || dragging.current) return;
+			const { $from } = editor.state.selection;
+			show($from.depth > 0 ? $from.before(1) : $from.pos);
+		}
+		function hide() {
+			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 () => {
+			surface.removeEventListener("mousemove", track);
+			surface.removeEventListener("mouseleave", hide);
+			editor.off("transaction", selectionChanged).off("focus", selectionChanged);
+			editor.view.dragging = null;
+		};
+	}, [
+		editor,
+		container,
+		disabled,
+		source
+	]);
+	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 move(direction) {
+		if (!editor) return;
+		const { doc, tr } = editor.state;
+		const node = doc.nodeAt(position);
+		if (!node) return;
+		const adjacent = direction === -1 ? doc.resolve(position).nodeBefore : doc.nodeAt(position + node.nodeSize);
+		if (!adjacent) return;
+		const target = direction === -1 ? position - adjacent.nodeSize : position + adjacent.nodeSize;
+		tr.delete(position, position + node.nodeSize).insert(target, node);
+		tr.setSelection(NodeSelection.create(tr.doc, target));
+		editor.view.dispatch(closeHistory(tr).scrollIntoView());
+		setAnnouncement(`Block moved ${direction === -1 ? "up" : "down"}.`);
+	}
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+		ref: button,
+		type: "button",
+		variant: "ghost",
+		size: "xs",
+		iconOnly: true,
+		"data-markdown-drag-handle": "",
+		"data-visible": block ? "" : void 0,
+		"aria-label": "Drag to reorder block",
+		"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 },
+		onClick: () => editor.commands.setNodeSelection(position),
+		onKeyDown: (event) => {
+			if (!event.altKey || !["ArrowUp", "ArrowDown"].includes(event.key)) return;
+			event.preventDefault();
+			move(event.key === "ArrowUp" ? -1 : 1);
+		},
+		onDragStart: (event) => {
+			const { view } = editor;
+			const selection = NodeSelection.create(view.state.doc, position);
+			const node = view.nodeDOM(position);
+			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/plain", text);
+			event.dataTransfer.effectAllowed = "copyMove";
+			if (node instanceof HTMLElement) event.dataTransfer.setDragImage(node, 0, 0);
+			view.dragging = {
+				slice,
+				move: true
+			};
+			dragging.current = true;
+		},
+		onDragEnd: () => {
+			editor.view.dragging = null;
+			dragging.current = false;
+			setBlock(null);
+		},
+		children: /* @__PURE__ */ jsx(GripVerticalIcon, { "aria-hidden": "true" })
+	}), /* @__PURE__ */ jsx(LiveStatus, { message: announcement })] });
+}
+//#endregion
+export { MarkdownEditorDragHandle };

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

@@ -0,0 +1,10 @@
+import { 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 createMarkdownCodec(): MarkdownManager;
+export declare function requiresMarkdownSource(markdown: string, codec: MarkdownManager): boolean;
+export declare function hasMarkdownContent(document: JSONContent): boolean;
+//#endregion

package/dist/markdown-editor/extensions.js

@@ -0,0 +1,139 @@
+import { Node } from "@tiptap/core";
+import Image from "@tiptap/extension-image";
+import { TaskItem, 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
+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;
+	if (!image && value.startsWith("#")) return true;
+	try {
+		const url = new URL(value);
+		return [
+			"https:",
+			"http:",
+			...image ? [] : ["mailto:"]
+		].includes(url.protocol);
+	} catch {
+		return false;
+	}
+}
+const SafeImage = Image.extend({
+	renderMarkdown: (node) => {
+		const src = String(node.attrs?.src ?? "").replace(/[()]/g, (character) => `\\${character}`);
+		const alt = String(node.attrs?.alt ?? "").replace(/[\\[\]]/g, (character) => `\\${character}`);
+		const title = String(node.attrs?.title ?? "").replace(/[\\"]/g, (character) => `\\${character}`);
+		return title ? `![${alt}](${src} "${title}")` : `![${alt}](${src})`;
+	},
+	addAttributes() {
+		return {
+			...this.parent?.(),
+			src: {
+				default: null,
+				parseHTML: (element) => {
+					const src = element.getAttribute("src") ?? "";
+					return isEditorUrl(src, true) ? src : null;
+				},
+				renderHTML: (attributes) => ({ src: isEditorUrl(attributes.src ?? "", true) ? attributes.src : void 0 })
+			}
+		};
+	}
+});
+const MarkdownParagraph = Paragraph.extend({ parseMarkdown: (token, helpers) => {
+	const content = helpers.parseInline(token.tokens ?? []);
+	const first = content[0];
+	const empty = content.length === 1 && first?.type === "text" && ["&nbsp;", "\xA0"].includes(first.text ?? "");
+	return helpers.createNode("paragraph", void 0, empty ? [] : content);
+} });
+const ImageUpload = Node.create({
+	name: "imageUpload",
+	group: "block",
+	atom: true,
+	selectable: true,
+	addAttributes: () => ({
+		id: { default: null },
+		name: { default: "Image" }
+	}),
+	renderHTML: ({ node }) => [
+		"div",
+		{
+			"data-image-upload": "",
+			role: "status"
+		},
+		`Image: ${node.attrs.name}`
+	],
+	renderMarkdown: () => ""
+});
+function markdownExtensions() {
+	return [
+		StarterKit.configure({
+			underline: false,
+			paragraph: false,
+			link: {
+				openOnClick: false,
+				isAllowedUri: (url) => isEditorUrl(url)
+			}
+		}),
+		MarkdownParagraph,
+		SafeImage.configure({
+			allowBase64: false,
+			inline: true
+		}),
+		TaskList,
+		TaskItem.configure({
+			nested: true,
+			HTMLAttributes: { "data-type": "taskItem" }
+		}),
+		TableKit.configure({ table: { resizable: false } }),
+		ImageUpload,
+		Markdown
+	];
+}
+function createMarkdownCodec() {
+	return new MarkdownManager({ extensions: markdownExtensions() });
+}
+const supportedTokens = /* @__PURE__ */ new Set([
+	"space",
+	"code",
+	"heading",
+	"hr",
+	"blockquote",
+	"list",
+	"list_item",
+	"paragraph",
+	"text",
+	"escape",
+	"link",
+	"image",
+	"strong",
+	"em",
+	"codespan",
+	"br",
+	"del",
+	"table",
+	"def",
+	"taskList",
+	"taskItem"
+]);
+function unsupportedToken(value) {
+	if (Array.isArray(value)) return value.some(unsupportedToken);
+	if (typeof value !== "object" || value === null) return false;
+	if ("type" in value && typeof value.type === "string") {
+		if (!supportedTokens.has(value.type)) return true;
+		if ((value.type === "image" || value.type === "link") && "href" in value && typeof value.href === "string" && !isEditorUrl(value.href, value.type === "image")) return true;
+	}
+	return Object.values(value).some(unsupportedToken);
+}
+function requiresMarkdownSource(markdown, codec) {
+	return unsupportedToken(codec.instance.lexer(markdown));
+}
+function hasMarkdownContent(document) {
+	if (document.type === "image") return true;
+	if (document.type === "text" && document.text?.trim()) return true;
+	return document.content?.some(hasMarkdownContent) ?? false;
+}
+//#endregion
+export { ImageUpload, createMarkdownCodec, hasMarkdownContent, isEditorUrl, markdownExtensions, requiresMarkdownSource };

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

@@ -0,0 +1,12 @@
+import { TriggerMenuItemData } from "../hooks/use-trigger-menu.js";
+//#region src/markdown-editor/suggestions.d.ts
+export type MarkdownEditorMention = TriggerMenuItemData & {
+  href: string;
+};
+export type MarkdownEditorSuggestionsProps = {
+  /** The application supplies people and their persistent profile URLs. */
+  mentions?: readonly MarkdownEditorMention[] | ((query: string) => readonly MarkdownEditorMention[]);
+  onMentionSelect?: (mention: MarkdownEditorMention) => void;
+};
+export declare function MarkdownEditorSuggestions({ mentions, onMentionSelect }: MarkdownEditorSuggestionsProps): import("react").JSX.Element;
+//#endregion

package/dist/markdown-editor/suggestions.js

@@ -0,0 +1,235 @@
+"use client";
+import { LiveStatus } from "../ui/live-status.js";
+import { isComposingKey, useTriggerMenu } from "../hooks/use-trigger-menu.js";
+import { useMarkdownEditor } from "./context.js";
+import { isEditorUrl } from "./extensions.js";
+import { detectTrigger } from "../lib/trigger-detect.js";
+import { TriggerMenu, TriggerMenuEmpty, TriggerMenuIcon, TriggerMenuItem, TriggerMenuList } from "../ui/trigger-menu.js";
+import { useEffect, useEffectEvent, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Heading1Icon, Heading2Icon, Heading3Icon, ListChecksIcon, ListIcon, ListOrderedIcon, MinusIcon, QuoteIcon, SquareCodeIcon, TextIcon, UserIcon } from "lucide-react";
+//#region src/markdown-editor/suggestions.tsx
+const blockCommands = [
+	{
+		id: "paragraph",
+		label: "Text",
+		keywords: ["paragraph"],
+		icon: /* @__PURE__ */ jsx(TextIcon, {}),
+		command: (chain) => chain.clearNodes().setParagraph()
+	},
+	{
+		id: "heading-1",
+		label: "Heading 1",
+		keywords: ["h1", "title"],
+		icon: /* @__PURE__ */ jsx(Heading1Icon, {}),
+		command: (chain) => chain.clearNodes().setHeading({ level: 1 })
+	},
+	{
+		id: "heading-2",
+		label: "Heading 2",
+		keywords: ["h2", "subtitle"],
+		icon: /* @__PURE__ */ jsx(Heading2Icon, {}),
+		command: (chain) => chain.clearNodes().setHeading({ level: 2 })
+	},
+	{
+		id: "heading-3",
+		label: "Heading 3",
+		keywords: ["h3"],
+		icon: /* @__PURE__ */ jsx(Heading3Icon, {}),
+		command: (chain) => chain.clearNodes().setHeading({ level: 3 })
+	},
+	{
+		id: "bullet-list",
+		label: "Bullet list",
+		icon: /* @__PURE__ */ jsx(ListIcon, {}),
+		command: (chain) => chain.clearNodes().toggleBulletList()
+	},
+	{
+		id: "ordered-list",
+		label: "Numbered list",
+		keywords: ["ordered"],
+		icon: /* @__PURE__ */ jsx(ListOrderedIcon, {}),
+		command: (chain) => chain.clearNodes().toggleOrderedList()
+	},
+	{
+		id: "task-list",
+		label: "Task list",
+		keywords: ["todo", "checklist"],
+		icon: /* @__PURE__ */ jsx(ListChecksIcon, {}),
+		command: (chain) => chain.clearNodes().toggleTaskList()
+	},
+	{
+		id: "quote",
+		label: "Quote",
+		keywords: ["blockquote"],
+		icon: /* @__PURE__ */ jsx(QuoteIcon, {}),
+		command: (chain) => chain.clearNodes().toggleBlockquote()
+	},
+	{
+		id: "code-block",
+		label: "Code block",
+		icon: /* @__PURE__ */ jsx(SquareCodeIcon, {}),
+		command: (chain) => chain.clearNodes().setCodeBlock()
+	},
+	{
+		id: "divider",
+		label: "Divider",
+		keywords: ["rule", "separator"],
+		icon: /* @__PURE__ */ jsx(MinusIcon, {}),
+		command: (chain) => chain.setHorizontalRule()
+	}
+];
+function readTrigger(editor) {
+	const { selection } = editor.state;
+	const { $from } = selection;
+	if (!editor.isFocused || !selection.empty || !$from.parent.isTextblock || $from.parent.type.spec.code || editor.isActive("code") || editor.isActive("link")) return null;
+	const text = $from.parent.textBetween(0, $from.parentOffset, void 0, "");
+	const match = detectTrigger(text, ["/", "@"]);
+	if (!match || match.char === "/" && match.start !== 0) return null;
+	return {
+		...match,
+		start: $from.start() + match.start,
+		end: $from.pos
+	};
+}
+function MarkdownEditorSuggestions({ mentions = [], onMentionSelect }) {
+	const activeItem = useRef(null);
+	const { editor, disabled, source } = useMarkdownEditor();
+	const enabled = Boolean(editor) && !disabled && !source;
+	const controller = useTriggerMenu({
+		triggers: [{
+			char: "/",
+			items: blockCommands
+		}, {
+			char: "@",
+			items: mentions
+		}],
+		onCommit: (item) => {
+			if (!editor || !enabled || item.disabled) return;
+			const match = readTrigger(editor);
+			if (!match) return;
+			const range = {
+				from: match.start,
+				to: match.end
+			};
+			if (match.char === "/" && item.command) item.command(editor.chain().focus().deleteRange(range)).run();
+			if (match.char === "@" && item.href && isEditorUrl(item.href)) {
+				editor.chain().focus().insertContentAt(range, [{
+					type: "text",
+					text: `@${item.label}`,
+					marks: [{
+						type: "link",
+						attrs: { href: item.href }
+					}]
+				}, {
+					type: "text",
+					text: " "
+				}]).run();
+				onMentionSelect?.({
+					...item,
+					href: item.href
+				});
+			}
+		}
+	});
+	const report = useEffectEvent(() => {
+		if (!editor) 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 (controller.handleKeyDown(event.key)) {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+		}
+	});
+	useEffect(() => {
+		if (!editor || !enabled) return;
+		const dom = editor.view.dom;
+		editor.on("transaction", report).on("focus", report).on("blur", report);
+		dom.addEventListener("keydown", handleKeyDown, true);
+		return () => {
+			editor.off("transaction", report).off("focus", report).off("blur", report);
+			dom.removeEventListener("keydown", handleKeyDown, true);
+		};
+	}, [editor, enabled]);
+	const open = enabled && controller.open;
+	useEffect(() => {
+		if (!editor || !open) return;
+		const owner = editor.view.dom.ownerDocument;
+		owner.addEventListener("scroll", report, {
+			capture: true,
+			passive: true
+		});
+		owner.defaultView?.addEventListener("resize", report);
+		return () => {
+			owner.removeEventListener("scroll", report, true);
+			owner.defaultView?.removeEventListener("resize", report);
+		};
+	}, [editor, open]);
+	const { activeIndex, activeChar, query } = controller;
+	useEffect(() => {
+		if (open) activeItem.current?.scrollIntoView({ block: "nearest" });
+	}, [
+		open,
+		activeIndex,
+		activeChar,
+		query
+	]);
+	const { "aria-controls": controls, "aria-activedescendant": activeDescendant } = controller.inputAria;
+	useEffect(() => {
+		if (!editor || !enabled) return;
+		const dom = editor.view.dom;
+		const attributes = {
+			"aria-autocomplete": "list",
+			"aria-haspopup": "listbox",
+			"aria-controls": controls,
+			"aria-activedescendant": activeDescendant
+		};
+		for (const [name, value] of Object.entries(attributes)) if (value) dom.setAttribute(name, value);
+		else dom.removeAttribute(name);
+		return () => {
+			for (const name of Object.keys(attributes)) dom.removeAttribute(name);
+		};
+	}, [
+		editor,
+		enabled,
+		controls,
+		activeDescendant
+	]);
+	const label = controller.activeChar === "@" ? "Mention people" : "Insert block";
+	const emptyLabel = controller.activeChar === "@" ? "No people found" : "No commands found";
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(LiveStatus, { message: open ? `${controller.items.length} ${label.toLowerCase()} suggestions` : "" }), /* @__PURE__ */ jsxs(TriggerMenu, {
+		open,
+		onOpenChange: controller.setOpen,
+		anchorRect: controller.anchorRect,
+		side: "bottom",
+		children: [controller.items.length === 0 ? /* @__PURE__ */ jsx(TriggerMenuEmpty, { children: emptyLabel }) : null, /* @__PURE__ */ jsx(TriggerMenuList, {
+			id: controller.listId,
+			"aria-label": label,
+			children: controller.items.map((item, index) => /* @__PURE__ */ jsxs(TriggerMenuItem, {
+				id: controller.optionId(index),
+				active: index === controller.activeIndex,
+				disabled: item.disabled || item.href !== void 0 && !isEditorUrl(item.href),
+				ref: index === controller.activeIndex ? activeItem : void 0,
+				onPointerMove: () => controller.setActiveIndex(index),
+				onClick: () => controller.select(item),
+				children: [
+					/* @__PURE__ */ jsx(TriggerMenuIcon, { children: item.icon ?? /* @__PURE__ */ jsx(UserIcon, {}) }),
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 truncate",
+						children: item.label
+					}),
+					item.description ? /* @__PURE__ */ jsx("span", {
+						className: "truncate text-muted-foreground",
+						children: item.description
+					}) : null
+				]
+			}, item.id))
+		})]
+	})] });
+}
+//#endregion
+export { MarkdownEditorSuggestions };

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

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+//#region src/markdown-editor/toolbar.d.ts
+export declare function MarkdownEditorToolbar({ children }: {
+  children?: ReactNode;
+}): 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;
+//#endregion