Skip to content
Edytor
Esc
↑↓navigate↵open⌘Jpreview
On this page

edytor/export

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

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.

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.

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

bundledForms

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 codeLines.

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.

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.

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.

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).

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

ExportOptions

Which forms a conversion reads.

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).

import { DOMParser } from 'linkedom'; // on a server; the browser has its own
import { fromHTML } from 'edytor/export';
const value = fromHTML(html, { DOMParser });
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.

import { fromMarkdown } from 'edytor/export';
const value = fromMarkdown(source, { components: { Endpoint: 'endpoint' } });
declare const fromMarkdown: (source: string, options?: MarkdownOptions) => JSONDoc;

HtmlParser

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

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

imageForms

The image plugin’s forms: a figure.

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.

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 } }).

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' }.

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

MarkdownContext

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

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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).

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.

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).

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.

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.

import { toHTML } from 'edytor/export';
const html = toHTML(value);
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.

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

Was this page helpful?