braid-text 0.3.8 → 0.3.10

package/client/cursor-highlights.js

@@ -62,8 +62,18 @@ function textarea_highlights(textarea) {
 
     // Move textarea's background to the wrapper so backdrops show through
     var bg = getComputedStyle(textarea).backgroundColor
-    if (!wrap.style.backgroundColor)
-        wrap.style.backgroundColor = (!bg || bg === 'rgba(0, 0, 0, 0)') ? 'white' : bg
+    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
+            }
+        }
+        wrap.style.backgroundColor = bg || 'white'
+    }
     textarea.style.backgroundColor = 'transparent'
     textarea.style.position = 'relative'
     textarea.style.zIndex = '2'
@@ -158,6 +168,77 @@ function textarea_highlights(textarea) {
         return result
     }
 
+    // --- render implementation ---
+
+    function do_render() {
+        var text = textarea.value
+        var len = text.length
+        var style_str = backdrop_style()
+
+        // Remove divs for layers that no longer exist
+        for (var id of Object.keys(layer_divs)) {
+            if (!layer_data[id]) {
+                layer_divs[id].remove()
+                delete layer_divs[id]
+            }
+        }
+
+        // Render each layer
+        for (var id of Object.keys(layer_data)) {
+            var highlights = layer_data[id].map(h => ({
+                from: Math.min(h.from, len),
+                to: Math.min(h.to, len),
+                color: h.color
+            }))
+
+            if (!layer_divs[id]) {
+                var div = document.createElement('div')
+                div.className = 'textarea-hl-backdrop'
+                wrap.insertBefore(div, textarea)
+                layer_divs[id] = div
+            }
+
+            // Font/padding/border are set inline to match textarea;
+            // positioning/pointer-events/etc come from the CSS class.
+            layer_divs[id].style.cssText = style_str
+
+            layer_divs[id].innerHTML = build_html(text, highlights)
+            layer_divs[id].scrollTop = textarea.scrollTop
+            layer_divs[id].scrollLeft = textarea.scrollLeft
+        }
+    }
+
+    // --- 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
@@ -171,43 +252,7 @@ function textarea_highlights(textarea) {
             }
         },
 
