jotdown/examples/jotdown_wasm/demo.html

66 lines
2.5 KiB
HTML
Raw Permalink Normal View History

2023-03-26 10:15:54 -04:00
<div id="jotdown" style="flex-grow:1;display:flex;flex-direction:column">
2023-02-05 13:41:11 -05:00
<script type="module">
import init, {
jotdown_version,
jotdown_render,
jotdown_parse,
jotdown_parse_indent,
} from './pkg/jotdown_wasm.js';
2023-02-05 13:41:11 -05:00
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");
2023-02-05 13:41:11 -05:00
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, false);
} else if (fmt.value == "events_spans") {
output.classList.add("verbatim")
output.innerText = jotdown_parse(input.innerText, true);
} else if (fmt.value == "events_indent") {
output.classList.add("verbatim")
output.innerText = jotdown_parse_indent(input.innerText);
2023-02-05 13:41:11 -05:00
} else if (fmt.value == "preview") {
output.classList.remove("verbatim")
output.innerHTML = jotdown_render(input.innerText);
2023-02-05 13:41:11 -05:00
}
}
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_spans">events (with offsets)</option>
<option value="events_indent">events (indented)</option>
</select>
</div>
2023-03-26 10:15:54 -04:00
</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>
2023-03-26 10:15:54 -04:00
</div>
2023-02-05 13:41:11 -05:00
</div>