@questpie/admin 3.5.1 → 3.5.3

package/dist/client/builder/types/collection-types.d.mts

@@ -1,5 +1,6 @@
 import "../../i18n/types.mjs";
 import { MaybeLazyComponent } from "./common.mjs";
+import { FilterRule, QuickFilterConfig } from "../../../shared/types/saved-views.types.mjs";
 import "../../../server/augmentation.mjs";
 import "../field/field.mjs";
 import "../admin.mjs";
@@ -124,6 +125,14 @@ interface ListViewConfig<TFieldNames extends string = string> {
     field: TFieldNames;
     direction: "asc" | "desc";
   };
+  /**
+   * Initial filters used when the user has no saved view state.
+   */
+  defaultFilters?: FilterRule[];
+  /**
+   * Header-level quick filter presets.
+   */
+  quickFilters?: QuickFilterConfig[];
   /**
    * Enables reorder mode for this list.
    * Requires a numeric field named `order` on the collection.

package/dist/client/components/actions/action-dialog.mjs

@@ -92,6 +92,11 @@ function FormDialogContent({ action, ctx, onClose }) {
 				return message || t("toast.actionSuccess");
 			},
 			error: (error) => {
+				const validationError = error;
+				if (validationError.fieldErrors) for (const [field, message] of Object.entries(validationError.fieldErrors)) form.setError(field, {
+					type: "server",
+					message
+				});
 				return error instanceof Error ? error.message : t("toast.actionFailed");
 			},
 			finally: () => {

package/dist/client/components/fields/rich-text-editor/bubble-menu.mjs

@@ -283,6 +283,13 @@ function RichTextBubbleMenu({ editor, features, disabled, linkOpen, onImageClick
 				shortcut: "⌘U",
 				onClick: () => editor.chain().focus().toggleUnderline().run()
 			}),
+			features.strike && /* @__PURE__ */ jsx(ToolbarButton, {
+				icon: EDITOR_ICONS.strikethrough,
+				active: editor.isActive("strike"),
+				disabled: !isEditable,
+				title: t("editor.strikethrough"),
+				onClick: () => editor.chain().focus().toggleStrike().run()
+			}),
 			features.code && /* @__PURE__ */ jsx(ToolbarButton, {
 				icon: EDITOR_ICONS.code,
 				active: editor.isActive("code"),

package/dist/client/components/fields/rich-text-editor/extensions.mjs

@@ -10,6 +10,7 @@ import TableRow from "@tiptap/extension-table-row";
 import TextAlign from "@tiptap/extension-text-align";
 import Underline from "@tiptap/extension-underline";
 import StarterKit from "@tiptap/starter-kit";
+import { Markdown } from "tiptap-markdown";
 
 //#region src/client/components/fields/rich-text-editor/extensions.tsx
 let codeBlockExtension = null;
@@ -67,7 +68,7 @@ function buildExtensions({ features, labels, placeholder, maxCharacters, customE
 	if (!(codeBlock instanceof Promise)) return [...base, codeBlock];
 	return codeBlock.then((ext) => [...base, ext]);
 }
-function buildBaseExtensions({ features, labels = defaultLabels, placeholder, maxCharacters, customExtensions }) {
+function buildBaseExtensions({ features, labels = defaultLabels, placeholder, maxCharacters, outputMode, customExtensions }) {
 	const starterKitConfig = { codeBlock: false };
 	if (!features.bold) starterKitConfig.bold = false;
 	if (!features.italic) starterKitConfig.italic = false;
@@ -97,18 +98,21 @@ function buildBaseExtensions({ features, labels = defaultLabels, placeholder, ma
 			title: labels.heading(1),
 			description: labels.heading1Description,
 			icon: "ph:text-h-one",
+			group: "Headings",
 			keywords: ["h1"],
 			command: (cmdEditor) => cmdEditor.chain().focus().toggleHeading({ level: 1 }).run()
 		}, {
 			title: labels.heading(2),
 			description: labels.heading2Description,
 			icon: "ph:text-h-two",
+			group: "Headings",
 			keywords: ["h2"],
 			command: (cmdEditor) => cmdEditor.chain().focus().toggleHeading({ level: 2 }).run()
 		}, {
 			title: labels.heading(3),
 			description: labels.heading3Description,
 			icon: "ph:text-h-three",
+			group: "Headings",
 			keywords: ["h3"],
 			command: (cmdEditor) => cmdEditor.chain().focus().toggleHeading({ level: 3 }).run()
 		});
@@ -116,6 +120,7 @@ function buildBaseExtensions({ features, labels = defaultLabels, placeholder, ma
 			title: labels.paragraph,
 			description: labels.paragraphDescription,
 			icon: "ph:text-align-left",
+			group: "Text",
 			keywords: ["text"],
 			command: (cmdEditor) => cmdEditor.chain().focus().setParagraph().run()
 		});
@@ -123,6 +128,7 @@ function buildBaseExtensions({ features, labels = defaultLabels, placeholder, ma
 			title: labels.bulletList,
 			description: labels.bulletListDescription,
 			icon: "ph:list-bullets",
+			group: "Lists",
 			keywords: ["list", "ul"],
 			command: (cmdEditor) => cmdEditor.chain().focus().toggleBulletList().run()
 		});
@@ -130,6 +136,7 @@ function buildBaseExtensions({ features, labels = defaultLabels, placeholder, ma
 			title: labels.orderedList,
 			description: labels.orderedListDescription,
 			icon: "ph:list-numbers",
+			group: "Lists",
 			keywords: ["list", "ol"],
 			command: (cmdEditor) => cmdEditor.chain().focus().toggleOrderedList().run()
 		});
@@ -137,6 +144,7 @@ function buildBaseExtensions({ features, labels = defaultLabels, placeholder, ma
 			title: labels.quote,
 			description: labels.quoteDescription,
 			icon: "ph:quotes",
+			group: "Blocks",
 			keywords: ["blockquote"],
 			command: (cmdEditor) => cmdEditor.chain().focus().toggleBlockquote().run()
 		});
@@ -144,6 +152,7 @@ function buildBaseExtensions({ features, labels = defaultLabels, placeholder, ma
 			title: labels.codeBlock,
 			description: labels.codeBlockDescription,
 			icon: "ph:code-block",
+			group: "Blocks",
 			keywords: ["code"],
 			command: (cmdEditor) => cmdEditor.chain().focus().toggleCodeBlock().run()
 		});
@@ -151,6 +160,7 @@ function buildBaseExtensions({ features, labels = defaultLabels, placeholder, ma
 			title: labels.divider,
 			description: labels.dividerDescription,
 			icon: "ph:minus",
+			group: "Blocks",
 			keywords: ["hr"],
 			command: (cmdEditor) => cmdEditor.chain().focus().setHorizontalRule().run()
 		});
@@ -158,6 +168,7 @@ function buildBaseExtensions({ features, labels = defaultLabels, placeholder, ma
 			title: labels.table,
 			description: labels.tableDescription,
 			icon: "ph:table",
+			group: "Blocks",
 			keywords: ["grid"],
 			command: (cmdEditor) => cmdEditor.chain().focus().insertTable({
 				rows: 3,
@@ -167,6 +178,11 @@ function buildBaseExtensions({ features, labels = defaultLabels, placeholder, ma
 		});
 		return commands;
 	}));
+	if (outputMode === "markdown") extensions.push(Markdown.configure({
+		html: true,
+		transformCopiedText: true,
+		transformPastedText: true
+	}));
 	if (customExtensions?.length) extensions.push(...customExtensions);
 	return extensions;
 }

package/dist/client/components/fields/rich-text-editor/index.d.mts

@@ -32,7 +32,8 @@ declare function RichTextEditor({
   enableImages,
   onImageUpload,
   imageCollection,
-  enableMediaLibrary
+  enableMediaLibrary,
+  outputMode
 }: RichTextEditorProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { RichTextEditor };

package/dist/client/components/fields/rich-text-editor/index.mjs

@@ -5,48 +5,24 @@ import { Skeleton } from "../../ui/skeleton.mjs";
 import { isModifierShortcut } from "../../../utils/keyboard-shortcuts.mjs";
 import { LocaleBadge } from "../locale-badge.mjs";
 import { createLinkAttributes, isLikelyLinkHref } from "./link-utils.mjs";
-import { RichTextToolbar } from "./toolbar.mjs";
+import { TableControls } from "./table-controls.mjs";
+import { ToolbarButton } from "./toolbar.mjs";
 import { RichTextBubbleMenu } from "./bubble-menu.mjs";
 import { buildExtensions } from "./extensions.mjs";
 import { getImageAltFromFile, getImageFilesFromDataTransfer, useRichTextImageUpload } from "./image-upload.mjs";
 import { ImagePopover } from "./image-popover.mjs";
 import { mergePresetFeatures } from "./presets.mjs";
 import { defaultFeatures } from "./types.mjs";
-import { getCharacterCount, getHeadingLevel, getOutput, isSameValue } from "./utils.mjs";
+import { getCharacterCount, getOutput, isSameValue } from "./utils.mjs";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { toast } from "sonner";
 import { EditorContent, useEditor } from "@tiptap/react";
 
 //#region src/client/components/fields/rich-text-editor/index.tsx
-function RichTextToolbarSkeleton() {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "qp-rich-text-editor__toolbar border-border-subtle bg-surface-low flex flex-nowrap items-center gap-1.5 overflow-hidden border-b p-1.5",
-		"aria-hidden": "true",
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-1",
-				role: "presentation",
-				children: [/* @__PURE__ */ jsx(Skeleton, { className: "size-8" }), /* @__PURE__ */ jsx(Skeleton, { className: "size-8" })]
-			}),
-			/* @__PURE__ */ jsx(Skeleton, { className: "h-8 min-w-[136px]" }),
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-1",
-				role: "presentation",
-				children: [
-					/* @__PURE__ */ jsx(Skeleton, { className: "size-8" }),
-					/* @__PURE__ */ jsx(Skeleton, { className: "size-8" }),
-					/* @__PURE__ */ jsx(Skeleton, { className: "size-8" })
-				]
-			}),
-			/* @__PURE__ */ jsx(Skeleton, { className: "size-8" }),
-			/* @__PURE__ */ jsx(Skeleton, { className: "size-8" })
-		]
-	});
-}
 function RichTextEditorContentSkeleton() {
 	return /* @__PURE__ */ jsxs("div", {
-		className: "qp-rich-text-editor__content space-y-3",
+		className: "qp-rich-text-editor__content space-y-4",
 		"aria-hidden": "true",
 		children: [
 			/* @__PURE__ */ jsx(Skeleton, {
@@ -62,7 +38,7 @@ function RichTextEditorContentSkeleton() {
 				className: "h-4 w-full max-w-[86%]"
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: "pt-3",
+				className: "pt-2",
 				children: /* @__PURE__ */ jsx(Skeleton, {
 					variant: "text",
 					className: "h-4 w-full max-w-[58%]"
@@ -71,19 +47,15 @@ function RichTextEditorContentSkeleton() {
 		]
 	});
 }
-function RichTextEditorLoadingSkeleton({ disabled, readOnly, error, showToolbar }) {
+function RichTextEditorLoadingSkeleton({ disabled, readOnly }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("qp-rich-text-editor control-surface h-auto min-h-[160px] overflow-hidden", disabled || readOnly ? "opacity-60" : "", error ? "border-destructive" : "border-border"),
+		className: cn("qp-rich-text-editor", disabled || readOnly ? "opacity-60" : ""),
 		"data-admin-rich-text-editor": "root",
 		"aria-busy": "true",
-		children: [
-			/* @__PURE__ */ jsx("span", {
-				className: "sr-only",
-				children: "Loading editor"
-			}),
-			showToolbar && /* @__PURE__ */ jsx(RichTextToolbarSkeleton, {}),
-			/* @__PURE__ */ jsx(RichTextEditorContentSkeleton, {})
-		]
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Loading editor"
+		}), /* @__PURE__ */ jsx(RichTextEditorContentSkeleton, {})]
 	});
 }
 /**
@@ -94,7 +66,7 @@ function RichTextEditorLoadingSkeleton({ disabled, readOnly, error, showToolbar
 * `useEditor` with an empty extension list which causes the ProseMirror
 * "Schema is missing its top node type" error.
 */
-function RichTextEditor({ name, value, onChange, disabled, readOnly, label, description, placeholder, required, error, localized, locale, extensions, preset, features, showCharacterCount, maxCharacters, enableImages, onImageUpload, imageCollection, enableMediaLibrary }) {
+function RichTextEditor({ name, value, onChange, disabled, readOnly, label, description, placeholder, required, error, localized, locale, extensions, preset, features, showCharacterCount, maxCharacters, enableImages, onImageUpload, imageCollection, enableMediaLibrary, outputMode }) {
 	const { t } = useTranslation();
 	const resolveText = useResolveText();
 	const resolvedLabel = label ? resolveText(label) : void 0;
@@ -134,12 +106,14 @@ function RichTextEditor({ name, value, onChange, disabled, readOnly, label, desc
 		labels: extensionLabels,
 		placeholder: placeholder || t("editor.startWriting"),
 		maxCharacters,
+		outputMode,
 		customExtensions: extensions
 	}), [
 		resolvedFeatures,
 		extensionLabels,
 		placeholder,
 		maxCharacters,
+		outputMode,
 		extensions,
 		t
 	]);
@@ -190,12 +164,11 @@ function RichTextEditor({ name, value, onChange, disabled, readOnly, label, desc
 				enableImages,
 				onImageUpload,
 				imageCollection,
-				enableMediaLibrary
+				enableMediaLibrary,
+				outputMode
 			}) : /* @__PURE__ */ jsx(RichTextEditorLoadingSkeleton, {
 				disabled,
-				readOnly,
-				error,
-				showToolbar: resolvedFeatures.toolbar
+				readOnly
 			}),
 			resolvedDescription && /* @__PURE__ */ jsx("p", {
 				id: descriptionId,
@@ -215,7 +188,7 @@ function RichTextEditor({ name, value, onChange, disabled, readOnly, label, desc
 * `useEditor` always receives a complete extension list, so the ProseMirror
 * schema always has its `doc` node.
 */
-function RichTextEditorCore({ name, ariaLabel, ariaDescribedBy, value, onChange, disabled, readOnly, error, locale, features, resolvedExtensions, showCharacterCount, maxCharacters, enableImages, onImageUpload, imageCollection, enableMediaLibrary }) {
+function RichTextEditorCore({ name, ariaLabel, ariaDescribedBy, value, onChange, disabled, readOnly, error, locale, features, resolvedExtensions, showCharacterCount, maxCharacters, enableImages, onImageUpload, imageCollection, enableMediaLibrary, outputMode }) {
 	const { t } = useTranslation();
 	const [linkOpen, setLinkOpen] = React.useState(false);
 	const [imageOpen, setImageOpen] = React.useState(false);
@@ -225,7 +198,6 @@ function RichTextEditorCore({ name, ariaLabel, ariaDescribedBy, value, onChange,
 	const allowImages = features.image && (enableImages ?? true);
 	const allowLinks = features.link;
 	const allowBubbleMenu = features.bubbleMenu;
-	const allowToolbar = features.toolbar;
 	const allowCharacterCount = features.characterCount && (showCharacterCount || maxCharacters);
 	const isEditable = !disabled && !readOnly;
 	const editorStateRef = React.useRef({
@@ -339,7 +311,7 @@ function RichTextEditorCore({ name, ariaLabel, ariaDescribedBy, value, onChange,
 		editable: isEditable,
 		onUpdate: ({ editor: currentEditor }) => {
 			if (disabled || readOnly) return;
-			const nextValue = getOutput(currentEditor);
+			const nextValue = getOutput(currentEditor, outputMode);
 			lastEmittedValueRef.current = nextValue;
 			onChange?.(nextValue);
 		}
@@ -350,7 +322,6 @@ function RichTextEditorCore({ name, ariaLabel, ariaDescribedBy, value, onChange,
 			if (editorRef.current === editor) editorRef.current = null;
 		};
 	}, [editor]);
-	const headingValue = getHeadingLevel(editor);
 	const inTable = editor?.isActive("table") ?? false;
 	React.useEffect(() => {
 		if (!editor) return;
@@ -372,33 +343,9 @@ function RichTextEditorCore({ name, ariaLabel, ariaDescribedBy, value, onChange,
 	}, [editor, value]);
 	const characterCount = getCharacterCount(editor);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
-		className: cn("qp-rich-text-editor control-surface h-auto min-h-[160px] overflow-hidden", disabled || readOnly ? "opacity-60" : "", error ? "border-destructive" : "border-border"),
+		className: cn("qp-rich-text-editor", disabled || readOnly ? "opacity-60" : ""),
 		"data-admin-rich-text-editor": "root",
 		children: [
-			editor && allowToolbar && /* @__PURE__ */ jsx(RichTextToolbar, {
-				editor,
-				features,
-				disabled: !isEditable,
-				headingValue,
-				onHeadingChange: (value$1) => {
-					if (!editor) return;
-					if (value$1 === "paragraph") {
-						editor.chain().focus().setParagraph().run();
-						return;
-					}
-					editor.chain().focus().toggleHeading({ level: Number(value$1) }).run();
-				},
-				onLinkClick: () => setLinkOpen(true),
-				onImageClick: () => setImageOpen(true),
-				onTableClick: () => {
-					if (!inTable) editor.chain().focus().insertTable({
-						rows: 3,
-						cols: 3,
-						withHeaderRow: true
-					}).run();
-				},
-				inTable
-			}),
 			editor && (allowBubbleMenu || linkOpen) && /* @__PURE__ */ jsx(RichTextBubbleMenu, {
 				editor,
 				features,
@@ -412,6 +359,20 @@ function RichTextEditorCore({ name, ariaLabel, ariaDescribedBy, value, onChange,
 				editor,
 				id: name
 			}) : /* @__PURE__ */ jsx(RichTextEditorContentSkeleton, {}),
+			editor && features.table && features.tableControls && inTable && /* @__PURE__ */ jsx("div", {
+				className: "flex justify-end px-2 py-1",
+				children: /* @__PURE__ */ jsx(TableControls, {
+					editor,
+					disabled: !isEditable,
+					inTable,
+					triggerButton: /* @__PURE__ */ jsx(ToolbarButton, {
+						icon: "ph:table",
+						active: inTable,
+						disabled: !isEditable,
+						title: t("editor.table")
+					})
+				})
+			}),
 			uploadingInlineImage && /* @__PURE__ */ jsx("div", {
 				className: "qp-rich-text-editor__upload-status",
 				role: "status",
@@ -419,7 +380,7 @@ function RichTextEditorCore({ name, ariaLabel, ariaDescribedBy, value, onChange,
 				children: t("editor.uploading")
 			}),
 			allowCharacterCount && showCharacterCount && /* @__PURE__ */ jsxs("div", {
-				className: "bg-surface-low text-muted-foreground border-border-subtle flex items-center justify-between border-t px-2 py-1 text-xs",
+				className: "text-muted-foreground flex items-center justify-between px-1.5 pt-2 text-xs",
 				children: [/* @__PURE__ */ jsxs("span", { children: [
 					characterCount.words,
 					" word",

package/dist/client/components/fields/rich-text-editor/slash-commands.mjs

@@ -47,21 +47,44 @@ const SlashCommandList = React.forwardRef(function SlashCommandList$1({ items, c
 		}
 		return false;
 	} }));
+	const grouped = React.useMemo(() => {
+		const groups = [];
+		let currentLabel;
+		for (let i = 0; i < items.length; i++) {
+			const item = items[i];
+			if (item.group !== currentLabel || i === 0) {
+				currentLabel = item.group;
+				groups.push({
+					label: currentLabel,
+					items: []
+				});
+			}
+			groups[groups.length - 1].items.push({
+				item,
+				globalIndex: i
+			});
+		}
+		return groups;
+	}, [items]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "qp-rich-text-editor__slash",
 		role: "listbox",
 		children: [items.length === 0 && /* @__PURE__ */ jsx("div", {
 			className: "qp-rich-text-editor__slash-empty",
 			children: "No results"
-		}), items.map((item, index) => /* @__PURE__ */ jsxs("button", {
+		}), grouped.map((group) => /* @__PURE__ */ jsxs("div", { children: [group.label && /* @__PURE__ */ jsx("div", {
+			className: "qp-rich-text-editor__slash-group",
+			"aria-hidden": "true",
+			children: group.label
+		}), group.items.map(({ item, globalIndex }) => /* @__PURE__ */ jsxs("button", {
 			type: "button",
-			"aria-selected": index === safeIndex,
+			"aria-selected": globalIndex === safeIndex,
 			role: "option",
 			tabIndex: -1,
-			className: cn("qp-rich-text-editor__slash-item", index === safeIndex ? "qp-rich-text-editor__slash-item--active" : ""),
-			onMouseEnter: () => setSelectedIndex(index),
+			className: cn("qp-rich-text-editor__slash-item", globalIndex === safeIndex ? "qp-rich-text-editor__slash-item--active" : ""),
+			onMouseEnter: () => setSelectedIndex(globalIndex),
 			onMouseDown: (event) => event.preventDefault(),
-			onClick: () => selectItem(index),
+			onClick: () => selectItem(globalIndex),
 			children: [item.icon && /* @__PURE__ */ jsx("span", {
 				className: "qp-rich-text-editor__slash-icon",
 				"aria-hidden": "true",
@@ -80,7 +103,7 @@ const SlashCommandList = React.forwardRef(function SlashCommandList$1({ items, c
 					children: item.description
 				})]
 			})]
-		}, item.title))]
+		}, item.title))] }, group.label ?? "ungrouped"))]
 	});
 });
 /**
@@ -92,7 +115,7 @@ function createSlashCommandExtension(getItems) {
 		addOptions() {
 			return { suggestion: {
 				char: "/",
-				startOfLine: true,
+				startOfLine: false,
 				command: ({ editor, range, props }) => {
 					editor.chain().focus().deleteRange(range).run();
 					props.command(editor);