prism-react-editor/dist/tooltips.d.ts

Lightweight, extensible code editor component for React apps

import { ReactNode } from 'react';
import { PrismEditor } from './types';
/**
 * Moves to tooltip to align with the cursor and shows it.
 * @param preferPlacingAboveCursor Whether the preferred position is above the cursor or not.
 */
export type ShowTooltip = (preferPlacingAboveCursor?: boolean) => void;
/** Function removing the tooltip from the DOM. */
export type HideTooltip = () => void;
/**
 * Same as {@link useTooltip} but accepts a JSX element instead of a DOM node.
 *
 * *Note:* Your tooltip element must have `flex-shrink: 0` if `fixedWidth` isn't set to
 * `false`.
 *
 * @param editor Editor you want to add the tooltip to.
 * @param element JSX element for the tooltip.
 * @param fixedWidth If false, the tooltip will shrink instead of getting offset to
 * the left if there's not enough space to the right of the cursor. Defaults to `true`.
 *
 * @example
 * ```jsx
 * const [show, hide, portal] = useReactTooltip(
 *   editor,
 *   <div style={{ flexShrink: 0 }}>My tooltip</div>,
 * )
 * ```
 * The portal should be returned from an extension.
 */
export declare const useReactTooltip: (editor: PrismEditor, element: ReactNode, fixedWidth?: boolean) => [ShowTooltip, HideTooltip, ReactNode];
/**
 * Utility making it easy to add tooltips positioned on the editor's cursor. Before you
 * can show the tooltip, the {@link useCursorPosition} hook must've been called.
 *
 * This works by appending your tooltip to a flex container. You can style this container
 * with the selector `.pce-tooltip` if needed. It has `overflow-x: clip` to prevent your
 * tooltip from overflowing in browsers that support it.
 *
 * This utility is intended to be wrapped in a custom extension that controls when the
 * tooltip is shown.
 *
 * If you want your tooltip to always be visible when scrolling horizontally, you can add
 * `position: sticky` along with the `right` and `left` CSS properties to it.
 *
 * @param editor Editor you want to add the tooltip to.
 * @param element HTML Element for the tooltip.
 * @param fixedWidth If false, the tooltip will shrink instead of getting offset to
 * the left if there's not enough space to the right of the cursor. Defaults to `true`.
 *
 * @example
 * const [show, hide] = useTooltip(editor, myElement)
 */
export declare const useTooltip: (editor: PrismEditor, element: HTMLElement, fixedWidth?: boolean) => [ShowTooltip, HideTooltip];