---
title: "edytor/export"
description: "Every name edytor/export exports, with its declaration and documentation (generated from the published types)."
---

{/* Generated by scripts/api-report.mjs (pnpm api:report) from the published declarations: edit the JSDoc, not this page. */}

Every name `edytor/export` exports, generated from the package's published type declarations, with the documentation its JSDoc carries. The guides explain how the pieces fit; this page is the exhaustive list. 33 names.

## AtomForms

An atom's export and import forms.

```ts
export type AtomForms = Pick<InlineBlockDefinition, 'html' | 'plain' | 'markdown' | 'parse'>;
```

## BlockForms

A kind's export and import forms: the fields of its record the export and HTML import read.

```ts
export type BlockForms = Pick<BlockDefinition, 'html' | 'plain' | 'markdown' | 'parse' | 'element' | 'contentElement' | 'void' | 'island' | 'lines' | 'rendersContent' | 'defaultChild' | 'itemKind'> & {
    presets?: {
        data?: Record<string, SerializableContent>;
    }[];
};
```

## bundledForms

```ts
declare const bundledForms: {
    blocks: {
        columns: {
            html: (_: JSONBlock, __: string, children: string) => string;
            plain: (_: JSONBlock, __: string, children: string) => string;
            parse: (element: HTMLElement) => {} | undefined;
            layout: true;
            rendersContent: false;
            defaultChild: string;
        };
        column: {
            html: (block: JSONBlock, _: string, children: string) => string;
            plain: (_: JSONBlock, __: string, children: string) => string;
            parse: (element: HTMLElement) => Record<string, number> | undefined;
            rendersContent: false;
        };
        equation: {
            html: (block: JSONBlock) => string;
            plain: (block: JSONBlock) => string;
            parse: (element: HTMLElement) => import("../index.js").EquationData | undefined;
            void: true;
            rendersContent: false;
        };
        toc: {
            html: () => string;
            plain: () => string;
            parse: (el: HTMLElement) => {} | undefined;
            void: true;
            rendersContent: false;
        };
        page: {
            html: (block: JSONBlock) => string;
            plain: (block: JSONBlock) => string;
            parse: (el: HTMLElement) => {
                title?: string | undefined;
                pageId: string;
            } | undefined;
            void: true;
            rendersContent: false;
        };
        embed: {
            html: (block: JSONBlock, caption: string) => string;
            plain: (block: JSONBlock, caption: string) => string;
            parse: (el: HTMLElement) => {
                url: string;
            } | undefined;
            void: true;
        };
        bookmark: {
            html: (block: JSONBlock, caption: string) => string;
            plain: (block: JSONBlock, caption: string) => string;
            parse: (el: HTMLElement) => {
                title?: string | undefined;
                url: string;
            } | undefined;
            void: true;
        };
        file: {
            html: (block: JSONBlock, caption: string) => string;
            plain: (block: JSONBlock, caption: string) => string;
            parse: (el: HTMLElement) => {
                src: string;
                name: string;
            } | undefined;
            void: true;
        };
        video: {
            html: (block: JSONBlock, caption: string) => string;
            parse: (el: HTMLElement) => {
                src: string;
            } | undefined;
            void: true;
        } | {
            html: (block: JSONBlock, caption: string) => string;
            parse: (el: HTMLElement) => {
                src: string;
            } | undefined;
            void: true;
        };
        audio: {
            html: (block: JSONBlock, caption: string) => string;
            parse: (el: HTMLElement) => {
                src: string;
            } | undefined;
            void: true;
        } | {
            html: (block: JSONBlock, caption: string) => string;
            parse: (el: HTMLElement) => {
                src: string;
            } | undefined;
            void: true;
        };
        image: {
            html: (block: JSONBlock, caption: string) => string;
            parse: (el: HTMLElement) => Record<string, string | number> | undefined;
            void: true;
        };
        table: {
            html: (block: JSONBlock, _: string, children: string) => string;
            plain: (_: JSONBlock, __: string, children: string) => string;
            parse: (element: HTMLElement) => {
                headerColumn?: boolean | undefined;
                headerRow?: boolean | undefined;
                columns: {
                    id: string;
                }[];
            } | undefined;
            table: true;
            rendersContent: false;
            defaultChild: string;
        };
        tableRow: {
            html: (_: JSONBlock, __: string, children: string) => string;
            plain: (_: JSONBlock, __: string, children: string) => string;
            parse: (element: HTMLElement) => {} | undefined;
            rendersContent: false;
            defaultChild: string;
        };
        tableCell: {
            html: (_: JSONBlock, content: string) => string;
            plain: (_: JSONBlock, content: string) => string;
            parse: (element: HTMLElement) => {
                column: string;
            } | undefined;
            island: true;
        };
        code: {
            island: true;
            lines: true;
            rendersContent: false;
            defaultChild: string;
        };
        codeLine: {
            html: (_: JSONBlock, content: string) => string;
        };
        paragraph: BlockForms;
        quote: BlockForms;
        divider: BlockForms;
        "ordered-list": BlockForms;
        "list-item": BlockForms;
        "unordered-list": BlockForms;
        toggle: BlockForms;
        heading: BlockForms;
        "todo-item": BlockForms;
        "bulleted-list-item": BlockForms;
        "numbered-list-item": BlockForms;
        callout: BlockForms;
        "toggle-heading": BlockForms;
    };
    marks: {
        bold: {
            tag: string;
            parse: (el: HTMLElement) => true | undefined;
        };
        italic: {
            tag: string;
            parse: (el: HTMLElement) => true | undefined;
        };
        underline: {
            tag: string;
            parse: (el: HTMLElement) => true | undefined;
        };
        strike: {
            tag: string;
            parse: (el: HTMLElement) => true | undefined;
        };
        code: {
            tag: string;
        };
        link: {
            tag: string;
            attributes: (mark: {
                href?: unknown;
                target?: string;
            }) => {
                href: string | undefined;
                target: string | undefined;
            };
            parse: (el: HTMLElement) => {
                target?: string | undefined;
                href: string;
            } | undefined;
            edge: "side-dependent";
        };
        superscript: {
            tag: string;
        };
        subscript: {
            tag: string;
        };
        color: {
            tag: string;
            attributes: (value: unknown) => {
                style: string | undefined;
            };
            parse: (el: HTMLElement) => string | undefined;
        };
        highlight: {
            tag: string;
            attributes: (value: unknown) => {
                style: string | undefined;
            };
            parse: (el: HTMLElement) => string | undefined;
        };
    };
    inlineBlocks: {
        inlineEquation: {
            plain: (data: any) => string;
            html: (data: any) => string;
            parse: (element: HTMLElement) => import("../index.js").EquationData | undefined;
        };
        mention: {
            plain: (data: any) => string;
            html: (data: any) => string;
            parse: (element: HTMLElement) => {
                id: string;
                label: string;
            } | undefined;
        };
        pageLink: {
            plain: (data: any) => string;
        };
    };
};
```

