npm - braid-text - Versions diffs - 0.4.0 → 0.5.3 - Mend

braid-text 0.4.0 → 0.5.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/client/cursor-sync.js +24 -3
package/client/editor.html +1 -1
package/client/markdown-editor.html +1 -1
package/client/simpleton-sync.js +22 -0
package/client/textarea-highlights.js +21 -26
package/package.json +9 -2
package/server-demo.js +1 -1
package/server.js +823 -120

package/client/cursor-sync.js CHANGED Viewed

@@ -343,7 +343,8 @@ function cursor_highlights(textarea, url, options) {
                 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)
+                    color: peer_color(id),
+                    bg_color: peer_bg_color(id)
                 })))
             }
             hl.render()
@@ -354,16 +355,36 @@ function cursor_highlights(textarea, url, options) {
         if (destroyed) client.destroy()
     })
+    // Track the anchor (non-moving end) of selections. We record the cursor
+    // position whenever the selection is collapsed; when it later expands,
+    // the anchor tells us which end the caret is on. This works for both
+    // mouse drags and keyboard selections, and avoids relying on
+    // selectionDirection which returns "none" for mouse drags on macOS.
+    var anchor = null
+    function get_selection_range() {
+        var start = textarea.selectionStart
+        var end = textarea.selectionEnd
+        if (textarea.selectionDirection === 'backward')
+            return [end, start]
+        if (anchor === start || anchor === end)
+            return [anchor, (anchor === start) ? end : start]
+        return [start, end]
+    }
     function on_selectionchange() {
         if (applying_remote) return
         if (document.activeElement !== textarea) return
-        if (client) client.set(textarea.selectionStart, textarea.selectionEnd)
+        var start = textarea.selectionStart
+        var end = textarea.selectionEnd
+        if (start === end) anchor = start
+        if (client) client.set(...get_selection_range())
     }
     document.addEventListener('selectionchange', on_selectionchange)
     // Show own cursor when blurred, hide when focused
     function on_blur() {
-        if (client) client.set(textarea.selectionStart, textarea.selectionEnd)
+        if (client) client.set(...get_selection_range())
     }
     function on_focus() {
         hl.remove(peer)

package/client/editor.html CHANGED Viewed

@@ -5,7 +5,7 @@
 <script src="https://unpkg.com/braid-http@~1.3/braid-http-client.js"></script>
 <script src="/web-utils.js"></script>
 <script src="/simpleton-sync.js"></script>
-<script src="/cursor-highlights.js"></script>
+<script src="/textarea-highlights.js"></script>
 <script src="/cursor-sync.js"></script>
 <script>

package/client/markdown-editor.html CHANGED Viewed

@@ -4,7 +4,7 @@
 <script src="https://unpkg.com/braid-http@~1.3/braid-http-client.js"></script>
 <script src="/web-utils.js"></script>
 <script src="/simpleton-sync.js"></script>
-<script src="/cursor-highlights.js"></script>
+<script src="/textarea-highlights.js"></script>
 <script src="/cursor-sync.js"></script>
 <body>
   <div id="markdown_container" style="max-width: 750px; padding: 10px 60px"></div>

package/client/simpleton-sync.js CHANGED Viewed

@@ -447,14 +447,36 @@ function simpleton_client(url, {
         var min_len = Math.min(old_str.length, new_str.length)
         while (prefix_len < min_len && old_str[prefix_len] === new_str[prefix_len]) prefix_len++
+        // Don't split a surrogate pair: if prefix ends on a low surrogate,
+        // the preceding high surrogate only matched by coincidence (same
+        // Unicode block), so back up to include the whole pair in the diff.
+        if (prefix_len > 0 && is_low_surrogate(old_str, prefix_len))
+            prefix_len--
         // Find common suffix length (from what remains after prefix)
         var suffix_len = 0
         min_len -= prefix_len
         while (suffix_len < min_len && old_str[old_str.length - suffix_len - 1] === new_str[new_str.length - suffix_len - 1]) suffix_len++
+        // Same guard for suffixes: if the range end (old_str.length - suffix_len)
+        // lands on a low surrogate, the suffix consumed it without its high
+        // surrogate, so back up.
+        if (suffix_len > 0 && is_low_surrogate(old_str, old_str.length - suffix_len))
+            suffix_len--
         return {range: [prefix_len, old_str.length - suffix_len], content: new_str.slice(prefix_len, new_str.length - suffix_len)}
     }
+    function is_low_surrogate(str, i) {
+        var c = str.charCodeAt(i)
+        return c >= 0xdc00 && c <= 0xdfff
+    }
+    function is_high_surrogate(str, i) {
+        var c = str.charCodeAt(i)
+        return c >= 0xd800 && c <= 0xdbff
+    }
     // ── apply_patches ───────────────────────────────────────────────────
     // Applies patches to a string, tracking cumulative offset.
     // Used when on_patches is not provided, to update

package/client/textarea-highlights.js CHANGED Viewed

@@ -8,7 +8,7 @@
 //
 // Usage:
 //   var hl = textarea_highlights(textarea)
-//   hl.set('peer-1', [{ from: 5, to: 10, color: 'rgba(97,175,239,0.25)' }])
+//   hl.set('peer-1', [{ from: 5, to: 10, color: '#61afef', bg_color: 'rgba(97,175,239,0.25)' }])
 //   hl.render()
 //   hl.remove('peer-1')
 //   hl.destroy()
@@ -134,38 +134,33 @@ function textarea_highlights(textarea) {
     }
     function build_html(text, highlights) {
-        var cursors = highlights.filter(h => h.from === h.to)
-        var sels = highlights.filter(h => h.from !== h.to)
+        var items = highlights.map(h => ({
+            ...h,
+            start: Math.min(h.from, h.to),
+            end: Math.max(h.from, h.to)
+        }))
-        var items = []
-        for (var s of sels)
-            items.push({ type: 'selection', start: s.from, end: s.to, color: s.color })
-        for (var c of cursors)
-            items.push({ type: 'cursor', pos: c.from, color: c.color })
-        items.sort((a, b) => {
-            var pa = a.type === 'cursor' ? a.pos : a.start
-            var pb = b.type === 'cursor' ? b.pos : b.start
-            return pa - pb
-        })
+        items.sort((a, b) => a.start - b.start)
         var result = ''
         var last = 0
         for (var item of items) {
-            if (item.type === 'selection') {
-                if (item.start < last) continue
-                result += escape_html(text.substring(last, item.start))
-                var sel_text = text.substring(item.start, item.end)
-                var sel_html = escape_html(sel_text).replace(/\n/g, ' \n')
-                result += '<span class="sel" style="background-color:' + item.color + ';">' + sel_html + '</span>'
-                last = item.end
+            if (item.start < last) continue
+            result += escape_html(text.substring(last, item.start))
+            var cursor_html = '<span class="cursor" style="--cursor-color:' + item.color + ';"></span>'
+            if (item.start === item.end) {
+                result += cursor_html
             } else {
-                if (item.pos < last) continue
-                result += escape_html(text.substring(last, item.pos))
-                result += '<span class="cursor" style="--cursor-color:' + item.color + ';"></span>'
-                last = item.pos
+                var sel_html = escape_html(text.substring(item.start, item.end)).replace(/\n/g, ' \n')
+                var before = item.to === item.start ? cursor_html : ''
+                var after  = item.to === item.start ? '' : cursor_html
+                result += '<span class="sel" style="background-color:' + item.bg_color + ';">' + before + sel_html + '</span>' + after
             }
+            last = item.end
         }
         result += escape_html(text.substring(last))
@@ -191,9 +186,9 @@ function textarea_highlights(textarea) {
         // Render each layer
         for (var id of Object.keys(layer_data)) {
             var highlights = layer_data[id].map(h => ({
+                ...h,
                 from: Math.min(h.from, len),
                 to: Math.min(h.to, len),
-                color: h.color
             }))
             if (!layer_divs[id]) {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "braid-text",
-  "version": "0.4.0",
+  "version": "0.5.3",
   "description": "Library for collaborative text over http using braid.",
   "author": "Braid Working Group",
   "repository": "braid-org/braid-text",
@@ -16,7 +16,6 @@
     "simpleton-client.js",
     "client/simpleton-sync.js",
     "client/cursor-sync.js",
-    "client/cursor-highlights.js",
     "client/textarea-highlights.js",
     "client/web-utils.js",
     "README.md",
@@ -27,5 +26,13 @@
   "dependencies": {
     "@braid.org/diamond-types-node": "^2.0.1",
     "braid-http": "^1.3.106"
+  },
+  "peerDependencies": {
+    "yjs": "^13.6.0"
+  },
+  "peerDependenciesMeta": {
+    "yjs": {
+      "optional": true
+    }
   }
 }

package/server-demo.js CHANGED Viewed

@@ -21,7 +21,7 @@ var server = require("http").createServer(async (req, res) => {
     }
     if (req.url === '/simpleton-sync.js' || req.url === '/web-utils.js'
-        || req.url === '/cursor-highlights.js' || req.url === '/cursor-sync.js') {
+        || req.url === '/textarea-highlights.js' || req.url === '/cursor-sync.js') {
         res.writeHead(200, { "Content-Type": "text/javascript", "Cache-Control": "no-cache" })
         require("fs").createReadStream("./client" + req.url).pipe(res)
         return