Events

Listening to Events

The on() method lets you listen to events and do whatever you want at particular moments.

The first argument of the callback is always an object with the type and the owner properties. The type is the name of the event and the owner is the Editor instance.

const ryuseiCode = new RyuseiCode();

ryuseiCode.on( 'keydown', ( e, ke ) => {
  console.log( e.type ); // 'keydown'
  console.log( e.owner ); // The Editor instance

  // The keydown event sends a native KeyboardEvent object as the second argument
  console.log( ke.key );
} );

// or append a namespace:
ryuseiCode.on( 'keydown.myNamespace', ( e, ke ) => {
  console.log( ke.key );
} );
JavaScript

const ryuseiCode = new RyuseiCode();


ryuseiCode.on( 'keydown', ( e, ke ) => {
  console.log( e.type ); // 'keydown'
  console.log( e.owner ); // The Editor instance


  // The keydown event sends a native KeyboardEvent object as the second argument
  console.log( ke.key );
} );


// or append a namespace:
ryuseiCode.on( 'keydown.myNamespace', ( e, ke ) => {
  console.log( ke.key );
} );

The method accepts multiple events as a string or an array:

ryuseiCode.on( 'mounted resize', e => {
  console.log( e.type ); // 'mounted' or 'resize'
} );

ryuseiCode.on( [ 'mounted', 'resize' ], e => {
  console.log( e.type ); // 'mounted' or 'resize'
} );
JavaScript

ryuseiCode.on( 'mounted resize', e => {
  console.log( e.type ); // 'mounted' or 'resize'
} );


ryuseiCode.on( [ 'mounted', 'resize' ], e => {
  console.log( e.type ); // 'mounted' or 'resize'
} );

If you need to quit listening to the event, remove listeners by the off() method:

// Removes all listeners:
ryuseiCode.off( 'keydown' );

// Removes listeners only in the specific namespace:
ryuseiCode.off( 'keydown.myNamespace' );
JavaScript

// Removes all listeners:
ryuseiCode.off( 'keydown' );


// Removes listeners only in the specific namespace:
ryuseiCode.off( 'keydown.myNamespace' );

Events

mount

Fired just before the editor mounts components and extensions.

mounted

Fired after the editor mounts components and extensions. The editor is now ready.

focus

Fired when the editor gets focus.

blur

Fired when the editor loses focus.

readOnly

Fired when the read-only status changes.

const ryuseiCode = new RyuseiCode();

ryuseiCode.on( 'readOnly', ( e, readOnly ) => {
  console.log( readOnly ? 'read-only' : 'editable' );
} );
JavaScript

const ryuseiCode = new RyuseiCode();


ryuseiCode.on( 'readOnly', ( e, readOnly ) => {
  console.log( readOnly ? 'read-only' : 'editable' );
} );

keydown

Fired when the editor receives a key input.

input

Fired when the editor detects a native input event.

newline

Fired when users insert a newline (by the Enter key).

change

Fired just before the editor value is changed.

changed

Fired after the editor value is changed.

compositionStart

Fired when a new composition session starts.

compositionUpdate

Fired when a composition receives a new character.

compositionEnd

Fired when a composition session ends.

anchorLineChanged

Fired when the anchor line where the anchor node belongs is changed.

focusLineChanged

Fired when the focus line where the focus node belongs is changed.

copy

Fired when users copy texts.

cut

Fired when users cut texts.

paste

Fired when users paste texts.

keymap:${ action }

Fired when the keyboard input matches the predefined shortcuts.

const ryuseiCode = new RyuseiCode();

ryuseiCode.on( 'keymap:selectAll', () => {
  console.log( 'Detects "Ctrl+A"' );
} );
JavaScript

const ryuseiCode = new RyuseiCode();


ryuseiCode.on( 'keymap:selectAll', () => {
  console.log( 'Detects "Ctrl+A"' );
} );

chunkMoved

Fired when the chunk offset position is updated.

chunkSupplied

Fired when new lines are spplied into the chunk.

selecting

Fired when user is selecting texts.

selected

Fired when the selection state is updated.

const ryuseiCode = new RyuseiCode();

ryuseiCode.on( 'selected', ( e, Selection, state, prev ) => {
  if ( state === Selection.STATES.COLLAPSED ) {
    console.log( 'collapsed' );
  }
} );
JavaScript

const ryuseiCode = new RyuseiCode();


ryuseiCode.on( 'selected', ( e, Selection, state, prev ) => {
  if ( state === Selection.STATES.COLLAPSED ) {
    console.log( 'collapsed' );
  }
} );

selectionChanged

Fired when the native selection is chagned.

scroll

Fired when the editor or window is scrolled. The frequency of this event is reduced by the animation frame.

scrolled

Fired after the scroll likely ends.

scrollerScroll

Fired when the editor is scrolled.

windowScroll

Fired when the window is scrolled.

resize

Fired when the editor or window is resized. The frequency of this event is reduced by the animation frame.

scrollWidthChanged

Fired when the scroll width of the editor is changed.

scrollHeightChanged

Fired when the scroll height of the editor is changed.

synced

Fired after syncing a new value to the editor is finished.

contextMenuOpened

Fired when the context menu is opened.

contextMenuOpened

Fired when the context menu is closed.

contextMenuClicked

Fired when one of the context menu items is clicked.

reset

Fired when the editor status gets reset.

initStyle

Fired when the Style component initialize the editor styles.

fontLoaded

Fired when the editor detects the completion of font loading.

destroyed

Fired when the editor is destroyed.