## codeForms

The code plugin's forms: a block of `codeLine`s.

```ts
declare const codeForms: () => {
    code: {
        island: true;
        lines: true;
        rendersContent: false;
        defaultChild: string;
    };
    codeLine: {
        html: (_: import("..").JSONBlock, content: string) => string;
    };
};
```

## columnsForms

The columns plugin's forms.

```ts
declare const columnsForms: () => {
    columns: {
        html: (_: import("..").JSONBlock, __: string, children: string) => string;
        plain: (_: import("..").JSONBlock, __: string, children: string) => string;
        parse: (element: HTMLElement) => {} | undefined;
        layout: true;
        rendersContent: false;
        defaultChild: string;
    };
    column: {
        html: (block: import("..").JSONBlock, _: string, children: string) => string;
        plain: (_: import("..").JSONBlock, __: string, children: string) => string;
        parse: (element: HTMLElement) => Record<string, number> | undefined;
        rendersContent: false;
    };
};
```

## equationForms

The equation plugin's forms.

```ts
declare const equationForms: (mathml?: MathML) => {
    blocks: {
        equation: {
            html: (block: import("..").JSONBlock) => string;
            plain: (block: import("..").JSONBlock) => string;
            parse: (element: HTMLElement) => import("../plugins/equation/tex.js").EquationData | undefined;
            void: true;
            rendersContent: false;
        };
    };
    inlineBlocks: {
        inlineEquation: {
            plain: (data: any) => string;
            html: (data: any) => string;
            parse: (element: HTMLElement) => import("../plugins/equation/tex.js").EquationData | undefined;
        };
    };
};
```

