prism-code-editor
Version:
Lightweight, extensible code editor component for the web using Prism
52 lines (51 loc) • 1.96 kB
TypeScript
/** @module match-tags */
import { PrismEditor, BasicExtension } from "../index.js";
import { Token } from "../prism/index.js";
/**
* 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's not 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's not self-closing
*
* The tags are sorted by their ending position
*/
readonly tags: Tag[];
/** Array mapping the index of a tag to the index of its matching tag. */
readonly pairs: (number | undefined)[];
}
/**
* Function that adds tag matching to the editor.
* @returns An object containing all tags and pairs.
*/
export declare const createTagMatcher: (editor: PrismEditor) => TagMatcher;
/**
* Extension that adds classes to matching HTML/XML/JSX tags. If the editor doesn't
* have a {@link TagMatcher}, one is created. Obviously don't add this if the languages
* used don't have tags.
*
* Use the CSS selectors `.active-tagname` to style the elements.
*
* This extension can safely be added dynamically to an editor.
*/
export declare const matchTags: () => BasicExtension;
/**
* Extension that highlights `<` and `>` punctuation in XML tags.
* @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.
*/
export declare const highlightTagPunctuation: (className: string, alwaysHighlight?: boolean) => BasicExtension;