🔬 Contenteditable

htmlbelow
<div id="input" style="min-height: 1em;" contenteditable="true" onchange="updateOutput()">
Content editable

This is a contenteditable Cell…

# Heading please

</div>
<pre><code id="output"></code></pre>
Content editable This is a contenteditable Cell… # Heading please
jsexec=onload
// from https://stackoverflow.com/a/8694129/371040
var tags = document.querySelectorAll('[contenteditable=true][onChange]');//(requires FF 3.1+, Safari 3.1+, IE8+)
  for (var i=tags.length-1; i>=0; i--) if (typeof(tags[i].onblur)!='function')
  {
    tags[i].onfocus = function()
    {
      this.data_orig=this.innerHTML;
    };
    tags[i].onkeyup = function()
    {
      if (this.innerHTML != this.data_orig)
        output.textContent = input.innerHTML 
      delete this.data_orig;
    };
  }
js
return (async fn=>{
  const {exampleSetup} = await import("https://cdn.skypack.dev/prosemirror-example-setup")
  const ProseMirror = await import("https://cdn.skypack.dev/react-prosemirror")
  return ProseMirror
})()
jsviewer=script
jspluginof=prose
export const asyncPlugin = async () => {
  const ProseMirror = await import("https://cdn.jsdelivr.net/npm/react-prosemirror@0.2.1/dist/index.min.js")
  return {
    viewer: ({node,React}) => {
      return ProseMirror ? <ProseMirror value={node.data.value}/> : "Loading..."
    }
  }
}
prose
Test