## escapeHtml

`value` escaped for an HTML text or a double-quoted attribute: every kind's export reads it.

```ts
declare const escapeHtml: (value: string) => string;
```

## ExportKinds

The records the export reads: each kind, mark and atom declares its own forms (a view is one).

```ts
export type ExportKinds = {
    readonly blocks: ReadonlyMap<string, BlockForms>;
    readonly marks: ReadonlyMap<string, MarkForms>;
    readonly inlineBlocks: ReadonlyMap<string, AtomForms>;
};
```

## ExportOptions

Which forms a conversion reads.

```ts
export type ExportOptions = {
    kinds?: KindForms | ExportKinds;
    components?: MarkdownComponents;
};
```

- `kinds`: The kinds, marks and atoms to read: a view (`edytor`, its own records), or forms by name.
- `components`: MDX-lite, for `toMarkdown`: the tags to write, each the kind it stands for (`{ Endpoint: 'endpoint' }`), the map `fromMarkdown` reads.

## fromHTML

HTML as a document, the paste's reading (`flow.html.*`): only the kinds,
marks and atoms of `kinds` survive (an unknown element is its text, a
`script` or `style` nothing), every value through its record's `parse`
hook (a link's href through the link sanitizer: `javascript:` drops the
link, an image's source through the image's), and nothing executes: the
parser only parses, no attribute is copied (`onerror`, `style`).

```ts
import { DOMParser } from 'linkedom'; // on a server; the browser has its own
import { fromHTML } from 'edytor/export';
const value = fromHTML(html, { DOMParser });
```

```ts
declare const fromHTML: (html: string, options?: ImportOptions) => JSONDoc;
```

## fromMarkdown

Markdown as a document: `textToBlocks`'s reading, as a `JSONDoc`.
With `components`, MDX-lite tags (`<Endpoint operationId="getPet" />`)
are blocks of the kinds they name; a tag it does not name, an
expression, an import or an export stays text and is told to `onUnknown`.

```ts
import { fromMarkdown } from 'edytor/export';
const value = fromMarkdown(source, { components: { Endpoint: 'endpoint' } });
```

```ts
declare const fromMarkdown: (source: string, options?: MarkdownOptions) => JSONDoc;
```

## HtmlParser

A `DOMParser` constructor: the browser's, or a server's (`linkedom`, `jsdom`, `happy-dom`).

```ts
export type HtmlParser = new () => {
    parseFromString(html: string, type: 'text/html'): {
        body: Node | null;
    };
};
```

## imageForms

The image plugin's forms: a `figure`.

```ts
declare const imageForms: () => {
    image: {
        html: (block: import("..").JSONBlock, caption: string) => string;
        parse: (el: HTMLElement) => Record<string, string | number> | undefined;
        void: true;
    };
};
```

## ImportOptions

What `fromHTML` reads.

```ts
export type ImportOptions = ExportOptions & {
    DOMParser?: HtmlParser;
};
```

## KindForms

Kind, mark and atom forms by name: what `toHTML`, `toMarkdown` and
`fromHTML` read (`bundledForms` for the bundled ones). A kind
record of your own plugin is a valid row: list your kinds beside the
bundled ones (`{ blocks: { ...bundledForms.blocks, mine } }`).

