@blocknote/react/types/src/blocks/SourceWithPreview/SourceWithPreview.d.ts

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

import { BlockNoteEditor } from "@blocknote/core";
import { ReactNode } from "react";
import { SourcePreviewPopup } from "./SourcePreviewPopup.js";
/**
 * Props shared by {@link SourceBlockWithPreview} and
 * {@link SourceInlineContentWithPreview}.
 */
export type SourceWithPreviewProps = {
    /**
     * Ref for the element holding the editable source content.
     */
    contentRef: (node: HTMLElement | null) => void;
    /**
     * The source as plain text. When empty, an "add source" button is shown in
     * place of the preview.
     */
    source: string;
    /**
     * The rendered preview (e.g. a formula or diagram). When the current source
     * has an error, pass the last successfully rendered preview so it stays up
     * while the user edits, or `undefined` when there is none - the error state
     * is shown in its place. The last-good preview only stays up within the
     * editing session that introduced the error: once the popup closes on an
     * erroneous source, the error state shows until the source renders
     * successfully again.
     */
    preview?: ReactNode;
    /**
     * Error from rendering the preview, shown below the source in the popup.
     * Accepts arbitrary elements, so actions (e.g. a button that fixes the
     * source) can be rendered alongside the error message.
     */
    error?: ReactNode;
    /**
     * Shown in place of the preview when the source is empty. A string sets
     * the text of the default "add source" button, while an element replaces
     * the button entirely. Defaults to the editor dictionary's
     * `code_block.add_source_button_text`.
     */
    emptySourcePlaceholder?: ReactNode;
    /**
     * Shown in place of the preview when the source has an error, unless
     * there's a last-good `preview` and the error hasn't been committed yet
     * (the popup hasn't closed since it appeared). A string sets the text of
     * the default compact error state, while an element replaces it entirely.
     * The full `error` is only shown in the popup while editing.
     */
    errorPreview?: ReactNode;
    /**
     * Placeholder shown in the source input popup while the source is empty
     * (e.g. "Enter a LaTeX equation").
     */
    sourcePlaceholder?: string;
};
/**
 * Renders a preview of source content (e.g. math or diagrams), with the
 * editable source in a popup driven by the given popup controller: decides
 * what shows in place of the preview (empty state, last-good preview, or
 * error state) and opens/closes the popup on clicks.
 * `SourceBlockWithPreview` and `SourceInlineContentWithPreview` are thin
 * per-kind wrappers around this, obtaining the popup controller from their
 * respective hooks.
 */
export declare const SourceWithPreview: (props: SourceWithPreviewProps & {
    editor: BlockNoteEditor<any, any, any>;
    popup: SourcePreviewPopup;
    /**
     * Renders with `span` wrappers for inline content.
     */
    inline?: boolean;
    /**
     * Whether pressing Enter in the source popup does what the "OK" button
     * does (closing the popup). Shows the return-key icon on the "OK" button.
     */
    enterSubmits?: boolean;
}) => import("react/jsx-runtime").JSX.Element;