Awesome

Y A C E

yet another code editor

Features

• ~1KB gzipped with zero dependencies.
• binding hotkey and enhance with plugins.
• adding any highlighter.

Installation

yace is published to npm, and accessible via the unpkg.com CDN:

via npm:

npm i yace

hotlinking from unpkg: (no build tool needed!)

import Yace from "https://unpkg.com/yace?module";

Usage

yace is working in browser and need DOM node e.g.:

<div id="editor"></div>

Initializing editor passing css selector and options:

import Yace from "yace";

const editor = new Yace("#editor", {
  value: "your awesome code",
  lineNumbers: true,
});

Examples

Live demo with codesandbox:

• Using highlight.js as highlighter
• Using prismjs as highlighter
• Building tiny ~2KB markdown editor
• Building markdown editor with highlighting code in code blocks
• Using plugins
• Using with react

API

const editor = new Yace(selector, options);

Options

• value — initial value.
• lineNumber — show or hide line numbers, default false.
• highlighter — function that takes current value and return highlighted html.
• styles — styles for root component, e.g. { fontSize: "20px }.
• plugins — array of plugins.

Plugin

Plugin is a function that called with textarea params {value, selectionStart, selectionEnd} as first argument and keydown DOM event as second argument and returns new textarea params {value, selectionStart, selectionEnd}.

onUpdate(callback)

It takes a callback that will be invoked when editor value is changed.

editor.onUpdate((value) => console.log(`new value: ${value}`));

update(params)

Update editor value and selections.

// update value
editor.update({ value: "new awesome code" });

// update selection
editor.update({ selectionStart: 0, selectionEnd: 4 });

destroy()

Remove all listeners.

editor.destroy();

value

Get the current editor's value.

editor.value; // => "your awesome code";

textarea

Get the textarea DOM element.

editor.textarea.focus();
editor.textarea.spellcheck = false;

License

MIT