@wtfalch/design 0.11.0 → 0.12.0

package/README.md

@@ -194,6 +194,36 @@ Icons and illustrations are the system's, shared by every product the way
 `Button` is. A product wanting its own inside the package's components is a
 case nobody has had; when it comes, the product entry is where to bind it.
 
+## Rich text
+
+Prose, written and drawn, added in `0.11.0` for the CMS and the forum.
+
+```tsx
+import { RichText, isEmptyRichText } from '@wtfalch/design'      // drawing it
+import { RichTextEditor } from '@wtfalch/design/editor'          // writing it
+import { richTextSchema } from '@wtfalch/design/rich-text'       // storing it
+```
+
+Three entries and not one, because they cost different things. Drawing prose
+is a server component with no dependencies. Writing it loads TipTap, which is
+ProseMirror, and a site that only reads should not download an editor.
+Validating it needs zod. TipTap and zod are **optional peer dependencies**:
+install them if you import those entries, and the front door works without
+either.
+
+**The restriction is the component.** The toolbar offers two heading levels,
+bold, italic, a link and two kinds of list. `richTextSchema` admits exactly
+those and `RichText` draws exactly those, so a document cannot contain
+something a page cannot render — and a consumer that validates on the way
+into its database gets that guarantee against a crafted request too, not just
+against the toolbar. Tables, colours, fonts, code blocks and quotes are off,
+each one a line in the component with the reason beside it. A seventh thing
+is added in all three places, on purpose.
+
+Nothing here produces an HTML string: `RichText` walks the value into React
+elements, so there is no sanitiser to configure and none to get wrong. That
+is the difference from `Markdown`, which parses and must sanitise.
+
 ## Status
 
 `0.3.1`. Twenty-eight components, every one of the 70 gallery specimens

package/dist/components/RichText.d.ts

