@tiptap/static-renderer 3.0.0-next.1

package/dist/json/react/index.d.ts

@@ -0,0 +1,207 @@
+import React from 'react';
+
+/**
+ * A mark type is either a JSON representation of a mark or a Prosemirror mark instance
+ */
+type MarkType<Type extends string = any, Attributes extends undefined | Record<string, any> = any> = {
+    type: Type;
+    attrs: Attributes;
+};
+/**
+ * A node type is either a JSON representation of a node or a Prosemirror node instance
+ */
+type NodeType<Type extends string = any, Attributes extends undefined | Record<string, any> = any, NodeMarkType extends MarkType = any, Content extends NodeType[] = any> = {
+    type: Type;
+    attrs: Attributes;
+    content?: Content;
+    marks?: NodeMarkType[];
+    text?: string;
+};
+
+/**
+ * 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, TNodeRender>;
+    /**
+     * Mapping of mark types to react components
+     */
+    markMapping: Record<string, TMarkRender>;
+    /**
+     * Component to render if a node type is not handled
+     */
+    unhandledNode?: TNodeRender;
+    /**
+     * Component to render if a mark type is not handled
+     */
+    unhandledMark?: TMarkRender;
+};
+/**
+ * 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;
+    };
+} = 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>(
+/**
+ * The function that actually renders the component
+ */
+renderComponent: (ctx: {
+    component: TNodeRender;
+    props: NodeProps<TNodeType, TReturnType | TReturnType[]>;
+} | {
+    component: TMarkRender;
+    props: MarkProps<TMarkType, TReturnType | TReturnType[], TNodeType>;
+}) => TReturnType, { nodeMapping, markMapping, unhandledNode, unhandledMark, }: TiptapStaticRendererOptions<TReturnType, TMarkType, TNodeType, TNodeRender, TMarkRender>): ({ content, parent, }: {
+    /**
+     * Tiptap JSON content to render
+     */
+    content: TNodeType;
+    /**
+     * The parent node of the current node
+     */
+    parent?: TNodeType;
+}) => TReturnType;
+
+declare function renderJSONContentToReactElement<
+/**
+ * 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>(options: TiptapStaticRendererOptions<React.ReactNode, TMarkType, TNodeType>): ({ content, parent, }: {
+    content: TNodeType;
+    parent?: TNodeType | undefined;
+}) => React.ReactNode;
+
+export { type MarkProps, type NodeProps, TiptapStaticRenderer, type TiptapStaticRendererOptions, renderJSONContentToReactElement };