obsidian-dev-utils
Version:
This is the collection of useful functions that you can use for your Obsidian plugin development
114 lines (113 loc) • 3.56 kB
text/typescript
/**
* @packageDocumentation
*
* Contains a component that displays and edits multiple text values.
*/
import type { Promisable } from 'type-fest';
import { ValueComponent } from 'obsidian';
import type { ValidatorElement } from '../../../HTMLElement.mjs';
import type { TextBasedComponent } from './TextBasedComponent.mjs';
import type { ValidatorComponent } from './ValidatorComponent.mjs';
import type { ValueComponentWithChangeTracking } from './ValueComponentWithChangeTracking.mjs';
/**
* A component that displays and edits code.
*
* You can add this component using {@link SettingEx.addCodeHighlighter}.
*
* In order to add the styles for the component, use {@link initPluginContext} in your plugin's `onload()` function.
*
* Alternatively, you can copy styles from {@link https://github.com/mnaoumov/obsidian-dev-utils/releases/latest/download/styles.css}.
*/
export declare class CodeHighlighterComponent extends ValueComponent<string> implements TextBasedComponent<string>, ValidatorComponent, ValueComponentWithChangeTracking<string> {
/**
* The input element of the component.
*
* @returns The input element of the component.
*/
get inputEl(): HTMLTextAreaElement;
/**
* Gets the validator element of the component.
*
* @returns The validator element of the component.
*/
get validatorEl(): ValidatorElement;
private readonly codeEl;
private placeholder;
private readonly preEl;
private tabSize;
private readonly textAreaComponent;
/**
* Creates a new multiple text component.
*
* @param containerEl - The container element of the component.
*/
constructor(containerEl: HTMLElement);
/**
* Empties the component.
*/
empty(): void;
/**
* Gets the value of the component.
*
* @returns The value of the component.
*/
getValue(): string;
/**
* Checks if the component is empty.
*
* @returns `true` if the component is empty, `false` otherwise.
*/
isEmpty(): boolean;
/**
* Adds a change listener to the component.
*
* @param callback - The callback to call when the value changes.
* @returns The component.
*/
onChange(callback: (newValue: string) => Promisable<void>): this;
/**
* Sets the disabled state of the component.
*
* @param disabled - The disabled state to set.
* @returns The component.
*/
setDisabled(disabled: boolean): this;
/**
* Sets the language for code highlighting.
*
* @param language - The language to set.
* @returns The component.
*/
setLanguage(language: string): this;
/**
* Sets the placeholder of the component.
*
* @param placeholder - The placeholder to set.
* @returns The component.
*/
setPlaceholder(placeholder: string): this;
/**
* Sets the placeholder value of the component.
*
* @param placeholderValue - The placeholder value to set.
* @returns The component.
*/
setPlaceholderValue(placeholderValue: string): this;
/**
* Sets the tab size of the component.
*
* @param tabSize - The tab size to set.
* @returns The component.
*/
setTabSize(tabSize: number): this;
/**
* Sets the value of the component.
*
* @param value - The value to set.
* @returns The component.
*/
setValue(value: string): this;
private handleKeyDown;
private handleScroll;
private updateHighlightedCode;
}