Context Menu

Overview

The ContextMenu component creates a custom context menu that is displayed when users clicked the right button of the mouse. You can add custom items to the main context menu through this component.

Properties

`lines`

get

Returns the latest Lines instance. This is an alias of Code#Lines.

`i18n`

get

Returns the i18n collection. This is an alias of this.options.i18n.

`buttons`

buttons: Record<string, HTMLButtonElement>

Holds buttons that are currently displayed. This may be null when the menu is hidden.

Methods

`createCloseButton()`

createCloseButton( attrs: Attributes ): HTMLButtonElement

Creates a close button. The wrapper element must exist and have an ID attribute before calling this method.

Params

`attrs`	Attributes for the button.

Return

A created button element.

`createButtons()`

createButtons<T>( settings: UIButtonSettings<T> | UIButtonSettings<T>[], parent: HTMLElement, component: T, classes?: string | string[] ): Record<string, HTMLButtonElement>

Creates buttons according to the settings.

Params

`settings`	A settings object.
`parent`	A parent element to append the button to.
`component`	A component instance.
`classes`	Additional classes for buttons.

Return

An object with created buttons.

`createField()`

createField( settings: UIFieldSettings, parent: HTMLElement ): HTMLInputElement

A utility function to create an input field.

Params

`settings`	A settings object.
`parent`	A parent element where the created input element will be appended.

Return

A created input element.

`isActive()`

isActive( group?: string ): boolean

Checks if the specified group is active or not. If omitted, this checks any group is active or not.

Params

`group`	Optional. A group ID to check.

`isFocused()`

isFocused(): boolean

Checks if one of the elements in the UI has focus or not.

Return

true if an element in the UI has focus, or otherwise false.

`register()`

register( group: string, list: string, settings: ContextMenuButtonSettings[] ): void

Registers a menu item or items.

Registers a new item to the "edit" list in the "main" context menu:

const ryuseiCode = new RyuseiCode();
ryuseiCode.apply( 'textarea' );

const { ContextMenu } = ryuseiCode.Editor.Components;

ContextMenu.register( 'main', 'edit', {
  id  : 'myButton',
  html: 'Click Me',
  click() {
    console.log( 'Clicked! );
  },
} );
TypeScript

const ryuseiCode = new RyuseiCode();
ryuseiCode.apply( 'textarea' );


const { ContextMenu } = ryuseiCode.Editor.Components;


ContextMenu.register( 'main', 'edit', {
  id  : 'myButton',
  html: 'Click Me',
  click() {
    console.log( 'Clicked! );
  },
} );

Registers a new list and items to the the "main" context menu:

const ryuseiCode = new RyuseiCode();
ryuseiCode.apply( 'textarea' );

const { ContextMenu } = ryuseiCode.Editor.Components;

ContextMenu.register( 'main', 'my-list', [
  {
    id  : 'button1',
    html: 'Button 1',
    click() {
      console.log( 'You clicked the Button 1' );
    },
  },
  {
    id  : 'button2',
    html: 'Button 2',
    click() {
      console.log( 'You clicked the Button 2' );
    },
  },
] );
TypeScript

const ryuseiCode = new RyuseiCode();
ryuseiCode.apply( 'textarea' );


const { ContextMenu } = ryuseiCode.Editor.Components;


ContextMenu.register( 'main', 'my-list', [
  {
    id  : 'button1',
    html: 'Button 1',
    click() {
      console.log( 'You clicked the Button 1' );
    },
  },
  {
    id  : 'button2',
    html: 'Button 2',
    click() {
      console.log( 'You clicked the Button 2' );
    },
  },
] );

Registers a new group:

const ryuseiCode = new RyuseiCode();
ryuseiCode.apply( 'textarea' );

const { ContextMenu } = ryuseiCode.Editor.Components;

ContextMenu.register( 'my-context-menu', 'my-list', [
  ...
] );

ContextMenu.show( 'my-context-menu' );
TypeScript

const ryuseiCode = new RyuseiCode();
ryuseiCode.apply( 'textarea' );


const { ContextMenu } = ryuseiCode.Editor.Components;


ContextMenu.register( 'my-context-menu', 'my-list', [
  ...
] );


ContextMenu.show( 'my-context-menu' );

Params

`group`	A group ID. If it does not exist, a new group will be generated.
`list`	A list ID.
`settings`	An menu item or items.

`show()`

show( group: string ): void

Displays the specified context menu.

Params

`group`	A group ID.

`hide()`

hide(): void

Hides the context menu.

Handling Button Clicks

Although the button settings object accepts click handlers respectively, you may also handle clicks by the contextMenuClicked event:

const ryuseiCode = new RyuseiCode();

ryuseiCode.on( 'contextMenuClicked', ( e, ContextMenu, group, id ) => {
  if ( group === 'main' ) {
    if ( id === 'copy' ) {
      // do something.
    }
  }
} );
JavaScript

const ryuseiCode = new RyuseiCode();


ryuseiCode.on( 'contextMenuClicked', ( e, ContextMenu, group, id ) => {
  if ( group === 'main' ) {
    if ( id === 'copy' ) {
      // do something.
    }
  }
} );