Be more lax about parsing links

README.md

@@ -69,6 +69,8 @@ If you like Coracle and want to support its development, you can donate sats via
 - [x] Fixed likes not showing up in alerts
 - [x] Raised threshold for pool to 2 so we don't have such a small amount of results
 - [x] Wait for profile info on login, navigate to network by default
+- [x] Fix mention selection, inheritance, and inclusion in notes
+- [x] Parse links without http at the beginning
 
 ## 0.2.9
 

package.json

@@ -10,7 +10,7 @@
     "qa:lint": "eslint src/*/** --quiet",
     "qa:check": "svelte-check --tsconfig ./tsconfig.json --threshold error",
     "qa:all": "run-p qa:lint qa:check",
-    "watch": "find src -type f | entr -r npm run qa:all"
+    "watch": "find src -type f | entr -r"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^1.1.0",
@@ -33,7 +33,6 @@
     "classnames": "^2.3.2",
     "compressorjs": "^1.1.1",
     "dexie": "^3.2.2",
-    "extract-urls": "^1.3.2",
     "fuse.js": "^6.6.2",
     "hurdak": "github:ConsignCloud/hurdak",
     "husky": "^8.0.3",

src/app/cmd.js

@@ -1,8 +1,8 @@
 import {prop, pick, join, uniqBy, last} from 'ramda'
 import {get} from 'svelte/store'
 import {first} from "hurdak/lib/hurdak"
-import {Tags, isRelay, roomAttrs} from 'src/util/nostr'
+import {Tags, isRelay, roomAttrs, displayPerson} from 'src/util/nostr'
-import {keys, publish, getRelays} from 'src/agent'
+import {keys, publish, getRelays, getPerson} from 'src/agent'
 
 const updateUser = (relays, updates) =>
   publishEvent(relays, 0, {content: JSON.stringify(updates)})
@@ -30,7 +30,13 @@ const createDirectMessage = (relays, pubkey, content) =>
   publishEvent(relays, 4, {content, tags: [["p", pubkey]]})
 
 const createNote = (relays, content, mentions = [], topics = []) => {
-  mentions = mentions.map(p => ["p", p, prop('url', first(getRelays(p)))])
+  mentions = mentions.map(p => {
+    const {url} = first(getRelays(p))
+    const name = displayPerson(getPerson(p, true))
+
+    return ["p", p, url, name]
+  })
+
   topics = topics.map(t => ["t", t])
 
   publishEvent(relays, 1, {content, tags: mentions.concat(topics)})

src/partials/Compose.svelte

@@ -2,6 +2,7 @@
   import {prop, reject, sortBy, last} from 'ramda'
   import {fly} from 'svelte/transition'
   import {fuzzy} from "src/util/misc"
+  import {displayPerson} from "src/util/nostr"
   import {fromParentOffset} from "src/util/html"
   import Badge from "src/partials/Badge.svelte"
   import {people} from "src/agent/data"
@@ -62,13 +63,14 @@
     selection.collapse(space, 2)
   }
 
-  const pickSuggestion = ({name, pubkey}) => {
+  const pickSuggestion = person => {
-    highlightWord('@', getWord().length, name)
+    const display = displayPerson(person)
+
+    highlightWord('@', getWord().length, display)
 
     mentions.push({
-      name,
+      pubkey: person.pubkey,
-      pubkey,
+      length: display.length + 1,
-      length: name.length + 1,
       end: getText().length - 2,
     })
 
@@ -181,9 +183,10 @@
 <div class="rounded border border-solid border-medium mt-2 flex flex-col" in:fly={{y: 20}}>
   {#each suggestions as person, i (person.pubkey)}
   <button
-    class="py-2 px-4 cursor-pointer"
+    class="py-2 px-4 cursor-pointer border-l-2 border-solid border-black"
     class:bg-black={index !== i}
     class:bg-dark={index === i}
+    class:border-accent={index === i}
     on:click={() => pickSuggestion(person)}>
     <Badge inert {person} />
   </button>

src/partials/Note.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import cx from 'classnames'
-  import extractUrls from 'extract-urls'
   import {nip19} from 'nostr-tools'
   import {whereEq, without, uniq, pluck, reject, propEq, find} from 'ramda'
   import {slide} from 'svelte/transition'
   import {navigate} from 'svelte-routing'
   import {quantify} from 'hurdak/lib/hurdak'
   import {Tags, findReply, findReplyId, displayPerson, isLike} from "src/util/nostr"
+  import {extractUrls} from "src/util/html"
   import Preview from 'src/partials/Preview.svelte'
   import Anchor from 'src/partials/Anchor.svelte'
   import {settings, modal, renderNote} from "src/app"
@@ -192,7 +192,7 @@
         slot="addon"
         on:click={sendReply}
         class="flex flex-col py-8 p-4 justify-center gap-2 border-l border-solid border-dark
-               hover:bg-accent transition-all cursor-pointer text-white ">
+               hover:bg-accent transition-all cursor-pointer text-white">
         <i class="fa fa-paper-plane fa-xl" />
       </button>
     </Compose>

src/util/html.ts

@@ -1,5 +1,4 @@
-import extractUrls from 'extract-urls'
+import {ellipsize} from 'hurdak/lib/hurdak'
-import {first} from 'hurdak/lib/hurdak'
 
 export const copyToClipboard = text => {
   const {activeElement} = document
@@ -74,6 +73,9 @@ export const fromParentOffset = (element, offset): [HTMLElement, number] => {
   throw new Error("Unable to find parent offset")
 }
 
+export const extractUrls = url =>
+  url.match(/(https?:\/\/)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?!&//=]*)/gi)
+
 export const renderContent = content => {
   // Escape html
   content = escapeHtml(content)
@@ -87,7 +89,7 @@ export const renderContent = content => {
     $a.className = "underline"
 
     /* eslint no-useless-escape: 0 */
-    $a.innerText = first(url.replace(/https?:\/\/(www\.)?/, '').split(/[\/\?#]/))
+    $a.innerText = ellipsize(url.replace(/https?:\/\/(www\.)?/, ''), 50)
 
     // If the url is on its own line, remove it entirely. Otherwise, replace it with the link
     content = content.replace(url, $a.outerHTML)

vite.config.js

@@ -20,11 +20,9 @@ export default defineConfig({
     svelte({
       preprocess: sveltePreprocess(),
       onwarn: (warning, handler) => {
-        const isA11y = warning.code.startsWith('a11y-')
 
-        if (["a11y-autofocus"].includes(warning.code)) return
+        if (warning.code.startsWith('a11y-')) return
         if (warning.filename.includes("node_modules")) return
-        if (warning.filename.includes("Card.svelte") && isA11y) return
 
         handler(warning)
       },