@chordbook/editor NPM

ChordBook Editor

A web-based editor for editing chord sheets in the ChordPro format, built on CodeMirror.

Features

✅ ChordPro Syntax Highlighting
✅ Chord autocomplete - type "[" and you will see autocomplete of previously used chords
✅ Snippets - type "title", "start_of…", "tab" or any other ChordPro directive

Installation

npm install @chordbook/editor

Usage

Put an element on the page that will be the container for the editor.

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

Then, import the editor and create an instance of it.

import { createEditor } from '@chordbook/editor'

createEditor({
  parent: document.querySelector('#editor'),
  state: {
    doc: "Initial content",
    events: {
      onChange: (doc, viewUpdate) => console.log("onChange", doc, viewUpdate),
      onChangeInterval: 500, // onChange events are debounced by default (300ms)
      onFocus: viewUpdate => console.log("onFocus", viewUpdate),
      onBlur: viewUpdate => console.log("onBlur", viewUpdate),
      onPaste: (event, view) => console.log("onPaste", event, view)
    }
  }
})