From 48dab22d9c6b785f5d180157d8966adc4a80755f Mon Sep 17 00:00:00 2001
From: Jonathan Staab <shtaab@gmail.com>
Date: Wed, 28 Jun 2023 13:01:10 -0700
Subject: [PATCH] Fix mentions on safari

---
 ROADMAP.md                  |  4 ----
 src/app/App.svelte          |  3 ++-
 src/partials/Compose.svelte | 11 +++++++----
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/ROADMAP.md b/ROADMAP.md
index 597341f6..6bdcdf64 100644
--- a/ROADMAP.md
+++ b/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
diff --git a/src/app/App.svelte b/src/app/App.svelte
index 7311cea9..4f1ba014 100644
--- a/src/app/App.svelte
+++ b/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
diff --git a/src/partials/Compose.svelte b/src/partials/Compose.svelte
index ced25266..86132b9c 100644
--- a/src/partials/Compose.svelte
+++ b/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
     }