Options
All
  • Public
  • Public/Protected
  • All
Menu

Class ProseMirrorMenu

A class responsible for building a menu for a ProseMirror instance.

Hierarchy

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Properties

options

options: ProseMirrorMenuOptions

Private #renderTarget

#renderTarget: HTMLTemplateElement = ...

An HTML element that we write HTML to before injecting it into the DOM.

Private #editingSource

#editingSource: boolean = false

Track whether we are currently in a state of editing the HTML source.

Static Protected _MENU_ITEM_SCOPES

_MENU_ITEM_SCOPES: { BOTH: string; TEXT: string; HTML: string } = ...

An enumeration of editor scopes in which a menu item can appear

Type declaration

  • BOTH: string
  • TEXT: string
  • HTML: string

Accessors

editingSource

  • get editingSource(): boolean

  • Returns boolean

Methods

render

activateListeners

  • activateListeners(html: HTMLMenuElement): void

  • Attach event listeners.

    Parameters

    • html: HTMLMenuElement

      The root menu element.

    Returns void

update

  • update(view: EditorView, prevState: EditorView): void

  • Called whenever the view's state is updated.

    Parameters

    • view: EditorView

      The current editor state.

    • prevState: EditorView

      The previous editor state.

    Returns void

destroy

  • destroy(): void

  • Called when the view is destroyed or receives a state with different plugins.

    Returns void

Protected _createDropDowns

  • _createDropDowns(): void

  • Instantiate the ProseMirrorDropDown instances and configure them with the defined menu items.

    Returns void

Protected _getDropDownMenus

  • _getDropDownMenus(): any

  • Configure dropdowns for this menu. Each entry in the top-level array corresponds to a separate drop-down.

    Returns any

Protected _getMenuItems

Protected _isItemActive

  • Determine whether the given menu item is currently active or not.

    Parameters

    Returns boolean

    Whether the cursor or selection is in a state represented by the given menu item.

Protected _isMarkActive

  • Determine whether the given menu item representing a mark is active or not.

    Parameters

    Returns boolean

    Whether the cursor or selection is in a state represented by the given mark.

Protected _isNodeActive

  • Determine whether the given menu item representing a node is active or not.

    Parameters

    Returns boolean

    Whether the cursor or selection is currently within a block of this menu item's node type.

Protected _onAction

  • _onAction(event: MouseEvent): void

  • Handle a button press.

    Parameters

    • event: MouseEvent

      The click event.

    Returns void

Protected _wrapEditor

  • _wrapEditor(): void

  • Wrap the editor view element and inject our template ready to be rendered into.

    Returns void

Protected _handleSave

  • _handleSave(): any

  • Handle requests to save the editor contents

    Returns any

Protected #toggleSource

  • #toggleSource(): void

  • Handle a request to edit the source HTML directly.

    Returns void

Protected _insertImagePrompt

  • _insertImagePrompt(): Promise<void>

  • Display the insert image prompt.

    Returns Promise<void>

Protected _insertLinkPrompt

  • _insertLinkPrompt(): Promise<void>

  • Display the insert link prompt.

    Returns Promise<void>

Protected _showDialog

  • _showDialog(action: string, template: string, [options]?: { data: any }): HTMLDialogElement

  • Create a dialog for a menu button.

    Parameters

    • action: string

      The unique menu button action.

    • template: string

      The dialog's template.

    • [options]: { data: any } = {}

      Additional options to configure the dialog's behaviour.

      • data: any

    Returns HTMLDialogElement

Protected _clearFormatting

  • _clearFormatting(): void

  • Clear any marks from the current selection.

    Returns void

Protected _toggleBlock

  • Toggle the given selection by wrapping it in a given block or lifting it out of one.

    Parameters

    • node: NodeType

      The type of node being interacted with.

    • wrap: MenuToggleBlockWrapCommand

      The wrap command specific to the given node.

    • [options]: { attrs: any } = {}

      Additional options to configure behaviour.

      • attrs: any

    Returns void

Protected _toggleTextBlock

  • _toggleTextBlock(node: NodeType, [options]?: { attrs: any }): void

  • Toggle the given selection by wrapping it in a given text block, or reverting to a paragraph block.

    Parameters

    • node: NodeType

      The type of node being interacted with.

    • [options]: { attrs: any } = {}

      Additional options to configure behaviour.

      • attrs: any

    Returns void

Private #clearSourceTextarea

  • #clearSourceTextarea(): string

  • Conclude editing the source HTML textarea. Clear its contents and return the HTML which was contained.

    Returns string

    The HTML text contained within the textarea before it was cleared

Private #activateSourceTextarea

  • #activateSourceTextarea(): void

  • Create and activate the source code editing textarea

    Returns void

Private #commitSourceTextarea

  • #commitSourceTextarea(): void

  • Commit changes from the source textarea to the view.

    Returns void

Private #insertHorizontalRule

  • #insertHorizontalRule(): void

  • Inserts a horizontal rule at the cursor.

    Returns void

Private #toggleAlignment

  • #toggleAlignment(alignment: string): void

  • Toggle a particular alignment for the given selection.

    Parameters

    • alignment: string

      The text alignment to toggle.

    Returns void

Static build

  • build(schema: any, options?: {}): Plugin<any>

  • Build the plugin.

    Parameters

    • schema: any

      The ProseMirror schema to build the plugin against.

    • options: {} = {}

      Returns Plugin<any>