@blocknote/react/types/src/schema/ReactStyleSpec.d.ts

A "Notion-style" block-based extensible text editor built on top of Prosemirror and Tiptap.

import { BlockNoteEditor, StyleConfig } from "@blocknote/core";
import { FC } from "react";
export type ReactCustomStyleImplementation<T extends StyleConfig> = {
    render: FC<{
        value: T["propSchema"] extends "boolean" ? undefined : string;
        contentRef: (el: HTMLElement | null) => void;
        editor: BlockNoteEditor<any, any, any>;
    }>;
    runsBefore?: string[];
};
/**
 * Creates a custom style specification for use with React. This is the React
 * counterpart to the vanilla `createStyleSpec` and lets you define custom text
 * styles (e.g., font color, highlight) using React components for rendering.
 *
 * @param styleConfig - The style configuration, including its `type` name and
 * `propSchema` (`"boolean"` or `"string"`).
 * @param styleImplementation - The React implementation, including a `render`
 * component that receives the style value, a `contentRef`, and the editor.
 * @returns A style spec that can be passed to the editor's schema.
 */
export declare function createReactStyleSpec<T extends StyleConfig>(styleConfig: T, styleImplementation: ReactCustomStyleImplementation<T>): {
    config: T;
    implementation: import("@blocknote/core").StyleImplementation<T>;
};