braid-text 0.3.25 → 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

@@ -229,6 +229,13 @@ async function cursor_client(url, { peer, get_text, on_change, headers: custom_h
             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: custom_h
             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: custom_h
         },
     }
 }
+
+// --- 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/{cursor-highlights.js → textarea-highlights.js}

@@ -1,4 +1,10 @@
-// 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)
@@ -211,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
@@ -257,118 +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 = {}
-            // Restore textarea styles
             textarea.style.backgroundColor = original_bg
             textarea.style.position = original_position
             textarea.style.zIndex = original_zIndex
         }
     }
 }
-
-// --- 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()
-    })
-
-    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)
-
-    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
-            document.removeEventListener('selectionchange', on_selectionchange)
-            if (client) client.destroy()
-            hl.destroy()
-        }
-    }
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-text",
-  "version": "0.3.25",
+  "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",