2b:null 2c:["$","title",null,{"children":"Experiment: Layered text editor | Benjamin | Observable"}] 31:T416,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; ` })32:[] 2f:{"id":"b63169ce82a10436","slug":null,"title":"Experiment: Layered text editor","thumbnail":"4fb94704f1c794db64ba9f5428636e7a79db22b92737aab542e273ff3108bbae","access_level":"public","create_time":"$D2023-05-22T23:39:07.788Z","update_time":"$D2023-05-23T10:13:50.547Z","view_time":null,"first_public_time":"$D2023-05-22T23:39:07.788Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"8a1645a08dfd342c","login":"hastebrot","name":"Benjamin","avatar_url":"https://avatars-next.observableusercontent.com/0b9afaf0bc47ae18ca1173624214fe43ca87fad77cea4fb734a8b0e1b8cfe919","tier":"starter_2024"},"version":363,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ca28e2692a714a78","login":"hastebrot","name":"Benjamin","avatar_url":"https://avatars-next.observableusercontent.com/0b9afaf0bc47ae18ca1173624214fe43ca87fad77cea4fb734a8b0e1b8cfe919","tier":null}],"members":[{"type":"individual","id":"ca28e2692a714a78","login":"hastebrot","name":"Benjamin","avatar_url":"https://avatars-next.observableusercontent.com/0b9afaf0bc47ae18ca1173624214fe43ca87fad77cea4fb734a8b0e1b8cfe919","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Experiment: Layered text editor","cells":[{"id":0,"value":"# Experiment: Layered text editor\n\nInspired by [this article](https://unifiedjs.com/learn/guide/create-an-editor/) and [this code demo](https://wooorm.com/write-music/).\n\n**Known issues:**\n- Kerning of non-monospace fonts is different in textarea elements.\n- The styles for textarea focus outline are disabled.\n\n**Technical notes:**\n- Vertical alignment is one pixel off in Firefox; this can be fixed by using `margin: 0` on `

`. Works fine in Chrome and Safari.\n- We append `<wbr />` (line-break opportunity element) to ensure empty trailing lines are rendered in the viewer layer.\n- We can use `caret-color: auto;` to a have visible caret for the textarea matching the color for iPad Safari.\n\n**TODO:**\n- [DONE] Options to make editor and viewer styles transparent.\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":251,"value":"Text editor that syncs scroll and input changes from `<textarea>` to `<div>` layer.\n\nPerformance: ${timeMarks.map(it => `${Math.round(it)} ms`).join(\", \")}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":336,"value":"viewof source = Inputs.select(\n  new Map([\n    [\"micromark/readme.md\", \"https://raw.githubusercontent.com/micromark/micromark/main/readme.md\"],\n    [\"starry-night/readme.md\", \"https://raw.githubusercontent.com/wooorm/starry-night/main/readme.md\"],\n  ]), \n  { label: \"Source:\" },\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"viewof options = Inputs.checkbox(\n  [\"editor transparent\", \"viewer transparent\"], \n  { label: \"Options:\", value: [\"editor transparent\"] },\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"createTextEditor(texts.markdown)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"mutable timeMarks = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"onEditorInput = (editor, viewer) => {\n  const startMillis = performanceNow()\n  \n  viewer.childNodes[0].textContent = editor.value\n  const markMillis1 = performanceNow() - startMillis\n  \n  requestAnimationFrame(() => {\n    const markMillis2 = performanceNow() - startMillis\n    mutable timeMarks = [markMillis1, markMillis2]\n  })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"onEditorScroll = (editor, viewer) => {\n  viewer.scrollTop = editor.scrollTop\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"createTextEditor = (initialText) => {\n  const editor = html`\n    <textarea style=\"${styles.content} ${styles.editor}\" />\n  `\n  const viewer = html`\n    <div style=\"${styles.content} ${styles.viewer}\">\n      <span></span>\n      <wbr />\n    </div>\n  `\n\n  editor.addEventListener(\"scroll\", event => {\n    onEditorScroll(editor, viewer)\n  })\n  editor.addEventListener(\"input\", event => {\n    onEditorInput(editor, viewer) \n  })\n  editor.value = initialText\n  onEditorInput(editor, viewer)\n                          \n  return html`\n    <div style=\"${styles.container}\">\n      ${viewer}\n      ${editor}\n    </div>\n  `\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"fonts = ({\n  sans: `ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`,\n  serif: `ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif`,\n  mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"texts = {\n  return { \n    markdown: await fetchText(source),\n  }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"fetchText = url => fetch(url).then(response => response.text())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"performanceNow = () => window.performance ? window.performance.now() : Date.now()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}}
30:"$2f:body"
</article></body></html>