type NumTextThemeType = "any" | "syntax-highlight" | "user-agent"; interface NumTextTheme { /** * Defines whether the theme is used for regular styling, syntax highlighting, or is a built-in theme provided by Num Text. */ type: NumTextThemeType; url?: string; stylesheet: HTMLStyleElement; } interface NumTextThemeEntry extends NumTextTheme { elements: NumTextElement[]; } interface NumTextThemeEntries { [name: string]: NumTextThemeEntry; } interface NumTextDefineThemeOptions { /** * Defines whether the theme should be used for regular styling, syntax highlighting, or is a built-in theme provided by Num Text. */ type?: NumTextThemeType; url?: RequestInfo | URL; /** * Accepts a ` * * * ``` */ template?: HTMLTemplateElement; content?: string; } interface NumTextUpdateThemeOptions { name: string; url?: RequestInfo | URL; content?: string | null; } type NumTextColorScheme = "light" | "dark"; interface NumTextLocalTheme extends NumTextTheme { active: boolean; } interface NumTextLocalThemes { [name: string]: NumTextLocalTheme; } /** * A global namespace to manage the configurations for Num Text. */ declare var NumText: { /** * A namespace which manages the theme definitions available for Num Text elements. */ themes: { entries: NumTextThemeEntries; /** * Creates a new theme definition which can be applied to your own Num Text elements. This will resolve to a failed Promise if a theme by the given name is already defined. */ define(name: string, { type, url, template, content }?: NumTextDefineThemeOptions): Promise; /** * Updates the stylesheet content for an already defined theme. The changes will be synced to all Num Text elements that have that theme applied. */ update({ name, url, content }: NumTextUpdateThemeOptions): Promise; fetch(url: RequestInfo | URL): Promise; /** * This provides a legacy fallback for browsers that don't yet support the `:is()` or `:where()` selectors in CSS, and it will use the `:-webkit-any()` selector instead. This is applied to all themes automatically. */ _tempBackwardsCompatibility_(content: string): string; /** * Deletes the definition for a given theme, and removes the theme from all Num Text elements that apply it. */ remove(name: string): void; /** * Checks if a given theme has been defined. */ has(name: string): boolean; }; }; declare class NumTextElement extends HTMLElement { #private; readonly shadowRoot: ShadowRoot; /** * A namespace which manages the color scheme of the element. */ readonly colorScheme: { set: (appearance: NumTextColorScheme) => NumTextColorScheme; /** * Toggles between the light and dark color schemes. */ toggle: () => NumTextColorScheme; get: () => NumTextColorScheme; }; /** * A namespace which manages the themes applied to the element. */ readonly themes: { entries: NumTextLocalThemes; /** * Adds a defined theme to the element. * * Only one syntax highlighting theme can be applied at a time. If one is already applied to the element, it will be removed. */ add: (name: string) => void; /** * Removes an applied theme from the element. */ remove: (name: string) => void; /** * Checks if a given theme has been applied to the element. */ has: (name: string) => boolean; /** * Re-enables an applied theme which was previously hidden. */ enable: (name: string) => void; /** * Hides an applied theme in-place. * * This is useful for performance if you plan to add it again later, as it won't actually remove it from the element. */ disable: (name: string) => void; /** * Checks if an applied theme is currently enabled or disabled. */ active: (name: string) => boolean | undefined; /** * Toggles the active state of an applied theme, between enabled and disabled. */ toggle: (name: string) => boolean | void; /** * Returns an array for all applied themes applied to the element of a given theme type. The default theme type is 'any'. * * The built-in theme provided by Num Text will not be included unless the 'user-agent' theme type is specified. */ getAll: (type?: NumTextThemeType) => string[]; }; /** * A namespace which manages the syntax highlighting within the editor. */ readonly syntaxHighlight: { enable: () => void; disable: () => void; /** * Checks if syntax highlighting is currently enabled. */ active: () => boolean; toggle: () => void; }; /** * The internal wrapper for all of the element's visible Shadow DOM content. */ readonly container: HTMLDivElement; /** * The internal line numbers section of the element. */ readonly gutter: HTMLOListElement; /** * The internal wrapper which ensures the alignment of the syntax highlighting layer to the internal textarea. */ readonly content: HTMLDivElement; /** * The internal syntax highlighting layer of the element. */ readonly syntax: HTMLPreElement; /** * The internal textarea of the element. */ readonly editor: HTMLTextAreaElement; constructor(); connectedCallback(): void; /** * Re-renders the internal line numbers section of the element to reflect the internal textarea's value. */ refreshLineNumbers(): void; /** * Re-renders the internal syntax highlighting layer with Prism to reflect the internal textarea's value. */ refreshSyntaxOverlay(): void; /** * Syncs the scroll positions for the internal line numbers section and the internal syntax highlighing layer to that of the internal textarea. * * Overscroll effects use by some platforms when scrolling past the bounds of the internal textarea's scroll box are also synced. */ refreshScrollPosition(): void; /** * Returns the numerical indices of a given character (string) within the editor. */ getCharacterIndexes(character: string): number[]; /** * Returns the numerical indices of the lines within the editor. */ getLineIndexes(): number[]; /** * Performs a find and replace for a given pattern or string within the editor. */ replace(pattern: string | RegExp, value: string): void; focus(options?: FocusOptions): void; blur(): void; get defined(): boolean; /** * Retrieves or sets the language to use for Prism's syntax highlighting tokenization. */ get syntaxLanguage(): string; set syntaxLanguage(language: string); /** * Retrieves or sets the text within the editor. */ get value(): string; set value(content: string); get disabled(): boolean; set disabled(state: boolean); /** * Retrieves or sets whether the editor is in read-only mode. */ get readonly(): boolean; set readonly(state: boolean); } interface HTMLElementTagNameMap { "num-text": NumTextElement; }