` case 'mathBlock': return `${inlineHtml(b.inline)}
${inlineHtml(b.inline)}
` } } function anchorsToRange(pmState, ystate, startB64, endB64) { try { const from = relativePositionToAbsolutePosition(ystate.doc, ystate.type, decodeRel(startB64), ystate.binding.mapping) const to = relativePositionToAbsolutePosition(ystate.doc, ystate.type, decodeRel(endB64), ystate.binding.mapping) if (from == null || to == null) return null return { from: Math.min(from, to), to: Math.max(from, to) } } catch { return null } } // Range of a suggestion in PM positions. New suggestions carry anchorEndIncl // (references the last target block itself) so neighbours typed before/after // stay outside the range; legacy ones fall back to the exclusive-end anchors. function suggestionRange(pmState, s) { if (s.anchorEndIncl) { try { const frag = ydoc.getXmlFragment('default') const absS = Y.createAbsolutePositionFromRelativePosition(decodeRel(s.anchorStart), ydoc) const absE = Y.createAbsolutePositionFromRelativePosition(decodeRel(s.anchorEndIncl), ydoc) if (!absS || !absE || absS.type !== frag || absE.type !== frag) return null const si = Math.min(absS.index, absE.index) const ei = Math.max(absS.index, absE.index) let from = null let to = null pmState.doc.forEach((node, offset, i) => { if (i === si) from = offset if (i === ei) to = offset + node.nodeSize }) if (from == null || to == null || to <= from) return null return { from, to } } catch { return null } } const ystate = ySyncPluginKey.getState(pmState) if (!ystate?.binding) return null return anchorsToRange(pmState, ystate, s.anchorStart, s.anchorEnd) } function decodeRel(b64) { const bin = atob(b64.replace(/-/g, '+').replace(/_/g, '/')) const arr = new Uint8Array(bin.length) for (let i = 0; i < bin.length; i++) arr[i] = bin.charCodeAt(i) return Y.decodeRelativePosition(arr) } function encodeRel(rel) { const bytes = Y.encodeRelativePosition(rel) let bin = '' for (const b of bytes) bin += String.fromCharCode(b) return btoa(bin).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '') } function poke(editor) { editor.view.dispatch(editor.view.state.tr.setMeta('collab-refresh', true)) } function setActive(id) { state.activeItem = id // revealing a specific item un-hides the comments panel if (id && document.getElementById('margin-col').classList.contains('hidden')) setMarginHidden(false) renderMargin(window.__editor) poke(window.__editor) // stacked cards (phone sheet / narrow window) are not positioned next to the // text, so the expanded one has to be scrolled to inside its own container if (id && isStackedMargin()) { requestAnimationFrame(() => document.querySelector('#margin-items .card.expanded')?.scrollIntoView({ block: 'nearest' })) } } // composers get absolutely positioned a frame after opening — focusing them // before that scrolls the page to the container top. Focus with preventScroll, // then nudge the placed box into view. function revealAfterLayout(node) { requestAnimationFrame(() => requestAnimationFrame(() => { try { // stacked layout: composers are the first children of the scrolling // list, so whatever an expanded card scrolled to has to be undone — // otherwise the box you are typing into sits above the visible area const items = document.getElementById('margin-items') if (isStackedMargin() && items.contains(node)) items.scrollTop = 0 node.scrollIntoView({ block: 'nearest' }) } catch {} }) ) } function jumpTo(editor, range) { if (!range) return const pos = Math.min(range.from, editor.state.doc.content.size) editor.view.dispatch(editor.state.tr.setSelection(TextSelection.create(editor.state.doc, pos)).scrollIntoView()) } // --- header toolbar ----------------------------------------------------------- // The toolbar label is the one bit of the UI that has to look like maths // without KaTeX being loaded yet. function mathToolLabel() { const span = el('span', { class: 'math-tool-label' }) span.textContent = '\u2211' return span } // An empty selection opens a display formula on its own line — that is what the // button is for. With text selected, the selection is treated as the source, so // pasted LaTeX can be promoted in place. function insertMath(editor) { const { from, to, empty } = editor.state.selection if (empty) { editor.chain().focus().insertMathBlock('').run() return } const latex = editor.state.doc.textBetween(from, to, ' ', leafText).trim().replace(/^\$+|\$+$/g, '') const block = /\n/.test(latex) || latex.length > 60 editor .chain() .focus() .deleteSelection() .insertContent(block ? { type: 'mathBlock', attrs: { latex } } : { type: 'mathInline', attrs: { latex } }) .run() } function buildHeaderTools(editor) { const bar = document.getElementById('header-tools') bar.replaceChildren() // rebuilt per page switch const sep = () => el('span', { class: 'sep' }) const btn = (label, title, run, isOn) => { const b = el('button', { type: 'button', title }) if (typeof label === 'string') b.textContent = label else b.appendChild(label) b.addEventListener('mousedown', e => { e.preventDefault() run() }) if (isOn) editor.on('transaction', () => b.classList.toggle('on', isOn())) return b } const boldB = btn('B', 'Bold', () => editor.chain().focus().toggleBold().run(), () => editor.isActive('bold')) boldB.style.fontWeight = '700' const italicB = btn('I', 'Italic', () => editor.chain().focus().toggleItalic().run(), () => editor.isActive('italic')) italicB.style.fontStyle = 'italic' italicB.style.fontFamily = 'var(--doc)' const strikeB = btn('S', 'Strikethrough', () => editor.chain().focus().toggleStrike().run(), () => editor.isActive('strike')) strikeB.style.textDecoration = 'line-through' bar.append( btn('H1', 'Heading 1', () => editor.chain().focus().toggleHeading({ level: 1 }).run(), () => editor.isActive('heading', { level: 1 })), btn('H2', 'Heading 2', () => editor.chain().focus().toggleHeading({ level: 2 }).run(), () => editor.isActive('heading', { level: 2 })), btn('H3', 'Heading 3', () => editor.chain().focus().toggleHeading({ level: 3 }).run(), () => editor.isActive('heading', { level: 3 })), sep(), boldB, italicB, strikeB, btn('', 'Inline code', () => editor.chain().focus().toggleCode().run(), () => editor.isActive('code')), sep(), btn('• List', 'Bullet list', () => editor.chain().focus().toggleBulletList().run(), () => editor.isActive('bulletList')), btn('1. List', 'Ordered list', () => editor.chain().focus().toggleOrderedList().run(), () => editor.isActive('orderedList')), btn(icon('quote'), 'Blockquote', () => editor.chain().focus().toggleBlockquote().run(), () => editor.isActive('blockquote')), btn('{ }', 'Code block', () => editor.chain().focus().toggleCodeBlock().run(), () => editor.isActive('codeBlock')), btn(icon('todo'), 'Checklist', () => editor.chain().focus().toggleTaskList().run(), () => editor.isActive('taskList')), btn(icon('table'), 'Insert table', () => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()), btn('—', 'Divider', () => editor.chain().focus().setHorizontalRule().run()), btn(mathToolLabel(), 'Math — inline $x^2$, or a display formula on its own line', () => insertMath(editor), () => editor.isActive('mathInline') || editor.isActive('mathBlock') ), btn('HTML', 'Embed live HTML (sandboxed)', () => editHtmlOverlay('', html => { if (html.trim()) editor.chain().focus().insertContent({ type: 'htmlBlock', attrs: { html } }).run() }) ), sep(), btn(icon('link'), 'Link', () => toggleLink(editor), () => editor.isActive('link')) ) // undo / redo (from the Collaboration extension's shared-editing undo manager) const undoB = btn(icon('undo'), 'Undo', () => runUndo(editor)) undoB.id = 'undo-btn' const redoB = btn(icon('redo'), 'Redo', () => runRedo(editor)) redoB.id = 'redo-btn' bar.append(sep(), undoB, redoB) // zoom let zoom = Number(localStorage.getItem('doc-zoom')) || 1 const zoomLabel = el('span', { id: 'zoom-label' }) const applyZoom = () => { zoom = Math.round(Math.max(0.8, Math.min(1.6, zoom)) * 100) / 100 document.documentElement.style.setProperty('--doc-zoom', zoom) zoomLabel.textContent = `${Math.round(zoom * 100)}%` localStorage.setItem('doc-zoom', String(zoom)) scheduleLayout(editor) } const zoomOutB = btn(icon('zoomOut'), 'Zoom out', () => { zoom -= 0.1 applyZoom() }) zoomOutB.id = 'zoom-out' const zoomInB = btn(icon('zoomIn'), 'Zoom in', () => { zoom += 0.1 applyZoom() }) zoomInB.id = 'zoom-in' bar.append(sep(), zoomOutB, zoomLabel, zoomInB) applyZoom() // image upload const imgInput = el('input', { type: 'file', accept: 'image/*', style: 'display:none' }) imgInput.addEventListener('change', () => { if (imgInput.files[0]) uploadAndInsertImage(imgInput.files[0]) imgInput.value = '' }) const imgBtn = btn(icon('image'), 'Insert image', () => imgInput.click()) imgBtn.id = 'image-btn' bar.append(imgBtn, imgInput) wireLinkPop(editor) } function toggleLink(editor) { if (editor.isActive('link')) { editor.chain().focus().extendMarkRange('link').unsetLink().run() return } if (editor.state.selection.empty) return const pop = document.getElementById('link-pop') const tools = document.getElementById('header-tools').getBoundingClientRect() pop.style.left = `${Math.max(12, tools.right - 320)}px` pop.style.top = `${tools.bottom + 8}px` pop.classList.remove('hidden') document.getElementById('link-url').focus() } function wireLinkPop(editor) { const pop = document.getElementById('link-pop') const input = document.getElementById('link-url') const apply = () => { let href = input.value.trim() if (href && !/^https?:\/\//.test(href)) href = 'https://' + href if (href) editor.chain().focus().extendMarkRange('link').setLink({ href }).run() input.value = '' pop.classList.add('hidden') } document.getElementById('link-apply').addEventListener('click', apply) input.addEventListener('keydown', e => { if (e.key === 'Enter') apply() if (e.key === 'Escape') pop.classList.add('hidden') }) document.addEventListener('mousedown', e => { if (!e.target.closest('#link-pop') && !pop.classList.contains('hidden') && !e.target.closest('#header-tools')) { pop.classList.add('hidden') } }) } // --- editing / suggesting mode -------------------------------------------------- // Docs keeps this at the top of the window instead of on the selection: in // Editing mode keystrokes land in the document; in Suggesting mode the document // is read-only and selecting text opens a proposal for those blocks. // // The switch is HIDDEN for now: proposing a change should mean typing in the // document itself and having the edit captured, not filling in a markdown box. // Until that exists, the mode is not worth showing — the flow underneath still // works (agents use it, and the phone flow could) so flipping this back on is // all it takes. Humans comment; agents propose. const SUGGEST_MODE_UI = false let lockedOut = false // the build gate made this tab read-only — mode must not undo that function buildModeSwitch(editor) { const wrap = document.getElementById('mode-switch') wrap.replaceChildren() if (!SUGGEST_MODE_UI) { // force Editing, so a mode left over in localStorage cannot strand someone // in a read-only document with no visible way back wrap.classList.add('hidden') setMode('editing', editor) return } wrap.classList.remove('hidden') const tab = (mode, label, tip) => { const b = el('button', { type: 'button', title: tip, 'data-mode': mode }, label) b.addEventListener('mousedown', e => { e.preventDefault() setMode(mode, editor) }) return b } wrap.append( tab('editing', 'Editing', 'Type straight into the document'), tab('suggesting', 'Suggesting', 'Propose changes — select text and a suggestion opens in the margin') ) setMode(localStorage.getItem(`cw-mode:${docId}`) === 'suggesting' ? 'suggesting' : 'editing', editor) } function setMode(mode, editor) { state.mode = mode === 'suggesting' ? 'suggesting' : 'editing' localStorage.setItem(`cw-mode:${docId}`, state.mode) for (const b of document.querySelectorAll('#mode-switch button')) { b.classList.toggle('on', b.dataset.mode === state.mode) } document.body.classList.toggle('suggesting', state.mode === 'suggesting') if (!lockedOut) { try { editor?.setEditable(state.mode === 'editing') } catch {} } closeAutoComposer() } // --- selection menu ------------------------------------------------------------- function wireSelectionMenu() { const commentBtn = document.getElementById('comment-btn') const suggestBtn = document.getElementById('suggest-btn') commentBtn.append(icon('comment'), document.createTextNode('Comment')) suggestBtn.append(icon('edit'), document.createTextNode('Suggest')) if (!SUGGEST_MODE_UI) suggestBtn.classList.add('hidden') commentBtn.addEventListener('mousedown', e => { e.preventDefault() try { openComposer(window.__editor) } catch (err) { alert('Could not open the comment box: ' + err.message) } }) suggestBtn.addEventListener('mousedown', e => { e.preventDefault() openSuggestComposer(window.__editor).catch(err => alert('Could not open suggest mode: ' + err.message)) }) } function bindSelectionMenu(editor) { const menu = document.getElementById('selection-menu') let settle = null editor.on('selectionUpdate', () => { const { from, to, empty } = editor.state.selection clearTimeout(settle) if (empty || to - from < 1) { menu.classList.add('hidden') // A blur is not a dismissal. Selecting an atom (a formula, an image) makes // a NodeSelection, and that collapses when the editor loses focus — so // clicking into the comment box closed the very box you just clicked. // Only a collapse the user made *in the document* dismisses it. if (editor.isFocused && !document.activeElement?.closest('.composer-box')) closeAutoComposer() return } // Desktop has a margin to put the box in, so the selection opens the real // composer there and no floating widget is needed. A phone has no margin // (the panel is a bottom sheet that would cover the selection), so there the // little Comment / Suggest bubble stays as the way in. if (!isStackedMargin()) { menu.classList.add('hidden') // wait for the drag/shift-arrow run to settle before popping a box open settle = setTimeout(() => isLive(editor) && openForSelection(editor), 220) return } const coords = editor.view.coordsAtPos(to) const wrap = document.getElementById('editor-col').getBoundingClientRect() menu.classList.remove('hidden') // measure instead of assuming a width — the buttons are bigger on phones, // where a hardcoded guess pushed the menu off the right edge const w = menu.offsetWidth || 230 menu.style.left = `${Math.max(0, Math.min(coords.left - wrap.left, wrap.width - w))}px` menu.style.top = `${coords.bottom - wrap.top + 8}px` }) } // A settled selection opens the box the current mode calls for, in the margin // next to the text. Failures here are not worth an alert on every selection — // they just mean no box this time. function openForSelection(editor) { if (state.previewPid || state.composerDirty) return if (state.mode === 'suggesting') { openSuggestComposer(editor, { focus: false, auto: true }).catch(() => {}) return } try { openComposer(editor, { focus: false, auto: true }) } catch {} } // Close a box the selection opened, unless the user has started writing in it. function closeAutoComposer() { if (!state.autoComposer || state.composerDirty) return const isSuggest = state.autoComposer === 'suggest' document.getElementById(isSuggest ? 'suggest-composer' : 'composer').classList.add('hidden') if (!isSuggest) document.getElementById('composer-text').value = '' state.autoComposer = null state.suggestRange = null renderMargin(window.__editor) } // ProseMirror's textBetween skips leaf nodes unless told what they say. Without // this a comment on a formula quoted an empty string — the atom holds no text. function leafText(node) { if (node.type.name === 'mathInline' || node.type.name === 'mathBlock') return `$${node.attrs.latex || ''}$` if (node.type.name === 'image') return '[figure]' return '' } // Handing work to your own agent is the common case for a comment, so the box // opens with your first agent already mentioned. function myFirstAgentHandle() { const mine = (state.agents || []).filter(a => a.owner === state.me?.username) return mine[0]?.handle || null } // --- comment composer ------------------------------------------------------------- function openComposer(editor, opts = {}) { const { from, to } = editor.state.selection const ystate = ySyncPluginKey.getState(editor.state) state.composerAnchors = { start: encodeRel(absolutePositionToRelativePosition(from, ystate.type, ystate.binding.mapping)), end: encodeRel(absolutePositionToRelativePosition(to, ystate.type, ystate.binding.mapping)), excerpt: editor.state.doc.textBetween(from, to, ' ', leafText).slice(0, 200), } document.getElementById('composer-quote').textContent = state.composerAnchors.excerpt document.getElementById('suggest-composer').classList.add('hidden') document.getElementById('composer').classList.remove('hidden') document.getElementById('selection-menu').classList.add('hidden') const text = document.getElementById('composer-text') if (!state.composerDirty) { const handle = myFirstAgentHandle() text.value = handle ? `@${handle} ` : '' text.setSelectionRange(text.value.length, text.value.length) } state.autoComposer = opts.auto ? 'comment' : null setMarginHidden(false, false) // the composer lives in the comments panel renderMargin(editor) // an auto-opened box must not steal the keyboard: selecting text and typing // over it is ordinary editing, so the caret stays in the document if (opts.focus !== false) text.focus({ preventScroll: true }) revealAfterLayout(document.getElementById('composer')) } function wireComposer() { const text = document.getElementById('composer-text') text.addEventListener('input', () => { state.composerDirty = true }) document.getElementById('composer-cancel').addEventListener('click', () => { document.getElementById('composer').classList.add('hidden') text.value = '' state.composerDirty = false state.autoComposer = null renderMargin(window.__editor) }) // Enter sends, Shift+Enter breaks the line — the messaging convention, and // Enter did nothing here before. The mention menu owns Enter while it is open // (it is picking an agent), and it is wired below, i.e. after this handler. text.addEventListener('keydown', e => { if (e.key !== 'Enter' || e.shiftKey) return if (!document.getElementById('composer-mentions').classList.contains('hidden')) return e.preventDefault() document.getElementById('composer-send').click() }) document.getElementById('composer-send').addEventListener('click', () => { const value = text.value.trim() // the box comes pre-mentioned, so a bare "@handle" counts as empty const body = value.replace(/^(?:@[a-z0-9_.-]+\s+)+/i, '').trim() if (!value || !body || !state.composerAnchors) return const id = createThread(state.composerAnchors, value) text.value = '' state.composerDirty = false state.autoComposer = null document.getElementById('composer').classList.add('hidden') setActive(id) }) wireMentionMenu(text, document.getElementById('composer-mentions')) } function createThread(anchors, text, suggestionId = null) { const id = randomId() const messages = new Y.Array() messages.push([makeMessage(text)]) const t = new Y.Map() t.set('id', id) t.set('anchorStart', anchors.start) t.set('anchorEnd', anchors.end) t.set('excerpt', anchors.excerpt || null) t.set('createdBy', state.me.username) t.set('createdAt', Date.now()) t.set('resolved', false) if (suggestionId) t.set('suggestionId', suggestionId) t.set('messages', messages) threads.set(id, t) return id } function makeMessage(text) { return { id: randomId(), author: state.me.username, authorType: 'user', text, ts: Date.now() } } function randomId() { return Math.random().toString(36).slice(2, 12) } // --- suggest composer (humans propose block rewrites, like agents do) -------------- async function openSuggestComposer(editor, opts = {}) { const { from, to } = editor.state.selection const blockFrom = editor.state.doc.resolve(from).index(0) const blockTo = editor.state.doc.resolve(to).index(0) // while the selection stays inside the same blocks there is nothing to redo — // re-fetching on every selection change would be a request per drag const range = `${blockFrom}-${blockTo}` if (opts.auto && state.autoComposer === 'suggest' && state.suggestRange === range) return state.suggestRange = range const fragment = ydoc.getXmlFragment('default') state.suggestAnchors = { start: encodeRel(Y.createRelativePositionFromTypeIndex(fragment, blockFrom)), end: encodeRel(Y.createRelativePositionFromTypeIndex(fragment, blockTo + 1)), } document.getElementById('composer').classList.add('hidden') document.getElementById('selection-menu').classList.add('hidden') const composer = document.getElementById('suggest-composer') composer.classList.remove('hidden') state.autoComposer = opts.auto ? 'suggest' : null setMarginHidden(false, false) // the composer lives in the comments panel renderMargin(editor) document.getElementById('suggest-quote').textContent = blockTo > blockFrom ? `Rewriting blocks ${blockFrom + 1}–${blockTo + 1}` : 'Rewriting the selected block' const textEl = document.getElementById('suggest-text') textEl.value = '…' const snap = await api(`/api/docs/${docId}${pageQS}`) if (state.composerDirty) return // the user started writing while the fetch was in flight textEl.value = (snap.blocks || []) .slice(blockFrom, blockTo + 1) .map(b => b.markdown) .join('\n\n') if (opts.focus !== false) textEl.focus({ preventScroll: true }) revealAfterLayout(document.getElementById('suggest-composer')) scheduleLayout(editor) } function wireSuggestComposer() { for (const id of ['suggest-text', 'suggest-rationale']) { document.getElementById(id).addEventListener('input', () => { state.composerDirty = true }) } document.getElementById('suggest-cancel').addEventListener('click', () => { document.getElementById('suggest-composer').classList.add('hidden') state.composerDirty = false state.autoComposer = null state.suggestRange = null renderMargin(window.__editor) }) document.getElementById('suggest-send').addEventListener('click', async () => { if (!state.suggestAnchors) return const res = await api(`/api/docs/${docId}/suggestions`, { method: 'POST', body: { page: pageSlug, anchor_start: state.suggestAnchors.start, anchor_end: state.suggestAnchors.end, replacement_markdown: document.getElementById('suggest-text').value, rationale: document.getElementById('suggest-rationale').value.trim() || undefined, }, }) if (res.error) return alert(res.error) document.getElementById('suggest-composer').classList.add('hidden') document.getElementById('suggest-text').value = '' document.getElementById('suggest-rationale').value = '' state.composerDirty = false state.autoComposer = null state.suggestRange = null setActive(res.suggestion_id) }) } // --- margin: unified comments + suggestions, positioned next to their text --------- // A page switch destroys the editor, and a destroyed editor has no view — so // every deferred callback (timer, rAF, settle) must check it is still the live // one first. Switching pages is fast enough now that these fire mid-teardown. function isLive(editor) { return Boolean(editor) && !editor.isDestroyed && window.__editor === editor } let layoutRaf = null function scheduleLayout(editor) { if (layoutRaf) return layoutRaf = requestAnimationFrame(() => { layoutRaf = null if (isLive(editor)) layoutMargin(editor) }) } // --- revision chains --- // Suggestions linked by `revises` form a chain; only ONE generation renders at // a time (default: the newest actionable one), with ‹ n/N › navigation. function suggestionChains() { const all = suggestionValues() const byId = new Map(all.map(s => [s.id, s])) const rootOf = start => { let cur = start const seen = new Set([cur.id]) while (cur.revises && byId.has(cur.revises) && !seen.has(cur.revises)) { cur = byId.get(cur.revises) seen.add(cur.id) } return cur.id } const groups = new Map() for (const s of all) { const root = rootOf(s) if (!groups.has(root)) groups.set(root, []) groups.get(root).push(s) } const actionable = x => x.status === 'open' || x.status === 'superseded' return [...groups.entries()].map(([root, members]) => { members.sort((a, b) => (a.ts || 0) - (b.ts || 0)) let def = members.length - 1 for (let i = members.length - 1; i >= 0; i--) { if (actionable(members[i])) { def = i break } } let idx = state.chainPos[root] if (!(Number.isInteger(idx) && idx >= 0 && idx < members.length)) idx = def return { root, members, idx, display: members[idx] } }) } function chainNav(chain) { const nav = el('span', { class: 'chain-nav' }) const go = idx => { state.chainPos[chain.root] = idx renderMargin(window.__editor) poke(window.__editor) } const prev = el('button', { class: 'iconbtn', title: 'Earlier revision' }, '‹') prev.disabled = chain.idx === 0 prev.addEventListener('click', e => { e.stopPropagation() go(chain.idx - 1) }) const next = el('button', { class: 'iconbtn', title: 'Later revision' }, '›') next.disabled = chain.idx === chain.members.length - 1 next.addEventListener('click', e => { e.stopPropagation() go(chain.idx + 1) }) nav.append(prev, el('span', { class: 'chain-pos' }, `${chain.idx + 1}/${chain.members.length}`), next) return nav } // accept/reject buttons shared by suggestion cards and thread-attached strips function suggestionActionButtons(s, editor) { const reject = el('button', { class: 'iconbtn reject-btn', title: 'Reject suggestion' }) reject.appendChild(icon('x')) reject.addEventListener('click', e => { e.stopPropagation() if (!requireLiveConnection('rejecting a suggestion')) return api(`/api/docs/${docId}/suggestions/${s.id}/reject`, { method: 'POST', body: { page: pageSlug } }) }) const accept = el('button', { class: 'iconbtn accept-btn', title: 'Accept suggestion' }) accept.appendChild(icon('check')) accept.addEventListener('click', async e => { e.stopPropagation() // A local apply only counts if this tab can actually send it. Accepting from // a disconnected tab used to mark the suggestion accepted (that call is // plain HTTP and still succeeds) while the content went nowhere. if (!requireLiveConnection('accepting a suggestion')) return // apply in this editor so it's undoable; server then only flips the status const appliedLocally = tryClientApply(editor, s) const res = await api(`/api/docs/${docId}/suggestions/${s.id}/accept`, { method: 'POST', body: { mark_only: appliedLocally, page: pageSlug }, }) if (res.error) alert(res.error) }) return [reject, accept] } function renderMargin(editor) { const wrap = document.getElementById('margin-items') const items = [] const attachedByThread = new Map() // comment thread id -> [{chain, linkedThread}] for (const chain of suggestionChains()) { const s = chain.display const visible = s.status === 'open' || s.status === 'superseded' || state.showResolved if (!visible) continue let linkedThread = null threads.forEach((yt, tid) => { if (yt.get('suggestionId') === s.id) linkedThread = { id: tid, ythread: yt } }) // a suggestion posted into a comment thread renders INSIDE that thread's // card instead of as a separate margin widget const hostId = s.threadId && threads.get(s.threadId) && !threads.get(s.threadId).get('suggestionId') ? s.threadId : null const hostVisible = hostId && (!threads.get(hostId).get('resolved') || state.showResolved) if (hostId && hostVisible) { if (!attachedByThread.has(hostId)) attachedByThread.set(hostId, []) attachedByThread.get(hostId).push({ chain, linkedThread }) continue } items.push({ kind: 'sugg', id: s.id, data: s, linkedThread, chain }) } threads.forEach((ythread, id) => { if (ythread.get('suggestionId')) return if (ythread.get('resolved') && !state.showResolved) return items.push({ kind: 'thread', id, ythread, attached: attachedByThread.get(id) || [] }) }) // composers live inside the container too — never clobber them wrap.querySelectorAll('.card, .margin-empty').forEach(n => n.remove()) if (!items.length) { const composerOpen = wrap.querySelector('.composer-box:not(.hidden)') if (!composerOpen) wrap.appendChild(el('div', { class: 'margin-empty muted' }, 'Select text to comment or suggest. Mention @an-agent to hand it work.')) } else { wrap.append(...items.map(item => (item.kind === 'sugg' ? suggestionCard(item, editor) : threadCard(item, editor)))) } setCommentCount(items.length) document.getElementById('margin-head-title').textContent = items.length ? `Comments · ${items.length}` : 'Comments' clampLongText(wrap) scheduleLayout(editor) } // Agents can write essays into a thread. Cap every comment body (and rationale) // at a readable height once it is in the DOM and measurable, with a toggle for // the rest — a long reply must never bury the next card. function clampLongText(root) { for (const node of root.querySelectorAll('.msg .text, .rationale')) { if (node.dataset.clampChecked === 'open') continue node.classList.add('clamped') if (node.scrollHeight - node.clientHeight < 12) { node.classList.remove('clamped') continue } if (node.dataset.clampChecked) continue node.dataset.clampChecked = '1' const more = el('button', { class: 'more-btn', type: 'button' }, 'Show more') more.addEventListener('click', e => { e.stopPropagation() const open = node.classList.toggle('clamped') === false node.dataset.clampChecked = open ? 'open' : '1' more.textContent = open ? 'Show less' : 'Show more' scheduleLayout(window.__editor) }) node.after(more) } } function itemRange(editor, item) { const ystate = ySyncPluginKey.getState(editor.state) if (!ystate?.binding) return null if (item.kind === 'sugg') return suggestionRange(editor.state, item.data) return anchorsToRange(editor.state, ystate, item.ythread.get('anchorStart'), item.ythread.get('anchorEnd')) } function layoutMargin(editor) { const container = document.getElementById('margin-items') const els = [...container.querySelectorAll('.card, .composer-box:not(.hidden)')] // stacked/sheet layout: the cards flow normally, so drop any inline // positioning left over from the desktop layout (a stale minHeight would // leave a screen-tall gap under the last card) if (isStackedMargin()) { container.style.minHeight = '' for (const node of els) node.style.top = '' return } if (!els.length) { container.style.minHeight = '0px' return } const containerRect = container.getBoundingClientRect() const ystate = ySyncPluginKey.getState(editor.state) const entries = els.map(node => { let range = null if (node.classList.contains('composer-box')) { const anchors = node.id === 'composer' ? state.composerAnchors : state.suggestAnchors if (anchors && ystate?.binding) range = anchorsToRange(editor.state, ystate, anchors.start, anchors.end) } else { range = rangeFromCard(editor, node) } let desired = Infinity if (range) { try { desired = editor.view.coordsAtPos(Math.min(range.from, editor.state.doc.content.size)).top - containerRect.top } catch {} } if (Number.isFinite(desired) && node.classList.contains('composer-box')) desired -= 1 // wins ties return { node, desired: Number.isFinite(desired) ? Math.max(0, desired) : Infinity } }) entries.sort((a, b) => a.desired - b.desired) let cursor = 0 for (const entry of entries) { const top = entry.desired === Infinity ? cursor : Math.max(entry.desired, cursor) entry.node.style.top = `${top}px` cursor = top + entry.node.offsetHeight + 10 } container.style.minHeight = `${cursor}px` } function rangeFromCard(editor, card) { const id = card.dataset.item const suggestion = [...suggestionValues()].find(s => s.id === id) if (suggestion) return itemRange(editor, { kind: 'sugg', data: suggestion }) const ythread = threads.get(id) if (ythread) return itemRange(editor, { kind: 'thread', ythread }) return null } function suggestionValues() { const out = [] suggestions.forEach(s => out.push(s)) return out } function cardShell(id, kind, expanded) { const card = el('div', { class: `card ${kind}${expanded ? ' expanded' : ''}`, 'data-item': id }) card.addEventListener('mousedown', e => { if (e.target.closest('button, input, textarea, a, .mention-menu')) return if (state.activeItem !== id) setActive(id) }) return card } function cardHead(iconName, who, isAgent, preview, when) { const head = el('div', { class: 'head' }) head.appendChild(icon(iconName)) head.appendChild(el('span', { class: `who${isAgent ? ' agent' : ''}` }, who)) head.appendChild(el('span', { class: 'preview' }, preview)) head.appendChild(el('span', { class: 'when' }, timeAgo(when))) return head } function messageEl(msg) { const m = el('div', { class: 'msg' }) const author = el('div', { class: 'author' }) author.appendChild(el('span', {}, msg.authorType === 'agent' ? `@${msg.author}` : msg.author)) if (msg.authorType === 'agent') author.appendChild(el('span', { class: 'agent-tag' }, 'agent')) author.appendChild(el('span', { class: 'when' }, timeAgo(msg.ts))) m.appendChild(author) const textEl = el('div', { class: 'text' }) textEl.innerHTML = renderMentionText(msg.text) m.appendChild(textEl) for (const chip of msg.mentions || []) { m.appendChild(el('span', { class: `chip ${chip.status}` }, `@${chip.handle} · ${statusLabel(chip.status)}`)) } return m } function replyRow(placeholder, onSend) { const row = el('div', { class: 'reply-row' }) // a textarea, not an input: replies need Shift+Enter to add a line too, and // it grows with the text instead of scrolling a one-line box const input = el('textarea', { placeholder, rows: '1' }) const menu = el('div', { class: 'mention-menu hidden' }) const send = el('button', { class: 'iconbtn', title: 'Send' }) send.appendChild(icon('send')) const autoGrow = () => { input.style.height = 'auto' input.style.height = `${Math.min(input.scrollHeight, 140)}px` } send.addEventListener('click', () => { if (!input.value.trim()) return onSend(input.value.trim()) input.value = '' autoGrow() }) input.addEventListener('input', autoGrow) input.addEventListener('keydown', e => { if (e.key !== 'Enter' || e.shiftKey) return if (!menu.classList.contains('hidden')) return // the mention menu is picking e.preventDefault() send.click() }) row.append(input, send) wireMentionMenu(input, menu) return { row, menu } } // --- thread card --- function threadCard(item, editor) { const { id, ythread } = item const expanded = state.activeItem === id const card = cardShell(id, 'thread', expanded) const msgs = ythread.get('messages')?.toArray() || [] const first = msgs[0] || {} const resolved = ythread.get('resolved') const head = cardHead('comment', first.authorType === 'agent' ? `@${first.author}` : first.author || '?', first.authorType === 'agent', (resolved ? 'resolved · ' : '') + (first.text || ''), first.ts) if (!resolved) { // resolvable without opening the card const resolve = el('button', { class: 'iconbtn resolve-btn', title: 'Resolve comment' }) resolve.appendChild(icon('check')) resolve.addEventListener('click', e => { e.stopPropagation() ythread.set('resolved', true) if (state.activeItem === id) state.activeItem = null }) head.appendChild(resolve) } card.appendChild(head) // suggestions posted into this thread: one compact strip each, visible collapsed for (const att of item.attached || []) { card.appendChild(suggestionStrip(att.chain, editor)) } if (!expanded) return card const body = el('div', { class: 'body' }) const range = itemRange(editor, item) const orphaned = !range || range.from >= range.to if (ythread.get('excerpt')) { const quote = el('blockquote', { class: orphaned ? 'orphaned' : '' }, ythread.get('excerpt')) quote.title = orphaned ? 'The commented text was deleted' : 'Jump to text' quote.addEventListener('click', () => jumpTo(editor, range)) body.appendChild(quote) } for (const msg of msgs) body.appendChild(messageEl(msg)) if (!resolved) { const { row, menu } = replyRow('Reply — @agent to hand off', text => { ythread.get('messages').push([makeMessage(text)]) }) body.appendChild(row) body.appendChild(menu) const actions = el('div', { class: 'actions' }) const resolve = el('button', { class: 'btn small ghost' }) resolve.append(icon('resolve'), document.createTextNode('Resolve')) resolve.addEventListener('click', () => { ythread.set('resolved', true) state.activeItem = null }) actions.appendChild(resolve) body.appendChild(actions) } else { body.appendChild(el('div', { class: 'status-note' }, 'resolved')) } card.appendChild(body) return card } // --- suggestion card --- // suggestion attached to a comment thread: one compact row, actionable collapsed function suggestionStrip(chain, editor) { const s = chain.display const actionable = s.status === 'open' || s.status === 'superseded' const strip = el('div', { class: 'sugg-strip' + (state.activeItem === s.id ? ' active' : ''), 'data-sugg-strip': s.id }) strip.appendChild(icon('edit')) strip.appendChild(el('span', { class: `who${s.authorType === 'agent' ? ' agent' : ''}` }, s.authorType === 'agent' ? `@${s.author}` : s.author)) strip.appendChild(el('span', { class: 'preview' }, actionable ? s.rationale || 'suggested a change' : `${s.status}${s.resolvedBy ? ' by ' + s.resolvedBy : ''}`)) if (chain.members.length > 1) strip.appendChild(chainNav(chain)) if (actionable) strip.append(...suggestionActionButtons(s, editor)) strip.addEventListener('mousedown', e => { if (e.target.closest('button')) return setActive(s.id) }) return strip } function suggestionCard(item, editor) { const s = item.data const expanded = state.activeItem === s.id const card = cardShell(s.id, 'suggestion', expanded) // the diff lives in the document itself — the card only carries identity, // rationale, actions (always visible, even collapsed) and the discussion const actionable = s.status === 'open' || s.status === 'superseded' const head = cardHead( 'edit', s.authorType === 'agent' ? `@${s.author}` : s.author, s.authorType === 'agent', actionable ? s.rationale || 'suggested a change' : `${s.status}${s.resolvedBy ? ' by ' + s.resolvedBy : ''}`, s.ts ) if (item.chain && item.chain.members.length > 1) head.appendChild(chainNav(item.chain)) if (actionable) head.append(...suggestionActionButtons(s, editor)) card.appendChild(head) if (!expanded) return card const body = el('div', { class: 'body' }) if (actionable && s.rationale) body.appendChild(el('div', { class: 'rationale' }, s.rationale)) if (!actionable) body.appendChild(el('div', { class: 'status-note' }, `${s.status}${s.resolvedBy ? ' by ' + s.resolvedBy : ''}`)) // discussion on the suggestion (e.g. to guide the agent to revise it) const msgs = item.linkedThread?.ythread.get('messages')?.toArray() || [] for (const msg of msgs) body.appendChild(messageEl(msg)) const { row, menu } = replyRow('Discuss — @agent to request changes', text => { if (item.linkedThread) { item.linkedThread.ythread.get('messages').push([makeMessage(text)]) } else { createThread({ start: s.anchorStart, end: s.anchorEnd, excerpt: null }, text, s.id) } }) body.appendChild(row) body.appendChild(menu) card.appendChild(body) return card } // --- accepting suggestions locally (so undo works) -------------------------------- // Run undo/redo against the Yjs UndoManager directly. Tiptap's wrapped // undo command intermittently no-ops on large accept transactions (stale // chained state), while the manager itself is always reliable. function runUndo(editor) { yUndoPluginKey.getState(editor.state)?.undoManager?.undo() return true } function runRedo(editor) { yUndoPluginKey.getState(editor.state)?.undoManager?.redo() return true } // When the accepting user's own editor applies the replacement, the change lands // in their collaborative undo history. The server then only records the status. let pendingAcceptSuggestion = null function wireUndoReopens(editor) { const undoManager = yUndoPluginKey.getState(editor.state)?.undoManager if (!undoManager) return undoManager.on('stack-item-added', event => { if (pendingAcceptSuggestion) { event.stackItem.meta.set('acceptedSuggestion', pendingAcceptSuggestion) pendingAcceptSuggestion = null } }) undoManager.on('stack-item-popped', event => { if (event.type !== 'undo') return const sid = event.stackItem.meta.get('acceptedSuggestion') if (sid) api(`/api/docs/${docId}/suggestions/${sid}/reopen`, { method: 'POST', body: { page: pageSlug } }) }) } function inlineToPmContent(segments) { return (segments || []) .filter(seg => seg.text) .map(seg => // math is an atom carrying its source, not marked-up text seg.math != null ? { type: 'mathInline', attrs: { latex: seg.math } } : { type: 'text', text: seg.text, marks: Object.entries(seg.attrs || {}).map(([type, attrs]) => ({ type, attrs })), } ) } function blockToPmJSON(block) { switch (block.type) { case 'mathBlock': return { type: 'mathBlock', attrs: { latex: block.attrs?.latex || '' } } case 'heading': return { type: 'heading', attrs: { level: block.attrs?.level || 1 }, content: inlineToPmContent(block.inline) } case 'codeBlock': return { type: 'codeBlock', attrs: block.attrs || {}, content: block.text ? [{ type: 'text', text: block.text }] : undefined } case 'htmlBlock': return { type: 'htmlBlock', attrs: { html: block.text || '' } } case 'bulletList': case 'orderedList': return { type: block.type, content: (block.items || []).map(segments => ({ type: 'listItem', content: [{ type: 'paragraph', content: inlineToPmContent(segments) }], })), } case 'taskList': return { type: 'taskList', content: (block.items || []).map(it => ({ type: 'taskItem', attrs: { checked: !!it.checked }, content: [{ type: 'paragraph', content: inlineToPmContent(it.inline) }], })), } case 'table': return { type: 'table', content: (block.rows || []).map((cells, r) => ({ type: 'tableRow', content: cells.map(segs => ({ type: r === 0 ? 'tableHeader' : 'tableCell', attrs: { colspan: 1, rowspan: 1, colwidth: null }, content: [{ type: 'paragraph', content: inlineToPmContent(segs) }], })), })), } case 'blockquote': return { type: 'blockquote', content: [{ type: 'paragraph', content: inlineToPmContent(block.inline) }] } case 'horizontalRule': return { type: 'horizontalRule' } case 'image': return { type: 'image', attrs: { src: block.attrs?.src || '', alt: block.attrs?.alt || null } } default: { const content = inlineToPmContent(block.inline) return content.length ? { type: 'paragraph', content } : { type: 'paragraph' } } } } // Every block of the replacement must be findable in the result. A distinctive // slice of each block's text is enough — exact node comparison would trip over // harmless schema normalisation. function replacementLanded(doc, from, blocks) { const after = doc.textBetween(Math.max(0, from), doc.content.size, '\n', '\n') return blocks.every(b => { const want = blockDescText(b).replace(/\s+/g, ' ').trim() if (!want) return true const probe = want.slice(0, 40) return after.replace(/\s+/g, ' ').includes(probe) }) } function tryClientApply(editor, s) { try { const range = suggestionRange(editor.state, s) if (!range) return false const blocks = markdownToBlocks(s.replacementMarkdown) const nodes = blocks.map(b => editor.schema.nodeFromJSON(blockToPmJSON(b))) // Build the transaction first and check what it would actually produce. // ProseMirror silently drops whatever does not fit the target position, so a // range that resolved inside a list item (or any nested block) can apply a // partial replacement — one live doc ended up with an entry's detail text // nested under the *previous* person, its heading line gone. Let the server // do the replacement in that case: it works on whole blocks. const tr = editor.state.tr.replaceWith(range.from, range.to, nodes) if (!replacementLanded(tr.doc, range.from, blocks)) { console.warn('client-side apply would drop content, falling back to server apply') return false } pendingAcceptSuggestion = s.id editor.view.dispatch(tr) // stack-item-added fires synchronously during dispatch; if the change was // merged into an existing stack item instead, don't tag a later one setTimeout(() => { pendingAcceptSuggestion = null }, 0) return true } catch (err) { pendingAcceptSuggestion = null console.warn('client-side apply failed, falling back to server apply', err) return false } } // --- agents --------------------------------------------------------------------- function wireAgentsPanel() { const btn = document.getElementById('agents-btn') const pop = document.getElementById('agents-pop') btn.addEventListener('click', () => pop.classList.toggle('hidden')) document.getElementById('agent-form').addEventListener('submit', async e => { e.preventDefault() const input = document.getElementById('agent-handle') const handle = input.value.trim().toLowerCase() if (!handle) return const res = await api('/api/agents', { method: 'POST', body: { handle } }) if (res.error) alert(res.error) else { input.value = '' refreshAgents() if (res.key) pop.appendChild(agentKeyBox({ handle: res.handle, key: res.key, docId })) } }) } // --- sharing ------------------------------------------------------------------ function wireSharePanel() { const btn = document.getElementById('share-btn') const pop = document.getElementById('share-pop') btn.addEventListener('click', () => { pop.classList.toggle('hidden') if (!pop.classList.contains('hidden')) renderShareList() }) document.getElementById('share-form').addEventListener('submit', async e => { e.preventDefault() const input = document.getElementById('share-user') const username = input.value.trim() if (!username) return const res = await api(`/api/docs/${docId}/share`, { method: 'POST', body: { username } }) if (res.error) return alert(res.error) input.value = '' renderShareList() }) } async function renderShareList() { const meta = await api(`/api/docs/${docId}`) const wrap = document.getElementById('share-list') if (meta.error) { wrap.textContent = meta.error return } const isCreator = !meta.created_by || meta.created_by === state.me.username document.getElementById('share-form').classList.toggle('hidden', !isCreator) wrap.className = '' const rows = [] if (meta.created_by) { const owner = el('div', { class: 'share-row' }) owner.append(el('span', { class: 'handle' }, meta.created_by), el('span', { class: 'muted' }, 'owner')) rows.push(owner) } for (const username of meta.shared_with || []) { const row = el('div', { class: 'share-row' }) row.appendChild(el('span', { class: 'handle' }, username)) if (isCreator) { const rm = el('button', { class: 'iconbtn', title: 'Remove access' }) rm.appendChild(icon('x')) rm.addEventListener('click', async () => { await api(`/api/docs/${docId}/share`, { method: 'POST', body: { username, remove: true } }) renderShareList() }) row.appendChild(rm) } rows.push(row) } if (!rows.length) rows.push(el('div', { class: 'muted' }, 'Not shared with anyone yet.')) wrap.replaceChildren(...rows) } async function refreshAgents() { const res = await api(`/api/agents?doc=${docId}`) if (!res.agents) return state.agents = res.agents const wrap = document.getElementById('agents-list') if (!res.agents.length) { wrap.className = 'muted' wrap.textContent = 'No agents registered yet.' return } wrap.className = '' wrap.replaceChildren( ...res.agents.map(a => { const row = el('div', { class: 'agent-row' }) row.appendChild(el('span', { class: `dot${a.online ? ' on' : ''} tip-below`, 'data-tip': a.online ? 'Online — the agent is polling for work' : 'Offline — the agent is not polling right now' })) const id = el('span', { class: 'agent-id' }) id.appendChild(el('span', { class: 'handle' }, `@${a.handle}`)) id.appendChild(el('span', { class: 'muted owner' }, a.owner + (a.shared === false ? ' · private' : ''))) row.appendChild(id) const actions = el('span', { class: 'actions' }) const copy = el('button', { class: 'iconbtn', 'data-tip': 'Copy the agent prompt (paste it into your coding agent)' }) copy.appendChild(icon('copy')) copy.addEventListener('click', async () => { const text = await fetch(`/api/agent-prompt?doc=${docId}&handle=${a.handle}`).then(r => r.text()) await navigator.clipboard.writeText(text) copy.replaceChildren(icon('check')) setTimeout(() => copy.replaceChildren(icon('copy')), 1500) }) actions.appendChild(copy) if (a.owner === state.me.username) { const vis = el('button', { class: 'iconbtn' + (a.shared ? ' on' : ''), 'data-tip': a.shared ? 'Shared: collaborators can @mention this agent — click to make it private' : 'Private: only you can @mention it — click to share', }) vis.appendChild(icon(a.shared ? 'eye' : 'eyeoff')) vis.addEventListener('click', async () => { const res = await api(`/api/agents/${a.handle}/visibility`, { method: 'POST', body: { shared: !a.shared } }) if (res.error) alert(res.error) else refreshAgents() }) actions.appendChild(vis) const rot = el('button', { class: 'iconbtn', 'data-tip': 'Issue a new key (the old one stops working)' }) rot.appendChild(icon('key')) rot.addEventListener('click', async () => { const res = await api(`/api/agents/${a.handle}/rotate`, { method: 'POST' }) if (res.error) alert(res.error) else document.getElementById('agents-pop').appendChild(agentKeyBox({ handle: a.handle, key: res.key, docId })) }) actions.appendChild(rot) } if (a.owner === state.me.username || state.me.isAdmin) { const del = el('button', { class: 'iconbtn', 'data-tip': 'Remove this agent (its key stops working, open tasks are cancelled)' }) del.appendChild(icon('trash')) del.addEventListener('click', async () => { if (!confirm(`Remove @${a.handle}? Its key stops working and open tasks are cancelled.`)) return const res = await api(`/api/agents/${a.handle}`, { method: 'DELETE' }) if (res.error) alert(res.error) refreshAgents() }) actions.appendChild(del) } row.appendChild(actions) return row }) ) } // --- mention autocomplete ---------------------------------------------------------- function wireMentionMenu(input, menu) { const getQuery = () => { const pos = input.selectionStart ?? input.value.length const before = input.value.slice(0, pos) const m = before.match(/@([a-z0-9_.-]*)$/i) return m ? { q: m[1].toLowerCase(), start: pos - m[1].length } : null } let options = [] let sel = 0 const hide = () => { menu.classList.add('hidden') options = [] } const insert = a => { const ctx = getQuery() if (!a || !ctx) return input.value = input.value.slice(0, ctx.start) + a.handle + ' ' + input.value.slice(input.selectionStart) const caret = ctx.start + a.handle.length + 1 input.setSelectionRange(caret, caret) hide() input.focus({ preventScroll: true }) } const render = () => { const ctx = getQuery() if (!ctx) return hide() // your own agents first, so the preselected row is the one you meant const matches = state.agents.filter(a => a.handle.startsWith(ctx.q)) const mine = matches.filter(a => a.owner === state.me?.username) options = [...mine, ...matches.filter(a => !mine.includes(a))].slice(0, 6) if (!options.length) return hide() sel = Math.min(sel, options.length - 1) menu.replaceChildren( ...options.map((a, i) => { const opt = el('div', { class: 'mention-item' + (i === sel ? ' selected' : '') }) opt.append(el('span', { class: `dot${a.online ? ' on' : ''}` }), document.createTextNode(`@${a.handle}`)) opt.addEventListener('mouseenter', () => { if (sel === i) return sel = i render() }) opt.addEventListener('mousedown', e => { e.preventDefault() insert(a) }) return opt }) ) menu.classList.remove('hidden') } input.addEventListener('input', () => { sel = 0 // a new query means a new list — start at your first agent again render() }) // arrows move through the list, Enter/Tab picks, Escape closes it without // touching the comment box itself input.addEventListener('keydown', e => { if (menu.classList.contains('hidden') || !options.length) return if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { e.preventDefault() sel = (sel + (e.key === 'ArrowDown' ? 1 : options.length - 1)) % options.length render() menu.querySelector('.selected')?.scrollIntoView({ block: 'nearest' }) return } if (e.key === 'Enter' || e.key === 'Tab') { e.preventDefault() insert(options[sel]) return } if (e.key === 'Escape') { e.preventDefault() e.stopPropagation() hide() } }) input.addEventListener('blur', () => setTimeout(hide, 150)) } // --- presence ----------------------------------------------------------------------- function renderPresence(provider) { const wrap = document.getElementById('presence') const seen = new Set() const avatars = [] provider.awareness?.getStates().forEach(s => { const u = s.user if (!u?.name || seen.has(u.name)) return seen.add(u.name) const a = el('div', { class: 'avatar', title: u.name }, u.name.slice(0, 2).toUpperCase()) a.style.background = u.color || '#999' avatars.push(a) }) wrap.replaceChildren(...avatars) }