@questpie/admin 3.5.2 → 3.5.4

package/README.md

@@ -65,6 +65,14 @@ export default adminConfig({
 
 Collections, globals, routes, and jobs are auto-discovered via file convention. Codegen produces a `.generated/index.ts` with the fully-typed `App` and runtime `app` instance.
 
+### Admin Auth Contract
+
+`@questpie/admin` expects the app to use `adminModule`'s starter Better Auth model, or an equivalent auth setup that exposes `session.user.role` on the active session.
+
+Access to the admin panel and admin RPC routes is granted only when `session.user.role === "admin"`. This includes admin config, content locale callbacks, preview URL/token generation, actions, widgets, and reactive field handlers. Authenticated users with `role: "user"` or a missing role are not admin users. The built-in setup route uses the same contract when checking for and creating the first admin user with `role = "admin"`.
+
+If you extend the Better Auth `user` collection, merge the starter user collection instead of replacing it from scratch. Custom user collections must preserve the role field and session role propagation used by the admin guard.
+
 ### Collection Admin Config
 
 Admin metadata, list views, and form views are defined on the collection itself:

package/dist/client/blocks/block-renderer.d.mts

@@ -1,6 +1,6 @@
 import { BlockContent } from "./types.mjs";
 import * as React from "react";
-import * as react_jsx_runtime25 from "react/jsx-runtime";
+import * as react_jsx_runtime54 from "react/jsx-runtime";
 
 //#region src/client/blocks/block-renderer.d.ts
 
@@ -50,6 +50,6 @@ declare function BlockRenderer({
   onBlockClick,
   onBlockInsert,
   className
-}: BlockRendererProps): react_jsx_runtime25.JSX.Element | null;
+}: BlockRendererProps): react_jsx_runtime54.JSX.Element | null;
 //#endregion
 export { BlockRenderer, BlockRendererProps };

package/dist/client/builder/index.d.mts

