braid-text 0.3.24 → 0.3.26

package/README.md

@@ -188,7 +188,7 @@ This will render each peer's cursor and selection with colored highlights.  Just
 
 ```html
 <!-- 1. Include these additional script tags -->
-<script src="https://unpkg.com/braid-text@~0.3/client/cursor-highlights.js"></script>
+<script src="https://unpkg.com/braid-text@~0.3/client/textarea-highlights.js"></script>
 <script src="https://unpkg.com/braid-text@~0.3/client/cursor-sync.js"></script>
 
 <!-- 2. Add two lines to your simpleton_client() call -->

package/client/cursor-sync.js

@@ -15,12 +15,12 @@
 //   cursors.changed(patches)
 //   cursors.destroy()
 //
-async function cursor_client(url, { peer, get_text, on_change, headers: user_headers }) {
+async function cursor_client(url, { peer, get_text, on_change, headers: custom_headers }) {
     // --- feature detection: HEAD probe ---
     try {
         var head_res = await braid_fetch(url, {
             method: 'HEAD',
-            headers: { ...user_headers, 'Accept': 'application/text-cursors+json' }
+            headers: { ...custom_headers, 'Accept': 'application/text-cursors+json' }
         })
         var ct = head_res.headers.get('content-type') || ''
         if (!ct.includes('application/text-cursors+json')) return null
@@ -124,7 +124,7 @@ async function cursor_client(url, { peer, get_text, on_change, headers: user_hea
         braid_fetch(url, {
             method: 'PUT',
             headers: {
-                ...user_headers,
+                ...custom_headers,
                 'Content-Type': 'application/text-cursors+json',
                 Peer: peer,
                 'Content-Range': 'json [' + JSON.stringify(peer) + ']',
@@ -156,7 +156,7 @@ async function cursor_client(url, { peer, get_text, on_change, headers: user_hea
         }},
         peer,
         headers: {
-            ...user_headers,
+            ...custom_headers,
             Accept: 'application/text-cursors+json',
             Heartbeats: '10',
         },
@@ -229,6 +229,13 @@ async function cursor_client(url, { peer, get_text, on_change, headers: user_hea
             last_sent = key
             last_ranges = ranges
 
+            // Report local cursor immediately for rendering
+            if (on_change) {
+                var update = {}
+                update[peer] = last_ranges
+                on_change(update)
+            }
+
             if (!online) return
 
             // Debounce 50ms
@@ -236,29 +243,34 @@ async function cursor_client(url, { peer, get_text, on_change, headers: user_hea
             send_timer = setTimeout(function() { do_put(ranges) }, 50)
         },
 
-        // Transform all stored remote cursor positions through text edits.
+        // Transform all cursor positions (remote and local) through text edits.
         // patches: [{ range: [start, end], content: string }] in JS string indices.
         changed: function(patches) {
-            var any_changed = false
-            for (var id of Object.keys(selections)) {
-                selections[id] = selections[id].map(function(sel) {
-                    var from = sel.from
-                    var to = sel.to
+            function transform_ranges(ranges) {
+                return ranges.map(function(sel) {
+                    var from = sel.from, to = sel.to
                     for (var p of patches) {
-                        var del_len = p.range[1] - p.range[0]
-                        var ins_len = p.content.length
-                        from = transform_pos(from, p.range[0], del_len, ins_len)
-                        to = transform_pos(to, p.range[0], del_len, ins_len)
+                        var dl = p.range[1] - p.range[0], il = p.content.length
+                        from = transform_pos(from, p.range[0], dl, il)
+                        to = transform_pos(to, p.range[0], dl, il)
                     }
                     return { from, to }
                 })
-                any_changed = true
             }
-            if (any_changed && on_change) {
-                // Report all current selections
+
+            for (var id of Object.keys(selections))
+                selections[id] = transform_ranges(selections[id])
+
+            if (last_ranges)
+                last_ranges = transform_ranges(last_ranges)
+
+            // Report all cursors including local
+            if (on_change) {
                 var all = {}
                 for (var id of Object.keys(selections))
                     all[id] = selections[id]
+                if (last_ranges)
+                    all[peer] = last_ranges
                 on_change(all)
             }
         },
@@ -278,3 +290,120 @@ async function cursor_client(url, { peer, get_text, on_change, headers: user_hea
         },
     }
 }
+
+// --- Color helpers ---
+
+var _cursor_colors = ["#e06c75", "#61afef", "#98c379", "#c678dd", "#e5c07b", "#56b6c2"]
+
+function peer_color(peer_id) {
+    var hash = 0
+    for (var i = 0; i < peer_id.length; i++)
+        hash = ((hash << 5) - hash + peer_id.charCodeAt(i)) | 0
+    return _cursor_colors[Math.abs(hash) % _cursor_colors.length]
+}
+
+function peer_bg_color(peer_id) {
+    var c = peer_color(peer_id)
+    var r = parseInt(c.slice(1, 3), 16)
+    var g = parseInt(c.slice(3, 5), 16)
+    var b = parseInt(c.slice(5, 7), 16)
+    var dark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+    return `rgba(${r}, ${g}, ${b}, ${dark ? 0.4 : 0.25})`
+}
+
+// --- High-level wrapper: textarea + cursor sync ---
+//
+// Requires textarea_highlights (from textarea-highlights.js)
+//
+// Usage:
+//   var cursors = cursor_highlights(textarea, url, { headers: {...} })
+//   cursors.on_patches(patches)   // call after applying remote patches
+//   cursors.on_edit(patches)      // call after local edit; patches optional
+//   cursors.destroy()
+//
+function cursor_highlights(textarea, url, options) {
+    var peer = Math.random().toString(36).slice(2)
+    var hl = textarea_highlights(textarea)
+    var applying_remote = false
+    var client = null
+    var online = false
+    var destroyed = false
+
+    cursor_client(url, {
+        peer,
+        headers: options?.headers,
+        get_text: () => textarea.value,
+        on_change: function(sels) {
+            for (var [id, ranges] of Object.entries(sels)) {
+                // Skip own cursor when textarea is focused (browser draws it)
+                if (id === peer && document.activeElement === textarea) {
+                    hl.remove(id)
+                    continue
+                }
+                if (!ranges.length) { hl.remove(id); continue }
+                hl.set(id, ranges.map(r => ({
+                    from: r.from, to: r.to,
+                    color: r.from === r.to ? peer_color(id) : peer_bg_color(id)
+                })))
+            }
+            hl.render()
+        }
+    }).then(function(c) {
+        client = c
+        if (online) client.online()
+        if (destroyed) client.destroy()
+    })
+
+    function on_selectionchange() {
+        if (applying_remote) return
+        if (document.activeElement !== textarea) return
+        if (client) client.set(textarea.selectionStart, textarea.selectionEnd)
+    }
+    document.addEventListener('selectionchange', on_selectionchange)
+
+    // Show own cursor when blurred, hide when focused
+    function on_blur() {
+        if (client) client.set(textarea.selectionStart, textarea.selectionEnd)
+    }
+    function on_focus() {
+        hl.remove(peer)
+        hl.render()
+    }
+    textarea.addEventListener('blur', on_blur)
+    textarea.addEventListener('focus', on_focus)
+
+    return {
+        online: function() {
+            online = true
+            if (client) client.online()
+        },
+        offline: function() {
+            online = false
+            if (client) client.offline()
+        },
+
+        on_patches: function(patches) {
+            applying_remote = true
+            // cursor-sync transforms all cursors (remote + local) uniformly
+            if (client) client.changed(patches)
+            hl.render()
+            setTimeout(() => { applying_remote = false }, 0)
+        },
+
+        on_edit: function(patches) {
+            if (client) {
+                if (patches) client.changed(patches)
+                client.set(textarea.selectionStart, textarea.selectionEnd)
+            }
+        },
+
+        destroy: function() {
+            destroyed = true
+            document.removeEventListener('selectionchange', on_selectionchange)
+            textarea.removeEventListener('blur', on_blur)
+            textarea.removeEventListener('focus', on_focus)
+            if (client) client.destroy()
+            hl.destroy()
+        }
+    }
+}

package/client/simpleton-sync.js

@@ -106,7 +106,7 @@ function simpleton_client(url, {
     get_patches,
     get_state,
     content_type,
-    headers: user_headers,    // The user can pass in custom headers
+    headers: custom_headers,    // The user can pass in custom headers
                               // that are forwared into the fetch
     on_error,
     on_res,
@@ -144,7 +144,7 @@ function simpleton_client(url, {
         retry: () => true,
         parents: () => client_version.length ? client_version : null,
         onSubscriptionStatus: status => on_online && on_online(status.online),
-        headers: { ...user_headers,
+        headers: { ...custom_headers,
                    "Merge-Type": "simpleton",
                    ...content_type && {Accept: content_type} },
     }).then(res => {
@@ -332,7 +332,7 @@ function simpleton_client(url, {
                         peer, version, parents, patches,
                         retry: (res) => res.status !== 550,
                         headers: {
-                            ...user_headers,
+                            ...custom_headers,
                             "Merge-Type": "simpleton",
                             ...send_digests && {
                                 "Repr-Digest": await get_digest(client_state) },

package/client/{cursor-highlights.js → textarea-highlights.js}

@@ -1,7 +1,11 @@
-// cursor-highlights.js — Render colored cursors and selections behind a <textarea>
+// textarea-highlights.js — Render colored highlights behind a <textarea>
 //
 // No dependencies. Pure DOM/CSS.
 //
+// Renders colored ranges (selections) and zero-width points (cursors) as
+// overlays behind a textarea's text. Works with any textarea regardless
+// of its parent's CSS — backdrops are positioned as absolute siblings.
+//
 // Usage:
 //   var hl = textarea_highlights(textarea)
 //   hl.set('peer-1', [{ from: 5, to: 10, color: 'rgba(97,175,239,0.25)' }])
@@ -17,13 +21,13 @@ function textarea_highlights(textarea) {
         style.textContent = `
             .textarea-hl-backdrop {
                 position: absolute;
-                top: 0; left: 0; right: 0; bottom: 0;
                 white-space: pre-wrap;
                 word-wrap: break-word;
                 overflow-y: auto;
                 pointer-events: none;
                 color: transparent;
                 z-index: 1;
+                box-sizing: border-box;
                 scrollbar-width: none;
                 -ms-overflow-style: none;
             }