-        render: function() {
-            var text = textarea.value
-            var len = text.length
-            var style_str = backdrop_style()
-
-            // Remove divs for layers that no longer exist
-            for (var id of Object.keys(layer_divs)) {
-                if (!layer_data[id]) {
-                    layer_divs[id].remove()
-                    delete layer_divs[id]
-                }
-            }
-
-            // Render each layer
-            for (var id of Object.keys(layer_data)) {
-                var highlights = layer_data[id].map(h => ({
-                    from: Math.min(h.from, len),
-                    to: Math.min(h.to, len),
-                    color: h.color
-                }))
-
-                if (!layer_divs[id]) {
-                    var div = document.createElement('div')
-                    div.className = 'textarea-hl-backdrop'
-                    wrap.insertBefore(div, textarea)
-                    layer_divs[id] = div
-                }
-
-                // Font/padding/border are set inline to match textarea;
-                // positioning/pointer-events/etc come from the CSS class.
-                layer_divs[id].style.cssText = style_str
-
-                layer_divs[id].innerHTML = build_html(text, highlights)
-                layer_divs[id].scrollTop = textarea.scrollTop
-                layer_divs[id].scrollLeft = textarea.scrollLeft
-            }
-        },
+        render: do_render,
 
         layers: function() {
             return Object.keys(layer_data)
@@ -215,6 +260,8 @@ function textarea_highlights(textarea) {
 
         destroy: function() {
             textarea.removeEventListener('scroll', sync_scroll)
+            textarea.removeEventListener('blur', on_blur)
+            textarea.removeEventListener('focus', on_focus)
             for (var div of Object.values(layer_divs)) div.remove()
             layer_data = {}
             layer_divs = {}
@@ -238,7 +285,8 @@ function peer_bg_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)
-    return `rgba(${r}, ${g}, ${b}, 0.25)`
+    var dark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+    return `rgba(${r}, ${g}, ${b}, ${dark ? 0.4 : 0.25})`
 }
 
 // --- High-level wrapper ---

package/client/cursor-sync.js

@@ -141,13 +141,13 @@ async function cursor_client(url, { peer, get_text, on_change }) {
     braid_fetch(url, {
         subscribe: true,
         retry: { onRes: function() {
-            if (connected_before && online) {
-                // Reconnecting — go offline to clear stale cursors.
-                // The application will call online() again when text is ready.
+            if (connected_before) {
+                // Reconnecting — clear stale cursors; fresh snapshot incoming.
+                // Stay in current online state so the snapshot is processed
+                // immediately (the text subscription manages online/offline).
                 var changed = {}
                 for (var id of Object.keys(selections)) changed[id] = []
                 selections = {}
-                online = false
                 pending = null
                 if (on_change && Object.keys(changed).length) on_change(changed)
             }

package/client/editor.html

@@ -1,5 +1,5 @@
 <body style="margin: 0px; padding: 0px; box-sizing: border-box">
-  <textarea id="the_editor" style="width: 100%; height: 100%;"></textarea>
+  <textarea id="the_editor" style="width: 100%; height: 100%;" disabled></textarea>
 </body>
 <script src="https://braid.org/code/myers-diff1.js"></script>
 <script src="https://unpkg.com/braid-http@~1.3/braid-http-client.js"></script>
@@ -12,8 +12,9 @@
   var cursors = cursor_highlights(the_editor, location.pathname)
 
   var simpleton = simpleton_client(location.pathname, {
-    on_online: ({online}) => { online ? cursors.online() : cursors.offline() },
+    on_online: (online) => { online ? cursors.online() : cursors.offline() },
     on_patches: (patches) => {
+      the_editor.disabled = false
       apply_patches_and_update_selection(the_editor, patches)
       cursors.on_patches(patches)
     },

package/client/markdown-editor.html

@@ -18,6 +18,7 @@
     ">
     <textarea
       id="the_editor"
+      disabled
       style="
         width: 100%;
         height: 100%;
@@ -48,8 +49,9 @@ var render_delay = 100
 var cursors = cursor_highlights(the_editor, location.pathname)
 
 var simpleton = simpleton_client(location.pathname, {
-  on_online: ({online}) => { online ? cursors.online() : cursors.offline() },
+  on_online: (online) => { online ? cursors.online() : cursors.offline() },
   on_patches: (patches) => {
+    the_editor.disabled = false
     apply_patches_and_update_selection(the_editor, patches)
     cursors.on_patches(patches)
     update_markdown_later()

package/client/simpleton-sync.js

@@ -45,15 +45,6 @@
 // get_state: () => current_state
 //     returns the current state (e.g., textarea.value)
 //
-// [DEPRECATED] apply_remote_update: ({patches, state}) => {...}
-//     this is for incoming changes;
-//     one of these will be non-null,
-//     and can be applied to the current state.
-//
-// [DEPRECATED] generate_local_diff_update: (client_state) => {...}
-//     this is to generate outgoing changes,
-//     and if there are changes, returns { patches, new_state }
-//
 // content_type: used for Accept and Content-Type headers
 //
 // returns { changed, abort }
@@ -75,18 +66,12 @@
 //
 // PUT requests:
 //   retry: (res) => res.status !== 550 — retry all errors EXCEPT
-//   HTTP 550 (permanent rejection by the server). This means:
+//   HTTP 550 (Repr-Digest mismatch, meaning client is out of sync).
+//   This means:
 //     - Connection failure: retried with backoff
-//     - HTTP 408, 429, 500, 502, 503, 504, etc.: retried
-//     - HTTP 550: give up, throw error, outstanding_changes stays
-//       incremented (potential throttle leak — see note below)
-//     - HTTP 401, 403: retried by braid_fetch, but the !r.ok check
-//       throws, which calls on_error and exits the async loop
-//
-// NOTE: When a PUT permanently fails (550 or !r.ok), outstanding_changes
-// is incremented but never decremented. If this happens repeatedly, the
-// client will eventually hit max_outstanding_changes and stop sending.
-// This is arguably a bug in the JS implementation too.
+//     - HTTP 401, 403, 408, 429, 500, 502, 503, 504, etc.: retried
+//     - HTTP 550: out of sync — stop retrying, throw error. The
+//       client must be torn down and restarted from scratch.
 //
 // --- Local Edit Absorption ---
 //
@@ -107,8 +92,6 @@ function simpleton_client(url, {
     on_state,
     get_patches,
     get_state,
-    apply_remote_update, // DEPRECATED
-    generate_local_diff_update, // DEPRECATED
     content_type,
 
     on_error,
@@ -127,10 +110,6 @@ function simpleton_client(url, {
     var throttled_update = null
     var ac = new AbortController()
 
-    // temporary: our old code uses this deprecated api,
-    //        and our old code wants to send digests..
-    if (apply_remote_update) send_digests = true
-
     // ── Subscription (GET) ──────────────────────────────────────────────
     //
     // Opens a long-lived GET subscription with retry: () => true, meaning
@@ -148,7 +127,7 @@ function simpleton_client(url, {
             ...(content_type ? {Accept: content_type} : {}) },
         subscribe: true,
         retry: () => true,
-        onSubscriptionStatus: (status) => { if (on_online) on_online(status) },
+        onSubscriptionStatus: (status) => { if (on_online) on_online(status.online) },
         parents: () => client_version.length ? client_version : null,
         peer,
         signal: ac.signal
@@ -211,28 +190,23 @@ function simpleton_client(url, {
         }
 
         // ── Apply the update ────────────────────────────────
-        if (apply_remote_update) {
-            // DEPRECATED path
-            client_state = apply_remote_update(update)
+        // Convert initial snapshot body to a patch replacing
+        // [0,0] — so initial load follows the same code path
+        // as incremental patches.
+        var patches = update.patches ||
+            [{range: [0, 0], content: update.state}]
+        if (on_patches) {
+            // EXTERNAL MODE: Apply patches to the UI, then
+            // read back the full state. Note: this absorbs
+            // any un-flushed local edits into client_state.
+            on_patches(patches)
+            client_state = get_state()
         } else {
-            // Convert initial snapshot body to a patch replacing
-            // [0,0] — so initial load follows the same code path
-            // as incremental patches.
-            var patches = update.patches ||
-                [{range: [0, 0], content: update.state}]
-            if (on_patches) {
-                // EXTERNAL MODE: Apply patches to the UI, then
-                // read back the full state. Note: this absorbs
-                // any un-flushed local edits into client_state.
-                on_patches(patches)
-                client_state = get_state()
-            } else {
-                // INTERNAL MODE: Apply patches to our internal
-                // state only. Local edits in the UI are NOT
-                // absorbed — they will be captured by the next
-                // changed() diff.
-                client_state = apply_patches(client_state, patches)
-            }
+            // INTERNAL MODE: Apply patches to our internal
+            // state only. Local edits in the UI are NOT
+            // absorbed — they will be captured by the next
+            // changed() diff.
+            client_state = apply_patches(client_state, patches)
         }
 
         // ── Digest verification ─────────────────────────────
@@ -278,18 +252,11 @@ function simpleton_client(url, {
       // during a PUT round-trip are eventually sent.
       changed: () => {
         function get_change() {
-            if (generate_local_diff_update) {
-                // DEPRECATED
-                var update = generate_local_diff_update(client_state)
-                if (!update) return null
-                return update
-            } else {
-                var new_state = get_state()
-                if (new_state === client_state) return null
-                var patches = get_patches ? get_patches(client_state) :
-                    [simple_diff(client_state, new_state)]
-                return {patches, new_state}
-            }
+            var new_state = get_state()
+            if (new_state === client_state) return null
+            var patches = get_patches ? get_patches(client_state) :
+                [simple_diff(client_state, new_state)]
+            return {patches, new_state}
         }
 
         var change = get_change()
@@ -357,9 +324,9 @@ function simpleton_client(url, {
                 // Uses braid_fetch with retry: (res) => res.status !== 550
                 // This means:
                 //   - Network failures: retried with backoff
-                //   - HTTP 408, 429, 500, 502, 503, 504: retried
-                //   - HTTP 550 (permanent rejection): give up, throw
-                //   - Other non-ok: throws via !r.ok check below
+                //   - HTTP 401, 403, 408, 429, 500, 502, 503, 504: retried
+                //   - HTTP 550 (Repr-Digest mismatch / out of sync):
+                //     give up, throw — client must be re-created
                 outstanding_changes++
                 try {
                     var r = await braid_fetch(url, {
@@ -373,13 +340,11 @@ function simpleton_client(url, {
                         version, parents, patches,
                         peer
                     })
-                    if (!r.ok) throw new Error(`bad http status: ${r.status}${(r.status === 401 || r.status === 403) ? ` (access denied)` : ''}`)
+                    if (!r.ok) throw new Error(`bad http status: ${r.status}`)
                 } catch (e) {
-                    // On error, notify and exit the loop.
-                    // NOTE: outstanding_changes is NOT decremented here.
-                    // This is arguably a bug — repeated failures will
-                    // eventually hit max_outstanding_changes and stop
-                    // the client from sending any more edits.
+                    // A 550 means Repr-Digest check failed — we're out
+                    // of sync. The client must be torn down and
+                    // re-created from scratch.
                     on_error(e)
                     throw e
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-text",
-  "version": "0.3.8",
+  "version": "0.3.10",
   "description": "Library for collaborative text over http using braid.",
   "author": "Braid Working Group",
   "repository": "braid-org/braid-text",