rhino-editor/exports/elements/tip-tap-editor-base.d.ts

A custom element wrapped rich text editor

import { BaseElement } from "../../internal/elements/base-element.js";
import { Editor, EditorOptions } from "@tiptap/core";
import { StarterKitOptions } from "@tiptap/starter-kit";
import { RhinoStarterKitOptions } from "../extensions/rhino-starter-kit.js";
import { CSSResult, PropertyDeclarations, PropertyValueMap, TemplateResult } from "lit";
import { AttachmentUpload } from "../attachment-upload.js";
import { AttachmentManager } from "../attachment-manager.js";
import { AddAttachmentEvent } from "../events/add-attachment-event.js";
import type { Maybe } from "../../types.js";
import { FileAcceptEvent } from "../events/file-accept-event.js";
import { RhinoPasteEvent } from "../events/rhino-paste-event.js";
import { Slice } from "@tiptap/pm/model";
import type { EditorView } from "@tiptap/pm/view";
export type Serializer = "" | "html" | "json";
export type RhinoEditorStarterKitOptions = StarterKitOptions & RhinoStarterKitOptions & {
    increaseIndentation: boolean;
    decreaseIndentation: boolean;
};
export declare class TipTapEditorBase extends BaseElement {
    /**
     * Default registration name
     */
    static baseName: string;
    static get styles(): CSSResult[];
    static get properties(): PropertyDeclarations;
    /**
     * Whether or not the editor should be editable.
     *
     * NOTE: a user can change this in the browser dev tools, don't rely on this to prevent
     * users from editing and attempting to save the document.
     */
    readonly: boolean;
    /**
     * Prevents premature rebuilds.
     */
    hasInitialized: boolean;
    /**
     * An array of "AttachmentUploads" added via direct upload. Check this for any attachment uploads that have not completed.
     */
    pendingAttachments: AttachmentUpload[];
    /**
     * The hidden input to attach to
     */
    input: Maybe<string>;
    /**
     * The currently attached TipTap instance
     */
    editor: Maybe<Editor>;
    /**
     * The element that TipTap is attached to
     */
    editorElement: Maybe<Element>;
    /**
     * JSON or HTML serializer used for determining the string to write to the hidden input.
     */
    serializer: Serializer;
    /** Comma separated string passed to the attach-files input. */
    accept: string;
    starterKitOptions: Partial<RhinoEditorStarterKitOptions>;
    /**
     * This will be concatenated onto RhinoStarterKit and StarterKit extensions.
     */
    extensions: EditorOptions["extensions"];
    /**
     * When the `defer-initialize` attribute is present, it will wait to start the TipTap editor until the attribute has been removed.
     */
    deferInitialize: boolean;
    /**
     * @internal
     */
    __initialAttributes: Record<string, string>;
    /**
     * @internal
     */
    __hasRendered: boolean;
    __getInitialAttributes(): void;
    /**
     * Reset mechanism. This is called on first connect, and called anytime extensions,
     * or editor options get modified to make sure we have a fresh instance.
     */
    rebuildEditor(): void;
    /**
     * Grabs HTML content based on a given range. If no range is given, it will return the contents
     *   of the current editor selection. If the current selection is empty, it will return an empty string.
     * @param from - The start of the selection
     * @param to - The end of the selection
     * @example Getting the HTML content of the current selection
     *    const rhinoEditor = document.querySelector("rhino-editor")
     *    rhinoEditor.getHTMLContentFromRange()
     *
     * @example Getting the HTML content of node range
     *    const rhinoEditor = document.querySelector("rhino-editor")
     *    rhinoEditor.getHTMLContentFromRange(0, 50)
     *
     * @example Getting the HTML content and falling back to entire editor HTML
     *    const rhinoEditor = document.querySelector("rhino-editor")
     *    let html = rhinoEditor.getHTMLContentFromRange()
     *    if (!html) {
     *       html = rhinoEditor.getHTML()
     *    }
     */
    getHTMLContentFromRange(from?: number, to?: number): string;
    /**
     * Grabs plain text representation based on a given range. If no parameters are given, it will return the contents
     *   of the current selection. If the current selection is empty, it will return an empty string.
     * @param from - The start of the selection
     * @param to - The end of the selection
     * @example Getting the Text content of the current selection
     *    const rhinoEditor = document.querySelector("rhino-editor")
     *    rhinoEditor.getTextContentFromRange()
     *
     * @example Getting the Text content of node range
     *    const rhinoEditor = document.querySelector("rhino-editor")
     *    rhinoEditor.getTextContentFromRange(0, 50)
     *
     * @example Getting the Text content and falling back to entire editor Text
     *    const rhinoEditor = document.querySelector("rhino-editor")
     *    let text = rhinoEditor.getTextContentFromRange()
     *    if (!text) {
     *       text = rhinoEditor.editor.getText()
     *    }
     */
    getTextContentFromRange(from?: number, to?: number): string;
    protected willUpdate(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
    protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
    /** Used for registering things like <role-toolbar>, <role-tooltip>, <rhino-attachment-editor> */
    registerDependencies(): void;
    get slottedEditor(): Element | null;
    constructor();
    /**
     * @private
     */
    __addPendingAttachment(e: {
        attachmentUpload: AttachmentUpload;
    }): void;
    /**
     * @private
     */
    __removePendingAttachment(e: {
        attachment: AttachmentManager;
    } | {
        attachmentUpload: AttachmentUpload;
    }): void;
    connectedCallback(): Promise<void>;
    startEditor(): Promise<void>;
    disconnectedCallback(): void;
    __initializationPromise__: null | Promise<void>;
    __initializationResolver__: null | ((value: void | PromiseLike<void>) => void);
    __setupInitialization__(): void;
    get initializationComplete(): Promise<void> | null;
    /**
     * Used for determining how to handle uploads.
     *   Override this for substituting your own
     *   direct upload functionality.
     */
    handleAttachment: (event: AddAttachmentEvent) => void;
    /** Override this to prevent specific file types from being uploaded. */
    handleFileAccept: (_event: FileAcceptEvent) => void;
    addExtensions(...extensions: EditorOptions["extensions"] | Array<EditorOptions["extensions"]>): void;
    disableStarterKitOptions(...options: Array<keyof RhinoStarterKitOptions> | Array<Array<keyof RhinoStarterKitOptions>>): void;
    /**
     * Extend this to provide your own options, or override existing options.
     * The "element" is where the editor will be initialized.
     * This will be merged
     *   @example
     *    class ExtendedRhinoEditor extends TipTapEditor {
     *      editorOptions (_element: Element) {
     *        return {
     *          autofocus: true
     *        }
     *      }
     *    }
     *
     */
    editorOptions(_element?: Element): Partial<EditorOptions>;
    /**
     * Finds the <input> element in the light dom and updates it with the value of `#serialize()`
     */
    updateInputElementValue(): void;
    /**
     * Function called when grabbing the content of the editor. Currently supports JSON or HTML.
     */
    serialize(): string;
    /**
     * @override
     * Apparently this is a native dom method?
     */
    getHTML(): string;
    /**
     * Searches for the <input> element in the light dom to write the HTML or JSON to.
     */
    get inputElement(): Maybe<HTMLInputElement>;
    handleFiles(files: File[] | FileList): Promise<AttachmentManager[]>;
    handleDropFile: (_view: EditorView, event: DragEvent, _slice: Slice, moved: boolean) => boolean;
    /**
     * Handles dropped files on the component, but not on the prosemirror instance.
     */
    handleNativeDrop(event: DragEvent): boolean;
    handlePaste: (event: RhinoPasteEvent) => Promise<void>;
    transformFilesToAttachments(files?: File[] | FileList | null): AttachmentManager[] | undefined;
    renderToolbar(): TemplateResult<1>;
    renderDialog(): TemplateResult<1>;
    render(): TemplateResult;
    allOptions(element: Element): Partial<EditorOptions>;
    /**
     * Due to some inconsistencies in how Trix will render the inputElement based on if its
     * the HTML representation, or transfromed with `#to_trix_html` this gives
     * us a consistent DOM structure to parse for rich text comments.
     */
    private normalizeDOM;
    /**
     * @private
     * Use a getter here so when we rebuild the editor it pulls the latest starterKitOptions
     * This is intentionally not to be configured by a user. It makes updating extensions hard.
     *  it also is a getter and not a variable so that it will rerun in case options change.
     */
    private get __starterKitExtensions__();
    /**
     * @param {Element} element - The element that the editor will be installed onto.
     */
    private __defaultOptions;
    private __handleCreate;
    private __handleUpdate;
    private __handleFocus;
    private __handleBlur;
    private __handleSelectionUpdate;
    private __handleTransaction;
    private __bindEditorListeners;
    private __unBindEditorListeners;
    private __setupEditor;
    getHTMLAndPreserveSignificantWhiteSpace(): string;
}