Split the demo corpus into two paragraphs
Split the demo corpus into two paragraphs to enable demonstrating
selections that cross node boundaries.
Restore the clean state on refresh by setting the inner HTML of the
corpus to that of the selectable text.
diff --git a/demo/index.html b/demo/index.html
index 9017e5d..9149a2f 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -65,8 +65,14 @@
<p>
Try select some text in the first paragraph below:
</p>
- <p id="selectable">Hello, annotated world! To annotate, or not to annotate, that is the question.</p>
- <p id="corpus">Hello, annotated world! To annotate, or not to annotate, that is the question.</p>
+ <div id="selectable">
+ <p>Hello, annotated world!</p>
+ <p>To annotate, or not to annotate, that is the question.</p>
+ </div>
+ <div id="corpus">
+ <p>Hello, annotated world!</p>
+ <p>To annotate, or not to annotate, that is the question.</p>
+ </div>
<pre id="debug"></pre>
<p>
Upon a change of selection, a
diff --git a/demo/index.js b/demo/index.js
index 319b54d..0c13c4a 100644
--- a/demo/index.js
+++ b/demo/index.js
@@ -22,7 +22,8 @@
import { search } from './search.js';
const refresh = async () => {
- corpus.innerHTML = corpus.innerText;
+ corpus.innerHTML = selectable.innerHTML;
+
debug.classList.remove('error');
const identifier = window.location.hash.slice(1);
