APIs

Class Methods

`register()`

register( languages: Language | Language[] ): void

Registers a language or languages.

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

RyuseiLight.register( javascript() );

// Or pass an array:
RyuseiLight.register( [ javascript(), html() ] );
JavaScript

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


RyuseiLight.register( javascript() );


// Or pass an array:
RyuseiLight.register( [ javascript(), html() ] );

If you want to register all languages the languages object is helpful:

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

RyuseiLight.register( Object.values( languages ).map( lang => lang() ) );
JavaScript

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


RyuseiLight.register( Object.values( languages ).map( lang => lang() ) );

Params

`languages`	A Language object or an array with objects.

`compose()`

compose( extensions: Partial<Extensions> ): void

Registers extensions.

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

RyuseiLight.register( { ActiveLine, History } );
JavaScript

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


RyuseiLight.register( { ActiveLine, History } );

If you want to compose all extensions, the Extensions object is helpful:

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

RyuseiLight.register( Extensions );
JavaScript

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


RyuseiLight.register( Extensions );

Params

`extensions`	An object literal with extensions.

`get()`

get( id: string ): Language

Returns a Language object.

Params

`id`	The language ID.

Return

A Language object.

Instance Properties

`options`

options: Options

An object with all options.

`Editor`

Editor: Editor

The Editor instance.

`language`

language: Language

The Language object.

`value`

get

Returns the current value as a string.

set

Sets a new value to the editor and resets the editor.

Instance Methods

`apply()`

apply( target: string | Element, code?: string ): void

Applies the editor to the specified target element.

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

// or
const textarea = document.querySelector( 'textarea' );
ryuseiCode.apply( textarea )
JavaScript

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


// or
const textarea = document.querySelector( 'textarea' );
ryuseiCode.apply( textarea )

The instance can not have multiple targets. If the apply() method is called twice to the same element, it throws an error.

Params

`target`	A selector to find the target element, or a target element itself.
`code`	Optional. The code to overwrite the content of the target element.

`html()`

html( code: string ): string

Builds the HTML of the editor. This works without document and window objects, but has no functionality.

The maxInitialLines option limits the number of lines to generate.

Params

`code`	The code for the editor.

Return

The HTML string for the editor.

`on()`

on( events: string | string[], callback: EventBusCallback ): void

Attaches an event handler to the editor event or events.

// ke is the native KeyboardEvent object
ryuseiCode.on( 'keydown', ( e, ke ) => {
  console.log( ke.key );
} );

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

// ke is the native KeyboardEvent object
ryuseiCode.on( 'keydown', ( e, ke ) => {
  console.log( ke.key );
} );


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

Params

`events`	An event name or names separated by spaces, or an array with event names. Use a dot(.) to add a namespace.
`callback`	A callback function.

`off()`

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

Detaches an event handler registered by on().

// Detach all handlers:
ryuseiCode.off( 'keydown' );

// Detach handlers only in the namespace:
ryuseiCode.off( 'keydown.myNamespace' );
JavaScript

// Detach all handlers:
ryuseiCode.off( 'keydown' );


// Detach handlers only in the namespace:
ryuseiCode.off( 'keydown.myNamespace' );

Params

`events`	An event name or names separated by spaces, or or an array with event names. Use a dot(.) to add a namespace.

`save()`

save(): void

Saves the content to the source element if available.

For example, if you apply the editor to the empty textarea element, it remains empty even after you edit the code by the editor.

This method applies back the change to the textarea element.

`focus()`

focus( reselect?: boolean ): void

Sets focus on the editor.

Params

`reselect`	Determines whether to reselect the last position or not.

`setRange()`

setRange( start: Position, end?: Position ): void

Sets the caret position or selection range.

Params

`start`	A start position as `[ row, col ]`.
`end`	Optional. An end position. If omitted, the selection will be collapsed to the start.

`toString()`

toString(): string

The alias of the value property that returns the current code as a string.

Return

The current code as a string.

`destroy()`

destroy(): void

Saves the final value to the source element and destroys the editor for releasing the memory.