prism-react-editor/dist/extensions/match-tags.d.ts

Lightweight, extensible code editor component for React apps

import { PrismEditor } from '../types';
import { Token } from '../prism';
/**
 * Tuple containing in the following order:
 * - The tag's `Token`
 * - Its starting position
 * - Its ending position
 * - Its tag name
 * - Whether it's a closing tag
 * - Whether it isn't self-closing
 */
export type Tag = [Token, number, number, string, boolean, boolean];
export interface TagMatcher {
    /**
     * Array of tuples containing in the following order:
     * - The tag's `Token`
     * - Its starting position
     * - Its ending position
     * - Its tag name
     * - Whether it's a closing tag
     * - Whether it isn't self-closing
     */
    readonly tags: Tag[];
    /** Array mapping the index of a tag to the index of its matching tag. */
    readonly pairs: (number | undefined)[];
}
/**
 * Hook that traverses the tokens, and matches tags together. This hook is required for
 * {@link useHighlightMatchingTags} and {@link useHighlightTagPunctuation} to work.
 *
 * The extension can be accessed from `editor.extensions.matchTags` after layout effects
 * have been called.
 */
declare const useTagMatcher: (editor: PrismEditor) => void;
/**
 * Hook that adds an `active-tagname` class to matching HTML/XML/JSX tags when the
 * cursor is on either tag. It's required to call the {@link useTagMatcher} hook for this
 * hook to work. Use the CSS selector `.active-tagname` to style the elements.
 */
declare const useHighlightMatchingTags: (editor: PrismEditor) => void;
/**
 * Hook that highlights `<` and `>` punctuation in XML tags. It's required to call the
 * {@link useTagMatcher} hook for this hook to work.
 * @param className Class added to the active punctuation you can use to style them with CSS.
 * @param alwaysHighlight If true, the punctuation will always be highlighted when the cursor
 * is inside a tag. If not it will only be highlighted when the cursor is on the punctuation.
 */
declare const useHighlightTagPunctuation: (editor: PrismEditor, className: string, alwaysHighlight?: boolean) => void;
export { useTagMatcher, useHighlightMatchingTags, useHighlightTagPunctuation };