Editor

Overview

The Editor class is the core of the RyuseiCode. You can access all core components and elements from the instance.

It is available on the RyuseiCode instance:

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


const { Editor } = ryuseiCode;


// Access the method of core components:
Editor.Components.Selection.set( [ 1, 0 ], [ 1, 1 ] );


// It is same with:
ryuseiCode.setRange( [ 1, 0 ], [ 1, 1 ] );
JavaScript

Properties

elements

readonly elements: Elements

The collection of essential editor elements.

This collection is empty before components are mounted by the Editor#apply(). 
const ryuseiCode = new RyuseiCode();
ryuseiCode.apply( 'textarea' );


const { scroller } = ryuseiCode.Editor.elements;
console.log( scroller.id );
TypeScript

Components

readonly Components: Partial<Components>

The collection of all core components.

const ryuseiCode = new RyuseiCode();
const { Selection } = ryuseiCode.Editor.Components;
TypeScript

options

readonly options: Options

The collection of all options.

event

readonly event: EventBus<Editor>

The EventBus instance. Although you can attach or detach event handlers by this instance, RyuseiCode#on() or RyuseiCode#off() is more useful.

language

readonly language: Language

The Language object.

value

get

Returns the current value of the editor.

set

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

width

get

Returns the width of the editor in pixel.

set

Sets width of the root element.

height

get

Returns the height of the editor in pixel.

set

Sets the height of the root element.

readOnly

get

Indicates whether the editor is read-only or not.

set

Makes the editor mutable or immutable. In the read-only mode, the primary caret gets hidden.

Methods

apply()

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

Applies the editor to the target element.

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, source?: boolean ): 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.

source

Optional. Whether to embed the source code into the editor or not.

Return

The HTML of the editor.

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.

blur()

blur(): void

Removes the focus from the editor.

invoke()

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

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()

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

The specified extension if found, or otherwise undefined.

isFocused()

isFocused(): boolean

Checks if the editor has focus or not.

Return

true if the editor has focus, or otherwise false.

destroy()

destroy(): void

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