rhino-editor
Version:
A custom element wrapped rich text editor
193 lines (179 loc) • 7.06 kB
TypeScript
import { Ref } from "lit/directives/ref.js";
import { TipTapEditorBase } from "./tip-tap-editor-base.js";
import { PropertyDeclarations, PropertyValues } from "lit";
/** Imports <role-tooltip> and <role-toolbar> */
import RoleToolbar from "role-components/exports/components/toolbar/toolbar.js";
/** This will probably go away in favor of lazy loaded SVGs. */
import * as icons from "../../internal/icons";
import { Maybe } from "../../types.js";
/**
* This is the meat and potatoes. This is the <rhino-editor> element you'll
* see. This is what wraps everything into 1 coherent element.
* @slot toolbar - By replacing this, you're now making your own toolbar.
* @slot toolbar-start
*
* ## bold
* @slot before-bold-button
* @slot bold-button
* @slot after-bold-button
* ## Italic
* @slot before-italic-button
* @slot italic-button
* @slot after-italic-button
* ## Strike
* @slot before-strike-button
* @slot strike-button
* @slot after-strike-button
* ## Link
* @slot before-link-button
* @slot link-button
* @slot after-link-button
* ## Heading
* @slot before-heading-button
* @slot heading-button
* @slot after-heading-button
* ## Blockquote
* @slot before-blockquote-button
* @slot blockquote-button
* @slot after-blockquote-button
* ## Code block
* @slot before-code-block-button
* @slot code-block-button
* @slot after-code-block-button
* ## Bullet List
* @slot before-bullet-list-button
* @slot bullet-list-button
* @slot after-bullet-list-button
* ## Ordered list
* @slot before-ordered-list-button
* @slot ordered-list-button
* @slot after-ordered-list-button
* ## Decrease Indentation
* @slot before-decrease-indentation-button
* @slot decrease-indentation-button
* @slot after-decrease-indentation-button
* ## Increase Indentation
* @slot before-increase-indentation-button
* @slot increase-indentation-button
* @slot after-increase-indentation-button
* ## Attachments
* @slot before-attach-files-button
* @slot attach-files-button
* @slot after-attach-files-button
* ## Undo
* @slot before-undo-button
* @slot undo-button
* @slot after-undo-button
* ## Redo
* @slot before-redo-button
* @slot redo-button
* @slot after-redo-button
* @slot toolbar-end
*
* ## Events
* @rhino-bubble-menu-show
* @rhino-bubble-menu-hide
*/
export declare class TipTapEditor extends TipTapEditorBase {
static get styles(): import("lit").CSSResult[];
static get properties(): PropertyDeclarations;
/**
* Whether or not to enable the alt text editor.
*/
altTextEditor: boolean;
/**
* The heading level to use for the heading button
*/
defaultHeadingLevel: 1 | 2 | 3 | 4 | 5 | 6;
/**
* Translations for various aspects of the editor.
*/
translations: {
readonly attachFiles: "Attach Files";
readonly bold: "Bold <cmd+b>" | "Bold <ctrl+b>";
readonly italics: "Italicize <cmd+i>" | "Italicize <ctrl+i>";
readonly strike: "Strikethrough <cmd+shift+s>" | "Strikethrough <ctrl+shift+s>";
readonly link: "Link <cmd+k>" | "Link <ctrl+k>";
readonly heading: "Heading <cmd+option+1>" | "Heading <cmd+alt+1>" | "Heading <ctrl+option+1>" | "Heading <ctrl+alt+1>";
readonly blockQuote: "Blockquote <cmd+shift+b>" | "Blockquote <ctrl+shift+b>";
readonly code: "Inline code <cmd+e>" | "Inline code <ctrl+e>";
readonly codeBlock: "Codeblock <cmd+option+c>" | "Codeblock <cmd+alt+c>" | "Codeblock <ctrl+option+c>" | "Codeblock <ctrl+alt+c>";
readonly bulletList: "Bullet List <cmd+shift+8>" | "Bullet List <ctrl+shift+8>";
readonly orderedList: "Ordered List <cmd+shift+7>" | "Ordered List <ctrl+shift+7>";
readonly undo: "Undo <cmd+z>" | "Undo <ctrl+z>";
readonly redo: "Redo <cmd+shift+z>" | "Redo <ctrl+shift+z>";
readonly linkDialogLink: "Link";
readonly linkDialogUnlink: "Unlink";
readonly placeholder: "Write something...";
readonly increaseIndentation: "Increase indentation";
readonly decreaseIndentation: "Decrease indentation";
readonly fileUploadErrorMessage: "Unable to upload this file.";
readonly captionPlaceholder: "Add a caption...";
};
/**
* The <input> for inserting links
*/
linkInputRef: Ref<HTMLInputElement>;
/**
* The dialog that contains the link input + link / unlink buttons
*/
linkDialogExpanded: boolean;
private __invalidLink__;
/**
* @override
*/
registerDependencies(): void;
constructor();
protected updated(changedProperties: PropertyValues<this>): void;
/**
* @override
*/
connectedCallback(): Promise<void>;
/**
* @override
*/
startEditor(): Promise<void>;
disconnectedCallback(): void;
get icons(): typeof icons;
/** Closes the dialog for link previews */
handleKeyboardDialogToggle: (e: KeyboardEvent) => void;
toggleLinkDialog(): void;
closeLinkDialog(): void;
showLinkDialog(): void;
get linkDialog(): Maybe<HTMLDivElement>;
attachFiles(): void;
addLink(): void;
get fileInputEl(): Maybe<HTMLInputElement>;
handleFileUpload(): Promise<void>;
private get __tooltipExportParts();
renderBoldButton(prefix?: string): import("lit").TemplateResult<1>;
renderItalicButton(prefix?: string): import("lit").TemplateResult<1>;
renderStrikeButton(prefix?: string): import("lit").TemplateResult<1>;
renderLinkButton(prefix?: string): import("lit").TemplateResult<1>;
renderHeadingButton(prefix?: string): import("lit").TemplateResult<1>;
renderBlockquoteButton(prefix?: string): import("lit").TemplateResult<1>;
renderCodeButton(prefix?: string): import("lit").TemplateResult<1>;
renderCodeBlockButton(prefix?: string): import("lit").TemplateResult<1>;
renderBulletListButton(prefix?: string): import("lit").TemplateResult<1>;
renderOrderedListButton(prefix?: string): import("lit").TemplateResult<1>;
renderAttachmentButton(prefix?: string): import("lit").TemplateResult<1>;
renderUndoButton(prefix?: string): import("lit").TemplateResult<1>;
renderDecreaseIndentation(prefix?: string): import("lit").TemplateResult<1>;
renderIncreaseIndentation(prefix?: string): import("lit").TemplateResult<1>;
renderRedoButton(prefix?: string): import("lit").TemplateResult<1>;
renderToolbarStart(): import("lit").TemplateResult<1>;
renderToolbarEnd(): import("lit").TemplateResult<1>;
renderToolbar(): import("lit").TemplateResult<1>;
/**
* @private
*/
private __handleLinkDialogClick;
renderLinkDialogAnchoredRegion(): import("lit").TemplateResult<1>;
/** @TODO: Lets think of a more friendly way to render dialogs for users to extend. */
renderLinkDialog(): import("lit").TemplateResult<1>;
/**
* Returns the bubble menu toolbar from the shadow root.
*/
get defaultBubbleMenuToolbar(): RoleToolbar | null | undefined;
renderBubbleMenuToolbar(): import("lit").TemplateResult<1>;
}