@ctrl-ui/react 0.8.18 → 0.8.20

package/dist/markdown-editor/toolbar.js

@@ -0,0 +1,339 @@
+"use client";
+import { Button } from "../ui/button.js";
+import { Text } from "../ui/typography.js";
+import { ChatComposerAttachment, ChatComposerAttachments } from "../chat-composer-attachment.js";
+import { Popover, PopoverContent, PopoverTitle, PopoverTrigger } from "../ui/popover.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip.js";
+import { useMarkdownEditor } from "./context.js";
+import { isEditorUrl } from "./extensions.js";
+import { markdownImageTypes } from "./uploads.js";
+import { Input } from "../ui/input.js";
+import { Toolbar, ToolbarButton, ToolbarSeparator } from "../ui/toolbar.js";
+import { Label } from "../ui/label.js";
+import { useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { BoldIcon, CodeIcon, Heading2Icon, 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 MarkdownEditorToolbar({ children }) {
+	const { editor, disabled, source, sourceRequired, setSource, uploads } = useMarkdownEditor();
+	const state = useEditorState({
+		editor,
+		selector: ({ editor: current }) => ({
+			bold: current?.isActive("bold"),
+			italic: current?.isActive("italic"),
+			strike: current?.isActive("strike"),
+			code: current?.isActive("code"),
+			heading: current?.isActive("heading", { level: 2 }),
+			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: "Heading",
+			Icon: Heading2Icon,
+			active: state?.heading,
+			run: () => editor?.chain().focus().toggleHeading({ level: 2 }).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__ */ jsxs(Toolbar, {
+		"aria-label": "Markdown formatting",
+		chrome: "embedded",
+		className: "flex w-full flex-wrap",
+		children: [
+			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)),
+			/* @__PURE__ */ jsx(MarkdownEditorLink, {}),
+			/* @__PURE__ */ jsx(MarkdownEditorImage, {}),
+			/* @__PURE__ */ jsx(ToolbarSeparator, {}),
+			/* @__PURE__ */ jsx(ToolbarButton, {
+				type: "button",
+				iconOnly: true,
+				"aria-label": "Undo",
+				disabled: disabled || source || !state?.undo,
+				onClick: () => editor?.chain().focus().undo().run(),
+				children: /* @__PURE__ */ jsx(UndoIcon, { "aria-hidden": "true" })
+			}),
+			/* @__PURE__ */ jsx(ToolbarButton, {
+				type: "button",
+				iconOnly: true,
+				"aria-label": "Redo",
+				disabled: disabled || source || !state?.redo,
+				onClick: () => editor?.chain().focus().redo().run(),
+				children: /* @__PURE__ */ jsx(RedoIcon, { "aria-hidden": "true" })
+			}),
+			/* @__PURE__ */ jsx(ToolbarButton, {
+				type: "button",
+				"aria-pressed": source,
+				disabled: disabled || !editor || sourceRequired || uploads.length > 0,
+				onClick: () => setSource(!source),
+				children: "Markdown source"
+			}),
+			children
+		]
+	}) });
+}
+function MarkdownEditorLink() {
+	const { editor, disabled, source } = useMarkdownEditor();
+	const [open, setOpen] = useState(false);
+	const [url, setUrl] = useState("");
+	const inputId = useId();
+	const valid = isEditorUrl(url.trim());
+	function apply() {
+		if (!valid || disabled || source) return;
+		editor?.chain().focus().extendMarkRange("link").setLink({ href: url.trim() }).run();
+		setOpen(false);
+	}
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: (next) => {
+			setOpen(next);
+			if (next) setUrl(editor?.getAttributes("link").href ?? "");
+		},
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			disabled: disabled || source || !editor,
+			render: /* @__PURE__ */ jsx(ToolbarButton, {
+				type: "button",
+				iconOnly: true,
+				"aria-label": "Edit link"
+			}),
+			children: /* @__PURE__ */ jsx(LinkIcon, { "aria-hidden": "true" })
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			className: "grid gap-3",
+			onKeyDown: (event) => {
+				if (event.key === "Enter") {
+					event.preventDefault();
+					event.stopPropagation();
+					apply();
+				}
+			},
+			children: [
+				/* @__PURE__ */ jsx(PopoverTitle, { children: "Edit link" }),
+				/* @__PURE__ */ jsx(Label, {
+					htmlFor: inputId,
+					children: "URL"
+				}),
+				/* @__PURE__ */ jsx(Input, {
+					id: inputId,
+					value: url,
+					onChange: (event) => setUrl(event.target.value),
+					placeholder: "https://example.com"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						disabled: !valid || disabled,
+						onClick: apply,
+						children: "Apply link"
+					}), /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						disabled,
+						onClick: () => {
+							editor?.chain().focus().extendMarkRange("link").unsetLink().run();
+							setOpen(false);
+						},
+						children: "Remove link"
+					})]
+				})
+			]
+		})]
+	});
+}
+function MarkdownEditorImage() {
+	const { editor, disabled, source, canUpload, upload } = useMarkdownEditor();
+	const [open, setOpen] = useState(false);
+	const [url, setUrl] = useState("");
+	const [alt, setAlt] = useState("");
+	const inputId = useId();
+	const altId = useId();
+	const fileInput = useRef(null);
+	const valid = isEditorUrl(url.trim(), true);
+	function insert() {
+		if (!valid || disabled || source) return;
+		editor?.chain().focus().setImage({
+			src: url.trim(),
+			alt
+		}).run();
+		setOpen(false);
+		setUrl("");
+		setAlt("");
+	}
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			disabled: disabled || source || !editor,
+			render: /* @__PURE__ */ jsx(ToolbarButton, {
+				type: "button",
+				iconOnly: true,
+				"aria-label": "Insert image"
+			}),
+			children: /* @__PURE__ */ jsx(ImageIcon, { "aria-hidden": "true" })
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			className: "grid gap-3",
+			onKeyDown: (event) => {
+				if (event.key === "Enter") {
+					event.preventDefault();
+					event.stopPropagation();
+					insert();
+				}
+			},
+			children: [
+				/* @__PURE__ */ jsx(PopoverTitle, { children: "Insert image" }),
+				/* @__PURE__ */ jsx(Label, {
+					htmlFor: inputId,
+					children: "Image URL"
+				}),
+				/* @__PURE__ */ jsx(Input, {
+					id: inputId,
+					value: url,
+					onChange: (event) => setUrl(event.target.value),
+					placeholder: "https://example.com/image.png"
+				}),
+				/* @__PURE__ */ jsx(Label, {
+					htmlFor: altId,
+					children: "Image description"
+				}),
+				/* @__PURE__ */ jsx(Input, {
+					id: altId,
+					value: alt,
+					onChange: (event) => setAlt(event.target.value)
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					disabled: !valid || disabled,
+					onClick: insert,
+					children: "Insert image"
+				}),
+				canUpload ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("input", {
+					ref: fileInput,
+					type: "file",
+					accept: markdownImageTypes.join(","),
+					multiple: true,
+					hidden: true,
+					onChange: (event) => {
+						upload(Array.from(event.target.files ?? []));
+						event.target.value = "";
+						setOpen(false);
+					}
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					disabled,
+					onClick: () => fileInput.current?.click(),
+					children: "Upload images"
+				})] }) : null
+			]
+		})]
+	});
+}
+function MarkdownEditorUploads() {
+	const { uploads, uploadError, retryUpload, removeUpload, disabled } = useMarkdownEditor();
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [uploadError ? /* @__PURE__ */ jsx(Text, {
+		as: "p",
+		role: "alert",
+		children: uploadError
+	}) : null, uploads.length > 0 ? /* @__PURE__ */ jsxs("div", {
+		"data-control-ui": "markdown-editor",
+		"data-control-family": "markdown-editor",
+		"data-slot": "uploads",
+		children: [/* @__PURE__ */ jsx(ChatComposerAttachments, {
+			label: "Image uploads",
+			children: uploads.map((item) => /* @__PURE__ */ jsx(ChatComposerAttachment, {
+				file: item.file,
+				status: item.status,
+				progress: item.progress,
+				onRemove: disabled ? void 0 : () => removeUpload(item.id),
+				removeLabel: `Remove ${item.file.name}`
+			}, item.id))
+		}), uploads.filter((item) => item.status === "error").map((item) => /* @__PURE__ */ jsxs("div", {
+			role: "alert",
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsxs("span", { children: [
+				item.file.name,
+				": ",
+				item.error
+			] }), /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				size: "xs",
+				disabled,
+				onClick: () => retryUpload(item.id),
+				children: "Retry upload"
+			})]
+		}, item.id))]
+	}) : null] });
+}
+//#endregion
+export { MarkdownEditorImage, MarkdownEditorLink, MarkdownEditorToolbar, MarkdownEditorUploads };

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

