Linkify notes and messages

README.md

@@ -1,7 +1,6 @@
 Bugs
 
 - [ ] Fix scrolling on note detail
-- [ ] Ellipsize and hyperlink links
 - [ ] Be sure to deduplicate all events if needed
 - [ ] Format text with line breaks - pre, or split/br
 - [ ] Remove dexie, or use it instead of localstorage for cached data

src/partials/Note.svelte

@@ -4,7 +4,7 @@
   import {fly} from 'svelte/transition'
   import {navigate} from 'svelte-routing'
   import {ellipsize} from 'hurdak/src/core'
-  import {hasParent} from 'src/util/html'
+  import {hasParent, toHtml} from 'src/util/html'
   import Anchor from 'src/partials/Anchor.svelte'
   import {dispatch} from "src/state/dispatch"
   import {accounts, modal} from "src/state/app"
@@ -14,6 +14,7 @@
 
   export let note
   export let isReply = false
+  export let showEntire = false
   export let interactive = false
   export let invertColors = false
 
@@ -105,7 +106,13 @@
         Reply to <Anchor on:click={showParent}>{parentId.slice(0, 8)}</Anchor>
       </small>
     {/if}
-    <p>{ellipsize(note.content, 240)}</p>
+    <p>
+      {#if note.content.length > 240 && !showEntire}
+        {ellipsize(note.content, 240)}
+      {:else}
+        {@html toHtml(note.content)}
+      {/if}
+    </p>
     <div class="flex gap-6 text-light">
       <div>
         <i

src/partials/NoteDetail.svelte

@@ -25,7 +25,7 @@
 </script>
 
 {#if note.pubkey}
-<Note note={note} />
+<Note showEntire note={note} />
 {#each note.replies as r (r.id)}
   <div class="ml-4 border-l border-solid border-medium">
     <Note interactive invertColors isReply note={r} />

src/routes/ChatRoom.svelte

@@ -5,6 +5,7 @@
   import {prop, last} from 'ramda'
   import {switcherFn} from 'hurdak/src/core'
   import {formatTimestamp} from 'src/util/misc'
+  import {toHtml} from 'src/util/html'
   import UserBadge from 'src/partials/UserBadge.svelte'
   import {channels} from 'src/state/nostr'
   import {rooms, accounts, ensureAccounts} from 'src/state/app'
@@ -117,7 +118,7 @@
                 <p class="text-sm text-light">{formatTimestamp(m.created_at)}</p>
               </div>
               {/if}
-              <div class="ml-6">{m.content}</div>
+              <div class="ml-6">{@html toHtml(m.content)}</div>
             </li>
           {/each}
         </ul>

src/util/html.js

@@ -60,3 +60,19 @@ export const hasParent = (tagOrClass, $el) => {
 
   return false
 }
+
+export const escapeHtml = html => {
+  const div = document.createElement("div")
+
+  div.innerText = html
+
+  return div.innerHTML
+}
+
+export const toHtml = content => {
+  return escapeHtml(content)
+    .replace(/\n/g, '<br />')
+    .replace(/https?:\/\/([\w\.-]+)[^ ]*/g, (url, domain) => {
+      return `<a href="${url}" target="_blank noopener" class="underline">${domain}</a>`
+    })
+}