Fix mentions on safari

ROADMAP.md

@@ -1,9 +1,5 @@
 # Current
 
-- [ ] Fix @ mention on safari
-- [ ] Get rid of Button
-- [ ] Make notifications beautiful and usable
-- [ ] Render threads in a way that makes them easy to use
 - [ ] White-labeled
   - [ ] Add invite code registration for relay
     - [ ] Add endpoint to nostream that updates whitelist

src/app/App.svelte

@@ -3,6 +3,7 @@
   import "@fortawesome/fontawesome-free/css/solid.css"
 
   import {onMount} from "svelte"
+  import {nip19} from "nostr-tools"
   import {Router, links} from "svelte-routing"
   import {globalHistory} from "svelte-routing/src/history"
   import {identity, isNil, last} from "ramda"
@@ -28,7 +29,7 @@
   import Modal from "src/app/Modal.svelte"
   import ForegroundButtons from "src/app/ForegroundButtons.svelte"
 
-  Object.assign(window, {cmd, user, keys, network, pool, sync, db, bech32ToHex, hexToBech32})
+  Object.assign(window, {nip19, cmd, user, keys, network, pool, sync, db, bech32ToHex, hexToBech32})
 
   export let pathname = location.pathname
   export let hash = location.hash

src/partials/Compose.svelte

@@ -30,7 +30,7 @@
 
   const applySearch = word => {
     let results = []
-    if (word.startsWith("@")) {
+    if (word.length > 1 && word.startsWith("@")) {
       const [followed, notFollowed] = partition(
         p => $petnamePubkeys.includes(p.pubkey),
         $searchPeople(word.slice(1))
@@ -62,8 +62,11 @@
       // Space includes a zero-width space to avoid having the cursor end up inside
       // mention span on backspace, and a space for convenience in composition.
       const space = document.createTextNode("\u200B\u00A0")
+      const spaceSpan = document.createElement("span")
       const span = document.createElement("span")
 
+      spaceSpan.append(space)
+
       span.classList.add("underline")
       span.dataset.coracle = JSON.stringify({prefix, value})
       span.innerText = text
@@ -74,9 +77,9 @@
 
       // Add the span and space
       selection.getRangeAt(0).insertNode(span)
-      selection.collapse(span.parentNode, word.length + prefix.length)
-      selection.getRangeAt(0).insertNode(space)
-      selection.collapse(space, 2)
+      selection.collapse(span.nextSibling, 0)
+      span.insertAdjacentElement("afterend", spaceSpan)
+      selection.collapse(spaceSpan.nextSibling, 0)
 
       completed = true
     }