import { NodeType, MarkType, ExtensionAttribute, JSONContent, Extensions, Mark, Node as Node$1 } from '@tiptap/core'; import React from 'react'; import { DOMOutputSpec, Mark as Mark$1, Node } from '@tiptap/pm/model'; /** * This function returns the attributes of a node or mark that are defined by the given extension attributes. * @param nodeOrMark The node or mark to get the attributes from * @param extensionAttributes The extension attributes to use * @param onlyRenderedAttributes If true, only attributes that are rendered in the HTML are returned */ declare function getAttributes(nodeOrMark: NodeType | MarkType, extensionAttributes: ExtensionAttribute[], onlyRenderedAttributes?: boolean): Record; /** * This function returns the HTML attributes of a node or mark that are defined by the given extension attributes. * @param nodeOrMark The node or mark to get the attributes from * @param extensionAttributes The extension attributes to use */ declare function getHTMLAttributes(nodeOrMark: NodeType | MarkType, extensionAttributes: ExtensionAttribute[]): Record; /** * A JSON representation of a mark (a Tiptap/ProseMirror mark serialized to JSON). */ type JSONMarkType = NonNullable[number]; /** * A JSON representation of a node (a Tiptap/ProseMirror node serialized to JSON). * * `marks` is tied to the `TMark` type parameter so the node<->mark relationship * stays sound. This is also why we cannot simply default `TNodeType` to * `JSONContent`: the generic constraint references `TMarkType` via * `marks?: readonly TMarkType[]`, and `JSONContent.marks` is a *concrete* array, * which TypeScript rejects ("TMarkType could be instantiated with a different * subtype of constraint"). Parameterizing the node type by the same `TMark` * avoids that bivariance error. Please don't "simplify" this back to * `JSONContent` — it won't type-check. */ type JSONNodeType = { type?: string; attrs?: Record; content?: JSONNodeType[]; marks?: readonly TMark[]; text?: string; [key: string]: any; }; /** * Props for a node renderer */ type NodeProps = { /** * The current node to render */ node: TNodeType; /** * Unless the node is the root node, this will always be defined */ parent?: TNodeType; /** * The children of the current node */ children?: TChildren; /** * Render a child element */ renderElement: (props: { /** * Tiptap JSON content to render */ content: TNodeType; /** * The parent node of the current node */ parent?: TNodeType; }) => TChildren; }; /** * Props for a mark renderer */ type MarkProps = { /** * The current mark to render */ mark: TMarkType; /** * The children of the current mark */ children?: TChildren; /** * The node the current mark is applied to */ node: TNodeType; /** * The node the current mark is applied to */ parent?: TNodeType; }; type TiptapStaticRendererOptions< /** * The return type of the render function (e.g. React.ReactNode, string) */ TReturnType, /** * A mark type is either a JSON representation of a mark or a Prosemirror mark instance */ TMarkType extends { type: any; } = JSONMarkType, /** * A node type is either a JSON representation of a node or a Prosemirror node instance */ TNodeType extends { content?: { forEach: (cb: (node: TNodeType) => void) => void; }; marks?: readonly TMarkType[]; type?: string | { name: string; }; } = JSONNodeType, /** * A node renderer is a function that takes a node and its children and returns the rendered output */ TNodeRender extends (ctx: NodeProps) => TReturnType = (ctx: NodeProps) => TReturnType, /** * A mark renderer is a function that takes a mark and its children and returns the rendered output */ TMarkRender extends (ctx: MarkProps) => TReturnType = (ctx: MarkProps) => TReturnType> = { /** * Mapping of node types to react components */ nodeMapping: Record>; /** * Mapping of mark types to react components */ markMapping: Record>; /** * Component to render if a node type is not handled */ unhandledNode?: NoInfer; /** * Component to render if a mark type is not handled */ unhandledMark?: NoInfer; }; /** * Tiptap Static Renderer * ---------------------- * * This function is a basis to allow for different renderers to be created. * Generic enough to be able to statically render Prosemirror JSON or Prosemirror Nodes. * * Using this function, you can create a renderer that takes a JSON representation of a Prosemirror document * and renders it using a mapping of node types to React components or even to a string. * This function is used as the basis to create the `reactRenderer` and `stringRenderer` functions. */ declare function TiptapStaticRenderer< /** * The return type of the render function (e.g. React.ReactNode, string) */ TReturnType, /** * A mark type is either a JSON representation of a mark or a Prosemirror mark instance */ TMarkType extends { type: string | { name: string; }; } = JSONMarkType, /** * A node type is either a JSON representation of a node or a Prosemirror node instance */ TNodeType extends { content?: { forEach: (cb: (node: TNodeType) => void) => void; }; marks?: readonly TMarkType[]; type?: string | { name: string; }; } = JSONNodeType, /** * A node renderer is a function that takes a node and its children and returns the rendered output */ TNodeRender extends (ctx: NodeProps) => TReturnType = (ctx: NodeProps) => TReturnType, /** * A mark renderer is a function that takes a mark and its children and returns the rendered output */ TMarkRender extends (ctx: MarkProps) => TReturnType = (ctx: MarkProps) => TReturnType>( /** * The function that actually renders the component */ renderComponent: (ctx: { component: TNodeRender; props: NodeProps; } | { component: TMarkRender; props: MarkProps; }) => TReturnType, { nodeMapping, markMapping, unhandledNode, unhandledMark, }: TiptapStaticRendererOptions): ({ content, parent, }: { /** * Tiptap JSON content to render */ content: TNodeType; /** * The parent node of the current node */ parent?: TNodeType; }) => TReturnType; declare function renderJSONContentToString< /** * A mark type is either a JSON representation of a mark or a Prosemirror mark instance */ TMarkType extends { type: any; } = JSONMarkType, /** * A node type is either a JSON representation of a node or a Prosemirror node instance */ TNodeType extends { content?: { forEach: (cb: (node: TNodeType) => void) => void; }; marks?: readonly TMarkType[]; type?: string | { name: string; }; } = JSONNodeType>(options: TiptapStaticRendererOptions): ({ content, parent, }: { content: TNodeType; parent?: TNodeType | undefined; }) => string; /** * Escape text for HTML text content. * @param value The text to escape * @returns The escaped text */ declare function escapeHTML(value: string): string; /** * Escape values for quoted HTML attributes. * @param value The attribute value to escape * @returns The escaped attribute value */ declare function escapeHTMLAttribute(value: string): string; /** * Serialize the attributes of a node or mark to a string * @param attrs The attributes to serialize * @returns The serialized attributes as a string */ declare function serializeAttrsToHTMLString(attrs: Record | undefined | null): string; /** * Serialize the children of a node or mark to a string * @param children The children to serialize * @returns The serialized children as a string */ declare function serializeChildrenToHTMLString(children?: string | string[]): string; declare function renderJSONContentToReactElement< /** * A mark type is either a JSON representation of a mark or a Prosemirror mark instance */ TMarkType extends { type: any; } = JSONMarkType, /** * A node type is either a JSON representation of a node or a Prosemirror node instance */ TNodeType extends { content?: { forEach: (cb: (node: TNodeType) => void) => void; }; marks?: readonly TMarkType[]; type?: string | { name: string; }; } = JSONNodeType>(options: TiptapStaticRendererOptions): ({ content, parent, }: { content: TNodeType; parent?: TNodeType | undefined; }) => React.ReactNode; type DomOutputSpecToElement = (content: DOMOutputSpec) => (children?: T | T[]) => T; /** * Options that mirror a subset of `EditorOptions` and affect rendered output. * Kept narrow on purpose: only options whose effect is reproducible without an * `Editor` instance belong here. */ type StaticEditorOptions = { /** * Sets the text direction for all non-text nodes. Matches the `textDirection` * editor option on `Editor`. The configured `TextDirection` extension is * prepended to the user-supplied `extensions`; if a user-supplied * `TextDirection` is also present, the user's wins (last-defined precedence — * same as Editor). */ textDirection?: 'ltr' | 'rtl' | 'auto'; }; /** * Apply editor-level options to the user's extension array. * * Mirrors `new Editor({ textDirection })`: the option-driven `TextDirection` * extension is prepended so a user-supplied `TextDirection` (which comes after) * can override it via tiptap's last-defined precedence for duplicate extensions. * * Known limitation: this only inspects top-level extensions. A `TextDirection` * bundled inside a kit (e.g. `StarterKit`) is not detected for override * purposes — today no shipped kit includes `TextDirection`, so this is purely * theoretical. */ declare function applyStaticEditorOptionsToExtensions(extensions: Extensions, options?: StaticEditorOptions): Extensions; /** * This takes a NodeExtension and maps it to a React component * @param extension The node extension to map to a React component * @param extensionAttributes All available extension attributes * @returns A tuple with the name of the extension and a React component that renders the extension */ declare function mapNodeExtensionToReactNode(domOutputSpecToElement: DomOutputSpecToElement, extension: Node$1, extensionAttributes: ExtensionAttribute[], options?: Partial, 'unhandledNode'>>): [string, (props: NodeProps) => T]; /** * This takes a MarkExtension and maps it to a React component * @param extension The mark extension to map to a React component * @param extensionAttributes All available extension attributes * @returns A tuple with the name of the extension and a React component that renders the extension */ declare function mapMarkExtensionToReactNode(domOutputSpecToElement: DomOutputSpecToElement, extension: Mark, extensionAttributes: ExtensionAttribute[], options?: Partial, 'unhandledMark'>>): [string, (props: MarkProps) => T]; /** * This function will statically render a Prosemirror Node to a target element type using the given extensions * @param renderer The renderer to use to render the Prosemirror Node to the target element type * @param domOutputSpecToElement A function that takes a Prosemirror DOMOutputSpec and returns a function that takes children and returns the target element type * @param mapDefinedTypes An object with functions to map the doc and text types to the target element type * @param content The Prosemirror Node to render * @param extensions The extensions to use to render the Prosemirror Node * @param options Additional options to pass to the renderer that can override the default behavior * @returns The rendered target element type */ declare function renderToElement({ renderer, domOutputSpecToElement, mapDefinedTypes, content, extensions, options, }: { renderer: (options: TiptapStaticRendererOptions) => (ctx: { content: Node; }) => T; domOutputSpecToElement: DomOutputSpecToElement; mapDefinedTypes: { doc: (props: NodeProps) => T; text: (props: NodeProps) => T; }; content: Node | JSONContent; extensions: Extensions; options?: Partial>; }): T; /** * Take a DOMOutputSpec and return a function that can render it to a string * @param content The DOMOutputSpec to convert to a string * @returns A function that can render the DOMOutputSpec to a string */ declare function domOutputSpecToHTMLString(content: DOMOutputSpec): (children?: string | string[]) => string; /** * This function will statically render a Prosemirror Node to HTML using the provided extensions and options. * * Limitations: this function builds the schema and runs each extension's * `renderHTML`, but does not instantiate an `Editor`. Extensions that mutate * the document inside `addProseMirrorPlugins`, `onCreate`, or transaction * hooks will not run. For UniqueID, pre-process the JSON with * `generateUniqueIds` from `@tiptap/extension-unique-id`; for TableOfContents, * pre-process with `generateTocIds` from `@tiptap/extension-table-of-contents`. * * @param content The content to render to HTML * @param extensions The extensions to use for rendering * @param staticEditorOptions Optional editor-level options that affect rendered output, currently `{ textDirection }`. Mirrors a subset of `EditorOptions`. * @param options The options to use for rendering * @returns The rendered HTML string */ declare function renderToHTMLString({ content, extensions, staticEditorOptions, options, }: { content: Node | JSONContent; extensions: Extensions; staticEditorOptions?: StaticEditorOptions; options?: Partial>; }): string; /** * This code is just to show the flexibility of this renderer. We can potentially render content to any format we want. * This is a simple example of how we can render content to markdown. This is not a full implementation of a markdown renderer. * * Limitations: see `renderToHTMLString` — extensions that mutate the document * via plugins/onCreate (UniqueID, TableOfContents) need to be pre-processed. * * @param staticEditorOptions Optional editor-level options that affect rendered output — mirrors a subset of `EditorOptions`. */ declare function renderToMarkdown({ content, extensions, staticEditorOptions, options, }: { content: Node | JSONContent; extensions: Extensions; staticEditorOptions?: StaticEditorOptions; options?: Partial>; }): string; /** * This function maps the attributes of a node or mark to HTML attributes * @param attrs The attributes to map * @param key The key to use for the React element * @returns The mapped HTML attributes as an object */ declare function mapAttrsToHTMLAttributes(attrs?: Record, key?: string): Record; /** * Take a DOMOutputSpec and return a function that can render it to a React element * @param content The DOMOutputSpec to convert to a React element * @returns A function that can render the DOMOutputSpec to a React element */ declare function domOutputSpecToReactElement(content: DOMOutputSpec, key?: number): (children?: React.ReactNode) => React.ReactNode; /** * This function will statically render a Prosemirror Node to a React component using the given extensions. * * Limitations: see `renderToHTMLString` — extensions that mutate the document * via plugins/onCreate (UniqueID, TableOfContents) need to be pre-processed. * * @param content The content to render to a React component * @param extensions The extensions to use for rendering * @param staticEditorOptions Optional editor-level options that affect rendered output — mirrors a subset of `EditorOptions`. * @param options The options to use for rendering * @returns The React element that represents the rendered content */ declare function renderToReactElement({ content, extensions, staticEditorOptions, options, }: { content: Node | JSONContent; extensions: Extensions; staticEditorOptions?: StaticEditorOptions; options?: Partial>; }): React.ReactNode; export { type DomOutputSpecToElement, type JSONMarkType, type JSONNodeType, type MarkProps, type NodeProps, type StaticEditorOptions, TiptapStaticRenderer, type TiptapStaticRendererOptions, applyStaticEditorOptionsToExtensions, domOutputSpecToHTMLString, domOutputSpecToReactElement, escapeHTML, escapeHTMLAttribute, getAttributes, getHTMLAttributes, mapAttrsToHTMLAttributes, mapMarkExtensionToReactNode, mapNodeExtensionToReactNode, renderJSONContentToReactElement, renderJSONContentToString, renderToElement, renderToHTMLString, renderToMarkdown, renderToReactElement, serializeAttrsToHTMLString, serializeChildrenToHTMLString };