@@ -0,0 +1,23 @@
+import { Node } from "@tiptap/pm/model";
+import { Editor } from "@tiptap/core";
+//#region src/markdown-editor/uploads.d.ts
+export type MarkdownImage = {
+  url: string;
+  alt?: string;
+  title?: string;
+};
+export type MarkdownImageUploader = (file: File, options: {
+  signal: AbortSignal;
+  onProgress: (progress: number) => void;
+}) => Promise<MarkdownImage>;
+export type MarkdownImageUpload = {
+  id: string;
+  file: File;
+  status: "uploading" | "error";
+  progress?: number;
+  error?: string;
+};
+export declare function findImageUpload(document: Node, id: string): number | undefined;
+export declare function completeImageUpload(editor: Editor, id: string, image: MarkdownImage, fallbackAlt: string): void;
+export declare const markdownImageTypes: string[];
+//#endregion

package/dist/markdown-editor/uploads.js

@@ -0,0 +1,32 @@
+import { isEditorUrl } from "./extensions.js";
+//#region src/markdown-editor/uploads.ts
+function findImageUpload(document, id) {
+	let position;
+	document.descendants((node, pos) => {
+		if (node.type.name === "imageUpload" && node.attrs.id === id) position = pos;
+	});
+	return position;
+}
+function completeImageUpload(editor, id, image, fallbackAlt) {
+	if (!isEditorUrl(image.url, true)) throw new Error("The upload must return a permanent HTTP(S) or root-relative image URL.");
+	const position = findImageUpload(editor.state.doc, id);
+	if (position === void 0) return;
+	const imageType = editor.schema.nodes.image;
+	const paragraphType = editor.schema.nodes.paragraph;
+	if (!imageType || !paragraphType) throw new Error("Image uploads require image and paragraph nodes.");
+	const node = imageType.create({
+		src: image.url,
+		alt: image.alt ?? fallbackAlt,
+		title: image.title ?? null
+	});
+	editor.view.dispatch(editor.state.tr.replaceWith(position, position + 1, paragraphType.create(null, node)).setMeta("addToHistory", false));
+}
+const markdownImageTypes = [
+	"image/png",
+	"image/jpeg",
+	"image/gif",
+	"image/webp",
+	"image/avif"
+];
+//#endregion
+export { completeImageUpload, findImageUpload, markdownImageTypes };

