Skip to content

petersolopov/yace

Repository files navigation

Y A C E build npm Coverage Status bundlephobia

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:

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