Class ProseMirrorMenu

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

Hierarchy (view full)

Constructors

constructor

Properties

options #renderTarget #editingSource _MENU_ITEM_SCOPES

Methods

render activateListeners update destroy _createDropDowns _getDropDownMenus _getMenuItems _isItemActive _isMarkActive _isNodeActive _onAction _wrapEditor _handleSave #toggleSource _insertImagePrompt _insertLinkPrompt _insertTablePrompt _showDialog _clearFormatting _toggleMatches _toggleBlock _toggleTextBlock #clearSourceTextarea #activateSourceTextarea #commitSourceTextarea #handleSourceKeydown #insertHorizontalRule #toggleAlignment build eventListeners

Constructors

constructor

Properties

options

options: ProseMirrorMenuOptions

Additional options to configure the plugin's behaviour.

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

Methods

render

activateListeners

  • activateListeners(html): void

  • Attach event listeners.

    Parameters

    • html: HTMLMenuElement

      The root menu element.

    Returns void

update

  • update(view, prevState): 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
  • Protected

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

    Returns void

Protected _getDropDownMenus

Protected _getMenuItems

Protected _isItemActive

  • _isItemActive(item): boolean
  • Protected

    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

  • _isMarkActive(item): boolean
  • Protected

    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

  • _isNodeActive(item): boolean
  • Protected

    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): void
  • Protected

    Handle a button press.

    Parameters

    • event: MouseEvent

      The click event.

    Returns void

Protected _wrapEditor

  • _wrapEditor(): void
  • Protected

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

    Returns void

Protected _handleSave

  • _handleSave(): any
  • Protected

    Handle requests to save the editor contents

    Returns any

Protected #toggleSource

  • #toggleSource(): void
  • Protected

    Handle a request to edit the source HTML directly.

    Returns void

Protected _insertImagePrompt

  • _insertImagePrompt(): Promise<void>
  • Protected

    Display the insert image prompt.

    Returns Promise<void>

Protected _insertLinkPrompt

  • _insertLinkPrompt(): Promise<void>
  • Protected

    Display the insert link prompt.

    Returns Promise<void>

Protected _insertTablePrompt

  • _insertTablePrompt(): Promise<void>
  • Protected

    Display the insert table prompt.

    Returns Promise<void>

Protected _showDialog

  • _showDialog(action, template, options?): HTMLDialogElement
  • Protected

    Create a dialog for a menu button.

    Parameters

    • action: string

      The unique menu button action.

    • template: string

      The dialog's template.

    • Optional options: {
          data: object;
      } = {}

      Additional options to configure the dialog's behaviour.

      • data: object

        Data to pass to the template.

    Returns HTMLDialogElement

Protected _clearFormatting

  • _clearFormatting(): void
  • Protected

    Clear any marks from the current selection.

    Returns void

Protected _toggleMatches

  • _toggleMatches(): Promise<void>
  • Protected

    Toggle link recommendations

    Returns Promise<void>

Protected _toggleBlock

  • _toggleBlock(node, wrap, options?): void
  • Protected

    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.

    • Optional options: {
          attrs: object;
      } = {}

      Additional options to configure behaviour.

      • attrs: object

        Attributes for the node.

    Returns void

Protected _toggleTextBlock

  • _toggleTextBlock(node, options?): void
  • Protected

    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.

    • Optional options: {
          attrs: object;
      } = {}

      Additional options to configure behaviour.

      • attrs: object

        Attributes for the node.

    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 #handleSourceKeydown

  • #handleSourceKeydown(event): void

  • Handle keypresses while editing editor source.

    Parameters

    • event: KeyboardEvent

      The keyboard event.

    Returns void

Private #insertHorizontalRule

  • #insertHorizontalRule(): void

  • Inserts a horizontal rule at the cursor.

    Returns void

Private #toggleAlignment

  • #toggleAlignment(alignment): void

  • Toggle a particular alignment for the given selection.

    Parameters

    • alignment: string

      The text alignment to toggle.

    Returns void

Static build

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

  • Build the plugin.

    Parameters

    • schema: any

      The ProseMirror schema to build the plugin against.

    • options: {} = {}

      Additional options to pass to the plugin.

      Returns Plugin<any>

      Abstract

    Static eventListeners

    • eventListeners(): void

    • Global listeners for the drop-down menu.

      Returns void

    Settings

    Member Visibility

    Theme

    On This Page

    constructoroptions#renderTarget#editingSource_MENU_ITEM_SCOPESrenderactivateListenersupdatedestroy_createDropDowns_getDropDownMenus_getMenuItems_isItemActive_isMarkActive_isNodeActive_onAction_wrapEditor_handleSave#toggleSource_insertImagePrompt_insertLinkPrompt_insertTablePrompt_showDialog_clearFormatting_toggleMatches_toggleBlock_toggleTextBlock#clearSourceTextarea#activateSourceTextarea#commitSourceTextarea#handleSourceKeydown#insertHorizontalRule#toggleAlignmentbuildeventListeners