Options

Changing Options

The RyuseiCode constructor accepts several options to customize the editor:

new RyuseiCode( {
  id       : 'primary',
  maxHeight: '40em',
} );
JavaScript

new RyuseiCode( {
  id       : 'primary',
  maxHeight: '40em',
} );

The object also let you update options of extensions. The property name is same with the name of an extension in the camelcase.

Here is an example of how to set options of the ActiveLine extension:

new RyuseiCode( { activeLine: { ... } } );
JavaScript

new RyuseiCode( { activeLine: { ... } } );

Setting false to it deactivates the extension:

new RyuseiCode( { activeLine: false } );
JavaScript

new RyuseiCode( { activeLine: false } );

Main Options

id

Determines the editor ID. Some IDs for child elements are generated based on it.

If you don't specify it, RyuseiCode automatically assigns a sequential ID.

type: string default: undefined

language

Specifies a language by the ID or the alias.

new RyuseiCode( {
  language: 'typescript', // or 'ts'
} );
JavaScript

new RyuseiCode( {
  language: 'typescript', // or 'ts'
} );

type: string default: javascript

rootClasses

A class or classes for the root element.

type: string | string[] default: undefined

viewClasses

A class or classes for the view element.

type: string | string[] default: undefined

placeholder

A placeholder to display when the editor content is empty.

type: string default: 'Enter code here…'

width

Fixes the width of the editor. CSS relative units are acceptable.

new RyuseiCode( { width: '50%' } );
JavaScript

new RyuseiCode( { width: '50%' } );

Be aware that the width won't be narrower than the minWidth (the default value is 200px), and be wider than the maxWidth either (the default value is 100%).

type: number | string default: undefined

height

Fixes the height of the editor. CSS relative units are acceptable.

new RyuseiCode( { height: '40em' } );
JavaScript

new RyuseiCode( { height: '40em' } );

Be aware that the height won't be smaller than the minHeight (the default value is 16em), and be taller than the maxHeight either (the default value is 40em).

You may wonder why there are 3 similar height, minHeight and maxHeight options. One of the big reason is that the height fixes the editor height, but minHeight and maxHeight do not. If users inserts new lines, the editor height won't be taller than the height with displaying a scrollbar:

// Try to insert new lines

Whereas it can be if you set only the minHeight:

// Try to insert new lines

Besides, the Resize extension respects all of them. Here is an example when the height is 200px, minHeight is 100px and maxHeight is 300px. Drag the bottom edge and try to resize the editor height:

// Try to resize my height

type: number | string default: undefined

minWidth

Determines the minimum width of the editor. CSS relative units are acceptable.

type: number | string default: undefined

minHeight

Determines the minimum height of the editor. CSS relative units are acceptable.

type: number | string default: undefined

maxWidth

Determines the maximum width of the editor. CSS relative units are acceptable.

type: number | string default: undefined

maxHeight

Determines the maximum height of the editor. CSS relative units are acceptable.

type: number | string default: undefined

monospaceFont

Changes the monospace font in the CSS format.

new RyuseiCode( { monospaceFont: '"Fira Code", monospace' } );
JavaScript

new RyuseiCode( { monospaceFont: '"Fira Code", monospace' } );

type: string default: undefined

fontSize

Changes the font size. CSS relative units are acceptable.

type: number | string default: undefined

lineHeight

Changes the line height. This must be a number.

new RyuseiCode( {
  lineHeight: 1.4, // Can't be "1.4em"
} );
JavaScript

new RyuseiCode( {
  lineHeight: 1.4, // Can't be "1.4em"
} );

type: number default: undefined

indent

Defines the indent character. Set this to \t for a tab character.

type: string default: ' '(2 spaces)

tabSize

Defines the tab size if the indent option is \t. This does not work on IE since it does not support the tab-size CSS property.

type: number default: 2

tabIndex

Specifies the tabIndex attribute. In most cases, you don't need to (and should not) change this option.

type: number default: 0

autoFocus

Determines whether to set focus on the editor after initialization or not.

type: boolean default: undefined

readOnly

Determines whether to make the editor read-only or not. The Editor instance allows you to dynamically switch the status.

type: boolean default: undefined

maxInitialLines

The maximum number of lines rendered by html(). Be aware that IE crashes when attempting to render around 1000 lines at the same time.

type: number default: 200

keymap

The map for key bindings (shortcuts). Visit this page for more details.

type: Record<string, KeyMatcher | KeyMatcher[] | null | false>
default: An object with the default map.

icons

The collection of icon settings.

RyuseiCode renders all icons in the SVG format. This option allows you to change their path, stroke width, and stroke linecap values. Each value must be a IconSettings tuple as [ string, number?, string ] corresponding with [ path, stroke, linecap ], and the SVG viewport size must be 24*24.

Here is a list of icons:

new RyuseiCode( {
  icons: {
    close: [
      'm19 18-14-13m0 13 14-13',
      3,
    ],
  },
} );
JavaScript

new RyuseiCode( {
  icons: {
    close: [
      'm19 18-14-13m0 13 14-13',
      3,
    ],
  },
} );

type: Record<string, IconSettings>
default: An object with default settings.

i18n

The collection of i18n strings. Visit this page for more details.

type: Record<string, string>
default: An object with default strings.