Add tags from content to notes

src/app.css

@@ -135,7 +135,7 @@
   @apply link-content;
 }
 
-.link-content {
+.link-content, [tag] {
   @apply max-w-full overflow-hidden text-ellipsis whitespace-nowrap rounded bg-neutral px-1 text-neutral-content no-underline;
 }
 

src/lib/editor/EditEvent.svelte

@@ -1,24 +1,27 @@
 <script lang="ts">
+  import cx from 'classnames'
   import type {NodeViewProps} from "@tiptap/core"
   import {NodeViewWrapper} from "svelte-tiptap"
-  import {ellipsize} from "@welshman/lib"
+  import {ellipsize, nthEq} from "@welshman/lib"
   import {type TrustedEvent, fromNostrURI, Address} from "@welshman/util"
   import Link from "@lib/components/Link.svelte"
   import {deriveEvent, entityLink} from "@app/state"
 
   export let node: NodeViewProps["node"]
+  export let selected: NodeViewProps["selected"]
 
-  const displayEvent = (e: TrustedEvent) =>
-    e?.content.length > 1
-      ? ellipsize(e.content, 50)
-      : fromNostrURI(nevent || naddr).slice(0, 16) + "..."
+  const displayEvent = (e: TrustedEvent) => {
+    const content = e?.tags.find(nthEq(0, 'alt'))?.[1] || e?.content
+
+    return content.length > 1 ? ellipsize(content, 30) : fromNostrURI(nevent || naddr).slice(0, 16) + "..."
+  }
 
   $: ({identifier, pubkey, kind, id, relays = [], nevent, naddr} = node.attrs)
   $: event = deriveEvent(id || new Address(kind, pubkey, identifier).toString(), relays)
 </script>
 
 <NodeViewWrapper class="inline">
-  <Link external href={entityLink(node.attrs.nevent)} class="link-content">
+  <Link external href={entityLink(node.attrs.nevent)} class={cx("link-content", {"link-content-selected": selected})}>
     {displayEvent($event)}
   </Link>
 </NodeViewWrapper>

src/lib/editor/index.ts

@@ -17,6 +17,7 @@ import {
   NAddrExtension,
   ImageExtension,
   VideoExtension,
+  TagExtension,
   FileUploadExtension,
 } from "nostr-editor"
 import type {StampedEvent} from "@welshman/util"
@@ -92,10 +93,9 @@ export const getEditorOptions = ({
     History,
     Paragraph,
     Text,
+    TagExtension,
     submitOnEnter ? getModifiedHardBreakExtension() : HardBreakExtension,
-    LinkExtension.extend({
-      addNodeView: () => SvelteNodeViewRenderer(EditLink),
-    }),
+    LinkExtension.extend({addNodeView: () => SvelteNodeViewRenderer(EditLink)}),
     Bolt11Extension.extend(asInline({addNodeView: () => SvelteNodeViewRenderer(EditBolt11)})),
     NProfileExtension.extend({
       addNodeView: () => SvelteNodeViewRenderer(EditMention),

src/lib/editor/util.ts

@@ -1,6 +1,7 @@
 import type {JSONContent, PasteRuleMatch, InputRuleMatch} from "@tiptap/core"
 import {Editor} from "@tiptap/core"
 import {choice} from "@welshman/lib"
+import {Address} from "@welshman/util"
 
 export const asInline = (extend: Record<string, any>) => ({
   inline: true,
@@ -34,20 +35,52 @@ export const findNodes = (type: string, json: JSONContent) => {
   return results
 }
 
+export const findMarks = (type: string, json: JSONContent) => {
+  const results: JSONContent[] = []
+
+  for (const node of json.content || []) {
+    for (const mark of node.marks || []) {
+      if (mark.type === type) {
+        results.push(mark)
+      }
+    }
+
+    for (const result of findMarks(type, node)) {
+      results.push(result)
+    }
+  }
+
+  return results
+}
+
 export const getEditorTags = (editor: Editor) => {
   const json = editor.getJSON()
 
-  const withAttrs = (f: any) => (attrs: any) => f(attrs as Record<string, any>)
+  const topicTags = findMarks("tag", json).map(
+    ({attrs}: any) => ["t", attrs.tag.replace(/^#/, '').toLowerCase()],
+  )
+
+  const naddrTags = findNodes("naddr", json).map(
+    ({kind, pubkey, identifier, relays}: any) => {
+      const address = new Address(kind, pubkey, identifier).toString()
+
+      return ["q", address, choice(relays) || "", pubkey]
+    },
+  )
+
+  const neventTags = findNodes("nevent", json).map(
+    ({id, author, relays}: any) => ["q", id, choice(relays) || "", author || ""],
+  )
 
   const mentionTags = findNodes("nprofile", json).map(
-    withAttrs(({pubkey, relays}: any) => ["p", pubkey, choice(relays), ""]),
+    ({pubkey, relays}: any) => ["p", pubkey, choice(relays) || "", ""],
   )
 
   const imetaTags = findNodes("image", json).map(
-    withAttrs(({src, sha256}: any) => ["imeta", `url ${src}`, `x ${sha256}`, `ox ${sha256}`]),
+    ({src, sha256}: any) => ["imeta", `url ${src}`, `x ${sha256}`, `ox ${sha256}`],
   )
 
-  return [...mentionTags, ...imetaTags]
+  return [...topicTags, ...naddrTags, ...neventTags, ...mentionTags, ...imetaTags]
 }
 
 export const addFile = (editor: Editor) => editor.chain().selectFiles().run()

src/routes/+layout.svelte

@@ -57,7 +57,7 @@
     if (modal) {
       prev = modal
 
-      if (prev.options.drawer) {
+      if (prev.options?.drawer) {
         drawer?.open()
       } else {
         dialog?.showModal()
@@ -110,7 +110,7 @@
       <slot />
     </div>
     <dialog bind:this={dialog} class="modal modal-bottom !z-modal sm:modal-middle">
-      {#if prev && !prev.options.drawer}
+      {#if prev && !prev.options?.drawer}
         {#key prev}
           <ModalBox {...prev} />
         {/key}
@@ -123,7 +123,7 @@
       {/if}
     </dialog>
     <Drawer bind:this={drawer}>
-      {#if prev && prev.options.drawer}
+      {#if prev && prev.options?.drawer}
         {#key prev}
           <svelte:component this={prev.component} {...prev.props} />
         {/key}