Tweak demo content

chordbook · Mar 19, 2024 · 8fc9bf3 · 8fc9bf3
1 parent 5ad43c6
commit 8fc9bf3
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 24 deletions.
diff --git a/demo.ts b/demo.ts
@@ -1,7 +1,24 @@
 import { createEditor } from "./src/"
 
-const el = document.querySelector('#editor')!
-const doc = el.textContent!
-el.textContent = ""
+const doc = `# Welcome to the new ChordBook.app Editor! 🎸
+# This editor is optimized for the ChordPro format (https://www.chordpro.org).
+# This interactive demo will give you an overview of the features.
 
-createEditor(el, { doc })
+{title: Song Title}
+{artist: Artist Name}
+
+{start_of_verse}
+This is a [C]song with chords
+{end_of_verse}
+
+{start_of_chorus}
+This is the [G]chorus
+{end_of_chorus}
+
+# Features:
+# ✅ 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
+`
+
+createEditor(document.querySelector('#editor')!, { doc })
diff --git a/index.html b/index.html
@@ -16,26 +16,7 @@
     </style>
   </head>
   <body>
-    <div id="editor"># Welcome to the new ChordBook.app Editor! 🎸
-# This editor is optimized for the ChordPro format (https://www.chordpro.org).
-# This interactive demo will give you an overview of the features.
-
-{title: Song Title}
-{artist: Artist Name}
-
-{start_of_verse}
-This is a [C]song with chords
-{end_of_verse}
-
-{start_of_chorus}
-This is the [G]chorus
-{end_of_chorus}
-
-# Features:
-# ✅ 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
-</div>
+    <div id="editor"></div>
     </div>
     <script type="module" src="./demo.ts"></script>
   </body>