Removing nbsp bug

src/App.ts

@@ -1,7 +1,8 @@
-import { get_chord_sheet_html } from "./Editor.js";
+import { Editor } from "./Editor";
+import {Chord} from "chord-symbol";
 
 window.onload = () => {
-    const chord_sheet_html = get_chord_sheet_html(`
+    const text_content = `
 Intro : CM7 
 
 CM7           Em7 Dm7           FM7 CM7 
@@ -86,9 +87,7 @@ Et je donne à la java mes mains pour le bas de son dos
 G7/b9              Cm                       G7     Cm CmM7 
 Et je donne à la java mes mains pour le bas de son dos
 
-`);
-    document.getElementById("chord_sheet").innerHTML = chord_sheet_html;
-    document.getElementsByClassName("chord")
-    console.log(chord_sheet_html);
+`;
+    const editor = new Editor("#chord_sheet");
+    editor.open_string(text_content);
 };
-

src/Editor.js.ts

@@ -1,92 +0,0 @@
-
-import { chordParserFactory, chordRendererFactory } from "../node_modules/chord-symbol/lib/chord-symbol.js"
-import { Chord } from "../node_modules/chord-symbol/types"
-
-class ChordNotation {
-    chord: Chord;
-    spaces_before: number;
-
-    constructor(chord: Chord, spaces_before: number) {
-        this.chord = chord;
-        this.spaces_before = spaces_before;
-    }
-}
-
-class Line {
-    lyrics: string = "";
-    chords: ChordNotation[] = [];
-
-    is_empty(): boolean {
-        return this.lyrics == "" && this.chords.length == 0;
-    }
-}
-
-class Sheet {
-    lines: Line[] = [];
-}
-
-function render_sheet_html(sheet: Sheet, renderChord:any): string {
-    let result = "<div><p>";
-    for (let line of sheet.lines) {
-        let rendered_line = ''
-        if (line.is_empty()) {
-            rendered_line = "</p><p>"
-        } else {
-            if (line.lyrics != "") {
-                rendered_line = line.lyrics.replace(" ", "&nbsp;");
-            } else if (line.chords.length > 0) {
-                for (let chord of line.chords) {
-                    rendered_line += "&nbsp;".repeat(chord.spaces_before) + render_chord(chord.chord, renderChord)
-                }
-            }
-            rendered_line += "<br/>"
-        }
-        result += rendered_line
-    }
-    result += "</p></div>";
-    return result
-}
-
-function render_chord(chord: Chord, renderer:any): string {
-    return "<span class='chord' style='cursor: pointer;'>" + renderer(chord) + "</span>"
-}
-
-
-
-export function get_chord_sheet_html(normalized_txt: string): string {
-    const parseChord = chordParserFactory();
-    const renderChord = chordRendererFactory({ useShortNamings: true });
-
-    const lines = normalized_txt.split("\n")
-    let sheet = new Sheet();
-    for (const line of lines) {
-        const words = line.split(' ');
-
-        let sheet_line = new Line();
-        if (words.length > 1 || words[0] == '') {
-            let space_before_chord = 0;
-            for (const word of words) {
-                if (word != '') {
-                    if (space_before_chord > 0 || sheet_line.chords.length > 0) {
-                        space_before_chord++;
-                    }
-                    const chord = parseChord(word);
-                    if (chord.error) {
-                        sheet_line.lyrics = line;
-                        break;
-                    } else {
-                        sheet_line.chords.push(new ChordNotation(chord, space_before_chord));
-                        space_before_chord = 0;
-                    }
-                } else {
-                    space_before_chord++;
-                }
-            }
-        }
-        if (sheet_line.is_empty() && (sheet.lines.length == 0 || sheet.lines[sheet.lines.length - 1].is_empty())) {
-            continue
-        }
-        sheet.lines.push(sheet_line)
-    }
-    return render_sheet_html(sheet, renderChord)
-}

src/Editor.ts

@@ -0,0 +1,137 @@
+import {Chord, ChordParseFailure, chordParserFactory, chordRendererFactory} from "chord-symbol";
+
+class ChordNotation {
+    chord: Chord;
+    spaces_before: number;
+
+    constructor(chord: Chord, spaces_before: number) {
+        this.chord = chord;
+        this.spaces_before = spaces_before;
+    }
+}
+
+class Line {
+    lyrics: string = "";
+    chords: ChordNotation[] = [];
+
+    is_empty(): boolean {
+        return this.lyrics == "" && this.chords.length == 0;
+    }
+}
+
+class Sheet {
+    lines: Line[] = [];
+}
+
+export class Editor {
+    selector: string;
+    html_element: Element;
+
+    constructor(selector: string) {
+        this.selector = selector
+        const html_element = document.querySelector(selector)
+        if (html_element instanceof Element) {
+            this.html_element = html_element;
+        } else {
+            throw Error("Could not find html element");
+        }
+    }
+
+    public open_string(source: string): void {
+        const sheet = this.create_sheet_from_string(source);
+        this.load_sheet(sheet);
+    }
+
+    protected create_sheet_from_string(source: string): Sheet {
+        const normalized_string = source;
+        const parseChord = chordParserFactory( { customFilters : []} );
+
+        const lines = normalized_string.split("\n")
+        let sheet = new Sheet();
+        for (const line of lines) {
+            const words = line.split(' ');
+
+            let sheet_line = new Line();
+            if (words.length > 1 || words[0] == '') {
+                let space_before_chord = 0;
+                for (let word of words) {
+                    if (word != '') {
+                        if (space_before_chord > 0 || sheet_line.chords.length > 0) {
+                            space_before_chord++;
+                        }
+                        //preprocessing for special slash notation
+                        if (word.indexOf('/') > -1) {
+                            const parts = word.split('/')
+                            if (/^(b|#)\d+$/.test(parts[1])) {
+                                word = parts[0] + "(" + parts[1] + ")"
+                            }
+                        }
+                        const chord = parseChord(word);
+                        if (chord.error) {
+                            sheet_line.lyrics = line;
+                            break;
+                        } else {
+                            sheet_line.chords.push(new ChordNotation(chord, space_before_chord));
+                            space_before_chord = 0;
+                        }
+                    } else {
+                        space_before_chord++;
+                    }
+                }
+            }
+            if (sheet_line.is_empty() && (sheet.lines.length == 0 || sheet.lines[sheet.lines.length - 1].is_empty())) {
+                continue
+            }
+            sheet.lines.push(sheet_line)
+        }
+
+        return sheet
+    }
+
+    protected load_sheet(sheet: Sheet) {
+        const renderChord = chordRendererFactory({ useShortNamings: true });
+        this.render_sheet_html(sheet, renderChord)
+    }
+
+    protected render_sheet_html(sheet: Sheet, renderChord: any) {
+        const root_element = document.createElement('div');
+        let current_paragraph = document.createElement('p')
+        for (let line of sheet.lines) {
+            if (line.is_empty()) {
+                root_element.appendChild(current_paragraph);
+                current_paragraph = document.createElement('p')
+            } else {
+                if (line.lyrics != "") {
+                    current_paragraph.appendChild(
+                        document.createTextNode(line.lyrics.replace(" ", "\u00A0"))
+                    );
+                } else if (line.chords.length > 0) {
+                    for (let chord of line.chords) {
+                        current_paragraph.appendChild(document.createTextNode("\u00A0".repeat(chord.spaces_before)))
+                        current_paragraph.appendChild(render_chord(chord.chord, renderChord));
+                    }
+                }
+                current_paragraph.appendChild(document.createElement('br'))
+            }
+        }
+        root_element.appendChild(current_paragraph);
+        this.html_element.appendChild(root_element);
+    }
+}
+
+function render_chord(chord: Chord, renderer:any): HTMLElement {
+    const html = document.createElement('a')
+    html.innerHTML = renderer(chord);
+    html.classList.add('chord')
+    html.href = "javascript:;"
+    html.addEventListener('click', (evt) => {
+        open_chord_editor(html, chord);
+    })
+    return html
+}
+
+function open_chord_editor(html_element: HTMLElement, chord: Chord) {
+    const span = document.createElement('span')
+    span.innerHTML = "coucou";
+    html_element.after(span)
+}

src/index.css

@@ -0,0 +1,9 @@
+#chord_sheet {
+    font-family: monospace;
+    font-size: 13px;
+}
+
+.chord {
+    font-weight: bold;
+    cursor: pointer;
+}

src/index.html

@@ -2,12 +2,13 @@
 <html>
     <head>
         <meta charset="utf-8" />
-        <title>Webpack App</title>
+        <title>Chord Sheet Editor</title>
+        <link rel="stylesheet" href="index.css" />
     </head>
     <body>
         <h1>Hello world!</h1>
         <h2>Tip: Check your console</h2>
-        <div id="chord_sheet" style="font-family: monospace;"></div>
+        <div id="chord_sheet"></div>
         <script type="module" src="App.ts"></script>
     </body>