jotdown/examples/jotdown_wasm/demo.html
Noah Hellman 7a10767fed jotdown_wasm: display version
mostly useful for the hosted version
2023-04-05 21:17:33 +02:00

61 lines
2.2 KiB
HTML

<div id="jotdown" style="flex-grow:1;display:flex;flex-direction:column">
<script type="module">
import init, {
jotdown_version,
jotdown_render,
jotdown_parse,
jotdown_parse_indent,
} from './pkg/jotdown_wasm.js';
await init();
let version = document.getElementById("jotdown-version");
version.innerText = "jotdown-" + jotdown_version();
let output = document.getElementById("jotdown-output");
let input = document.getElementById("jotdown-input");
let fmt = document.getElementById("jotdown-fmt");
function render() {
if (fmt.value == "html") {
output.classList.add("verbatim")
output.innerText = jotdown_render(input.innerText);
} else if (fmt.value == "events") {
output.classList.add("verbatim")
output.innerText = jotdown_parse(input.innerText);
} else if (fmt.value == "events_indent") {
output.classList.add("verbatim")
output.innerText = jotdown_parse_indent(input.innerText);
} else if (fmt.value == "preview") {
output.classList.remove("verbatim")
output.innerHTML = jotdown_render(input.innerText);
}
}
render()
input.onkeyup = render;
fmt.onchange = render;
// auto focus on input on load
setTimeout(() => { input.focus(); }, 0);
</script>
<div style="display:flex;gap:1rem">
<div style="width:50%">
<span style="opacity:50%">
version: <span id="jotdown-version">(not loaded)</span>
</span>
</div>
<div style="width:50%">
<select id="jotdown-fmt">
<option value="preview">preview</option>
<option value="html">html</option>
<option value="events">events</option>
<option value="events_indent">events (indented)</option>
</select>
</div>
</div>
<div id="jotdown-panes" style="display:flex;height:100%;gap:1rem">
<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="jotdown-output" readonly style="width:50%;height:100%;overflow:scroll;box-sizing:border-box;margin:0"></pre>
</div>
</div>