@questpie/admin 3.5.2 → 3.5.4

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, hideLabel, 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
 	]);
@@ -163,7 +137,7 @@ function RichTextEditor({ name, value, onChange, disabled, readOnly, label, desc
 		className: "space-y-2",
 		"data-disabled": disabled || readOnly,
 		children: [
-			resolvedLabel && /* @__PURE__ */ jsxs("div", {
+			!hideLabel && resolvedLabel && /* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2",
 				children: [/* @__PURE__ */ jsxs(Label, {
 					htmlFor: name,
@@ -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,17 +188,16 @@ 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);
 	const [uploadingInlineImage, setUploadingInlineImage] = React.useState(false);
-	const lastEmittedValueRef = React.useRef(void 0);
+	const lastEmittedValueRef = React.useRef(value);
 	const editorRef = React.useRef(null);
 	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,8 @@ 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);
+			if (isSameValue(nextValue, lastEmittedValueRef.current)) return;
 			lastEmittedValueRef.current = nextValue;
 			onChange?.(nextValue);
 		}
@@ -350,7 +323,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 +344,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 +360,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 +381,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);

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

@@ -1,9 +1,5 @@
-import { useTranslation } from "../../../i18n/hooks.mjs";
 import { cn } from "../../../lib/utils.mjs";
 import { Button } from "../../ui/button.mjs";
-import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from "../../ui/select.mjs";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger } from "../../ui/dropdown-menu.mjs";
-import { TableControls } from "./table-controls.mjs";
 import { Icon } from "@iconify/react";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -43,36 +39,6 @@ const EDITOR_ICONS = {
 	insert: "ph:plus",
 	more: "ph:dots-three-vertical"
 };
-const HEADING_OPTIONS = [
-	{
-		value: "paragraph",
-		group: "text"
-	},
-	{
-		value: "1",
-		group: "heading"
-	},
-	{
-		value: "2",
-		group: "heading"
-	},
-	{
-		value: "3",
-		group: "heading"
-	},
-	{
-		value: "4",
-		group: "heading"
-	},
-	{
-		value: "5",
-		group: "heading"
-	},
-	{
-		value: "6",
-		group: "heading"
-	}
-];
 const ALIGNMENT_OPTIONS = [
 	{
 		value: "left",
@@ -95,16 +61,6 @@ const ALIGNMENT_OPTIONS = [
 		labelKey: "editor.alignJustify"
 	}
 ];
-function getHeadingOptionLabel(value, t) {
-	if (value === "paragraph") return t("editor.paragraph");
-	return t("editor.heading", { level: value });
-}
-function getCurrentAlignment(editor) {
-	if (editor.isActive({ textAlign: "center" })) return "center";
-	if (editor.isActive({ textAlign: "right" })) return "right";
-	if (editor.isActive({ textAlign: "justify" })) return "justify";
-	return "left";
-}
 /**
 * Icon-based toolbar button with tooltip showing keyboard shortcuts
 */
@@ -132,273 +88,6 @@ function ToolbarButton({ active, disabled, title, onClick, icon: iconName, child
 		}) : children
 	});
 }
