Show active links in compose

src/app/components/GroupCompose.svelte

@@ -5,19 +5,23 @@
   import StarterKit from '@tiptap/starter-kit'
   import {NostrExtension} from 'nostr-editor'
   import type {StampedEvent} from '@welshman/util'
-  import {LinkExtension} from '@lib/tiptap'
+  import {LinkExtension, Mention, Topic} from '@lib/tiptap'
   import GroupComposeMention from '@app/components/GroupComposeMention.svelte'
   import GroupComposeEvent from '@app/components/GroupComposeEvent.svelte'
   import GroupComposeImage from '@app/components/GroupComposeImage.svelte'
   import GroupComposeBolt11 from '@app/components/GroupComposeBolt11.svelte'
   import GroupComposeVideo from '@app/components/GroupComposeVideo.svelte'
   import GroupComposeLink from '@app/components/GroupComposeLink.svelte'
+  import GroupComposeSuggestions from '@app/components/GroupComposeSuggestions.svelte'
+  import GroupComposeTopicSuggestion from '@app/components/GroupComposeTopicSuggestion.svelte'
+  import GroupComposeProfileSuggestion from '@app/components/GroupComposeProfileSuggestion.svelte'
   import {signer} from '@app/base'
+  import {searchProfiles, searchTopics, displayProfileByPubkey} from '@app/state'
 
   let editor: Readable<Editor>
 
   const asInline = (extend: Record<string, any>) =>