```ts
export type KindForms = {
    blocks?: Record<string, BlockForms>;
    marks?: Record<string, MarkForms>;
    inlineBlocks?: Record<string, AtomForms>;
};
```

## MarkdownComponents

MDX-lite tags by name, each the kind it reads as: `{ Endpoint: 'endpoint' }`.

```ts
export type MarkdownComponents = Readonly<Record<string, string>>;
```

## MarkdownContext

What a kind's `markdown` form is given beside its block, content and children.

```ts
export type MarkdownContext = {
    index: number;
    indent: (text: string, prefix: string) => string;
    inline: (content: JSONBlock['content']) => string;
};
```

- `index`: The block's position in its run of same-kind siblings, from 1 (a numbered item's number).
- `indent`: Every line of `text` prefixed with `prefix` (`'  '` under a list item, `'> '` in a quote).
- `inline`: Rich text as inline markdown, by the marks' and atoms' forms (a table cell's).

## MarkdownIssue

A tag or line `fromMarkdown` kept as text, with why.

```ts
export type MarkdownIssue = {
    reason: 'component' | 'expression' | 'unclosed' | 'import' | 'export';
    source: string;
    name?: string;
};
```

- `reason`: `component`: a tag `components` does not name; `expression`: an attribute whose value is not a string, a number, `true` or `false` (`{a + b}`, `{...props}`); `unclosed`: a tag without its closing tag; `import` / `export`: an MDX import or export line.
- `source`: The line kept as text.
- `name`: The tag's name, for a tag.

## MarkdownOptions

```ts
export type MarkdownOptions = {
    markdown?: boolean;
    type?: string;
    streaming?: boolean;
    components?: MarkdownComponents;
    onUnknown?: (issue: MarkdownIssue) => void;
};
```

- `markdown`: Read markdown (default `true`); `false` keeps every character as text.
- `type`: The kind of a paragraph (default `paragraph`).
- `streaming`: The text is still arriving (default `false`): hold back an unfinished last line's block marker or unclosed inline marker, and a table header row without its separator yet, so a streamed preview never shows raw markdown that the next chunk turns into a kind or a mark.
- `components`: MDX-lite: the tags to read, each as the kind it names (`{ Endpoint: 'endpoint', Callout: 'callout' }`).
- `onUnknown`: Told of each tag, expression, import or export kept as text.

## MarkForms

A mark's export and import forms.

```ts
export type MarkForms = Pick<MarkDefinition, 'tag' | 'attributes' | 'parse' | 'markdown'>;
```

## MathML

MathML for a TeX source: KaTeX's in a view once loaded, else the source in its annotation.

```ts
export type MathML = (tex: string, display: boolean) => string;
```

## mdxComponent

A component tag, for a kind's `markdown` form: `mdxComponent('Endpoint',
block.data, content, children)`. Each data value that has a literal is an
attribute (a string `"x"`, a number `{1}`, a boolean `{true}`); others
(objects, arrays, `null`, a string holding a newline or both quotes) are
left out. No text and no children: a self-closing tag. Text only: the
text inside the tag on one line. Children: the tag on its own lines, the
text first (a paragraph), then the children.

```ts
declare const mdxComponent: (name: string, data?: Record<string, SerializableContent> | undefined, content?: string, children?: string) => string;
```

## mediaForms

The media plugins' forms; `providers` are the embed players the view allows.

```ts
declare const mediaForms: (providers?: readonly EmbedProvider[]) => {
    embed: {
        html: (block: import("..").JSONBlock, caption: string) => string;
        plain: (block: import("..").JSONBlock, caption: string) => string;
        parse: (el: HTMLElement) => {
            url: string;
        } | undefined;
        void: true;
    };
    bookmark: {
        html: (block: import("..").JSONBlock, caption: string) => string;
        plain: (block: import("..").JSONBlock, caption: string) => string;
        parse: (el: HTMLElement) => {
            title?: string | undefined;
            url: string;
        } | undefined;
        void: true;
    };
    file: {
        html: (block: import("..").JSONBlock, caption: string) => string;
        plain: (block: import("..").JSONBlock, caption: string) => string;
        parse: (el: HTMLElement) => {
            src: string;
            name: string;
        } | undefined;
        void: true;
    };
    video: {
        html: (block: import("..").JSONBlock, caption: string) => string;
        parse: (el: HTMLElement) => {
            src: string;
        } | undefined;
        void: true;
    } | {
        html: (block: import("..").JSONBlock, caption: string) => string;
        parse: (el: HTMLElement) => {
            src: string;
        } | undefined;
        void: true;
    };
    audio: {
        html: (block: import("..").JSONBlock, caption: string) => string;
        parse: (el: HTMLElement) => {
            src: string;
        } | undefined;
        void: true;
    } | {
        html: (block: import("..").JSONBlock, caption: string) => string;
        parse: (el: HTMLElement) => {
            src: string;
        } | undefined;
        void: true;
    };
};
```

## mentionForms

A mention atom's forms (`@Ada`): `kind` is its atom type, `char` its trigger.

```ts
declare const mentionForms: (kind?: string, char?: string) => {
    plain: (data: any) => string;
    html: (data: any) => string;
    parse: (element: HTMLElement) => {
        id: string;
        label: string;
    } | undefined;
};
```

## pageForms

The page plugin's forms; `untitled` names a page without a title.

```ts
declare const pageForms: (options?: PagePluginOptions, untitled?: string) => {
    page: {
        html: (block: import("..").JSONBlock) => string;
        plain: (block: import("..").JSONBlock) => string;
        parse: (el: HTMLElement) => {
            title?: string | undefined;
            pageId: string;
        } | undefined;
        void: true;
        rendersContent: false;
    };
};
```

## pageLinkForms

A page link atom's forms: its title.

```ts
declare const pageLinkForms: () => {
    plain: (data: any) => string;
};
```

## richTextForms

The rich text kinds' forms as one table (a server's). `callout` is the icon a
callout without one of its own shows.

```ts
declare const richTextForms: (callout: (data: Data) => string) => {
    heading: {
        contentElement: (data: Record<string, unknown>) => "h1" | "h2" | "h3";
        parse: (el: HTMLElement) => {
            level: string;
        } | undefined;
        html: (block: import("..").JSONBlock, content: string, children: string) => string;
    };
    'bulleted-list-item': {
        element: {
            tag: "li" | "ol" | "ul";
            attributes: {
                role: string;
            };
        };
        html: string;
    };
    'numbered-list-item': {
        parse: (el: HTMLElement) => {} | undefined;
        element: {
            tag: "li" | "ol" | "ul";
            attributes: {
                role: string;
            };
        };
        html: string;
    };
    'todo-item': {
        html: (block: import("..").JSONBlock, content: string, children: string) => string;
        plain: (block: import("..").JSONBlock, content: string, children: string) => string;
    };
    toggle: {
        element: string;
    };
    'toggle-heading': {
        element: string;
        contentElement: (data: Record<string, unknown>) => "h1" | "h2" | "h3";
        parse: (el: HTMLElement) => {
            level: string;
        } | undefined;
        html: (block: import("..").JSONBlock, content: string, children: string) => string;
    };
    callout: {
        html: (block: import("..").JSONBlock, content: string, children: string) => string;
        parse: (el: HTMLElement) => {
            icon: string;
        } | undefined;
    };
    quote: {
        contentElement: string;
        html: string;
    };
    divider: {
        element: string;
        html: () => string;
        plain: () => string;
        void: true;
        rendersContent: false;
    };
    'ordered-list': {
        itemKind: string;
        element: {
            tag: "li" | "ol" | "ul";
            attributes: {
                role: string;
            };
        };
        html: string;
        rendersContent: false;
        defaultChild: string;
    };
    'unordered-list': {
        itemKind: string;
        element: {
            tag: "li" | "ol" | "ul";
            attributes: {
                role: string;
            };
        };
        html: string;
        rendersContent: false;
        defaultChild: string;
    };
    'list-item': {
        element: {
            tag: "li" | "ol" | "ul";
            attributes: {
                role: string;
            };
        };
        html: string;
    };
};
```

## richTextMarkForms

The rich text marks' forms, in their registration order (export wraps the first innermost).

```ts
declare const richTextMarkForms: {
    bold: {
        tag: string;
        parse: (el: HTMLElement) => true | undefined;
    };
    italic: {
        tag: string;
        parse: (el: HTMLElement) => true | undefined;
    };
    underline: {
        tag: string;
        parse: (el: HTMLElement) => true | undefined;
    };
    strike: {
        tag: string;
        parse: (el: HTMLElement) => true | undefined;
    };
    code: {
        tag: string;
    };
    link: {
        tag: string;
        attributes: (mark: {
            href?: unknown;
            target?: string;
        }) => {
            href: string | undefined;
            target: string | undefined;
        };
        parse: (el: HTMLElement) => {
            target?: string | undefined;
            href: string;
        } | undefined;
        edge: "side-dependent";
    };
    superscript: {
        tag: string;
    };
    subscript: {
        tag: string;
    };
    color: {
        tag: string;
        attributes: (value: unknown) => {
            style: string | undefined;
        };
        parse: (el: HTMLElement) => string | undefined;
    };
    highlight: {
        tag: string;
        attributes: (value: unknown) => {
            style: string | undefined;
        };
        parse: (el: HTMLElement) => string | undefined;
    };
};
```

## tableForms

The table plugin's forms.

```ts
declare const tableForms: () => {
    table: {
        html: (block: import("..").JSONBlock, _: string, children: string) => string;
        plain: (_: import("..").JSONBlock, __: string, children: string) => string;
        parse: (element: HTMLElement) => {
            headerColumn?: boolean | undefined;
            headerRow?: boolean | undefined;
            columns: {
                id: string;
            }[];
        } | undefined;
        table: true;
        rendersContent: false;
        defaultChild: string;
    };
    tableRow: {
        html: (_: import("..").JSONBlock, __: string, children: string) => string;
        plain: (_: import("..").JSONBlock, __: string, children: string) => string;
        parse: (element: HTMLElement) => {} | undefined;
        rendersContent: false;
        defaultChild: string;
    };
    tableCell: {
        html: (_: import("..").JSONBlock, content: string) => string;
        plain: (_: import("..").JSONBlock, content: string) => string;
        parse: (element: HTMLElement) => {
            column: string;
        } | undefined;
        island: true;
    };
};
```

## textToBlocks

`text` as blocks (see the module comment).

```ts
declare const textToBlocks: (text: string, { markdown, type, streaming, components, onUnknown }?: MarkdownOptions) => JSONBlock[];
```

## tocForms

The table of contents plugin's forms: drawn from the document, never carried.

```ts
declare const tocForms: () => {
    toc: {
        html: () => string;
        plain: () => string;
        parse: (el: HTMLElement) => {} | undefined;
        void: true;
        rendersContent: false;
    };
};
```

## toHTML

A document (or blocks) as HTML: each block by its kind's `html` form, a
run of list items in their list's element, text by its marks' elements.
Values are escaped and links through the link sanitizer; ids and empty
data are never written.

```ts
import { toHTML } from 'edytor/export';
const html = toHTML(value);
```

```ts
declare const toHTML: (doc: JSONDoc | readonly JSONBlock[], options?: ExportOptions) => string;
```

## toMarkdown

A document (or blocks) as Markdown (CommonMark with GFM tables, task
lists and strikethrough): each block by its kind's `markdown` form (else
its `plain` form), marks by theirs, atoms by theirs (else their `plain`
form). A toggle is a `<details>` disclosure, a callout a `> [!NOTE]`
alert; `textToBlocks` reads both back.

```ts
declare const toMarkdown: (doc: JSONDoc | readonly JSONBlock[], options?: ExportOptions) => string;
```