@@ -0,0 +1,24 @@
+import type { RichTextValue } from '../rich-text/schema.js';
+/**
+ * Rich text, drawn.
+ *
+ * The reading half of the pair: `RichTextEditor` writes the value, this
+ * draws it, and `richTextSchema` is what they both agree on. A server
+ * component — no hooks, no handlers — so a page that only shows prose never
+ * loads an editor.
+ *
+ * **No HTML string anywhere in this file**, which is the whole security
+ * argument and the difference from `Markdown`. Nothing is parsed and nothing
+ * is injected, so there is no sanitiser whose configuration could be wrong.
+ * A value that has been through `richTextSchema` holds only the small closed
+ * set below; one that has not is still safe here, because a node this has no
+ * case for is skipped rather than trusted.
+ *
+ * **Every outward link gets `rel="noopener noreferrer"`.** The prose is
+ * written by somebody, and where a reader came from is not the destination's
+ * business.
+ */
+export default function RichText({ value, className, }: {
+    value: RichTextValue;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/RichText.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Rich text, drawn.
+ *
+ * The reading half of the pair: `RichTextEditor` writes the value, this
+ * draws it, and `richTextSchema` is what they both agree on. A server
+ * component — no hooks, no handlers — so a page that only shows prose never
+ * loads an editor.
+ *
+ * **No HTML string anywhere in this file**, which is the whole security
+ * argument and the difference from `Markdown`. Nothing is parsed and nothing
+ * is injected, so there is no sanitiser whose configuration could be wrong.
+ * A value that has been through `richTextSchema` holds only the small closed
+ * set below; one that has not is still safe here, because a node this has no
+ * case for is skipped rather than trusted.
+ *
+ * **Every outward link gets `rel="noopener noreferrer"`.** The prose is
+ * written by somebody, and where a reader came from is not the destination's
+ * business.
+ */
+export default function RichText({ value, className, }) {
+    return (_jsx("div", { className: className ? `rich-text ${className}` : 'rich-text', children: (value.content ?? []).map((node, index) => renderBlock(node, index)) }));
+}
+function renderBlock(node, key) {
+    switch (node.type) {
+        case 'paragraph':
+            return _jsx("p", { children: renderInline(node.content) }, key);
+        case 'heading':
+            return node.attrs.level === 2 ? (_jsx("h2", { children: renderInline(node.content) }, key)) : (_jsx("h3", { children: renderInline(node.content) }, key));
+        case 'bulletList':
+            return _jsx("ul", { children: (node.content ?? []).map((item, i) => renderItem(item, i)) }, key);
+        case 'orderedList':
+            return (_jsx("ol", { start: node.attrs?.start, children: (node.content ?? []).map((item, i) => renderItem(item, i)) }, key));
+        default:
+            return null;
+    }
+}
+function renderItem(item, key) {
+    return (_jsx("li", { children: item.content.map((paragraph, i) => (
+        // The index is the right key here and in `renderInline`: this draws a
+        // finished value, the list is never reordered, inserted into or
+        // filtered, and the text is not unique — two paragraphs both saying
+        // "Yes" are two paragraphs.
+        // biome-ignore lint/suspicious/noArrayIndexKey: a finished value, never reconciled
+        _jsx("p", { children: renderInline(paragraph.content) }, i))) }, key));
+}
+function renderInline(content) {
+    if (!content || content.length === 0)
+        return null;
+    return content.map((node, index) => {
+        let element = node.text;
+        // Applied innermost first, so the order the marks arrive in cannot change
+        // the nesting: the link is always outermost, which is what a reader
+        // clicks and what a screen reader announces.
+        for (const mark of node.marks ?? []) {
+            if (mark.type === 'bold')
+                element = _jsx("strong", { children: element });
+            if (mark.type === 'italic')
+                element = _jsx("em", { children: element });
+        }
+        const link = (node.marks ?? []).find((mark) => mark.type === 'link');
+        if (link && link.type === 'link') {
+            const external = /^https?:\/\//i.test(link.attrs.href);
+            element = (_jsx("a", { href: link.attrs.href, ...(external ? { rel: 'noopener noreferrer' } : {}), children: element }));
+        }
+        // biome-ignore lint/suspicious/noArrayIndexKey: a finished value, never reconciled
+        return _jsx("span", { children: element }, index);
+    });
+}

package/dist/components/RichTextEditor.d.ts

@@ -0,0 +1,32 @@
+import type { RichTextValue } from '../rich-text/schema.js';
+/**
+ * Writing prose, with a toolbar that offers six things.
+ *
+ * **The restriction is the component.** TipTap is ProseMirror, which will
+ * model tables, colours, fonts, code blocks and arbitrary nesting given the
+ * chance. Every one of those is switched off below. What is left — two
+ * heading levels, bold, italic, a link and two kinds of list — is exactly
+ * what `richTextSchema` admits and exactly what `RichText` can draw, so the
+ * three cannot disagree about what a document may contain. A consumer that
+ * wants a seventh thing adds it in all three places, on purpose, rather than
+ * discovering that a paste brought one in.
+ *
+ * **`immediatelyRender: false`** because this will be rendered on a server
+ * first: without it TipTap builds a document during SSR and React finds a
+ * different one on hydration.
+ *
+ * **The value is TipTap's JSON**, handed back on every change. The component
+ * holds no copy of it: the consumer owns the document, which is what lets an
+ * editor sit inside a larger form that saves everything at once.
+ *
+ * TipTap is an optional peer dependency. Import this entry and you need it;
+ * import the package's front door and you do not.
+ */
+export default function RichTextEditor({ value, onChange, label, placeholder, className, }: {
+    value: RichTextValue;
+    onChange: (value: RichTextValue) => void;
+    /** What this field is, for a screen reader and for the toolbar's own name. */
+    label: string;
+    placeholder?: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/RichTextEditor.js

@@ -0,0 +1,163 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* Client, because this module calls hooks and attaches handlers. It is also
+   the only component in the package that loads an editor, which is why it
+   ships from its own entry (`@wtfalch/design/editor`) rather than the front
+   door: a site that renders prose should not download one to do it. */
+import Link from '@tiptap/extension-link';
+import { Placeholder } from '@tiptap/extensions';
+import { EditorContent, useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { useCallback } from 'react';
+import Button from './Button.js';
+/**
+ * Writing prose, with a toolbar that offers six things.
+ *
+ * **The restriction is the component.** TipTap is ProseMirror, which will
+ * model tables, colours, fonts, code blocks and arbitrary nesting given the
+ * chance. Every one of those is switched off below. What is left — two
+ * heading levels, bold, italic, a link and two kinds of list — is exactly
+ * what `richTextSchema` admits and exactly what `RichText` can draw, so the
+ * three cannot disagree about what a document may contain. A consumer that
+ * wants a seventh thing adds it in all three places, on purpose, rather than
+ * discovering that a paste brought one in.
+ *
+ * **`immediatelyRender: false`** because this will be rendered on a server
+ * first: without it TipTap builds a document during SSR and React finds a
+ * different one on hydration.
+ *
+ * **The value is TipTap's JSON**, handed back on every change. The component
+ * holds no copy of it: the consumer owns the document, which is what lets an
+ * editor sit inside a larger form that saves everything at once.
+ *
+ * TipTap is an optional peer dependency. Import this entry and you need it;
+ * import the package's front door and you do not.
+ */
+export default function RichTextEditor({ value, onChange, label, placeholder, className, }) {
+    const editor = useEditor({
+        extensions: [
+            StarterKit.configure({
+                // Left on: paragraph, text, bold, italic, the two lists, listItem,
+                // history, and the two cursors that make dragging sane.
+                heading: { levels: [2, 3] },
+                // Off, each one a decision rather than an oversight. A code block and
+                // a quote are shapes a block-based consumer expresses as their own
+                // blocks; a horizontal rule is a spacer, and spacing belongs to the
+                // theme; strike and inline code are marks nobody asked for, and every
+                // one of them is another thing two documents can disagree about.
+                codeBlock: false,
+                blockquote: false,
+                horizontalRule: false,
+                strike: false,
+                code: false,
+                // Configured separately below, so its defaults — which allow any
+                // scheme — never apply.
+                link: false,
+            }),
+            // What an empty editor says. TipTap's own extension rather than a CSS
+            // rule of ours: `attr()` reads the attribute of the element the
+            // pseudo-element belongs to, so a rule on the paragraph cannot reach a
+            // `data-placeholder` on the box, and ProseMirror's empty paragraph
+            // holds a trailing `<br>` so `:empty` never matches it either. Both of
+            // those were tried, and the picture of the second is why this is here.
+            Placeholder.configure({ placeholder: placeholder ?? '' }),
+            Link.configure({
+                openOnClick: false,
+                autolink: false,
+                // The same three `richTextSchema` admits. This is the first of two
+                // gates and the schema is the one that counts.
+                protocols: ['http', 'https', 'mailto'],
+                HTMLAttributes: { rel: 'noopener noreferrer' },
+            }),
+        ],
+        content: value,
+        immediatelyRender: false,
+        editorProps: {
+            attributes: {
+                // `rich-text` styles the elements ProseMirror builds; the rest is
+                // this surface's own box, which is ours to draw. Two of the largest
+                // spacing step is about six lines — enough to write a paragraph in
+                // without the box growing under the cursor on the first one.
+                class: 'rich-text p-3 min-h-[calc(var(--space-15)*2)] outline-none',
+                // A contenteditable div is a `generic` to an accessibility tree, and
+                // `aria-label` is prohibited on a generic — axe said so on the first
+                // run, which is what the suite is for. `textbox` with
+                // `aria-multiline` is what a rich text area is, and it is what makes
+                // the label legal and announced.
+                role: 'textbox',
+                'aria-multiline': 'true',
+                'aria-label': label,
+            },
+        },
+        onUpdate: ({ editor: instance }) => onChange(instance.getJSON()),
+    });
+    const setLink = useCallback(() => {
+        if (!editor)
+            return;
+        const current = editor.getAttributes('link').href;
+        // A prompt rather than a dialog: it is one field, it is modal either way,
+        // and a dialog here would be the first piece of state this component has
+        // to own. Worth replacing the day a link needs a second field.
+        const href = window.prompt('Link to', current ?? 'https://');
+        if (href === null)
+            return;
+        if (href.trim() === '') {
+            editor.chain().focus().unsetLink().run();
+            return;
+        }
+        editor.chain().focus().extendMarkRange('link').setLink({ href: href.trim() }).run();
+    }, [editor]);
+    /* The box.
+  
+       `rounded-(--radius)`, not `rounded`: Tailwind v4 emits a literal
+       `0.25rem` for the bare utility and never reads `--radius-DEFAULT`, so
+       `rounded` is an unthemeable 4px corner where the vocabulary says 6. The
+       screenshots caught it as four moved corners and nothing else. Nothing
+       else in the package uses the bare form.
+  
+       `shadow`, not `outline`: `--focus-ring` is a box-shadow value
+       (`0 0 0 2px var(--accent)`), so `outline: var(--focus-ring)` is invalid
+       and drops the whole declaration silently — which this had, and which no
+       screenshot would ever have shown because a baseline is never focused.
+       `pagination.css` records the same bug. The ring belongs to the box
+       rather than to the contenteditable, so it does not draw a second,
+       thinner rectangle inside the border. */
+    const box = 'grid overflow-hidden rounded-(--radius) border border-border-strong surface-control focus-within:shadow-(--focus-ring)';
+    if (!editor) {
+        return _jsx("div", { className: className ? `${box} ${className}` : box, "aria-busy": "true" });
+    }
+    const controls = [
+        {
+            label: 'Heading',
+            active: editor.isActive('heading', { level: 2 }),
+            run: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
+        },
+        {
+            label: 'Subheading',
+            active: editor.isActive('heading', { level: 3 }),
+            run: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
+        },
+        {
+            label: 'Bold',
+            active: editor.isActive('bold'),
+            run: () => editor.chain().focus().toggleBold().run(),
+        },
+        {
+            label: 'Italic',
+            active: editor.isActive('italic'),
+            run: () => editor.chain().focus().toggleItalic().run(),
+        },
+        { label: 'Link', active: editor.isActive('link'), run: setLink },
+        {
+            label: 'Bullets',
+            active: editor.isActive('bulletList'),
+            run: () => editor.chain().focus().toggleBulletList().run(),
+        },
+        {
+            label: 'Numbers',
+            active: editor.isActive('orderedList'),
+            run: () => editor.chain().focus().toggleOrderedList().run(),
+        },
+    ];
+    return (_jsxs("div", { className: className ? `${box} ${className}` : box, children: [_jsx("div", { className: "flex flex-wrap gap-1 border-b border-border p-1 surface-panel", role: "toolbar", "aria-label": `${label} formatting`, children: controls.map((control) => (_jsx(Button, { type: "button", size: "sm", kind: control.active ? 'primary' : 'ghost', "aria-pressed": control.active, onPress: control.run, children: control.label }, control.label))) }), _jsx(EditorContent, { editor: editor })] }));
+}

package/dist/editor.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The editor entry: `@wtfalch/design/editor`.
+ *
+ * Its own entry because it is the one component in the package that loads an
+ * editor — TipTap, which is ProseMirror — and a site that only *renders*
+ * prose should not download one to do it. `RichText` and the value helpers
+ * ship from the package's front door for exactly that reason; the schema
+ * ships from `@wtfalch/design/rich-text`, because it needs zod.
+ *
+ * TipTap and zod are optional peer dependencies. Import this and you install
+ * them; import anything else in the package and you do not.
+ */
+export { default as RichTextEditor } from './components/RichTextEditor.js';
+/** Re-exported, so writing prose needs one import rather than three. */
+export { type BlockNode, type RichTextMark, type RichTextValue, blockNodeSchema, richTextMarkSchema, richTextSchema, } from './rich-text/schema.js';
+export { emptyRichText, isEmptyRichText, richTextToPlain } from './rich-text/value.js';

package/dist/editor.js

@@ -0,0 +1,16 @@
+/**
+ * The editor entry: `@wtfalch/design/editor`.
+ *
+ * Its own entry because it is the one component in the package that loads an
+ * editor — TipTap, which is ProseMirror — and a site that only *renders*
+ * prose should not download one to do it. `RichText` and the value helpers
+ * ship from the package's front door for exactly that reason; the schema
+ * ships from `@wtfalch/design/rich-text`, because it needs zod.
+ *
+ * TipTap and zod are optional peer dependencies. Import this and you install
+ * them; import anything else in the package and you do not.
+ */
+export { default as RichTextEditor } from './components/RichTextEditor.js';
+/** Re-exported, so writing prose needs one import rather than three. */
+export { blockNodeSchema, richTextMarkSchema, richTextSchema, } from './rich-text/schema.js';
+export { emptyRichText, isEmptyRichText, richTextToPlain } from './rich-text/value.js';

package/dist/index.d.ts

@@ -55,6 +55,14 @@ export type { Props as InputProps } from './components/Input.js';
  *  of, now one component a consumer can reach. */
 export { default as Kbd } from './components/Kbd.js';
 export { default as Markdown } from './components/Markdown.js';
+/** Prose written with `RichTextEditor` (`@wtfalch/design/editor`), drawn.
+ *  Here rather than in that entry because reading prose should not download
+ *  an editor; the schema the two agree on ships with it. */
+export { default as RichText } from './components/RichText.js';
+/** The value's shape and the three helpers that need no validator. The schema
+ *  itself is `@wtfalch/design/rich-text`, because zod is an optional peer. */
+export type { BlockNode, RichTextMark, RichTextValue } from './rich-text/schema.js';
+export { emptyRichText, isEmptyRichText, richTextToPlain } from './rich-text/value.js';
 export { default as Menu } from './components/Menu.js';
 export type { Item as MenuItem, Section as MenuSection } from './components/Menu.js';
 export { default as Modal } from './components/Modal.js';

package/dist/index.js

@@ -49,6 +49,11 @@ export { default as Input } from './components/Input.js';
  *  of, now one component a consumer can reach. */
 export { default as Kbd } from './components/Kbd.js';
 export { default as Markdown } from './components/Markdown.js';
+/** Prose written with `RichTextEditor` (`@wtfalch/design/editor`), drawn.
+ *  Here rather than in that entry because reading prose should not download
+ *  an editor; the schema the two agree on ships with it. */
+export { default as RichText } from './components/RichText.js';
+export { emptyRichText, isEmptyRichText, richTextToPlain } from './rich-text/value.js';
 export { default as Menu } from './components/Menu.js';
 export { default as Modal } from './components/Modal.js';
 /** Moving through a list that does not fit, counted in items rather than

package/dist/rich-text/schema.d.ts

@@ -0,0 +1,219 @@
+import { z } from 'zod';
+/**
+ * What a rich-text value is, and the only shape `RichTextEditor` produces or
+ * `RichText` draws.
+ *
+ * **A restricted document, on purpose.** The editor is TipTap, which is
+ * ProseMirror, which will model tables, colours, fonts and arbitrary nesting
+ * given the chance. A system where every writer can reach all of that is one
+ * where two pages share nothing but a logo. What is left here is
+ * paragraphs, two heading levels, two kinds of list, bold, italic and links
+ * — the set a piece of prose actually needs.
+ *
+ * **The schema is the contract between three things**: what the toolbar can
+ * produce, what a consumer should store, and what the view can draw. A
+ * consumer validates with this on the way into its database, so a crafted
+ * request can no more insert a table than the editor can, and a node the
+ * view has no case for cannot arrive.
+ *
+ * Zod is an OPTIONAL peer dependency, and this file is the only one that
+ * reaches it — which is why it ships from `@wtfalch/design/rich-text` rather
+ * than the front door. A consumer that renders prose without validating it
+ * should not have to install a validator to load the package. The types and
+ * the pure helpers live in `./value`, which imports from here with `import
+ * type` and so compiles to nothing.
+ */
+/** The marks a run of text may carry. `link` is the only one with a value, and its href is checked. */
+export declare const richTextMarkSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
+    type: z.ZodLiteral<"bold">;
+}, z.core.$strip>, z.ZodObject<{
+    type: z.ZodLiteral<"italic">;
+}, z.core.$strip>, z.ZodObject<{
+    type: z.ZodLiteral<"link">;
+    attrs: z.ZodObject<{
+        href: z.ZodString;
+        target: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+    }, z.core.$strip>;
+}, z.core.$strip>], "type">;
+/** Named `RichTextMark` rather than `Mark`, which this package already uses for a product's brand mark. */
+export type RichTextMark = z.infer<typeof richTextMarkSchema>;
+export declare const blockNodeSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
+    type: z.ZodLiteral<"paragraph">;
+    content: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        type: z.ZodLiteral<"text">;
+        text: z.ZodString;
+        marks: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
+            type: z.ZodLiteral<"bold">;
+        }, z.core.$strip>, z.ZodObject<{
+            type: z.ZodLiteral<"italic">;
+        }, z.core.$strip>, z.ZodObject<{
+            type: z.ZodLiteral<"link">;
+            attrs: z.ZodObject<{
+                href: z.ZodString;
+                target: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+            }, z.core.$strip>;
+        }, z.core.$strip>], "type">>>;
+    }, z.core.$strip>>>;
+}, z.core.$strip>, z.ZodObject<{
+    type: z.ZodLiteral<"heading">;
+    attrs: z.ZodObject<{
+        level: z.ZodUnion<readonly [z.ZodLiteral<2>, z.ZodLiteral<3>]>;
+    }, z.core.$strip>;
+    content: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        type: z.ZodLiteral<"text">;
+        text: z.ZodString;
+        marks: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
+            type: z.ZodLiteral<"bold">;
+        }, z.core.$strip>, z.ZodObject<{
+            type: z.ZodLiteral<"italic">;
+        }, z.core.$strip>, z.ZodObject<{
+            type: z.ZodLiteral<"link">;
+            attrs: z.ZodObject<{
+                href: z.ZodString;
+                target: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+            }, z.core.$strip>;
+        }, z.core.$strip>], "type">>>;
+    }, z.core.$strip>>>;
+}, z.core.$strip>, z.ZodObject<{
+    type: z.ZodLiteral<"bulletList">;
+    content: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        type: z.ZodLiteral<"listItem">;
+        content: z.ZodArray<z.ZodObject<{
+            type: z.ZodLiteral<"paragraph">;
+            content: z.ZodOptional<z.ZodArray<z.ZodObject<{
+                type: z.ZodLiteral<"text">;
+                text: z.ZodString;
+                marks: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
+                    type: z.ZodLiteral<"bold">;
+                }, z.core.$strip>, z.ZodObject<{
+                    type: z.ZodLiteral<"italic">;
+                }, z.core.$strip>, z.ZodObject<{
+                    type: z.ZodLiteral<"link">;
+                    attrs: z.ZodObject<{
+                        href: z.ZodString;
+                        target: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                    }, z.core.$strip>;
+                }, z.core.$strip>], "type">>>;
+            }, z.core.$strip>>>;
+        }, z.core.$strip>>;
+    }, z.core.$strip>>>;
+}, z.core.$strip>, z.ZodObject<{
+    type: z.ZodLiteral<"orderedList">;
+    attrs: z.ZodOptional<z.ZodObject<{
+        start: z.ZodNumber;
+    }, z.core.$strip>>;
+    content: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        type: z.ZodLiteral<"listItem">;
+        content: z.ZodArray<z.ZodObject<{
+            type: z.ZodLiteral<"paragraph">;
+            content: z.ZodOptional<z.ZodArray<z.ZodObject<{
+                type: z.ZodLiteral<"text">;
+                text: z.ZodString;
+                marks: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
+                    type: z.ZodLiteral<"bold">;
+                }, z.core.$strip>, z.ZodObject<{
+                    type: z.ZodLiteral<"italic">;
+                }, z.core.$strip>, z.ZodObject<{
+                    type: z.ZodLiteral<"link">;
+                    attrs: z.ZodObject<{
+                        href: z.ZodString;
+                        target: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                    }, z.core.$strip>;
+                }, z.core.$strip>], "type">>>;
+            }, z.core.$strip>>>;
+        }, z.core.$strip>>;
+    }, z.core.$strip>>>;
+}, z.core.$strip>], "type">;
+export type BlockNode = z.infer<typeof blockNodeSchema>;
+/** A whole value: what TipTap calls the document. */
+export declare const richTextSchema: z.ZodObject<{
+    type: z.ZodLiteral<"doc">;
+    content: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
+        type: z.ZodLiteral<"paragraph">;
+        content: z.ZodOptional<z.ZodArray<z.ZodObject<{
+            type: z.ZodLiteral<"text">;
+            text: z.ZodString;
+            marks: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
+                type: z.ZodLiteral<"bold">;
+            }, z.core.$strip>, z.ZodObject<{
+                type: z.ZodLiteral<"italic">;
+            }, z.core.$strip>, z.ZodObject<{
+                type: z.ZodLiteral<"link">;
+                attrs: z.ZodObject<{
+                    href: z.ZodString;
+                    target: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                }, z.core.$strip>;
+            }, z.core.$strip>], "type">>>;
+        }, z.core.$strip>>>;
+    }, z.core.$strip>, z.ZodObject<{
+        type: z.ZodLiteral<"heading">;
+        attrs: z.ZodObject<{
+            level: z.ZodUnion<readonly [z.ZodLiteral<2>, z.ZodLiteral<3>]>;
+        }, z.core.$strip>;
+        content: z.ZodOptional<z.ZodArray<z.ZodObject<{
+            type: z.ZodLiteral<"text">;
+            text: z.ZodString;
+            marks: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
+                type: z.ZodLiteral<"bold">;
+            }, z.core.$strip>, z.ZodObject<{
+                type: z.ZodLiteral<"italic">;
+            }, z.core.$strip>, z.ZodObject<{
+                type: z.ZodLiteral<"link">;
+                attrs: z.ZodObject<{
+                    href: z.ZodString;
+                    target: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                }, z.core.$strip>;
+            }, z.core.$strip>], "type">>>;
+        }, z.core.$strip>>>;
+    }, z.core.$strip>, z.ZodObject<{
+        type: z.ZodLiteral<"bulletList">;
+        content: z.ZodOptional<z.ZodArray<z.ZodObject<{
+            type: z.ZodLiteral<"listItem">;
+            content: z.ZodArray<z.ZodObject<{
+                type: z.ZodLiteral<"paragraph">;
+                content: z.ZodOptional<z.ZodArray<z.ZodObject<{
+                    type: z.ZodLiteral<"text">;
+                    text: z.ZodString;
+                    marks: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
+                        type: z.ZodLiteral<"bold">;
+                    }, z.core.$strip>, z.ZodObject<{
+                        type: z.ZodLiteral<"italic">;
+                    }, z.core.$strip>, z.ZodObject<{
+                        type: z.ZodLiteral<"link">;
+                        attrs: z.ZodObject<{
+                            href: z.ZodString;
+                            target: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                        }, z.core.$strip>;
+                    }, z.core.$strip>], "type">>>;
+                }, z.core.$strip>>>;
+            }, z.core.$strip>>;
+        }, z.core.$strip>>>;
+    }, z.core.$strip>, z.ZodObject<{
+        type: z.ZodLiteral<"orderedList">;
+        attrs: z.ZodOptional<z.ZodObject<{
+            start: z.ZodNumber;
+        }, z.core.$strip>>;
+        content: z.ZodOptional<z.ZodArray<z.ZodObject<{
+            type: z.ZodLiteral<"listItem">;
+            content: z.ZodArray<z.ZodObject<{
+                type: z.ZodLiteral<"paragraph">;
+                content: z.ZodOptional<z.ZodArray<z.ZodObject<{
+                    type: z.ZodLiteral<"text">;
+                    text: z.ZodString;
+                    marks: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
+                        type: z.ZodLiteral<"bold">;
+                    }, z.core.$strip>, z.ZodObject<{
+                        type: z.ZodLiteral<"italic">;
+                    }, z.core.$strip>, z.ZodObject<{
+                        type: z.ZodLiteral<"link">;
+                        attrs: z.ZodObject<{
+                            href: z.ZodString;
+                            target: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                        }, z.core.$strip>;
+                    }, z.core.$strip>], "type">>>;
+                }, z.core.$strip>>>;
+            }, z.core.$strip>>;
+        }, z.core.$strip>>>;
+    }, z.core.$strip>], "type">>>;
+}, z.core.$strip>;
+export type RichTextValue = z.infer<typeof richTextSchema>;