Use @chordbook/editor

index.html

@@ -62,8 +62,7 @@ <h1 class="Header__site-name">
               </li>
           </ul>
           <div class="EditorContainer">
-            <div class="ChordSheetEditor LineNumbers EditorContainer__lineNumbers" id="chordSheetEditor__lineNumbers" data-mode="text"></div>
-            <textarea class="ChordSheetEditor EditorContainer__editor" id="chordSheetEditor" data-mode="text">
+            <div class="ChordSheetEditor EditorContainer__editor" id="chordSheetEditor" data-mode="text"><script type="text/template">
 {title: Let it be}
 {subtitle: ChordSheetJS example version}
 {key: C}
@@ -88,9 +87,10 @@ <h1 class="Header__site-name">
 Let it [Am]be, let it [C/G]be, let it [F]be, let it [C]be
 [C]Whisper words of [G]wisdom, let it [F]be [C/E] [Dm] [C]
 {end_of_chorus}
-</textarea>
+</script></textarea>
           </div>
           <div class="EditorContainer__errorMessage" id="chordSheetEditor__errorMessage"></div>
+          <small>Powered by <a href="https://github.com/chordbook/editor">@chordbook/editor</a></small>
         </section>
         <section class="App__column" id="chordSheetViewer">
           <ul class="RadioGroup">

package.json

@@ -32,6 +32,7 @@
   "githubHome": "https://github.com/martijnversluis/ChordFiddle",
   "about": "https://github.com/martijnversluis/ChordFiddle/blob/master/README.md#chordfiddle",
   "dependencies": {
+    "@chordbook/editor": "^0.0.7",
     "chordjs": "^2.0.1",
     "chordsheetjs": "^7.17.0",
     "lz-string": "^1.5.0",

src/index.hbs

@@ -52,10 +52,10 @@
             {{/each}}
           </ul>
           <div class="EditorContainer">
-            <div class="ChordSheetEditor LineNumbers EditorContainer__lineNumbers" id="chordSheetEditor__lineNumbers" data-mode="text"></div>
-            <textarea class="ChordSheetEditor EditorContainer__editor" id="chordSheetEditor" data-mode="text">{{example_chord_pro_sheet}}</textarea>
+            <div class="ChordSheetEditor EditorContainer__editor" id="chordSheetEditor" data-mode="text"><script type="text/template">{{example_chord_pro_sheet}}</script></textarea>
           </div>
           <div class="EditorContainer__errorMessage" id="chordSheetEditor__errorMessage"></div>
+          <small>Powered by <a href="https://github.com/chordbook/editor">@chordbook/editor</a></small>
         </section>
         <section class="App__column" id="chordSheetViewer">
           <ul class="RadioGroup">

src/index.js

@@ -23,7 +23,7 @@ function onChordSheetChange(chordSheet) {
     chordSheetViewer.render(song);
     chordSheetEditor.resetError();
   } catch ({ message, location }) {
-    chordSheetEditor.showError(message, location.start.line);
+    chordSheetEditor.showError(message, location);
   }
 }
 
@@ -58,5 +58,3 @@ if (chordSheet) {
 } else {
   onChordSheetChange(chordSheetEditor.getValue());
 }
-
-chordSheetEditor.updateLineNumbers();

src/js/chord_sheet_editor.js

@@ -1,86 +1,66 @@
+import { createEditor } from '@chordbook/editor';
+import { EditorSelection } from '@codemirror/state';
+import { linter, setDiagnostics } from '@codemirror/lint';
 import Component from './component';
