prism-react-editor/dist/code-block/hover.d.ts

Lightweight, extensible code editor component for React apps

import { CodeBlockProps, PrismCodeBlock } from '.';
type HoverCallback = (types: string[], language: string, text: string, element: HTMLSpanElement) => (string | Node)[] | null | undefined;
/**
 * Component that makes it easier to add hover descriptions to tokens.
 */
declare const HoverDescriptions: ({ callback, codeBlock, above, maxWidth, maxHeight, }: {
    /** Function called when a token with only textual children is hovered.
     *
     * The function gets called with the following arguments:
     * - `types`: Array with the token's type as the first element, followed by any alises.
     * - `language`: The language at the token's position.
     * - `text`: The `textContent` of the token.
     * - `element`: The `<span>` element of the hovered token.
     *
     * Lastly, the function should return an array of children that get added to the tooltip.
     * If `null` or `undefined` is returned, no tooltip is shown for the token.
     */
    callback: HoverCallback;
    codeBlock: PrismCodeBlock;
    props: CodeBlockProps;
    /** Whether the prefered position of the tooltip is above the token. @default false */
    above?: boolean;
    /** A CSS length value for the tooltip's max width. */
    maxWidth?: string;
    /** A CSS length value for the tooltip's max height. */
    maxHeight?: string;
}) => undefined;
/**
 * Highlights bracket pairs when hovered. Clicking on a pair keeps it highlighted.
 * Clicking anywhere inside the code block removes the highlight.
 */
declare const HighlightBracketPairsOnHover: ({ pairs, codeBlock, props, }: {
    /**
     * Which characters to match together. The opening character must be followed
     * by the corresponding closing character. @default "()[]{}"
     */
    pairs?: string;
    codeBlock: PrismCodeBlock;
    props: CodeBlockProps;
}) => undefined;
/**
 * Highlights tag pairs when a tag name is hovered. Clicking on a pair keeps it
 * highlighted. Clicking anywhere inside the code block removes the highlight.
 */
declare const HighlightTagPairsOnHover: ({ codeBlock, props, }: {
    codeBlock: PrismCodeBlock;
    props: CodeBlockProps;
}) => undefined;
export { HighlightTagPairsOnHover, HighlightBracketPairsOnHover, HoverDescriptions };