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 `` element which contains 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;
}