import { ARIAGlobalStatesAndProperties } from '@ni/fast-foundation'; import { Editor } from '@tiptap/core'; import type { SuggestionProps } from '@tiptap/suggestion'; import type { ToggleButton } from '../../toggle-button'; import { type MentionDetail } from './types'; import { RichTextMarkdownSerializer } from '../models/markdown-serializer'; import { RichText } from '../base'; import type { RichTextMentionListbox } from '../mention-listbox'; import type { MappingConfigs } from '../../rich-text-mention/base/types'; import type { MentionExtensionConfiguration } from '../models/mention-extension-configuration'; import { EditorConfiguration } from '../models/editor-configuration'; declare global { interface HTMLElementTagNameMap { 'nimble-rich-text-editor': RichTextEditor; } } declare const RichTextEditor_base: (abstract new (...args: any[]) => { errorText?: string; errorVisible: boolean; errorHasOverflow: boolean; readonly $fastController: import("@ni/fast-element").Controller; $emit(type: string, detail?: any, options?: Omit): boolean | void; connectedCallback(): void; disconnectedCallback(): void; attributeChangedCallback(name: string, oldValue: string, newValue: string): void; }) & typeof RichText; /** * A nimble styled rich text editor */ export declare class RichTextEditor extends RichTextEditor_base { /** * @internal */ editorDiv: HTMLDivElement; /** * @internal */ tiptapEditor: Editor; /** * @internal */ readonly xmlSerializer: XMLSerializer; /** * @internal */ richTextMarkdownSerializer: RichTextMarkdownSerializer; /** * Whether to disable user from editing and interacting with toolbar buttons * * @public * HTML Attribute: disabled */ disabled: boolean; /** * Whether to hide the footer of the rich text editor * * @public * HTML Attribute: footer-hidden */ footerHidden: boolean; /** * @public * HTML Attribute: placeholder */ placeholder?: string; /** * True if the editor is empty or contains only whitespace, false otherwise. * * @public */ get empty(): boolean; /** * @internal */ mentionListbox?: RichTextMentionListbox; /** * @internal */ boldButton: ToggleButton; /** * @internal */ italicsButton: ToggleButton; /** * @internal */ bulletListButton: ToggleButton; /** * @internal */ numberedListButton: ToggleButton; /** * The width of the vertical scrollbar, if displayed. * @internal */ scrollbarWidth: number; /** * @internal */ activeMentionCharacter: string; /** * @internal */ activeMappingConfigs?: MappingConfigs; /** * @internal */ activeMentionCommand?: SuggestionProps['command']; /** * @internal */ editorContainer: HTMLDivElement; private resizeObserver?; private updateScrollbarWidthQueued; /** * @internal */ connectedCallback(): void; /** * @internal */ disconnectedCallback(): void; /** * @internal */ disabledChanged(): void; /** * Update the placeholder text and view of the editor. * @internal */ placeholderChanged(_prev: unknown, _next: unknown): void; /** * @internal */ ariaLabelChanged(_prev: unknown, _next: unknown): void; /** * @internal */ configurationChanged(prev: EditorConfiguration | undefined, next: EditorConfiguration): void; /** * @internal */ activeMentionCharacterChanged(): void; /** * Toggle the bold mark and focus back to the editor * @internal */ boldButtonClick(): void; /** * Toggle the bold mark and focus back to the editor * @internal */ boldButtonKeyDown(event: KeyboardEvent): boolean; /** * Toggle the italics mark and focus back to the editor * @internal */ italicsButtonClick(): void; /** * Toggle the italics mark and focus back to the editor * @internal */ italicsButtonKeyDown(event: KeyboardEvent): boolean; /** * Toggle the unordered list node and focus back to the editor * @internal */ bulletListButtonClick(): void; /** * Toggle the unordered list node and focus back to the editor * @internal */ bulletListButtonKeyDown(event: KeyboardEvent): boolean; /** * Toggle the ordered list node and focus back to the editor * @internal */ numberedListButtonClick(): void; /** * Toggle the ordered list node and focus back to the editor * @internal */ numberedListButtonKeyDown(event: KeyboardEvent): boolean; /** * Inserts the mention character into the editor and focus back to the editor * @internal */ mentionButtonClick(character: string): void; /** * This function load tip tap editor with provided markdown content by parsing into html * @public */ setMarkdown(markdown: string): void; /** * This function returns markdown string by serializing tiptap editor document using prosemirror MarkdownSerializer * @public */ getMarkdown(): string; /** * @internal */ stopEventPropagation(event: Event): boolean; getMentionedHrefs(): string[]; /** * @internal */ getMentionExtensionConfig(): MentionExtensionConfiguration[]; /** * @internal */ onMentionSelect(event: CustomEvent): void; /** * @internal */ focusoutHandler(): void; createConfig(): void; private isMentionExtensionConfigUnchanged; private createEditor; private initializeEditor; /** * This function takes the Fragment from parseMarkdownToDOM function and return the serialized string using XMLSerializer */ private getHtmlContent; /** * Binding the "transaction" event to the editor allows continuous monitoring the events and updating the button state in response to * various actions such as mouse events, keyboard events, changes in the editor content etc,. * https://tiptap.dev/api/events#transaction */ private bindEditorTransactionEvent; private unbindEditorTransactionEvent; private updateEditorButtonsState; private keyActivatesButton; private unbindEditorUpdateEvent; /** * input event is fired when there is a change in the content of the editor. * * https://tiptap.dev/api/events#update */ private bindEditorUpdateEvent; private disableEditor; private disableMentionViewElement; /** * Stopping the native input event propagation emitted by the contenteditable element in the Tiptap * since there is an issue (linked below) in ProseMirror where selecting the text and removing it * does not trigger the native HTMLElement input event. So using the "update" event emitted by the * Tiptap to capture it as an "input" customEvent in the rich text editor. * * Prose Mirror issue: https://discuss.prosemirror.net/t/how-to-handle-select-backspace-delete-cut-type-kind-of-events-handletextinput-or-handledomevents-input-doesnt-help/4844 */ private stopNativeInputEventPropagation; private unbindNativeInputEvent; private queueUpdateScrollbarWidth; private updateScrollbarWidth; private onResize; private getTipTapExtension; private setEditorTabIndex; private setActiveMappingConfigs; private shouldInsertSpace; private getMentionExtensionConfigFromCharacter; private resetEditorButtonsState; private getButtonsState; } export interface RichTextEditor extends ARIAGlobalStatesAndProperties { } export declare const richTextEditorTag = "nimble-rich-text-editor"; export {};