Public
Edited
May 25, 2023
Paused
1 fork
1 star
onEditorInput = (editor, viewer) => {
const startMillis = performanceNow()
viewer.childNodes[0].textContent = editor.value
const markMillis1 = performanceNow() - startMillis
requestAnimationFrame(() => {
const markMillis2 = performanceNow() - startMillis
mutable timeMarks = [markMillis1, markMillis2]
})
}
onEditorScroll = (editor, viewer) => {
viewer.scrollTop = editor.scrollTop
}
createTextEditor = (initialText) => {
const editor = html`
<textarea style="${styles.content} ${styles.editor}" />
`
const viewer = html`
<div style="${styles.content} ${styles.viewer}">
<span></span>
<wbr />
</div>
`
editor.addEventListener("scroll", event => {
onEditorScroll(editor, viewer)
})
editor.addEventListener("input", event => {
onEditorInput(editor, viewer)
})
editor.value = initialText
onEditorInput(editor, viewer)
return html`
<div style="${styles.container}">
${viewer}
${editor}
</div>
`
}
styles = ({
content: `
margin: 0;
padding: 10px;
width: 720px;
height: 360px;
white-space: break-spaces;
word-break: break-word;
overflow-wrap: anywhere;
font-family: var(--monospace), monospace;
font-kerning: none;
font-size: 14px;
line-height: 21px;
font-weight: 400;
outline: none;
overscroll-behavior: none;
`,
container: `
position: relative;
`,
editor: `
position: absolute;
top: 0;
border: 1px solid transparent;
background: ${options.includes("editor transparent") ? "transparent" : "transparent"};
color: ${options.includes("editor transparent") ? "transparent" : "#000"};
caret-color: #000;
overflow-y: scroll;
overflow-x: hidden;
resize: none;
`,
viewer: `
border: 1px solid #aaa;
background: ${options.includes("viewer transparent") ? "transparent" : "#fff"};
color: ${options.includes("viewer transparent") ? "transparent" : "#000"};
overflow: hidden;
pointer-events: none;
user-select: none;
`
})
texts = {
return {
markdown: await fetchText(source),
}
}
fetchText = url => fetch(url).then(response => response.text())
performanceNow = () => window.performance ? window.performance.now() : Date.now()
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
