@ctrl-ui/react 0.8.19 → 0.8.21

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.js

@@ -1,14 +1,15 @@
 "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 { Input } from "../ui/input.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 { Label } from "../ui/label.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";
@@ -97,6 +98,7 @@ function MarkdownEditorToolbar({ children }) {
 	];
 	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, {
@@ -299,7 +301,8 @@ function MarkdownEditorImage() {
 }
 function MarkdownEditorUploads() {
 	const { uploads, uploadError, retryUpload, removeUpload, disabled } = useMarkdownEditor();
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [uploadError ? /* @__PURE__ */ jsx("p", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [uploadError ? /* @__PURE__ */ jsx(Text, {
+		as: "p",
 		role: "alert",
 		children: uploadError
 	}) : null, uploads.length > 0 ? /* @__PURE__ */ jsxs("div", {

package/dist/markdown-editor.js

@@ -2,6 +2,7 @@
 import { cn } from "./lib/cn.js";
 import { Textarea } from "./ui/textarea.js";
 import { MarkdownEditorContext, useMarkdownEditor } from "./markdown-editor/context.js";
+import { MarkdownEditorDragHandle } from "./markdown-editor/drag-handle.js";
 import { createMarkdownCodec, hasMarkdownContent, markdownExtensions, requiresMarkdownSource } from "./markdown-editor/extensions.js";
 import { useImageUploads } from "./markdown-editor/use-image-uploads.js";
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -140,6 +141,7 @@ function MarkdownEditor({ value, defaultValue = "", onValueChange, disabled = fa
 	});
 }
 function MarkdownEditorContent({ label, placeholder, autoFocus = false, className }) {
+	const container = useRef(null);
 	const { editor, disabled, source, sourceRequired, markdown, setMarkdown, setContentAttributes } = useMarkdownEditor();
 	useEffect(() => {
 		setContentAttributes({
@@ -177,15 +179,23 @@ function MarkdownEditorContent({ label, placeholder, autoFocus = false, classNam
 			value: markdown,
 			disabled: disabled || !editor,
 			onChange: (event) => setMarkdown(event.target.value),
-			rows: 5
+			rows: 5,
+			autoFocus,
+			style: {
+				"--cui-field-background": "transparent",
+				"--cui-field-border-width": "0px",
+				"--cui-field-radius": "0px",
+				"--cui-field-shadow": "none"
+			}
 		})]
 	});
-	return /* @__PURE__ */ jsx(EditorContent, {
-		editor,
+	return /* @__PURE__ */ jsxs("div", {
+		ref: container,
 		"data-control-ui": "markdown-editor",
 		"data-control-family": "markdown-editor",
 		"data-slot": "content",
-		className
+		className,
+		children: [/* @__PURE__ */ jsx(EditorContent, { editor }), /* @__PURE__ */ jsx(MarkdownEditorDragHandle, { container })]
 	});
 }
 //#endregion

package/dist/styles/index.css

@@ -14,13 +14,16 @@
 @import "./recipes/popup-lists.css";
 @import "./recipes/popup-motion.css";
 @import "./recipes/page-layout.css";
+@import "./recipes/popup-drawer.css";
 @import "./recipes/track-highlight.css";
 @import "./recipes/sidebar.css";
 @import "./recipes/sidebar-menu.css";
+@import "./recipes/sidebar-mobile.css";
 @import "./recipes/sidebar-parts.css";
 @import "./recipes/app-shell-header.css";
 @import "./recipes/field.css";
 @import "./recipes/field-parts.css";
+@import "./type-scale.css";
 @import "./recipes/audio-device-select.css";
 @import "./recipes/audio-visualizer.css";
 @import "./recipes/audio-recorder.css";
@@ -31,6 +34,7 @@
 @import "./recipes/calendar.css";
 @import "./recipes/card.css";
 @import "./recipes/chat-message.css";
+@import "./recipes/chat-message-edit.css";
 @import "./recipes/chat-message-social.css";
 @import "./recipes/chat-layout.css";
 @import "./recipes/spinner.css";
@@ -46,12 +50,10 @@
 @import "./recipes/color-picker-values.css";
 @import "./recipes/empty.css";
 @import "./recipes/context.css";
-@import "./recipes/popup-drawer.css";
 @import "./recipes/infinite-canvas.css";
 @import "./recipes/resizable.css";
 @import "./recipes/separator.css";
 @import "./recipes/toolbar.css";
-@import "./type-scale.css";
 @import "./recipes/kbd.css";
 @import "./recipes/markdown.css";
 @import "./recipes/label.css";
@@ -66,8 +68,8 @@
 @import "./recipes/icon-picker.css";
 @import "./recipes/tabs.css";
 @import "./recipes/tabs-motion.css";
-@import "./recipes/environment-variables.css";
 @import "./recipes/filter-bar.css";
+@import "./recipes/flow.css";
 @import "./recipes/gradient-editor.css";
 @import "./recipes/inline-attachment.css";
 @import "./recipes/source-badge.css";
@@ -77,6 +79,7 @@
 @import "./recipes/morphing-panel.css";
 @import "./recipes/pagination.css";
 @import "./recipes/phone-input.css";
+@import "./recipes/resize-handle.css";
 @import "./recipes/rich-tooltip.css";
 @import "./recipes/skeleton.css";
 @import "./recipes/stepper.css";

package/dist/styles/recipes/chat-message-edit.css

@@ -0,0 +1,105 @@
+@layer components {
+  :where([data-control-family="chat-message"][data-slot="editable"]) {
+    min-inline-size: 0;
+    max-inline-size: 100%;
+  }
+
+  :where([data-control-family="chat-message"][data-slot="content"][data-editable]) {
+    position: relative;
+    display: grid;
+    outline: var(--focus-ring-width) var(--focus-ring-style) transparent;
+    outline-offset: calc(var(--focus-ring-width) * -1);
+    transition: outline-color var(--duration-fast) var(--ease-standard);
+  }
+
+  :where([data-control-family="chat-message"][data-slot="content"][data-editable]:focus-within) {
+    outline-color: var(--focus-ring);
+  }
+
+  :where([data-control-family="chat-message"][data-slot="editable"] :is([data-slot="edit-value"], [data-slot="edit-sizer"])) {
+    grid-area: 1 / 1;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    min-inline-size: 0;
+  }
+
+  :where([data-control-family="chat-message"][data-slot="editable"] [data-slot="edit-sizer"]) {
+    visibility: hidden;
+    contain: inline-size;
+    min-inline-size: 100%;
+    inline-size: 0;
+    block-size: 0;
+    max-block-size: 40dvh;
+    overflow: hidden;
+  }
+
+  :where([data-control-family="chat-message"][data-slot="editable"][data-editing] [data-slot="edit-sizer"]) {
+    block-size: auto;
+  }
+
+  @supports (interpolate-size: allow-keywords) {
+    :where([data-control-family="chat-message"][data-slot="editable"] [data-slot="edit-sizer"]) {
+      interpolate-size: allow-keywords;
+      transition: block-size var(--duration-fast) var(--ease-standard);
+    }
+  }
+
+  :where([data-control-family="chat-message"][data-slot="editable"] [data-slot="edit-input"]) {
+    position: absolute;
+    inset: 0;
+    box-sizing: border-box;
+    inline-size: 100%;
+    block-size: 100%;
+    min-inline-size: 0;
+    margin: 0;
+    border: 0;
+    padding: inherit;
+    resize: none;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    letter-spacing: inherit;
+    text-align: inherit;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    scrollbar-width: thin;
+    outline: none;
+    visibility: hidden;
+  }
+
+  :where([data-control-family="chat-message"][data-slot="editable"][data-editing] [data-slot="edit-input"]) {
+    visibility: visible;
+  }
+
+  :where([data-control-family="chat-message"][data-slot="editable"][data-editing] [data-slot="edit-value"]) {
+    visibility: hidden;
+  }
+
+  :where([data-control-family="chat-message"][data-slot="editable"] [data-slot="edit-toolbars"]) {
+    display: grid;
+  }
+
+  :where([data-control-family="chat-message"][data-slot="editable"] [data-slot="edit-toolbar"]) {
+    grid-area: 1 / 1;
+    min-inline-size: 0;
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity var(--duration-fast) var(--ease-standard);
+  }
+
+  :where([data-control-family="chat-message"][data-slot="editable"] [data-slot="edit-toolbar"][data-active]) {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  :where([data-control-family="chat-message"][data-slot="editable"] [data-slot="edit-error"]) {
+    display: block;
+    margin-block-start: calc(var(--spacing) * 1);
+    color: var(--destructive);
+    font-size: var(--text-caption);
+  }
+
+  :where([data-control-family="chat-message"][data-slot="editable"] [data-slot="edit-error"][hidden]) {
+    display: none;
+  }
+}