@etsoo/editor

import { IEOEditor, IEOEditorClickedButton } from "./IEOEditor"; import { EOEditorCommandKey, IEOEditorIconCommand } from "./classes/EOEditorCommand"; import { EOEditorLabelLanguage } from "./classes/EOEditorLabels"; import { EOPopup } from "./components/EOPopup"; import { EOImageEditor } from "./components/EOImageEditor"; /** * EOEditor * Attributes (strings that are set declaratively on the tag itself or set imperatively using setAttribute) vs Properties * https://lamplightdev.com/blog/2020/04/30/whats-the-difference-between-web-component-attributes-and-properties/ */ export declare class EOEditor extends HTMLElement implements IEOEditor { /** * Observed attributes */ static get observedAttributes(): string[]; /** * Caret keys */ static caretKeys: EOEditorCommandKey[]; /** * Backup key */ static readonly BackupKey = "EOEditor-Backup"; /** * Lastest characters key */ static readonly LatestCharactersKey = "EOEditor-Latest-Characters"; private _backupInitialized; /** * Backup initialized */ get backupInitialized(): boolean; /** * Buttons */ readonly buttons: Record<string, HTMLButtonElement | undefined>; /** * Image editor */ readonly imageEditor: EOImageEditor; /** * Popup */ readonly popup: EOPopup; /** * Editor container */ readonly editorContainer: HTMLDivElement; /** * Editor iframe */ readonly editorFrame: HTMLIFrameElement; private _editorWindow; /** * Editor iframe window */ get editorWindow(): Window; /** * Editor source code textarea */ readonly editorSourceArea: HTMLTextAreaElement; /** * Editor toolbar */ readonly editorToolbar: HTMLDivElement; private _labels?; /** * Editor labels */ get labels(): EOEditorLabelLanguage | undefined; private palette; private backupCancel?; private selectionChangeCancel?; private form?; private formInput?; private currentCell; private lastHighlights?; private characterCategories; private _lastClickedButton?; /** * Last clicked button */ get lastClickedButton(): IEOEditorClickedButton | undefined; /** * Name */ get name(): string | null | undefined; set name(value: string | null | undefined); /** * Clone styles to editor */ get cloneStyles(): string | boolean | null | undefined; set cloneStyles(value: string | boolean | null | undefined); /** * Commands, a supported kind or commands array */ get commands(): string | null | undefined; set commands(value: string | null | undefined); _content: string | null | undefined; /** * Get or set editor's content */ get content(): string | null | undefined; set content(value: string | null | undefined); /** * Get or set editor's value, alias of content */ get value(): string | null | undefined; set value(value: string | null | undefined); /** * Main color */ get color(): string | null | undefined; set color(value: string | null | undefined); /** * Active color */ get activeColor(): string | null | undefined; set activeColor(value: string | null | undefined); /** * Width */ get width(): string | null; set width(value: string | number | null | undefined); /** * Height */ get height(): string | null; set height(value: string | number | null | undefined); /** * Style with CSS */ get styleWithCSS(): string | boolean | null | undefined; set styleWithCSS(value: string | boolean | null | undefined); /** * Language */ get language(): string | null | undefined; set language(value: string | null | undefined); /** * Backup distinguish key */ get backupKey(): string | null | undefined; set backupKey(value: string | null | undefined); /** * Constructor */ constructor(); private getBackupName; /** * Backup editor content * @param miliseconds Miliseconds to wait */ backup(miliseconds?: number): void; private backupAction; /** * Clear backup */ clearBackup(): void; /** * Get backup */ getBackup(): string | null; private setCommands; private setupButtons; /** * Delete selection */ delete(): void; /** * Edit image * @param image Image to edit * @param callback Callback when doen */ editImage(image: HTMLImageElement, callback?: (data: string) => void): void; private getAllHighlights; /** * Clear highlights */ private clearHighlights; /** * Restore focus to the editor iframe */ restoreFocus(): void; private buttonClick; private setWidth; private setHeight; private setColor; private setContent; private setActiveColor; /** * Called every time the element is inserted into the DOM. * Useful for running setup code */ connectedCallback(): void; private closePopups; private initContent; private testMergeButton; private selectPopupElement; private selectElement; private adjustPopup; private adjustTargetPopup; disconnectedCallback(): void; attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void; private createButton; private createButtonSimple; private createIconButton; private createSVG; /** * Create element * @param tagName Tag name * @returns Element */ createElement<K extends keyof HTMLElementTagNameMap>(tagName: K): HTMLElementTagNameMap[K]; /** * Get selection * @returns Selection */ getSelection(): Selection | null; /** * Get first range * @returns Range */ getFirstRange(): Range | null; /** * Get deepest node * @param node Node * @returns Deepest node */ getDeepestNode(node: Node): Node; /** * Get the only child element * @param container Container node * @returns Only element */ getOnlyElement(container: Node): HTMLElement | null; /** * Get current element * @param tester Tester function or class name * @returns Element */ getCurrentElement(tester: string | ((input: HTMLElement) => boolean)): HTMLElement | null; /** * Get first element * @param selection Selection */ getFirstElement(selection?: Selection | null): HTMLElement | null; /** * Get first element * @param range Range */ getFirstElement(range: Range | null): HTMLElement | null; /** * Get first link * @returns Link */ getFirstLink(): HTMLAnchorElement | null; private onFormSubmit; private clearBackupSeed; private clearSelectionChangeSeed; private getClasses; private onSelectionChange; private setFillColor; private getFillColor; private onSelectionChangeDirect; private detectElement; private delectPopupSelection; /** * Popup blocks */ popupBlocks(): void; /** * Popup styles */ popupStyle(element?: HTMLElement | null): void; private createAligns; private createInputs; private createRadios; private createSelect; private createMSelect; private setColorInput; private popupTextbox; private setNarrowButtons; /** * Table properties * @param table HTML table */ tableProperties(table: HTMLTableElement): void; private addUnit; private setPopupStyleValue; private popupVideo; /** * Popup symbols */ popupSymbols(): void; /** * Popup colors * @param color Current color * @param callback Callback * @param popup EOPopup */ popupColors(color: string | undefined, callback: (color: string) => void): void; /** * Popup HTML content * @param content HTML content * @param ready Ready callback * @param insideIFrame Inside iframe or not */ popupContent(content: string, ready?: () => void, insideIFrame?: boolean): void; /** * Popup subs */ popupSubs(): void; private updateClickedButton; /** * Popup icons * @param icons Icons * @param ready Callback */ popupIcons(icons: IEOEditorIconCommand[], ready?: () => void): void; private toggleButtons; private isCaretSelection; private isCaretKey; private toggleButtonsCaret; private showAbout; showFullscreen(): void; /** * Unlink * @returns Result */ unlink(): boolean; private iframe; private link; private tableSplitCell; private removeLock; private lock; private toggleSource; /** * Insert HTML * More controls than 'insertHTML' command * @param html Valid HTML string * @param autoCollapse Auto collapse for the range */ insertHTML(html: string | HTMLElement, autoCollapse?: boolean): Range | null; /** * Insert image */ insertImage(): void; /** * Insert table */ insertTable(): void; /** * Execute command * https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand * @param name Name */ executeCommand(name: EOEditorCommandKey): boolean; /** * Let first range surround node * @param tagName New node tagname * @param excludedParents Excluded parent tagnames * @returns Result */ surroundNode(tagName: string, ...excludedParents: string[]): [boolean, HTMLElement?]; }