@@ -4,7 +4,7 @@ import { AnyWidgetConfig, WidgetAction, WidgetCardVariant, WidgetComponentProps,
 import { DashboardAction, DashboardConfig, DashboardLayoutItem, DashboardSection, DashboardTabConfig, DashboardTabs } from "./types/ui-config.mjs";
 import { AdminState } from "./admin-types.mjs";
 import { Admin, AppAdmin, InferAdminCMS } from "./admin.mjs";
-import { ComponentRegistry, FieldComponentProps, FieldLayoutItem, FormSidebarConfig, FormViewConfig, SectionLayout, TabConfig, TabsLayout } from "./types/field-types.mjs";
+import { ComponentRegistry, DocumentViewConfig, FieldComponentProps, FieldLayoutItem, FormSidebarConfig, FormViewConfig, SectionLayout, TabConfig, TabsLayout } from "./types/field-types.mjs";
 import { QuestpieApp, QuestpieClient } from "questpie/client";
 import { CollectionInfer } from "questpie";
 

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

@@ -1,8 +1,10 @@
-import "../../i18n/types.mjs";
-import { MaybeLazyComponent } from "./common.mjs";
+import { I18nText } from "../../i18n/types.mjs";
+import { IconComponent, MaybeLazyComponent } from "./common.mjs";
+import { ComponentReference } from "../../../server/augmentation/common.mjs";
+import { FilterRule, QuickFilterConfig } from "../../../shared/types/saved-views.types.mjs";
 import "../../../server/augmentation.mjs";
-import "../field/field.mjs";
-import "../admin.mjs";
+import { FieldDefinition } from "../field/field.mjs";
+import { Admin } from "../admin.mjs";
 import { ActionsConfig } from "./action-types.mjs";
 
 //#region src/client/builder/types/collection-types.d.ts
@@ -124,6 +126,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.
@@ -193,5 +203,79 @@ interface ListViewConfig<TFieldNames extends string = string> {
    */
   actions?: ActionsConfig;
 }
+/**
+ * Preview configuration for live preview in form view
+ */
+interface PreviewConfig {
+  /**
+   * URL builder function that returns preview URL for current form values
+   * @param values - Current form values
+   * @param locale - Current content locale
+   * @returns Preview URL string
+   */
+  url: (values: Record<string, unknown>, locale: string) => string;
+  /**
+   * Whether preview is enabled (default: true)
+   */
+  enabled?: boolean;
+  /**
+   * Position of the preview panel (default: "right")
+   */
+  position?: "right" | "bottom";
+  /**
+   * Default width/height percentage of preview panel (default: 50)
+   */
+  defaultWidth?: number;
+  /**
+   * Minimum width/height percentage (default: 30)
+   */
+  minWidth?: number;
+  /**
+   * Maximum width/height percentage (default: 70)
+   */
+  maxWidth?: number;
+}
+/**
+ * Autosave configuration for form view
+ */
+interface AutoSaveConfig {
+  /**
+   * Whether autosave is enabled
+   * @default false
+   */
+  enabled?: boolean;
+  /**
+   * Debounce delay in milliseconds before autosave triggers
+   * @default 500 (0.5s as specified)
+   */
+  debounce?: number;
+  /**
+   * Show autosave status indicator in form header
+   * @default true
+   */
+  indicator?: boolean;
+  /**
+   * Warn user before navigating away with unsaved changes
+   * @default true
+   */
+  preventNavigation?: boolean;
+}
+/**
+ * Collection builder state - internal state during building
+ */
+interface CollectionBuilderState<TAdminApp extends Admin<any> = Admin<any>> {
+  readonly name: string;
+  readonly "~adminApp": TAdminApp;
+  /** Display label - supports inline translations */
+  readonly label?: I18nText;
+  /** Description - supports inline translations */
+  readonly description?: I18nText;
+  readonly icon?: IconComponent | ComponentReference;
+  readonly fields?: Record<string, FieldDefinition>;
+  readonly list?: any;
+  readonly form?: any;
+  readonly preview?: PreviewConfig;
+  readonly autoSave?: AutoSaveConfig;
+}
 //#endregion
-export { ListViewConfig };
+export { CollectionBuilderState, ListViewConfig };

package/dist/client/builder/types/common.d.mts

@@ -39,6 +39,11 @@ type BaseFieldProps = {
   required?: boolean;
   localized?: boolean;
   locale?: string;
+  /**
+   * Render the control WITHOUT its own label/description. Used by compact
+   * layouts (e.g. Notion-style property rows) that supply the label themselves.
+   */
+  hideLabel?: boolean;
   control?: any;
   className?: string;
 };

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

@@ -578,6 +578,46 @@ interface FormViewActionsConfig<TItem = any> {
   /** Actions shown in dropdown menu (...) */
   secondary?: ActionDefinition<TItem>[];
 }
+/**
+ * Document view configuration — a Notion-style page with a dominant rich-text
+ * body and inline-editable property rows.
+ *
+ * No hardcoded field names: the consumer declares which field is the body, the
+ * (optional) title field, and which fields appear as properties. Defaults are
+ * data-driven (`properties: "auto"` derives from the schema).
+ *
+ * @example
+ * ```ts
+ * .form(({ v, f }) => v.collectionDocument({
+ *   document: {
+ *     body: f.body,
+ *     title: f.name,
+ *     properties: [f.scopeType, f.path, f.createdAt],
+ *     save: "autosave",
+ *   },
+ * }))
+ * ```
+ */
+interface DocumentViewConfig {
+  document: {
+    /** The dominant long-form field, rendered with the rich-text editor. */
+    body: string;
+    /**
+     * Property fields shown as inline-editable rows.
+     * - `"auto"` (default): all schema fields except body/title, in schema order.
+     * - `string[]`: an explicit, ordered list.
+     */
+    properties?: "auto" | string[];
+    /**
+     * Save behavior.
+     * - `"autosave"` (default): debounced autosave with a "Saved"/"Saving" indicator.
+     * - `"manual"`: a Save affordance with dirty tracking.
+     */
+    save?: "autosave" | "manual";
+    /** Optional page-title field; falls back to the record id/path. */
+    title?: string;
+  };
+}
 /**
  * Registry for custom field and widget components
  */
@@ -596,4 +636,4 @@ interface ComponentRegistry {
   custom?: Record<string, MaybeLazyComponent<any>>;
 }
 //#endregion
-export { ComponentRegistry, FieldComponentProps, FieldLayoutItem, FormSidebarConfig, FormViewConfig, SectionLayout, TabConfig, TabsLayout };
+export { ComponentRegistry, DocumentViewConfig, FieldComponentProps, FieldLayoutItem, FormSidebarConfig, FormViewConfig, SectionLayout, TabConfig, TabsLayout };

package/dist/client/builder/view/view.d.mts

@@ -3,9 +3,10 @@ import { MaybeLazyComponent } from "../types/common.mjs";
 //#region src/client/builder/view/view.d.ts
 
 /**
- * View kind discriminant — "list" for collection list pages, "form" for edit/create pages.
+ * View kind discriminant — "list" for collection list pages, "form" for edit/create pages,
+ * "document" for Notion-style document pages (dominant rich-text body + property rows).
  */
-type ViewKind = "list" | "form";
+type ViewKind = "list" | "form" | "document";
 /**
  * View definition — a registry entry mapping a view name to its component.
  *

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/admin-link.d.mts

@@ -1,6 +1,6 @@
 import { CollectionNames, GlobalNames } from "../builder/index.mjs";
 import * as React from "react";
-import * as react_jsx_runtime14 from "react/jsx-runtime";
+import * as react_jsx_runtime48 from "react/jsx-runtime";
 import { QuestpieApp } from "questpie/client";
 
 //#region src/client/components/admin-link.d.ts
@@ -61,6 +61,6 @@ declare function AdminLink<TApp extends QuestpieApp>({
   children,
   onClick,
   ...rest
-}: AdminLinkProps<TApp>): react_jsx_runtime14.JSX.Element;
+}: AdminLinkProps<TApp>): react_jsx_runtime48.JSX.Element;
 //#endregion
 export { AdminLink };

package/dist/client/components/fields/boolean-field.mjs

@@ -11,7 +11,7 @@ import { Controller } from "react-hook-form";
 * Unified boolean field component.
 * Renders as checkbox (default) or switch based on `displayAs` prop.
 */
-function BooleanField({ name, label, description, required, disabled, localized, locale, control, className, displayAs = "checkbox" }) {
+function BooleanField({ name, label, description, required, disabled, localized, locale, hideLabel, control, className, displayAs = "checkbox" }) {
 	return /* @__PURE__ */ jsx(Controller, {
 		name,
 		control: useResolvedControl(control),
@@ -23,6 +23,7 @@ function BooleanField({ name, label, description, required, disabled, localized,
 			disabled,
 			localized,
 			locale,
+			hideLabel,
 			error: fieldState.error?.message,
 			children: displayAs === "switch" ? /* @__PURE__ */ jsx(ToggleInput, {
 				id: name,

package/dist/client/components/fields/date-field.mjs

@@ -11,7 +11,7 @@ function parseDateFieldValue(value) {
 	const date = value instanceof Date ? value : new Date(String(value));
 	return Number.isNaN(date.getTime()) ? null : date;
 }
-function DateField({ name, label, description, placeholder, required, disabled, localized, locale, control, className, minDate, maxDate, format }) {
+function DateField({ name, label, description, placeholder, required, disabled, localized, locale, hideLabel, control, className, minDate, maxDate, format }) {
 	return /* @__PURE__ */ jsx(Controller, {
 		name,
 		control: useResolvedControl(control),
@@ -25,6 +25,7 @@ function DateField({ name, label, description, placeholder, required, disabled,
 				disabled,
 				localized,
 				locale,
+				hideLabel,
 				error: fieldState.error?.message,
 				children: /* @__PURE__ */ jsx(DateInput, {
 					id: name,

package/dist/client/components/fields/datetime-field.mjs

@@ -11,7 +11,7 @@ function parseDateTimeFieldValue(value) {
 	const date = value instanceof Date ? value : new Date(String(value));
 	return Number.isNaN(date.getTime()) ? null : date;
 }
-function DatetimeField({ name, label, description, placeholder, required, disabled, localized, locale, control, className, minDate, maxDate, format, precision }) {
+function DatetimeField({ name, label, description, placeholder, required, disabled, localized, locale, hideLabel, control, className, minDate, maxDate, format, precision }) {
 	return /* @__PURE__ */ jsx(Controller, {
 		name,
 		control: useResolvedControl(control),
@@ -25,6 +25,7 @@ function DatetimeField({ name, label, description, placeholder, required, disabl
 				disabled,
 				localized,
 				locale,
+				hideLabel,
 				error: fieldState.error?.message,
 				children: /* @__PURE__ */ jsx(DateTimeInput, {
 					id: name,

package/dist/client/components/fields/email-field.mjs

@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
 import { Controller } from "react-hook-form";
 
 //#region src/client/components/fields/email-field.tsx
-function EmailField({ name, label, description, placeholder, required, disabled, localized, locale, control, className }) {
+function EmailField({ name, label, description, placeholder, required, disabled, localized, locale, hideLabel, control, className }) {
 	return /* @__PURE__ */ jsx(Controller, {
 		name,
 		control: useResolvedControl(control),
@@ -18,6 +18,7 @@ function EmailField({ name, label, description, placeholder, required, disabled,
 			disabled,
 			localized,
 			locale,
+			hideLabel,
 			error: fieldState.error?.message,
 			children: /* @__PURE__ */ jsx(TextInput, {
 				id: name,

package/dist/client/components/fields/field-utils.d.mts

@@ -0,0 +1,11 @@
+import "react-hook-form";
+
+//#region src/client/components/fields/field-utils.d.ts
+
+/**
+ * Sanitize filename for safe storage.
+ * Removes special characters, replaces spaces with hyphens.
+ */
+declare function sanitizeFilename(filename: string): string;
+//#endregion
+export { sanitizeFilename };

package/dist/client/components/fields/field-utils.mjs

@@ -12,7 +12,9 @@ function useResolvedControl(control) {
 function sanitizeFilename(filename) {
 	const lastDot = filename.lastIndexOf(".");
 	const ext = lastDot > 0 ? filename.slice(lastDot) : "";
-	return ((lastDot > 0 ? filename.slice(0, lastDot) : filename).normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/\s+/g, "-").replace(/[^a-zA-Z0-9._-]/g, "").replace(/-+/g, "-").replace(/^-|-$/g, "").toLowerCase() || "file") + ext.toLowerCase();
+	const sanitized = (lastDot > 0 ? filename.slice(0, lastDot) : filename).normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/\s+/g, "-").replace(/[^a-zA-Z0-9._-]/g, "").replace(/-+/g, "-").replace(/^-|-$/g, "").toLowerCase();
+	const safeExt = ext.toLowerCase().replace(/[^a-z0-9.]/g, "");
+	return (sanitized || "file") + safeExt;
 }
 /**
 * Extract columns from collection list config.

package/dist/client/components/fields/field-wrapper.mjs

@@ -36,10 +36,10 @@ function FieldLocaleIndicator({ localized, locale }) {
 		showFlag: false
 	});
 }
-function FieldWrapper({ name, label, description, labelAccessory, required, disabled, readOnly, error, localized, locale, children, fieldPath }) {
+function FieldWrapper({ name, label, description, labelAccessory, required, disabled, readOnly, error, localized, locale, hideLabel, children, fieldPath }) {
 	const resolveText = useResolveText();
-	const resolvedLabel = label ? resolveText(label) : void 0;
-	const resolvedDescription = description ? resolveText(description) : void 0;
+	const resolvedLabel = hideLabel || !label ? void 0 : resolveText(label);
+	const resolvedDescription = hideLabel || !description ? void 0 : resolveText(description);
 	return /* @__PURE__ */ jsx(Field, {
 		"data-disabled": disabled,
 		"data-readonly": !disabled && readOnly,

package/dist/client/components/fields/number-field.mjs

@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
 import { Controller } from "react-hook-form";
 
 //#region src/client/components/fields/number-field.tsx
-function NumberField({ name, label, description, placeholder, required, disabled, localized, locale, control, className, min, max, step, showButtons }) {
+function NumberField({ name, label, description, placeholder, required, disabled, localized, locale, hideLabel, control, className, min, max, step, showButtons }) {
 	return /* @__PURE__ */ jsx(Controller, {
 		name,
 		control: useResolvedControl(control),
@@ -18,6 +18,7 @@ function NumberField({ name, label, description, placeholder, required, disabled
 			disabled,
 			localized,
 			locale,
+			hideLabel,
 			error: fieldState.error?.message,
 			children: /* @__PURE__ */ jsx(NumberInput, {
 				id: name,

package/dist/client/components/fields/object-field.mjs

@@ -26,7 +26,8 @@ function ObjectFieldPanel({ name, label, description, required, disabled, locali
 			type: "button",
 			variant: "ghost",
 			onClick: onToggle,
-			className: "h-auto min-h-10 w-full justify-between rounded-none px-3 py-2 text-left",
+			className: "hover:bg-surface-low aria-expanded:bg-surface-low h-auto min-h-12 w-full justify-between rounded-none px-4 py-3 text-left",
+			"aria-expanded": !isCollapsed,
 			disabled,
 			children: [/* @__PURE__ */ jsxs("span", {
 				className: "flex min-w-0 items-center gap-2",

package/dist/client/components/fields/relation/displays/types.mjs

@@ -1,4 +1,5 @@
 import { formatLabel } from "../../../../lib/utils.mjs";
+import { resolveAssetUrl } from "../../../../utils/asset-url.mjs";
 import { DefaultCell } from "../../../../views/collection/cells/primitive-cells.mjs";
 
 //#region src/client/components/fields/relation/displays/types.ts
@@ -31,9 +32,8 @@ function formatCellValue(value) {
 function getImageUrl(item, imageField) {
 	if (!imageField) return null;
 	const imageValue = item[imageField];
-	if (typeof imageValue === "string") return imageValue;
-	if (imageValue?.url) return imageValue.url;
-	if (imageValue?.key) return imageValue.key;
+	if (typeof imageValue === "string") return resolveAssetUrl(imageValue) ?? null;
+	if (imageValue?.url) return resolveAssetUrl(imageValue.url) ?? null;
 	return null;
 }
 /**

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;
@@ -54,12 +55,13 @@ const defaultLabels = {
 * (i.e. codeBlock disabled, or lowlight already cached). Only returns a
 * `Promise` on the first build that includes codeBlock.
 */
-function buildExtensions({ features, labels, placeholder, maxCharacters, customExtensions }) {
+function buildExtensions({ features, labels, placeholder, maxCharacters, outputMode, customExtensions }) {
 	const base = buildBaseExtensions({
 		features,
 		labels,
 		placeholder,
 		maxCharacters,
+		outputMode,
 		customExtensions
 	});
 	if (!features.codeBlock) return base;
@@ -67,7 +69,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 +99,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 +121,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 +129,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 +137,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 +145,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 +153,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 +161,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 +169,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 +179,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/image-popover.mjs

@@ -1,6 +1,7 @@
 import { useTranslation } from "../../../i18n/hooks.mjs";
 import { Button } from "../../ui/button.mjs";
 import { Input } from "../../ui/input.mjs";
+import { resolveAssetUrl } from "../../../utils/asset-url.mjs";
 import { Popover, PopoverContent, PopoverHeader, PopoverTitle, PopoverTrigger } from "../../ui/popover.mjs";
 import { MediaPickerDialog } from "../../media/media-picker-dialog.mjs";
 import { useRichTextImageUpload } from "./image-upload.mjs";
@@ -76,7 +77,7 @@ function ImagePopover({ editor, open, onOpenChange, disabled, onImageUpload, ima
 			return;
 		}
 		editor.chain().focus().setImage({
-			src: asset.url,
+			src: resolveAssetUrl(asset.url) ?? asset.url,
 			alt: imageAlt || asset.alt || void 0
 		}).run();
 		setImageUrl("");
@@ -95,7 +96,10 @@ function ImagePopover({ editor, open, onOpenChange, disabled, onImageUpload, ima
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Popover, {
 		open,
 		onOpenChange,
-		children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: /* @__PURE__ */ jsx("div", { className: "sr-only" }) }), /* @__PURE__ */ jsxs(PopoverContent, {
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			nativeButton: false,
+			render: /* @__PURE__ */ jsx("div", { className: "sr-only" })
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
 			className: "w-80",
 			children: [/* @__PURE__ */ jsx(PopoverHeader, { children: /* @__PURE__ */ jsx(PopoverTitle, { children: t("editor.image") }) }), /* @__PURE__ */ jsxs("div", {
 				className: "space-y-3",

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

@@ -1,5 +1,6 @@
 import { useTranslation } from "../../../i18n/hooks.mjs";
 import { sanitizeFilename } from "../field-utils.mjs";
+import { resolveAssetUrl } from "../../../utils/asset-url.mjs";
 import { useUploadCollection } from "../../../hooks/use-upload-collection.mjs";
 import { useUpload } from "../../../hooks/use-upload.mjs";
 import * as React from "react";
@@ -35,7 +36,7 @@ function useRichTextImageUpload({ imageCollection, onImageUpload }) {
 			const sanitizedName = sanitizeFilename(file.name);
 			const uploadedAsset = await upload(sanitizedName === file.name ? file : new File([file], sanitizedName, { type: file.type }), { to: collection });
 			if (!uploadedAsset?.url) throw new Error(t("upload.error"));
-			return uploadedAsset.url;
+			return resolveAssetUrl(uploadedAsset.url) ?? uploadedAsset.url;
 		}, [
 			collection,
 			collections,

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

@@ -1,5 +1,5 @@
 import { RichTextEditorProps } from "./types.mjs";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime33 from "react/jsx-runtime";
 
 //#region src/client/components/fields/rich-text-editor/index.d.ts
 
@@ -24,6 +24,7 @@ declare function RichTextEditor({
   error,
   localized,
   locale,
+  hideLabel,
   extensions,
   preset,
   features,
@@ -32,7 +33,8 @@ declare function RichTextEditor({
   enableImages,
   onImageUpload,
   imageCollection,
-  enableMediaLibrary
-}: RichTextEditorProps): react_jsx_runtime0.JSX.Element;
+  enableMediaLibrary,
+  outputMode
+}: RichTextEditorProps): react_jsx_runtime33.JSX.Element;
 //#endregion
 export { RichTextEditor };