jotdown_wasm: prefix html ids with jotdown-

avoid potential conflicts if included
This commit is contained in:
Noah Hellman 2023-04-04 19:32:14 +02:00
parent c0bee7db78
commit 0af2c46c57

View file

@ -7,9 +7,9 @@
} from './pkg/jotdown_wasm.js'; } from './pkg/jotdown_wasm.js';
await init(); await init();
let output = document.getElementById("output"); let output = document.getElementById("jotdown-output");
let input = document.getElementById("input"); let input = document.getElementById("jotdown-input");
let fmt = document.getElementById("fmt"); let fmt = document.getElementById("jotdown-fmt");
function render() { function render() {
if (fmt.value == "html") { if (fmt.value == "html") {
@ -36,15 +36,15 @@
setTimeout(() => { input.focus(); }, 0); setTimeout(() => { input.focus(); }, 0);
</script> </script>
<div> <div>
<select id="fmt"> <select id="jotdown-fmt">
<option value="preview">preview</option> <option value="preview">preview</option>
<option value="html">html</option> <option value="html">html</option>
<option value="events">events</option> <option value="events">events</option>
<option value="events_indent">events (indented)</option> <option value="events_indent">events (indented)</option>
</select> </select>
</div> </div>
<div id="panes" style="display:flex;height:100%;gap:1rem"> <div id="jotdown-panes" style="display:flex;height:100%;gap:1rem">
<pre id="input" contenteditable="true" placeholder="Input djot here" style="width:50%;height:100%;overflow:scroll;resize:none;box-sizing:border-box;margin:0">*Hello world!*</pre> <pre id="jotdown-input" contenteditable="true" placeholder="Input djot here" style="width:50%;height:100%;overflow:scroll;resize:none;box-sizing:border-box;margin:0">*Hello world!*</pre>
<pre id="output" readonly style="width:50%;height:100%;overflow:scroll;box-sizing:border-box;margin:0"></pre> <pre id="jotdown-output" readonly style="width:50%;height:100%;overflow:scroll;box-sizing:border-box;margin:0"></pre>
</div> </div>
</div> </div>