Browse Source

Use textarea instead of contenteditable

There were too many issues with how to handle line breaks
Thomas Dy 7 years ago
parent
commit
f41abdf1a3
2 changed files with 8 additions and 8 deletions
  1. 2 2
      dist/editor.html
  2. 6 6
      src/editor.ts

+ 2 - 2
dist/editor.html

@@ -23,8 +23,8 @@
         <span id="kanji-label">Kanji</span>
         <span id="kana-label">Kana</span>
         <ul id="intervals"></ul>
-        <div id="kanji" contentEditable></div>
-        <div id="kana" contentEditable></div>
+        <textarea id="kanji"></textarea>
+        <textarea id="kana"></textarea>
       </div>
 
       <div>

+ 6 - 6
src/editor.ts

@@ -142,20 +142,20 @@ namespace editor {
       let kana = '';
 
       lines.forEach(line => {
-        kanji += line.kanji + '<br>';
-        kana += line.kana + '<br>';
+        kanji += line.kanji + '\n';
+        kana += line.kana + '\n';
         if (line.end != undefined) {
           this.insertMarker(line.end);
         }
       });
 
-      this.kanjiElement.innerHTML = kanji;
-      this.kanaElement.innerHTML = kana;
+      this.kanjiElement.value = kanji;
+      this.kanaElement.value = kana;
     }
 
     export(): void {
-      let kanji = this.kanjiElement.innerHTML.split('<br>');
-      let kana = this.kanaElement.innerHTML.split('<br>');
+      let kanji = this.kanjiElement.value.split('\n');
+      let kana = this.kanaElement.value.split('\n');
       kanji.pop();
       kana.pop();
       let length = Math.max(kanji.length, kana.length, this.markers.length);