@@ -35,45 +39,34 @@ function textarea_highlights(textarea) {
                 box-decoration-break: clone;
             }
             .textarea-hl-backdrop .cursor {
-                position: relative;
-                display: inline-block;
-                width: 0;
-                height: 1em;
-                z-index: 10;
-            }
-            .textarea-hl-backdrop .cursor::before {
-                content: '';
-                position: absolute;
-                left: -1px;
-                top: 0;
-                bottom: 0;
-                width: 2px;
-                background-color: var(--cursor-color, #ff5722);
-                z-index: 10;
+                border-left: 2px solid var(--cursor-color, #ff5722);
+                margin-left: -1px;
+                margin-right: -1px;
             }
         `
         document.head.appendChild(style)
     }
 
-    // Ensure textarea is wrapped in a position:relative container
-    var wrap = textarea.parentElement
-    if (getComputedStyle(wrap).position === 'static')
-        wrap.style.position = 'relative'
+    // Save original styles so we can restore on destroy
+    var original_bg = textarea.style.backgroundColor
+    var original_position = textarea.style.position
+    var original_zIndex = textarea.style.zIndex
 
-    // Move textarea's background to the wrapper so backdrops show through
+    // Read the textarea's background color before we make it transparent.
+    // Walk up the DOM if the textarea itself is transparent.
     var bg = getComputedStyle(textarea).backgroundColor
-    if (!wrap.style.backgroundColor) {
-        if (!bg || bg === 'rgba(0, 0, 0, 0)') {
-            // Walk up the DOM to find the effective background
-            var el = wrap
-            while (el) {
-                var elBg = getComputedStyle(el).backgroundColor
-                if (elBg && elBg !== 'rgba(0, 0, 0, 0)') { bg = elBg; break }
-                el = el.parentElement
-            }
+    if (!bg || bg === 'rgba(0, 0, 0, 0)') {
+        var el = textarea.parentElement
+        while (el) {
+            var elBg = getComputedStyle(el).backgroundColor
+            if (elBg && elBg !== 'rgba(0, 0, 0, 0)') { bg = elBg; break }
+            el = el.parentElement
         }
-        wrap.style.backgroundColor = bg || 'white'
     }
+    bg = bg || 'white'
+
+    // Make textarea transparent so backdrops show through.
+    // position:relative + z-index puts the textarea text above the backdrops.
     textarea.style.backgroundColor = 'transparent'
     textarea.style.position = 'relative'
     textarea.style.zIndex = '2'
@@ -95,7 +88,6 @@ function textarea_highlights(textarea) {
     var bg_height = test_span.getBoundingClientRect().height
     document.body.removeChild(test_div)
     var sel_pad = (line_height - bg_height) / 2
-    wrap.style.setProperty('--sel-pad', sel_pad + 'px')
 
     // State
     var layer_data = {}     // layer_id -> [{ from, to, color }]
@@ -110,16 +102,29 @@ function textarea_highlights(textarea) {
     }
     textarea.addEventListener('scroll', sync_scroll)
 
+    // Re-render when textarea resizes (user drag, window resize, CSS change)
+    var resize_observer = new ResizeObserver(do_render)
+    resize_observer.observe(textarea)
+
     // Build a backdrop style string matching the textarea's font/padding/border
     function backdrop_style() {
         var cs = getComputedStyle(textarea)
+        var bw = parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth)
+        var bh = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth)
+        // Use clientWidth/clientHeight (content + padding, excludes scrollbar)
+        // plus border, so the backdrop's content area matches the textarea's
+        // even when the textarea reserves space for a scrollbar.
         return 'font-family:' + cs.fontFamily + ';' +
             'font-size:' + cs.fontSize + ';' +
             'line-height:' + cs.lineHeight + ';' +
             'padding:' + cs.paddingTop + ' ' + cs.paddingRight + ' ' +
                 cs.paddingBottom + ' ' + cs.paddingLeft + ';' +
             'border:' + cs.borderTopWidth + ' solid transparent;' +
-            'border-radius:' + cs.borderRadius + ';'
+            'border-radius:' + cs.borderRadius + ';' +
+            'width:' + (textarea.clientWidth + bw) + 'px;' +
+            'height:' + (textarea.clientHeight + bh) + 'px;' +
+            '--sel-pad:' + sel_pad + 'px;' +
+            'background-color:' + bg + ';'
     }
 
     function escape_html(text) {
@@ -192,13 +197,17 @@ function textarea_highlights(textarea) {
             }))
 
             if (!layer_divs[id]) {
+                // Insert backdrop as previous sibling of textarea.
+                // position:absolute takes it out of flow so it doesn't
+                // affect layout. Without top/left set, it naturally sits
+                // at the textarea's position.
                 var div = document.createElement('div')
                 div.className = 'textarea-hl-backdrop'
-                wrap.insertBefore(div, textarea)
+                textarea.parentElement.insertBefore(div, textarea)
                 layer_divs[id] = div
             }
 
-            // Font/padding/border are set inline to match textarea;
+            // Font/padding/border/size are set inline to match textarea;
             // positioning/pointer-events/etc come from the CSS class.
             layer_divs[id].style.cssText = style_str
 
@@ -208,37 +217,6 @@ function textarea_highlights(textarea) {
         }
     }
 
-    // --- show local cursor/selection when textarea is not focused ---
-
-    var local_id = '__local__'
-
-    function on_blur() {
-        var from = textarea.selectionStart
-        var to = textarea.selectionEnd
-        var color = getComputedStyle(textarea).caretColor
-        if (!color || color === 'auto') color = getComputedStyle(textarea).color
-        if (from === to) {
-            layer_data[local_id] = [{ from, to, color: color }]
-        } else {
-            var match = color.match(/(\d+),\s*(\d+),\s*(\d+)/)
-            var sel_color = match ? 'rgba(' + match[1] + ', ' + match[2] + ', ' + match[3] + ', 0.3)' : color
-            layer_data[local_id] = [{ from, to, color: sel_color }]
-        }
-        do_render()
-    }
-
-    function on_focus() {
-        delete layer_data[local_id]
-        if (layer_divs[local_id]) {
-            layer_divs[local_id].remove()
-            delete layer_divs[local_id]
-        }
-        do_render()
-    }
-
-    textarea.addEventListener('blur', on_blur)
-    textarea.addEventListener('focus', on_focus)
-
     return {
         set: function(layer_id, highlights) {
             layer_data[layer_id] = highlights
@@ -254,111 +232,15 @@ function textarea_highlights(textarea) {
 
         render: do_render,
 
-        layers: function() {
-            return Object.keys(layer_data)
-        },
-
         destroy: function() {
             textarea.removeEventListener('scroll', sync_scroll)
-            textarea.removeEventListener('blur', on_blur)
-            textarea.removeEventListener('focus', on_focus)
+            resize_observer.disconnect()
             for (var div of Object.values(layer_divs)) div.remove()
             layer_data = {}
             layer_divs = {}
-        }
-    }
-}
-
-// --- Color helpers ---
-
-var _cursor_colors = ["#e06c75", "#61afef", "#98c379", "#c678dd", "#e5c07b", "#56b6c2"]
-
-function peer_color(peer_id) {
-    var hash = 0
-    for (var i = 0; i < peer_id.length; i++)
-        hash = ((hash << 5) - hash + peer_id.charCodeAt(i)) | 0
-    return _cursor_colors[Math.abs(hash) % _cursor_colors.length]
-}
-
-function peer_bg_color(peer_id) {
-    var c = peer_color(peer_id)
-    var r = parseInt(c.slice(1, 3), 16)
-    var g = parseInt(c.slice(3, 5), 16)
-    var b = parseInt(c.slice(5, 7), 16)
-    var dark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
-    return `rgba(${r}, ${g}, ${b}, ${dark ? 0.4 : 0.25})`
-}
-
-// --- High-level wrapper ---
-//
-// Usage:
-//   var cursors = cursor_highlights(textarea, url)
-//   cursors.on_patches(patches)   // call after applying remote patches
-//   cursors.on_edit(patches)      // call after local edit; patches optional
-//   cursors.destroy()
-//
-function cursor_highlights(textarea, url, options) {
-    var peer = Math.random().toString(36).slice(2)
-    var hl = textarea_highlights(textarea)
-    var applying_remote = false
-    var client = null
-    var online = false
-    var destroyed = false
-
-    cursor_client(url, {
-        peer,
-        headers: options?.headers,
-        get_text: () => textarea.value,
-        on_change: (sels) => {
-            for (var [id, ranges] of Object.entries(sels)) {
-                if (!ranges.length) { hl.remove(id); continue }
-                hl.set(id, ranges.map(r => ({
-                    from: r.from, to: r.to,
-                    color: r.from === r.to ? peer_color(id) : peer_bg_color(id)
-                })))
-            }
-            hl.render()
-        }
-    }).then(function(c) {
-        client = c
-        if (online) client.online()
-        if (destroyed) client.destroy()
-    })
-
-    document.addEventListener('selectionchange', function() {
-        if (applying_remote) return
-        if (document.activeElement !== textarea) return
-        if (client) client.set(textarea.selectionStart, textarea.selectionEnd)
-    })
-
-    return {
-        online: function() {
-            online = true
-            if (client) client.online()
-        },
-        offline: function() {
-            online = false
-            if (client) client.offline()
-        },
-
-        on_patches: function(patches) {
-            applying_remote = true
-            if (client) client.changed(patches)
-            hl.render()
-            setTimeout(() => { applying_remote = false }, 0)
-        },
-
-        on_edit: function(patches) {
-            if (client) {
-                if (patches) client.changed(patches)
-                client.set(textarea.selectionStart, textarea.selectionEnd)
-            }
-        },
-
-        destroy: function() {
-            destroyed = true
-            if (client) client.destroy()
-            hl.destroy()
+            textarea.style.backgroundColor = original_bg
+            textarea.style.position = original_position
+            textarea.style.zIndex = original_zIndex
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-text",
-  "version": "0.3.24",
+  "version": "0.3.26",
   "description": "Library for collaborative text over http using braid.",
   "author": "Braid Working Group",
   "repository": "braid-org/braid-text",
@@ -17,6 +17,7 @@
     "client/simpleton-sync.js",
     "client/cursor-sync.js",
     "client/cursor-highlights.js",
+    "client/textarea-highlights.js",
     "client/web-utils.js",
     "README.md",
     "client/editor.html",