Toolbar

Overview

The Toolbar extension provides an empty toolbar interface. Some other extensions require this, and you can also add your own toolbar if necessary.

import { RyuseiCode, Toolbar } from '@ryusei/code';
RyuseiCode.compose( { Toolbar } );

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

const Toolbar = ryuseiCode.Editor.require( 'Toolbar' );

if ( Toolbar ) {
  const body = document.createElement( 'div' );
  body.textContent = 'My Toolbar';
  Toolbar.register( 'my-toolbar', body, 'My Toolbar' );
  Toolbar.show( 'my-toolbar' );
}
JavaScript

import { RyuseiCode, Toolbar } from '@ryusei/code';
RyuseiCode.compose( { Toolbar } );


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


const Toolbar = ryuseiCode.Editor.require( 'Toolbar' );


if ( Toolbar ) {
  const body = document.createElement( 'div' );
  body.textContent = 'My Toolbar';
  Toolbar.register( 'my-toolbar', body, 'My Toolbar' );
  Toolbar.show( 'my-toolbar' );
}

Usage

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

RyuseiCode.compose( { Toolbar } );
JavaScript

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


RyuseiCode.compose( { Toolbar } );

or import the file:

<script src="path-to-the-file/toolbar.min.js"></script>
HTML

<script src="path-to-the-file/toolbar.min.js"></script>

Options

Setting false to toolbar disables the extension.

new RyuseiCode( { toolbar: false } );
JavaScript

new RyuseiCode( { toolbar: false } );

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, elm: HTMLDivElement, label: string ): void

Registers a group to the toolbar.

Params

`group`	A group ID.
`elm`	An element to register.
`label`	A label of the toolbar.

`show()`

show( group: string ): void

Displays the toolbar.

Params

`group`	A group ID to display.

`hide()`

hide(): void

Hides the toolbar.