Component

Overview

The Component is the base class for core components and extensions. To customize the editor, create an extension extending the class and compose it.

import { RyuseiCode, Component } from '@ryusei/code';

class MyExtension extends Component {
  ...
}

RyuseiCode.compose( { MyExtension } );
JavaScript

import { RyuseiCode, Component } from '@ryusei/code';


class MyExtension extends Component {
  ...
}


RyuseiCode.compose( { MyExtension } );

This page explains how to create extensions.

Properties

`event`

protected readonly event: EventBus<Editor>

The EventBus instance. Use on(), off() and emit() methods instead of this.

`options`

protected readonly options: Options

The collection of all options.

`Editor`

protected Editor: Editor

The Editor instance.

`Caret`

protected Caret: Caret

The Caret instance.

`Chunk`

protected Chunk: Chunk

The Chunk instance.

`Code`

protected Code: Code

The Code instance.

`ContextMenu`

protected ContextMenu: ContextMenu

The ContextMenu instance.

`Edit`

protected Edit: Edit

The Edit instance.

`Input`

protected Input: Input

The Input instance.

`Keymap`

protected Keymap: Keymap

The Input instance.

`Measure`

protected Measure: Measure

The Measure instance.

`Range`

protected Range: Range

The Range instance.

`Scope`

protected Scope: Scope

The Scope instance.

`Selection`

protected Selection: Selection

The Selection instance.

`Style`

protected Style: Style

The Style instance.

`Sync`

protected Sync: Sync

The Sync instance.

`View`

protected View: View

The View instance.

`elements`

protected elements: Elements

The collection of essential editor elements.

`language`

protected language: Language

The Language object.

`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.

Methods

`on()`

protected on<F>( events: string | string[], callback: EventBusCallback, thisArg?: ThisParameterType<F>, priority?: number ): void

Attaches an event handler to an event or events with passing this instance as a key. They can only be detached by the off() member method.

Params

`events`	An event name, names split by spaces, or an array with names.
`callback`	A callback function.
`thisArg`	Optional. Specifies the `this` parameter of the callback function.
`priority`	Optional. A priority number for the order in which the callbacks are invoked.

`off()`

protected off( events: string | string[] ): void

Detaches handlers registered by on() without removing handlers attached by other components.

Params

`events`	An event name, names split by spaces, or an array with names.

`emit()`

protected emit( event: string, args: any[] ): void

Triggers handlers attached to the event.

Params

`event`	An event name.
`args`	Optional. Any number of arguments to pass to callback functions.

`bind()`

protected bind<F>( elm: Element | Document | Window, events: string, callback: F, thisArg?: ThisParameterType<F> ): void

Listens to native events. This method stores all listeners and automatically removes them on destruction.

Params

`elm`	A document, a window or an element.
`events`	An event name or names split by spaces.
`callback`	A callback function.
`thisArg`	Optional. Specifies the `this` parameter of the callback function.

`getLanguage()`

protected getLanguage( position?: Position ): Language | LanguageConfig

Returns a Language or LanguageConfig object at the focus or specified position. This method can return different objects depending on the position if the language allows to embed other languages, such as HTML and PHP.

Params

`position`	Optional. Specifies the position to get the language at.

Return

A main Language object or sub language config object.

`invoke()`

protected invoke<K, P, V>( name: K, method: P, args: ): V extends AnyFunction ? ReturnType<V> : void

Attempts to invoke the public method of the specified extension. In terms of the "loose coupling", you'd better try not to use this method. Using events is enough in most cases.

// Attempts to show the "search" toolbar.
Editor.invoke( 'Toolbar', 'show', 'search' );
TypeScript

// Attempts to show the "search" toolbar.
Editor.invoke( 'Toolbar', 'show', 'search' );

Params

`name`	A name of the extension.
`method`	A method name to invoke.
`args`	Optional. Arguments for the method.

Return

The return value of the method.

`require()`

protected require<K>( name: K ):

Returns the specified extension. In terms of the "loose coupling", you'd better try not to use this method. Using events is enough in most cases.

Params

`name`	A name of an extension.

Return

An extension if found, or otherwise undefined.

`addIcons()`

protected addIcons( icons: Record<string, IconSettings> ): void

Adds default icon strings. They can be still overridden by options. The IconSettings is a tuple as [ string, number?, string? ] corresponding with [ path, stroke?, linecap? ].

this.addIcons( {
  myIcon: [
    'm19 18-14-13m0 13 14-13',
    3,
  ],
} );
TypeScript

this.addIcons( {
  myIcon: [
    'm19 18-14-13m0 13 14-13',
    3,
  ],
} );

Params

`icons`	Icon settings to add.

`addI18n()`

protected addI18n( i18n: Record<string, string> ): void

Adds default i18n strings. They can be still overridden by options.

this.addI18n( {
  myMessage: 'Hello!',
} );
TypeScript

this.addI18n( {
  myMessage: 'Hello!',
} );

Params

`i18n`	Additional i18n strings.

`addKeyBindings()`

protected addKeyBindings( shortcuts: Record<string, KeyMatcher | KeyMatcher[]> ): void

Adds default shortcuts to the keymap object. They can be still overridden by options. Call this method before RyuseiCode mounts components so that the Keymap component recognizes shortcuts.

class MyExtension extends Component {
  constructor( Editor ) {
    super( Editor );

    this.addKeyBindings( {
      myShortcut: [ 'P', true, true ],
    } );
  }
}
JavaScript

class MyExtension extends Component {
  constructor( Editor ) {
    super( Editor );


    this.addKeyBindings( {
      myShortcut: [ 'P', true, true ],
    } );
  }
}

Params

`shortcuts`	Additional shortcuts.

`getOptions()`

protected getOptions<T>( name: string, defaults?: T ): T

Returns options for each extension, merging provided default values.

class MyExtension extends Component {
  constructor( Editor ) {
    super( Editor );

    const extensionOptions = this.getOptions( 'myExtension', { option1: true } );
  }
}
JavaScript

class MyExtension extends Component {
  constructor( Editor ) {
    super( Editor );


    const extensionOptions = this.getOptions( 'myExtension', { option1: true } );
  }
}

Params

`name`	An option name.
`defaults`	Default values.

Return

A merged options, or null.