29:null 2a:["$","title",null,{"children":"Experiment: Layered text editor with custom highlighting | Benjamin | Observable"}] 2f:T769,updateEditorStyle = debounce( 250, (editor, viewer) => requestIdleCallback(() => { const startMark = performanceNow() const mdastTree = mdastUtilFromMarkdown.fromMarkdown(editor.value) const style = html` ` viewer.appendChild(style) const root = viewer.childNodes[0].childNodes const nodes = [] unistUtilVisitParents.visitParents(mdastTree, "heading", (node) => { nodes.push(node) }) const ranges = nodes.slice(0, 100).map(node => { const range = document.createRange() range.setStart(root[node.position.start.line - 1], 0) range.setEnd(root[node.position.end.line - 1], 1) return range }) const nodes2 = [] unistUtilVisitParents.visitParents(mdastTree, "html", (node) => { nodes2.push(node) }) unistUtilVisitParents.visitParents(mdastTree, "code", (node) => { nodes2.push(node) }) const ranges2 = nodes2.slice(0, 100).map(node => { const range = document.createRange() range.setStart(root[node.position.start.line - 1], 0) range.setEnd(root[node.position.end.line - 1], 1) return range }) console.log("mdast tree:", mdastTree) console.log(performanceNow() - startMark) window.CSS.highlights.clear() const highlight = new window.Highlight(...ranges) window.CSS.highlights.set("mdast-heading", highlight); const highlight2 = new window.Highlight(...ranges2) window.CSS.highlights.set("mdast-comment", highlight2); //const lezerTree = lezerMarkdown.parser.parse(editor.value) //console.log("lezer tree:", lezerTree) //console.log(performanceNow() - startMark) }), )30:T436,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-family: ${fonts.sans}; 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; ` })31:[] 2d:{"id":"4090e716cddbf855","slug":null,"title":"Experiment: Layered text editor with custom highlighting","thumbnail":"3cc404bb08d2da02a4e2f3bc526efbd5b5e50ad4f53cbcf21414c2a2e7583a02","access_level":"public","create_time":"$D2023-05-23T10:19:07.979Z","update_time":"$D2023-05-24T21:24:45.520Z","view_time":null,"first_public_time":"$D2023-05-23T10:19:07.979Z","fork":{"id":"b63169ce82a10436","slug":null,"title":"Experiment: Layered text editor","owner":{"id":"8a1645a08dfd342c","login":"hastebrot","name":"Benjamin"}},"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":899,"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,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Experiment: Layered text editor with custom highlighting","cells":[{"id":0,"value":"# Experiment: Layered text editor with custom highlighting\n\nInspired by [this article](https://unifiedjs.com/learn/guide/create-an-editor/) and [this code demo](https://wooorm.com/write-music/).\n\n**TODO:**\n- Show selection text position (line, column) and relative coordinates (x, y).\n- Use reconciler to diff-patch DOM changes.\n- Use micromark to parse text.\n- Use starry-night to parse text.\n- Use custom css highlighting.\n- Store start offset per line for text ranges, i.e. convert between start offsets and line columns.\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":251,"value":"Text editor that syncs scroll and input changes from `

` to `<div>` layer.\n\nPerformance: ${Object.entries(timeMarks).map(it => `${Math.round(it[1])}ms (${it[0]})`).join(\", \")}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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"},{"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"},{"id":15,"value":"createTextEditor(texts.markdown)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":852,"value":"unistUtilVisitParents = import(\"unist-util-visit-parents\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":510,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":263,"value":"mutable timeMarks = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":531,"value":"updateEditor = (() => {\n  const render = text => {\n    const lines = text.split(/\\n|\\r\\n/)\n    return snabbdom.h(\"div\", null, lines.map((line) => {\n      const hash = cyrb53(line, line.length ? 0 : Math.random())\n      return snabbdom.h(\"span\", { key: hash.toString() }, line + \"\\n\")\n    })) \n  }\n\n  let tree = null\n  return {\n    init(editor, viewer) {\n      const dom = document.createElement(\"div\")\n      viewer.appendChild(dom)\n  \n      const nextTree = render(editor.value)\n      snabbdom.patch(dom, nextTree)\n      tree = nextTree\n    },\n    \n    update(editor, viewer) {\n      //viewer.textContent = editor.value\n      const nextTree = render(editor.value)\n      snabbdom.patch(tree, nextTree)\n      tree = nextTree\n    }\n  }\n})()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":723,"value":"cyrb53 = (str, seed = 0) => {\n  let h1 = 0xdeadbeef ^ seed, h2 = 0x41c6ce57 ^ seed;\n  for(let i = 0, ch; i < str.length; i++) {\n    ch = str.charCodeAt(i);\n    h1 = Math.imul(h1 ^ ch, 2654435761);\n    h2 = Math.imul(h2 ^ ch, 1597334677);\n  }\n  h1  = Math.imul(h1 ^ (h1 >>> 16), 2246822507);\n  h1 ^= Math.imul(h2 ^ (h2 >>> 13), 3266489909);\n  h2  = Math.imul(h2 ^ (h2 >>> 16), 2246822507);\n  h2 ^= Math.imul(h1 ^ (h1 >>> 13), 3266489909);\n\n  return 4294967296 * (2097151 & h2) + (h1 >>> 0);\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":564,"value":"vdom = import(\"https://cdn.skypack.dev/virtual-dom@2.1.1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":687,"value":"snabbdom = import(\"snabbdom\").then(module => ({\n  ...module,\n  patch: module.init([]),\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":430,"value":"lezerMarkdown = import(\"@lezer/markdown\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":414,"value":"mdastUtilFromMarkdown = import(\"mdast-util-from-markdown\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":517,"value":"debounce = (delayMillis, action) => _.debounce(action, delayMillis, { leading: false })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"onEditorInput = (editor, viewer, renderIndex) => {\n  const startMark = performanceNow()\n  \n  if (renderIndex === 0) {\n    updateEditor.init(editor, viewer)\n  }\n  updateEditor.update(editor, viewer)\n  updateEditorStyle(editor, viewer)\n  const updateMark = performanceNow() - startMark\n  \n  requestAnimationFrame(() => {\n    const renderMark = performanceNow() - startMark\n    mutable timeMarks = { updateMark, renderMark }\n  })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":114,"value":"onEditorScroll = (editor, viewer) => {\n  viewer.scrollTop = editor.scrollTop\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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}\"></div>\n  `\n\n  let renderIndex = 0\n  editor.addEventListener(\"scroll\", event => {\n    onEditorScroll(editor, viewer)\n  })\n  editor.addEventListener(\"input\", event => {\n    onEditorInput(editor, viewer, renderIndex) \n    renderIndex += 1\n  })\n  editor.value = initialText\n  onEditorInput(editor, viewer, renderIndex)\n  renderIndex += 1\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"},{"id":10,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":49,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":27,"value":"texts = {\n  return { \n    markdown: await fetchText(source),\n  }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":204,"value":"fetchText = url => fetch(url).then(response => response.text())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":270,"value":"performanceNow = () => window.performance ? window.performance.now() : Date.now()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}}
2e:"$2d:body"
</article></body></html>