braid-blob 0.0.78 → 0.0.80

package/README.md

@@ -347,21 +347,26 @@ Parameters:
 
 ## Live Image Polyfill
 
-A polyfill that automatically syncs any `<img>` element with a `live` attribute. Images update in real-time whenever the blob changes on the server.
+A polyfill for real-time collaborative images. Add `live` to any `<img>` element to keep it synced across all clients, and add `droppable` to let users drag-and-drop or paste new images directly onto it.
 
 ```html
 <script src="https://unpkg.com/braid-http@~1.3/braid-http-client.js"></script>
 <script src="https://unpkg.com/braid-blob/client.js"></script>
 <script src="https://unpkg.com/braid-blob/img-live.js"></script>
 
+<!-- Read-only: stays in sync with the server -->
 <img live src="/blob.png">
+
+<!-- Read-write: users can drag-and-drop or paste to update -->
+<img live droppable src="/blob.png">
 ```
 
-That's it! The image will automatically stay synchronized with the server. When any client updates `/blob.png`, all `<img live src="/blob.png">` elements will update in real-time.
+That's it! When any client updates `/blob.png`, all `<img live src="/blob.png">` elements across all clients will update in real-time. With `droppable`, users can drag and drop an image file onto the element, or click it and paste from the clipboard — the new image is uploaded to the server and synced to everyone.
 
-The polyfill:
+Under the hood, the polyfill:
 - Observes the DOM for `<img live>` elements (added, removed, or attribute changes)
-- Creates a `braid_blob_client` subscription for each live image
+- Creates a `braid_blob_client` subscription for each unique image URL, shared across elements
+- Appends a cache-busting query parameter (e.g. `?img-live=k7x2f9m`) to ensure the browser doesn't serve stale versions
 - Cleans up subscriptions when images are removed from the DOM
 
 ## Improving this Package

package/img-live.js

@@ -3,57 +3,74 @@
 
 ;(function() {
 
-var live_images = new Map() // img -> ac
+var subscriptions = new Map() // base_url -> sub
 
 function sync(img) {
-    var url = img.src
-    if (!url) return
-
-    // Find an unused query parameter name for cache-busting
-    var param = 'img-live'
-    var u = new URL(url)
-    while (u.searchParams.has(param)) param = '-' + param
-    function cache_bust() {
-        u.searchParams.set(param, Math.random().toString(36).slice(2))
-        return u.toString()
-    }
+    if (!img._img_live_base_url) img._img_live_base_url = img.src
+    var base_url = img._img_live_base_url
+
+    var sub = subscriptions.get(base_url)
+    if (sub) {
+        // Cancel any pending teardown
+        clearTimeout(sub.teardown_timer)
+        sub.teardown_timer = null
+    } else {
+        // Create cache-bust helper for this base URL
+        var param = 'img-live'
+        var u = new URL(base_url)
+        while (u.searchParams.has(param)) param = '-' + param
+        function cache_bust() {
+            u.searchParams.set(param, Math.random().toString(36).slice(2))
+            return u.toString()
+        }
 
-    // Unsync first to handle attribute changes (e.g. droppable added/removed)
-    unsync(img)
-
-    var ac = new AbortController()
-    var client_p = (async () => {
-        var res = await braid_fetch(cache_bust(), {
-            method: 'HEAD',
-            headers: { "Merge-Type": "aww" },
-            subscribe: true,
-            retry: () => true,
-            signal: ac.signal
-        })
-        return braid_blob_client(cache_bust(), {
-            signal: ac.signal,
-            parents: res.version,
-            on_update: (body, content_type, version, from_local_update) => {
-                if (from_local_update) {
-                    var blob = new Blob([body], { type: content_type || 'image/png' })
-                    img.src = URL.createObjectURL(blob)
-                } else {
-                    img.src = ''
-                    img.src = cache_bust()
-                }
-            },
-            on_delete: () => {
-                img.src = ''
-                img.src = cache_bust()
-            },
-            on_error: (error) => {
-                console.error('Live image error for', url, error)
-            }
+        subscriptions.set(base_url, sub = {
+            imgs: new Set(),
+            ac: new AbortController(),
+            current_src: null,
+            teardown_timer: null
         })
-    })()
-    live_images.set(img, ac)
+
+        function set_src(src) {
+            sub.current_src = src
+            sub.imgs.forEach(img => img.src = sub.current_src)
+        }
+
+        var client_p = (async () => {
+            var res = await braid_fetch(cache_bust(), {
+                method: 'HEAD',
+                headers: { "Merge-Type": "aww" },
+                subscribe: true,
+                retry: () => true,
+                signal: sub.ac.signal
+            })
+            return braid_blob_client(cache_bust(), {
+                signal: sub.ac.signal,
+                parents: res.version,
+                on_update: (body, content_type, version, from_local_update) =>
+                    set_src(!from_local_update ? cache_bust() :
+                        URL.createObjectURL(new Blob(
+                            [body], { type: content_type || 'image/png' }))),
+                on_delete: () => set_src(cache_bust()),
+                on_error: (error) =>
+                    console.error('Live image error for', base_url, error)
+            })
+        })()
+
+        sub.update = async (body, content_type) => {
+            await (await client_p).update(body, content_type)
+            set_src(cache_bust())
+        }
+    }
+
+    sub.imgs.add(img)
+
+    // Immediately set to the most recent known src
+    if (sub.current_src) img.src = sub.current_src
 
     if (img.hasAttribute('droppable')) {
+        if (!img.hasAttribute('tabindex')) img.setAttribute('tabindex', '0')
+
         img.addEventListener('dragenter', function() {
             img.style.outline = '3px dashed #007bff'
             img.style.outlineOffset = '3px'
@@ -78,20 +95,52 @@ function sync(img) {
             if (!file || !file.type.startsWith('image/')) return
 
             var reader = new FileReader()
-            reader.onload = async function() {
-                await (await client_p).update(reader.result, file.type)
-                img.src = cache_bust()
-            }
+            reader.onload = () => sub.update(reader.result, file.type)
             reader.readAsArrayBuffer(file)
         })
+
+        img.addEventListener('click', function() {
+            img.focus()
+        })
+
+        img.addEventListener('focus', function() {
+            img.style.outline = '3px dashed #007bff'
+            img.style.outlineOffset = '3px'
+
+            document.addEventListener('paste', on_paste)
+        })
+
+        img.addEventListener('blur', function() {
+            img.style.outline = ''
+            img.style.outlineOffset = ''
+
+            document.removeEventListener('paste', on_paste)
+        })
+
+        function on_paste(e) {
+            var items = e.clipboardData.items
+            for (var i = 0; i < items.length; i++) {
+                if (items[i].type.startsWith('image/')) {
+                    e.preventDefault()
+                    var file = items[i].getAsFile()
+                    var reader = new FileReader()
+                    reader.onload = () => sub.update(reader.result, file.type)
+                    reader.readAsArrayBuffer(file)
+                    break
+                }
+            }
+        }
     }
 }
 
 function unsync(img) {
-    var ac = live_images.get(img)
-    if (ac) {
-        ac.abort()
-        live_images.delete(img)
+    var base_url = img._img_live_base_url
+    var sub = subscriptions.get(base_url)
+    if (sub?.imgs.delete(img) && !sub.imgs.size) {
+        sub.teardown_timer = setTimeout(() => {
+            sub.ac.abort()
+            subscriptions.delete(base_url)
+        }, 5000)
     }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-blob",
-  "version": "0.0.78",
+  "version": "0.0.80",
   "description": "Library for collaborative blobs over http using braid.",
   "author": "Braid Working Group",
   "repository": "braid-org/braid-blob",