baybayin

Simple in-browser code editor, inspired by CodeFlask

Install

npm install --save baybayin

yarn add baybayin

Usage

import * as baybayin from 'baybayin';

// Setup the CDN, this CDN is important
// since Baybayin uses Shiki for highlighting
baybayin.setCDN('https://unpkg.com/shiki/');

const editor = new baybayin.Editor(document.getElementById('code'), {
  // The initial value of the editor
  value: "console.log('Hello World')",
  // The initial loaded themes for editor
  // The first one in the array is shown as default.
  themes: ['dark-plus'],
  // The initial loaded languages for editor
  // The first one in the array is used as default.
  languages: ['javascript', 'typescript'],
  // Display line numbers, defaults to false
  lineNumbers: false,
  // readonly editor
  readonly: false,
  // tab size, defaults to 2
  tabSize: 2,
});

// Load the editor
editor.load().then(() => {
  console.log('Editor is now ready');
});

Updating config

// Loads or push a language, returns a Promise
editor.loadLanguage('tsx');
// Loads or push a theme, returns a Promise
editor.loadTheme('monokai');
// Selects the language to use, returns a Promise
editor.setLanguage('typescript');
// Selects the theme to use, returns a Promise
editor.setTheme('github-dark');

// Toggle readonly
editor.setReadonly(true);
// Toggle line numbers
editor.setLineNumbers(true);

// Set editor value
editor.setValue('...');

Reading editor value

const currentValue = editor.getValue();

Subscribing for changes

const unsubscribe = editor.onChange((newValue) => {
  console.log('Received', newValue);
});

Destroying the editor

editor.destroy();

License

MIT © lxsmnsyc