package/dist/markdown-editor/use-image-uploads.d.ts

@@ -0,0 +1,12 @@
+import { MarkdownImageUpload, MarkdownImageUploader } from "./uploads.js";
+import { Editor } from "@tiptap/core";
+//#region src/markdown-editor/use-image-uploads.d.ts
+export declare function useImageUploads(editor: Editor | null, uploader: MarkdownImageUploader | undefined, maxImageBytes: number): {
+  uploads: MarkdownImageUpload[];
+  uploadError: string | null;
+  upload: (files: File[], position?: number) => void;
+  retryUpload: (id: string) => void;
+  removeUpload: (id: string) => void;
+  cancelAll: () => void;
+};
+//#endregion

package/dist/markdown-editor/use-image-uploads.js

@@ -0,0 +1,120 @@
+import { completeImageUpload, findImageUpload, markdownImageTypes } from "./uploads.js";
+import { useEffect, useId, useRef, useState } from "react";
+//#region src/markdown-editor/use-image-uploads.ts
+function useImageUploads(editor, uploader, maxImageBytes) {
+	const [uploads, setUploads] = useState([]);
+	const [uploadError, setUploadError] = useState(null);
+	const uploadPrefix = useId();
+	const nextId = useRef(0);
+	const jobs = useRef(/* @__PURE__ */ new Map());
+	function discard(id) {
+		jobs.current.get(id)?.controller.abort();
+		jobs.current.delete(id);
+		setUploads((current) => current.filter((item) => item.id !== id));
+	}
+	function cancelAll() {
+		for (const job of jobs.current.values()) job.controller.abort();
+		jobs.current.clear();
+		setUploads([]);
+	}
+	useEffect(() => {
+		const activeJobs = jobs.current;
+		return () => {
+			for (const job of activeJobs.values()) job.controller.abort();
+			activeJobs.clear();
+		};
+	}, []);
+	useEffect(() => {
+		if (!editor) return;
+		const prune = () => {
+			for (const id of jobs.current.keys()) if (findImageUpload(editor.state.doc, id) === void 0) {
+				jobs.current.get(id)?.controller.abort();
+				jobs.current.delete(id);
+				setUploads((current) => current.filter((item) => item.id !== id));
+			}
+		};
+		editor.on("update", prune);
+		return () => {
+			editor.off("update", prune);
+		};
+	}, [editor]);
+	async function run(id, file) {
+		if (!editor || !uploader) return;
+		const controller = new AbortController();
+		jobs.current.set(id, {
+			file,
+			controller
+		});
+		setUploads((current) => [...current.filter((item) => item.id !== id), {
+			id,
+			file,
+			status: "uploading"
+		}]);
+		try {
+			const image = await uploader(file, {
+				signal: controller.signal,
+				onProgress: (progress) => {
+					if (controller.signal.aborted || !Number.isFinite(progress)) return;
+					setUploads((current) => current.map((item) => item.id === id ? {
+						...item,
+						progress: Math.max(0, Math.min(100, progress))
+					} : item));
+				}
+			});
+			if (controller.signal.aborted || editor.isDestroyed) return;
+			completeImageUpload(editor, id, image, file.name);
+			discard(id);
+		} catch (error) {
+			if (controller.signal.aborted) return;
+			setUploads((current) => current.map((item) => item.id === id ? {
+				...item,
+				status: "error",
+				error: error instanceof Error ? error.message : "Image upload failed."
+			} : item));
+		}
+	}
+	function upload(files, position) {
+		if (!editor || !uploader || !editor.isEditable) return;
+		setUploadError(null);
+		let insertAt = position ?? editor.state.selection.to;
+		for (const file of files) {
+			if (!markdownImageTypes.includes(file.type) || file.size > maxImageBytes) {
+				setUploadError(`Choose a PNG, JPEG, GIF, WebP or AVIF image up to ${Math.round(maxImageBytes / 1024 / 1024)} MB.`);
+				continue;
+			}
+			const id = `${uploadPrefix}-${nextId.current++}`;
+			editor.chain().focus().insertContentAt(insertAt, {
+				type: "imageUpload",
+				attrs: {
+					id,
+					name: file.name
+				}
+			}).run();
+			insertAt = editor.state.selection.to;
+			run(id, file);
+		}
+	}
+	function removeUpload(id) {
+		discard(id);
+		if (!editor) return;
+		const position = findImageUpload(editor.state.doc, id);
+		if (position !== void 0) editor.view.dispatch(editor.state.tr.delete(position, position + 1).setMeta("addToHistory", false));
+	}
+	function retryUpload(id) {
+		const job = jobs.current.get(id);
+		if (job) {
+			job.controller.abort();
+			run(id, job.file);
+		}
+	}
+	return {
+		uploads,
+		uploadError,
+		upload,
+		retryUpload,
+		removeUpload,
+		cancelAll
+	};
+}
+//#endregion
+export { useImageUploads };

