32:Tc2d,function editor(options = {}) { const { inputTab = "edit", // one of "edit", "html", "tree" outputTab = "md", // one of "render", "md", "html", "tree" content = "", fontSize = "13px", scope = DOM.uid().id } = options; const hlOf = (language, source) => highlight(source, {language, scope: `${scope}-hljs`}); const treeOf = el => inspectDOM(el, {fontSize}); const tabsOf = (tabs, selected) => tabbed(htl.html`

${Object.values(tabs)}`, { scope: `${scope}-tabs`, selected: Object.keys(tabs).indexOf(selected) }); const inputEdit = htl.html`

`; const inputHTML = htl.html`

`; const inputTree = htl.html`

`; inputEdit.onclick = e => { const t = e.target.closest("a[href]"); if(t) e.preventDefault(); }; const outputMD = htl.html`

`; const outputHTML = htl.html`

`; const outputRender = htl.html`

`; const outputTree = htl.html`

`; let value; const observer = new MutationObserver(() => { inputHTML.replaceChildren(hlOf("html", inputEdit.innerHTML)); inputTree.replaceChildren(treeOf(inputEdit)); const mdMarkup = value = toMarkdown(inputEdit.innerHTML); const rendered = md([mdMarkup]); outputRender.replaceChildren(rendered); outputMD.replaceChildren(hlOf("markdown", mdMarkup)); outputHTML.replaceChildren(hlOf("html", rendered.innerHTML)); outputTree.replaceChildren(treeOf(rendered)); view.dispatchEvent(new Event("input", {bubbles: true})); }); observer.observe(inputEdit, {attributes: true, subtree: true, childList: true, characterData: true}); inputEdit.append(content); const view = htl.html`

${tabsOf({ edit: details("Paste & Edit", inputEdit), html: details("HTML", inputHTML), tree: details("Tree", inputTree) }, inputTab)} ${tabsOf({ render: details("Preview", outputRender), md: details("Markdown", outputMD), html: details("HTML", outputHTML), tree: details("Tree", outputTree), }, outputTab)}