-import valueWithHistory from './value_with_history';
-import debounce from './debounce';
 
 class ChordSheetEditor extends Component {
   onChordSheetChange = () => {};
 
-  errorLineNumber = valueWithHistory(null);
-
   setup() {
-    this.container.addEventListener('input', debounce(() => {
-      this.onChordSheetChange(this.getValue());
-      this.updateLineNumbers();
-    }));
-
-    this.container.addEventListener('scroll', () => {
-      this.lineNumbersContainer.scrollTop = this.container.scrollTop;
+    this.editor = createEditor({
+      doc: this.container.querySelector('*').innerText,
+      parent: this.container,
+      extensions: [
+        linter(),
+      ],
     });
-  }
-
-  get lineNumbersContainer() {
-    return this.element('lineNumbers');
-  }
-
-  updateLineNumbers() {
-    const lineNumbers = this.lineNumbersContainer.innerText.split('\n').filter((t) => t);
-    const editorLineCount = this.getValue().split('\n').length;
-    const previousErrorLine = this.errorLineNumber.valueWas;
-    const newErrorLine = this.errorLineNumber.value;
-
-    if (previousErrorLine) {
-      lineNumbers[previousErrorLine - 1] = `${previousErrorLine}`;
-    }
 
-    if (newErrorLine) {
-      lineNumbers[newErrorLine - 1] = `<div class="LineNumbers__error">${newErrorLine}</div>`;
-    }
-
-    if (lineNumbers.length > editorLineCount) {
-      lineNumbers.splice(editorLineCount);
-    }
-
-    while (lineNumbers.length < editorLineCount) {
-      lineNumbers.push(`${lineNumbers.length + 1}`);
-    }
-
-    this.lineNumbersContainer.innerHTML = lineNumbers.join('<br>');
+    this.container.addEventListener('change', (e) => {
+      this.onChordSheetChange(e.detail.doc);
+    });
   }
 
   getSelectionRange() {
-    const { selectionStart, selectionEnd } = this.container;
-    return [selectionStart, selectionEnd];
+    const { from, to } = this.editor.state.selection.main;
+    return [from, to];
   }
 
   setSelectionRange(selectionStart, selectionEnd) {
-    this.container.setSelectionRange(selectionStart, selectionEnd);
+    this.editor.dispatch({
+      selection: EditorSelection.create([
+        EditorSelection.range(selectionStart, selectionEnd),
+        EditorSelection.cursor(selectionEnd),
+      ]),
+    });
   }
 
   focus() {
-    this.container.focus();
+    this.editor.focus();
   }
 
   getValue() {
-    return this.container.value;
+    return this.editor.state.doc.toString();
   }
 
   setValue(value) {
-    this.container.value = value;
-    this.updateLineNumbers();
+    this.editor.dispatch({ changes: { from: 0, to: this.editor.state.doc.length, insert: value } });
   }
 
   setError(error) {
     this.element('errorMessage').innerText = error;
   }
 
-  showError(message, line) {
-    this.setError(`Line ${line}: ${message}`);
-    this.errorLineNumber.set(line);
+  showError(message, location) {
+    this.editor.dispatch(setDiagnostics(this.editor.state, [{
+      from: location.start.offset,
+      to: location.end.offset,
+      severity: 'error',
+      message,
+    }]));
   }
 
   resetError() {
-    this.setError('');
-    this.errorLineNumber.set(null);
+    this.editor.dispatch(setDiagnostics(this.editor.state, []));
   }
 
   transformChordSheet(transformationFunc) {

src/sass/EditorContainer.sass

@@ -2,26 +2,7 @@
   $editor-padding: $spacing-m
   $editor-space-between: $spacing-m
 
-  display: flex
-  flex-direction: row
-  flex: 1 1 auto
-  max-height: 100%
-  overflow: hidden
-
-  &__editor
-    $border-color: $theme-background
-
-    border-left: 1px $border-color solid
-    flex: 1 0 auto
-
-  &__lineNumbers
-    $right-padding: 28px
-    $scrollbar-correction: 20px
-    $width: 65px
-
-    flex: 0 0 ($width + $scrollbar-correction)
-    margin-right: -1 * $scrollbar-correction
-    padding-right: $right-padding + $scrollbar-correction
+  overflow: auto
 
   &__errorMessage
     background: red

src/sass/main.sass

@@ -5,7 +5,6 @@
 @import 'button'
 
 @import 'App'
-@import 'ChordSheetEditor'
 @import 'ChordSheetViewer'
 @import 'EditorContainer'
 @import 'Header'