package/dist/markdown-editor.d.ts

@@ -0,0 +1,27 @@
+import { MarkdownEditorKnobStyle } from "./knob-contracts/markdown-editor-knobs.js";
+import { MarkdownImageUploader } from "./markdown-editor/uploads.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/markdown-editor.d.ts
+export type MarkdownEditorStatus = {
+  isEmpty: boolean;
+  hasPendingUploads: boolean;
+};
+export type MarkdownEditorProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange" | "style"> & {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (markdown: string) => void;
+  disabled?: boolean;
+  onUploadImage?: MarkdownImageUploader;
+  maxImageBytes?: number;
+  onStatusChange?: (status: MarkdownEditorStatus) => void;
+  style?: CSSProperties & MarkdownEditorKnobStyle;
+};
+export declare function MarkdownEditor({ value, defaultValue, onValueChange, disabled, onUploadImage, maxImageBytes, onStatusChange, children, className, ...props }: MarkdownEditorProps): import("react").JSX.Element;
+export type MarkdownEditorContentProps = {
+  label: string;
+  placeholder?: string;
+  autoFocus?: boolean;
+  className?: string;
+};
+export declare function MarkdownEditorContent({ label, placeholder, autoFocus, className }: MarkdownEditorContentProps): import("react").JSX.Element;
+//#endregion