@tiptap/static-renderer 3.0.0-beta.0

package/dist/pm/markdown/index.d.cts

@@ -0,0 +1,153 @@
+import { MarkType, NodeType, Node, ExtensionAttribute, Mark as Mark$1, JSONContent, Extensions } from '@tiptap/core';
+import { DOMOutputSpec, Mark, Node as Node$1 } from '@tiptap/pm/model';
+
+/**
+ * Props for a node renderer
+ */
+type NodeProps<TNodeType = any, TChildren = any> = {
+    /**
+     * 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<TMarkType = any, TChildren = any, TNodeType = any> = {
+    /**
+     * 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;
+} = MarkType, 
+/**
+ * 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;
+    };
+} = NodeType, 
+/**
+ * A node renderer is a function that takes a node and its children and returns the rendered output
+ */
+TNodeRender extends (ctx: NodeProps<TNodeType, TReturnType | TReturnType[]>) => TReturnType = (ctx: NodeProps<TNodeType, TReturnType | TReturnType[]>) => TReturnType, 
+/**
+ * A mark renderer is a function that takes a mark and its children and returns the rendered output
+ */
+TMarkRender extends (ctx: MarkProps<TMarkType, TReturnType | TReturnType[], TNodeType>) => TReturnType = (ctx: MarkProps<TMarkType, TReturnType | TReturnType[], TNodeType>) => TReturnType> = {
+    /**
+     * Mapping of node types to react components
+     */
+    nodeMapping: Record<string, NoInfer<TNodeRender>>;
+    /**
+     * Mapping of mark types to react components
+     */
+    markMapping: Record<string, NoInfer<TMarkRender>>;
+    /**
+     * Component to render if a node type is not handled
+     */
+    unhandledNode?: NoInfer<TNodeRender>;
+    /**
+     * Component to render if a mark type is not handled
+     */
+    unhandledMark?: NoInfer<TMarkRender>;
+};
+
+type DomOutputSpecToElement<T> = (content: DOMOutputSpec) => (children?: T | T[]) => T;
+/**
+ * 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<T>(domOutputSpecToElement: DomOutputSpecToElement<T>, extension: Node, extensionAttributes: ExtensionAttribute[], options?: Partial<Pick<TiptapStaticRendererOptions<T, Mark, Node$1>, 'unhandledNode'>>): [string, (props: NodeProps<Node$1, T | T[]>) => 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<T>(domOutputSpecToElement: DomOutputSpecToElement<T>, extension: Mark$1, extensionAttributes: ExtensionAttribute[], options?: Partial<Pick<TiptapStaticRendererOptions<T, Mark, Node$1>, 'unhandledMark'>>): [string, (props: MarkProps<Mark, T | T[]>) => 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<T>({ renderer, domOutputSpecToElement, mapDefinedTypes, content, extensions, options, }: {
+    renderer: (options: TiptapStaticRendererOptions<T, Mark, Node$1>) => (ctx: {
+        content: Node$1;
+    }) => T;
+    domOutputSpecToElement: DomOutputSpecToElement<T>;
+    mapDefinedTypes: {
+        doc: (props: NodeProps<Node$1, T | T[]>) => T;
+        text: (props: NodeProps<Node$1, T | T[]>) => T;
+    };
+    content: Node$1 | JSONContent;
+    extensions: Extensions;
+    options?: Partial<TiptapStaticRendererOptions<T, Mark, Node$1>>;
+}): T;
+
+/**
+ * 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.
+ */
+declare function renderToMarkdown({ content, extensions, options, }: {
+    content: Node$1 | JSONContent;
+    extensions: Extensions;
+    options?: Partial<TiptapStaticRendererOptions<string, Mark, Node$1>>;
+}): string;
+
+export { type DomOutputSpecToElement, mapMarkExtensionToReactNode, mapNodeExtensionToReactNode, renderToElement, renderToMarkdown };

package/dist/pm/markdown/index.d.ts

@@ -0,0 +1,153 @@
+import { MarkType, NodeType, Node, ExtensionAttribute, Mark as Mark$1, JSONContent, Extensions } from '@tiptap/core';
+import { DOMOutputSpec, Mark, Node as Node$1 } from '@tiptap/pm/model';
+
+/**
+ * Props for a node renderer
+ */
+type NodeProps<TNodeType = any, TChildren = any> = {
+    /**
+     * 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<TMarkType = any, TChildren = any, TNodeType = any> = {
+    /**
+     * 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;
+} = MarkType, 
+/**
+ * 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;
+    };
+} = NodeType, 
+/**
+ * A node renderer is a function that takes a node and its children and returns the rendered output
+ */
+TNodeRender extends (ctx: NodeProps<TNodeType, TReturnType | TReturnType[]>) => TReturnType = (ctx: NodeProps<TNodeType, TReturnType | TReturnType[]>) => TReturnType, 
+/**
+ * A mark renderer is a function that takes a mark and its children and returns the rendered output
+ */
+TMarkRender extends (ctx: MarkProps<TMarkType, TReturnType | TReturnType[], TNodeType>) => TReturnType = (ctx: MarkProps<TMarkType, TReturnType | TReturnType[], TNodeType>) => TReturnType> = {
+    /**
+     * Mapping of node types to react components
+     */
+    nodeMapping: Record<string, NoInfer<TNodeRender>>;
+    /**
+     * Mapping of mark types to react components
+     */
+    markMapping: Record<string, NoInfer<TMarkRender>>;
+    /**
+     * Component to render if a node type is not handled
+     */
+    unhandledNode?: NoInfer<TNodeRender>;
+    /**
+     * Component to render if a mark type is not handled
+     */
+    unhandledMark?: NoInfer<TMarkRender>;
+};
+
+type DomOutputSpecToElement<T> = (content: DOMOutputSpec) => (children?: T | T[]) => T;
+/**
+ * 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<T>(domOutputSpecToElement: DomOutputSpecToElement<T>, extension: Node, extensionAttributes: ExtensionAttribute[], options?: Partial<Pick<TiptapStaticRendererOptions<T, Mark, Node$1>, 'unhandledNode'>>): [string, (props: NodeProps<Node$1, T | T[]>) => 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<T>(domOutputSpecToElement: DomOutputSpecToElement<T>, extension: Mark$1, extensionAttributes: ExtensionAttribute[], options?: Partial<Pick<TiptapStaticRendererOptions<T, Mark, Node$1>, 'unhandledMark'>>): [string, (props: MarkProps<Mark, T | T[]>) => 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<T>({ renderer, domOutputSpecToElement, mapDefinedTypes, content, extensions, options, }: {
+    renderer: (options: TiptapStaticRendererOptions<T, Mark, Node$1>) => (ctx: {
+        content: Node$1;
+    }) => T;
+    domOutputSpecToElement: DomOutputSpecToElement<T>;
+    mapDefinedTypes: {
+        doc: (props: NodeProps<Node$1, T | T[]>) => T;
+        text: (props: NodeProps<Node$1, T | T[]>) => T;
+    };
+    content: Node$1 | JSONContent;
+    extensions: Extensions;
+    options?: Partial<TiptapStaticRendererOptions<T, Mark, Node$1>>;
+}): T;
+
+/**
+ * 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.
+ */
+declare function renderToMarkdown({ content, extensions, options, }: {
+    content: Node$1 | JSONContent;
+    extensions: Extensions;
+    options?: Partial<TiptapStaticRendererOptions<string, Mark, Node$1>>;
+}): string;
+
+export { type DomOutputSpecToElement, mapMarkExtensionToReactNode, mapNodeExtensionToReactNode, renderToElement, renderToMarkdown };