<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
// 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;
};
}
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
})()
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..."
}
}
}