Add nostr-editor

src/lib/components/Icon.svelte

@@ -33,6 +33,7 @@
   import Magnifer from "@assets/icons/Magnifer.svg?dataurl"
   import MenuDots from "@assets/icons/Menu Dots.svg?dataurl"
   import Pallete2 from "@assets/icons/Pallete 2.svg?dataurl"
+  import Paperclip from "@assets/icons/Paperclip.svg?dataurl"
   import Plain from "@assets/icons/Plain.svg?dataurl"
   import RemoteControllerMinimalistic from "@assets/icons/Remote Controller Minimalistic.svg?dataurl"
   import Reply from "@assets/icons/Reply.svg?dataurl"
@@ -77,6 +78,7 @@
     magnifer: Magnifer,
     "menu-dots": MenuDots,
     "pallete-2": Pallete2,
+    "paperclip": Paperclip,
     plain: Plain,
     reply: Reply,
     "remote-controller-minimalistic": RemoteControllerMinimalistic,

src/lib/components/SecondaryNav.svelte

@@ -1,3 +1,3 @@
-<div class="flex w-60 flex-col gap-1 bg-base-300">
+<div class="flex w-60 flex-col gap-1 bg-base-300 flex-shrink-0">
   <slot />
 </div>

src/lib/tiptap/LinkExtension.ts

@@ -0,0 +1,96 @@
+import { Node, nodePasteRule, type PasteRuleMatch } from '@tiptap/core'
+import type { Node as ProsemirrorNode } from '@tiptap/pm/model'
+import type { MarkdownSerializerState } from 'prosemirror-markdown'
+
+export const LINK_REGEX = /^([a-z\+:]{2,30}:\/\/)?[^<>\(\)\s]+\.[a-z]{2,6}[^\s]*[^<>"'\.!?,:\s\)\(]*/gi
+
+export const createPasteRuleMatch = <T extends Record<string, unknown>>(
+  match: RegExpMatchArray,
+  data: T,
+): PasteRuleMatch => ({ index: match.index!, replaceWith: match[2], text: match[0], match, data })
+
+export interface LinkAttributes {
+  url: string
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    link: {
+      insertLink: (options: { url: string }) => ReturnType
+    }
+  }
+}
+
+export const LinkExtension = Node.create({
+  name: 'link',
+
+  group: 'inline',
+
+  atom: true,
+
+  inline: true,
+
+  priority: 1000,
+
+  addAttributes() {
+    return {
+      url: { default: null },
+    }
+  },
+
+  renderHTML(props) {
+    return ['div', { 'data-url': props.node.attrs.url }]
+  },
+
+  renderText(props) {
+    return props.node.attrs.url
+  },
+
+  addStorage() {
+    return {
+      markdown: {
+        serialize(state: MarkdownSerializerState, node: ProsemirrorNode) {
+          state.write(node.attrs.url)
+        },
+        parse: {},
+      },
+    }
+  },
+
+  addCommands() {
+    return {
+      insertLink:
+        ({ url }) =>
+        ({ commands }) => {
+          return commands.insertContent(
+            { type: this.name, attrs: { url } },
+            {
+              updateSelection: false,
+            },
+          )
+        },
+    }
+  },
+
+  addPasteRules() {
+    return [
+      nodePasteRule({
+        type: this.type,
+        getAttributes: (match) => match.data,
+        find: (text) => {
+          const matches = []
+
+          for (const match of text.matchAll(LINK_REGEX)) {
+            try {
+              matches.push(createPasteRuleMatch(match, { url: match[0] }))
+            } catch (e) {
+              continue
+            }
+          }
+
+          return matches
+        },
+      }),
+    ]
+  },
+})

src/lib/tiptap/index.ts

@@ -0,0 +1 @@
+export * from '@lib/tiptap/LinkExtension'