Rich text field

mode is the only option the factory takes, and it defaults to "json". The mode is recorded on the field metadata as outputMode, which is how the editor knows whether to emit a document or a string.

import { collection } from "#questpie/factories";

export const posts = collection("posts").fields(({ f }) => ({
	title: f.text(255).required(),
	body: f.richText().label("Body").required(),
	notes: f.richText({ mode: "markdown" }).label("Internal notes"),
}));

Chain

richText declares no methods of its own. The first four rows are base field methods that work on any type. .admin() is not one of them. The admin plugin registers it as a field extension and codegen wraps every factory with it.

Editor options

.admin() config travels to the browser with the collection schema, so the editor reads plain data. These are the keys it acts on.

content: f.richText().label("Content").admin({
	preset: "simple",
	features: { image: true },
	showCharacterCount: true,
	maxCharacters: 5000,
	imageCollection: "media",
}),

Inline image uploads go through the collection you name. Without imageCollection the editor falls back to the admin's default upload collection, or to the only one your app has. Several collections and no default raises an error naming them.

Presets

The feature keys are toolbar, bubbleMenu, slashCommands, history, heading, bold, italic, underline, strike, code, codeBlock, blockquote, bulletList, orderedList, horizontalRule, align, link, image, table, tableControls, characterCount.

Filtering

A json-mode field defines five operators of its own.

const { docs } = await app.collections.posts.find({
	where: { body: { contains: "changelog", isNotEmpty: true } },
});

contains reads the words an editor typed, not node types or attribute values. For which section types a page holds, reach for f.blocks() and its hasBlockType operator.

In json mode the four flag operators ignore their operand. { isEmpty: false } asserts the same condition as { isEmpty: true }, so negate by using the opposite operator or a NOT group.

A markdown-mode field stores plain text, so it filters with the standard string operators instead: eq, ne, contains, startsWith, endsWith, like, ilike, in, isNull, isNotNull and the rest of that set, matching against the raw markdown. isEmpty and isNotEmpty belong to json mode.

Types

The document types ship from @questpie/admin/fields.

interface TipTapDocument {
	type: "doc";
	content?: TipTapNode[];
}

interface TipTapNode {
	type: string;
	attrs?: Record<string, any>;
	content?: TipTapNode[];
	marks?: Array<{ type: string; attrs?: Record<string, any> }>;
	text?: string;
}

import type { TipTapDocument } from "@questpie/admin/fields";

type Post = typeof posts.$infer.select;
//   ^? { ...; body: TipTapDocument; notes: string | null }

That subpath also exports the richText factory itself, richTextFieldType, RichTextFieldState, the augmentable RichTextFieldMeta and RichTextFeature. Ignore that last one, it is a stale union nothing reads and it is not the feature list above. RichTextMode and RichTextOptions never leave the package.

Related

• Fields, every type and the column it produces
• Blocks, stacked and reorderable sections rather than one prose document
• Textarea field, a plain multi-line string
• Validation, tuning the generated Zod schemas