-/**
-* Toolbar button group with divider
-*/
-function ToolbarGroup({ children }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: "flex items-center gap-1",
-		role: "group",
-		children
-	});
-}
-function ToolbarMenuItem({ active, disabled, icon, label, onClick, shortcut }) {
-	return /* @__PURE__ */ jsxs(DropdownMenuItem, {
-		"aria-current": active ? "true" : void 0,
-		disabled,
-		onClick,
-		className: cn("min-w-44", active ? "bg-accent text-accent-foreground" : ""),
-		children: [
-			/* @__PURE__ */ jsx(Icon, {
-				"aria-hidden": "true",
-				icon
-			}),
-			/* @__PURE__ */ jsx("span", { children: label }),
-			shortcut ? /* @__PURE__ */ jsx(DropdownMenuShortcut, { children: shortcut }) : active ? /* @__PURE__ */ jsx(Icon, {
-				"aria-hidden": "true",
-				icon: "ph:check",
-				className: "ml-auto size-3.5"
-			}) : null
-		]
-	});
-}
-/**
-* Main toolbar component with icon-based buttons
-*/
-function RichTextToolbar({ editor, features, disabled, headingValue, onHeadingChange, onLinkClick, onImageClick, onTableClick, inTable }) {
-	const { t } = useTranslation();
-	const isEditable = !disabled;
-	const currentAlignment = getCurrentAlignment(editor);
-	const currentAlignmentOption = ALIGNMENT_OPTIONS.find((option) => option.value === currentAlignment) ?? ALIGNMENT_OPTIONS[0];
-	const hasMoreFormatting = features.underline || features.strike || features.code;
-	const hasBlockMenu = features.bulletList || features.orderedList || features.blockquote || features.codeBlock || features.horizontalRule;
-	const hasInsertMenu = features.link || features.image || features.table;
-	return /* @__PURE__ */ jsxs("div", {
-		"aria-label": t("editor.richTextToolbar"),
-		className: "qp-rich-text-editor__toolbar border-border-subtle bg-surface-low flex flex-nowrap items-center gap-1.5 overflow-x-auto border-b p-1.5",
-		role: "toolbar",
-		children: [
-			features.history && /* @__PURE__ */ jsxs(ToolbarGroup, { children: [/* @__PURE__ */ jsx(ToolbarButton, {
-				icon: EDITOR_ICONS.undo,
-				disabled: !isEditable || !editor.can().undo(),
-				title: t("editor.undo"),
-				shortcut: "⌘Z",
-				onClick: () => editor.chain().focus().undo().run()
-			}), /* @__PURE__ */ jsx(ToolbarButton, {
-				icon: EDITOR_ICONS.redo,
-				disabled: !isEditable || !editor.can().redo(),
-				title: t("editor.redo"),
-				shortcut: "⌘⇧Z",
-				onClick: () => editor.chain().focus().redo().run()
-			})] }),
-			features.heading && /* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsxs(Select, {
-				value: headingValue,
-				disabled: !isEditable,
-				onValueChange: (value) => {
-					if (typeof value === "string") onHeadingChange(value);
-				},
-				children: [/* @__PURE__ */ jsx(SelectTrigger, {
-					"aria-label": t("editor.blockType"),
-					className: "h-8 min-w-[136px] px-2.5 text-sm",
-					size: "sm",
-					children: /* @__PURE__ */ jsx(SelectValue, { children: HEADING_OPTIONS.find((option) => option.value === headingValue)?.value ? getHeadingOptionLabel(HEADING_OPTIONS.find((option) => option.value === headingValue)?.value ?? "paragraph", t) : t("editor.paragraph") })
-				}), /* @__PURE__ */ jsxs(SelectContent, {
-					align: "start",
-					className: "min-w-[136px]",
-					children: [
-						/* @__PURE__ */ jsxs(SelectGroup, { children: [/* @__PURE__ */ jsx(SelectLabel, { children: t("editor.textBlocks") }), /* @__PURE__ */ jsx(SelectItem, {
-							value: "paragraph",
-							children: t("editor.paragraph")
-						})] }),
-						/* @__PURE__ */ jsx(SelectSeparator, {}),
-						/* @__PURE__ */ jsxs(SelectGroup, { children: [/* @__PURE__ */ jsx(SelectLabel, { children: t("editor.headings") }), HEADING_OPTIONS.filter((option) => option.group === "heading").map((option) => /* @__PURE__ */ jsx(SelectItem, {
-							value: option.value,
-							children: getHeadingOptionLabel(option.value, t)
-						}, option.value))] })
-					]
-				})]
-			}) }),
-			/* @__PURE__ */ jsxs(ToolbarGroup, { children: [
-				features.bold && /* @__PURE__ */ jsx(ToolbarButton, {
-					icon: EDITOR_ICONS.bold,
-					active: editor.isActive("bold"),
-					disabled: !isEditable,
-					title: t("editor.bold"),
-					shortcut: "⌘B",
-					onClick: () => editor.chain().focus().toggleBold().run()
-				}),
-				features.italic && /* @__PURE__ */ jsx(ToolbarButton, {
-					icon: EDITOR_ICONS.italic,
-					active: editor.isActive("italic"),
-					disabled: !isEditable,
-					title: t("editor.italic"),
-					shortcut: "⌘I",
-					onClick: () => editor.chain().focus().toggleItalic().run()
-				}),
-				hasMoreFormatting && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
-					nativeButton: false,
-					render: /* @__PURE__ */ jsx(ToolbarButton, {
-						icon: EDITOR_ICONS.formatting,
-						active: editor.isActive("underline") || editor.isActive("strike") || editor.isActive("code"),
-						disabled: !isEditable,
-						title: t("editor.moreFormatting")
-					})
-				}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
-					align: "start",
-					className: "w-56",
-					children: [
-						/* @__PURE__ */ jsx(DropdownMenuLabel, { children: t("editor.formatting") }),
-						features.underline && /* @__PURE__ */ jsx(ToolbarMenuItem, {
-							icon: EDITOR_ICONS.underline,
-							active: editor.isActive("underline"),
-							disabled: !isEditable,
-							label: t("editor.underline"),
-							shortcut: "⌘U",
-							onClick: () => editor.chain().focus().toggleUnderline().run()
-						}),
-						features.strike && /* @__PURE__ */ jsx(ToolbarMenuItem, {
-							icon: EDITOR_ICONS.strikethrough,
-							active: editor.isActive("strike"),
-							disabled: !isEditable,
-							label: t("editor.strikethrough"),
-							onClick: () => editor.chain().focus().toggleStrike().run()
-						}),
-						features.code && /* @__PURE__ */ jsx(ToolbarMenuItem, {
-							icon: EDITOR_ICONS.code,
-							active: editor.isActive("code"),
-							disabled: !isEditable,
-							label: t("editor.code"),
-							shortcut: "⌘E",
-							onClick: () => editor.chain().focus().toggleCode().run()
-						})
-					]
-				})] })
-			] }),
-			hasBlockMenu && /* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
-				nativeButton: false,
-				render: /* @__PURE__ */ jsx(ToolbarButton, {
-					icon: EDITOR_ICONS.blocks,
-					active: editor.isActive("bulletList") || editor.isActive("orderedList") || editor.isActive("blockquote") || editor.isActive("codeBlock"),
-					disabled: !isEditable,
-					title: t("editor.blocks")
-				})
-			}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
-				align: "start",
-				className: "w-56",
-				children: [
-					/* @__PURE__ */ jsx(DropdownMenuLabel, { children: t("editor.list") }),
-					features.bulletList && /* @__PURE__ */ jsx(ToolbarMenuItem, {
-						icon: EDITOR_ICONS.bulletList,
-						active: editor.isActive("bulletList"),
-						disabled: !isEditable,
-						label: t("editor.unorderedList"),
-						onClick: () => editor.chain().focus().toggleBulletList().run()
-					}),
-					features.orderedList && /* @__PURE__ */ jsx(ToolbarMenuItem, {
-						icon: EDITOR_ICONS.orderedList,
-						active: editor.isActive("orderedList"),
-						disabled: !isEditable,
-						label: t("editor.orderedList"),
-						onClick: () => editor.chain().focus().toggleOrderedList().run()
-					}),
-					(features.blockquote || features.codeBlock || features.horizontalRule) && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-					features.blockquote && /* @__PURE__ */ jsx(ToolbarMenuItem, {
-						icon: EDITOR_ICONS.blockquote,
-						active: editor.isActive("blockquote"),
-						disabled: !isEditable,
-						label: t("editor.quote"),
-						onClick: () => editor.chain().focus().toggleBlockquote().run()
-					}),
-					features.codeBlock && /* @__PURE__ */ jsx(ToolbarMenuItem, {
-						icon: EDITOR_ICONS.codeBlock,
-						active: editor.isActive("codeBlock"),
-						disabled: !isEditable,
-						label: t("editor.codeBlock"),
-						onClick: () => editor.chain().focus().toggleCodeBlock().run()
-					}),
-					features.horizontalRule && /* @__PURE__ */ jsx(ToolbarMenuItem, {
-						icon: EDITOR_ICONS.horizontalRule,
-						disabled: !isEditable,
-						label: t("editor.horizontalRule"),
-						onClick: () => editor.chain().focus().setHorizontalRule().run()
-					})
-				]
-			})] }) }),
-			features.align && /* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
-				nativeButton: false,
-				render: /* @__PURE__ */ jsx(ToolbarButton, {
-					icon: currentAlignmentOption.icon,
-					active: currentAlignment !== "left",
-					disabled: !isEditable,
-					title: t("editor.alignment")
-				})
-			}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
-				align: "start",
-				className: "w-56",
-				children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: t("editor.alignment") }), /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
-					value: currentAlignment,
-					onValueChange: (value) => {
-						editor.chain().focus().setTextAlign(value).run();
-					},
-					children: ALIGNMENT_OPTIONS.map((option) => /* @__PURE__ */ jsxs(DropdownMenuRadioItem, {
-						value: option.value,
-						disabled: !isEditable,
-						children: [/* @__PURE__ */ jsx(Icon, {
-							"aria-hidden": "true",
-							icon: option.icon
-						}), /* @__PURE__ */ jsx("span", { children: t(option.labelKey) })]
-					}, option.value))
-				})]
-			})] }) }),
-			hasInsertMenu && /* @__PURE__ */ jsxs(ToolbarGroup, { children: [/* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
-				nativeButton: false,
-				render: /* @__PURE__ */ jsx(ToolbarButton, {
-					icon: EDITOR_ICONS.insert,
-					active: editor.isActive("link"),
-					disabled: !isEditable,
-					title: t("editor.insert")
-				})
-			}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
-				align: "start",
-				className: "w-56",
-				children: [
-					/* @__PURE__ */ jsx(DropdownMenuLabel, { children: t("editor.insert") }),
-					features.link && /* @__PURE__ */ jsx(ToolbarMenuItem, {
-						icon: EDITOR_ICONS.link,
-						active: editor.isActive("link"),
-						disabled: !isEditable,
-						label: t("editor.link"),
-						shortcut: "⌘K",
-						onClick: onLinkClick
-					}),
-					features.image && /* @__PURE__ */ jsx(ToolbarMenuItem, {
-						icon: EDITOR_ICONS.image,
-						disabled: !isEditable,
-						label: t("editor.image"),
-						onClick: onImageClick
-					}),
-					features.table && /* @__PURE__ */ jsx(ToolbarMenuItem, {
-						icon: EDITOR_ICONS.table,
-						active: inTable,
-						disabled: !isEditable,
-						label: t("editor.table"),
-						onClick: onTableClick
-					})
-				]
-			})] }), features.table && features.tableControls && inTable && /* @__PURE__ */ jsx(TableControls, {
-				editor,
-				disabled: !isEditable,
-				inTable,
-				triggerButton: /* @__PURE__ */ jsx(ToolbarButton, {
-					icon: EDITOR_ICONS.table,
-					active: inTable,
-					disabled: !isEditable,
-					title: t("editor.table")
-				})
-			})] })
-		]
-	});
-}
 
 //#endregion
-export { EDITOR_ICONS, RichTextToolbar, ToolbarButton };
+export { EDITOR_ICONS, ToolbarButton };

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

@@ -72,6 +72,10 @@ interface RichTextEditorProps extends FieldComponentProps<any> {
    * Enable media library picker for images
    */
   enableMediaLibrary?: boolean;
+  /**
+   * Output mode: "json" (default TipTap JSON) or "markdown" (plain markdown string)
+   */
+  outputMode?: "json" | "markdown";
 }
 //#endregion
 export { RichTextEditorProps };

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

@@ -3,7 +3,7 @@
 * Default feature configuration (all enabled)
 */
 const defaultFeatures = {
-	toolbar: true,
+	toolbar: false,
 	bubbleMenu: true,
 	slashCommands: true,
 	history: true,