-    ({inline: true, group: 'inline', draggable: false, ...extend})
+    ({inline: true, group: 'inline', ...extend})
 
   onMount(() => {
     editor = createEditor({
@@ -56,12 +60,57 @@
             onDrop() {
               //  setPending(true)
             },
-            onComplete(currentEditor: Editor) {
+            onComplete(currentEditor: any) {
               console.log('Upload Completed', currentEditor.getText())
               //  setPending(false)
             },
           },
         }),
+        Mention.configure(
+          (() => {
+            let suggestions: GroupComposeSuggestions
+
+            const mapProps = (props: any) => ({
+              term: props.query,
+              select: (id: string) => props.command({id}),
+              search: searchProfiles,
+              component: GroupComposeProfileSuggestion,
+            })
+
+            return {
+              getLabel: displayProfileByPubkey,
+              tippyOptions: {arrow: false, theme: "transparent"},
+              onStart: ({target, props}) => {
+                suggestions = new GroupComposeSuggestions({target, props: mapProps(props)})
+              },
+              onUpdate: ({props}) => suggestions.$set(mapProps(props)),
+              onKeyDown: ({event}) => suggestions.onKeyDown(event),
+              onExit: () => suggestions.$destroy(),
+            }
+          })(),
+        ),
+        Topic.configure(
+          (() => {
+            let suggestions: GroupComposeSuggestions
+
+            const mapProps = (props: any) => ({
+              term: props.query,
+              select: (id: string) => props.command({id}),
+              search: searchTopics,
+              component: GroupComposeTopicSuggestion,
+            })
+
+            return {
+              tippyOptions: {arrow: false, theme: "transparent"},
+              onStart: ({target, props}) => {
+                suggestions = new GroupComposeSuggestions({target, props: mapProps(props)})
+              },
+              onUpdate: ({props}) => suggestions.$set(mapProps(props)),
+              onKeyDown: ({event}) => suggestions.onKeyDown(event),
+              onExit: () => suggestions.$destroy(),
+            }
+          })(),
+        ),
       ],
       content: '',
       onUpdate: () => {

src/app/components/GroupComposeLink.svelte

@@ -2,17 +2,18 @@
   import cx from 'classnames'
   import type {NodeViewProps} from '@tiptap/core'
   import {NodeViewWrapper} from 'svelte-tiptap'
-  import {stripProtocol} from '@welshman/lib'
+  import {displayUrl} from '@welshman/lib'
   import Icon from '@lib/components/Icon.svelte'
   import Link from '@lib/components/Link.svelte'
 
   export let node: NodeViewProps['node']
+  export let selected: NodeViewProps['selected']
 </script>
 
 <NodeViewWrapper class="inline">
-  <Link external href={node.attrs.url} class="link-content">
+  <Link external href={node.attrs.url} class={cx("link-content", {'link-content-selected': selected})}>
     <Icon icon="link-round" size={3} class="inline-block translate-y-px" />
-    {stripProtocol(node.attrs.url)}
+    {displayUrl(node.attrs.url)}
   </Link>
 </NodeViewWrapper>
 

src/app/components/GroupComposeProfileSuggestion.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  export let value
+</script>
+
+<div>
+  @{value}
+</div>

src/app/components/GroupComposeSuggestions.svelte

@@ -0,0 +1,80 @@
+<svelte:options accessors />
+
+<script lang="ts">
+  import {throttle} from "throttle-debounce"
+  import {slide} from "svelte/transition"
+  import {clamp} from "@welshman/lib"
+
+  export let term
+  export let search
+  export let select
+  export let component
+  export let loading = false
+
+  let index = 0
+  let element: Element
+  let items: string[] = []
+
+  $: populateItems(term)
+
+  const populateItems = throttle(300, term => {
+    items = $search.searchValues(term).slice(0, 30)
+  })
+
+  const setIndex = (newIndex: number, block: ScrollLogicalPosition) => {
+    index = clamp([0, items.length - 1], newIndex)
+    element.querySelector(`button:nth-child(${index})`)?.scrollIntoView({block})
+  }
+
+  export const onKeyDown = (e: any) => {
+    if (e.code === "Enter") {
+      const value = items[index]
+
+      if (value) {
+        select(value)
+      }
+
+      return true
+    }
+
+    if (e.code === "ArrowUp") {
+      setIndex(index - 1, "start")
+
+      return true
+    }
+
+    if (e.code === "ArrowDown") {
+      setIndex(index + 1, "start")
+
+      return true
+    }
+  }
+</script>
+
+{#if items.length > 0}
+  <div
+    bind:this={element}
+    transition:slide|local={{duration: 100}}
+    class="mt-2 flex max-h-[350px] flex-col overflow-y-auto overflow-x-hidden border border-solid border-neutral-600">
+    {#each items as value, i (value)}
+      <button
+        class="cursor-pointer border-l-2 border-solid px-4 py-2 text-left text-neutral-100 hover:border-accent hover:bg-tinted-700"
+        class:bg-neutral-800={index !== i}
+        class:bg-tinted-700={index === i}
+        class:border-transparent={index !== i}
+        class:border-accent={index === i}
+        on:mousedown|preventDefault
+        on:click|preventDefault={() => select(value)}>
+        <svelte:component this={component} {value} />
+      </button>
+    {/each}
+  </div>
+  {#if loading}
+    <div transition:slide|local class="flex gap-2 bg-tinted-700 px-4 py-2 text-neutral-200">
+      <div>
+        <i class="fa fa-circle-notch fa-spin" />
+      </div>
+      Loading more options...
+    </div>
+  {/if}
+{/if}

src/app/components/GroupComposeTopicSuggestion.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  export let value
+</script>
+
+<div>
+  #{value}
+</div>

src/app/components/GroupNote.svelte

@@ -3,11 +3,11 @@
   import {readable} from "svelte/store"
   import {hash} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
-  import {GROUP_REPLY, getAncestorTags, displayProfile, displayPubkey} from "@welshman/util"
+  import {GROUP_REPLY, getAncestorTags, displayPubkey} from "@welshman/util"
   import {fly} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Avatar from "@lib/components/Avatar.svelte"
-  import {deriveProfile, deriveEvent} from "@app/state"
+  import {deriveProfile, deriveProfileDisplay, deriveEvent} from "@app/state"
 
   export let event: TrustedEvent
   export let showPubkey: boolean
@@ -35,6 +35,7 @@
   ]
 
   const profile = deriveProfile(event.pubkey)
+  const profileDisplay = deriveProfileDisplay(event.pubkey)
   const {replies} = getAncestorTags(event.tags)
   const parentId = replies[0]?.[1]
   const parentHints = [replies[0]?.[2]].filter(Boolean)
@@ -43,6 +44,7 @@
 
   $: parentPubkey = $parentEvent?.pubkey || replies[0]?.[4]
   $: parentProfile = deriveProfile(parentPubkey)
+  $: parentProfileDisplay = deriveProfileDisplay(parentPubkey)
 </script>
 
 <div in:fly class="group relative flex flex-col gap-1 p-2 transition-colors hover:bg-base-300">
@@ -50,7 +52,7 @@
     <div class="flex items-center gap-1 pl-12 text-xs">
       <Icon icon="arrow-right" />
       <Avatar src={$parentProfile?.picture} size={4} />
-      <p class="text-primary">{displayProfile($parentProfile, displayPubkey(parentPubkey))}</p>
+      <p class="text-primary">{$parentProfileDisplay}</p>
       <p></p>
       <p
         class="flex cursor-pointer items-center gap-1 overflow-hidden text-ellipsis whitespace-nowrap opacity-75 hover:underline">
@@ -67,8 +69,7 @@
     {/if}
     <div class="-mt-1">
       {#if showPubkey}
-        <strong class="text-sm" style="color: {colorValue}" data-color={colorName}
-          >{displayProfile($profile, displayPubkey(event.pubkey))}</strong>
+        <strong class="text-sm" style="color: {colorValue}" data-color={colorName}>{$profileDisplay}</strong>
       {/if}
       <p class="text-sm">{event.content}</p>
     </div>