fnmain/jotdown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

jotdown_wasm: create html wrapper

Browse source 
demo.html can be included in another html file, create a html file that
includes demo.html for the demo, rather than using demo.html directly
and letting the browser add <html>, <body> etc
This commit is contained in:
Noah Hellman 2023-03-26 16:33:38 +02:00
commit d5803c4a12
2 changed files with 12 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

32
examples/jotdown_wasm/index.html
View file

@ -1,32 +0,0 @@
<select id="fmt"><option value="preview">preview</option><option value="html">html</option></select>
<div id="jotdown" style="display:flex;">
<script type="module">
import init, { jotdown_render } from './pkg/jotdown_wasm.js';
await init();
let output = document.getElementById("output");
let input = document.getElementById("input");
let fmt = document.getElementById("fmt");
function render() {
let html = jotdown_render(input.innerText);
if (fmt.value == "html") {
output.classList.add("verbatim")
output.innerText = html;
} else if (fmt.value == "preview") {
output.classList.remove("verbatim")
output.innerHTML = html;
}
}
render()
input.onkeyup = render;
fmt.onchange = render;
// auto focus on input on load
setTimeout(() => { input.focus(); }, 0);
</script>
<pre id="input" contenteditable="true" placeholder="Input djot here" style="width:50%;height:100%;min-height:8em;max-height:20em;resize:none;margin:0">*Hello world!*</pre>
<pre id="output" readonly style="width:50%;height:100%;margin:0;min-height:8em;max-height:20em"></pre>
</div>