jotdown/examples/jotdown_wasm/demo.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, 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);
        } 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_spans">events (with offsets)</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>