Integrate Nostr-Editor

package.json

@@ -36,6 +36,17 @@
     "@sentry/browser": "^8.35.0",
     "@sentry/cli": "^2.38.1",
     "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@tiptap/extension-code": "^2.9.1",
+    "@tiptap/extension-code-block": "^2.9.1",
+    "@tiptap/extension-document": "^2.9.1",
+    "@tiptap/extension-dropcursor": "^2.9.1",
+    "@tiptap/extension-gapcursor": "^2.9.1",
+    "@tiptap/extension-hard-break": "^2.9.1",
+    "@tiptap/extension-history": "^2.9.1",
+    "@tiptap/extension-paragraph": "^2.9.1",
+    "@tiptap/extension-placeholder": "^2.9.1",
+    "@tiptap/extension-text": "^2.9.1",
+    "@tiptap/suggestion": "^2.9.1",
     "@tsconfig/svelte": "^5.0.4",
     "@types/ramda": "^0.30.2",
     "@types/throttle-debounce": "^5.0.2",
@@ -69,6 +80,7 @@
     "insane": "^2.6.2",
     "marked": "^14.1.3",
     "normalize-url": "^8.0.1",
+    "nostr-editor": "^0.0.3",
     "nostr-signer-capacitor-plugin": "^0.0.3",
     "nostr-tools": "^2.8.1",
     "npm-run-all": "^4.1.5",
@@ -88,6 +100,7 @@
     "svelte-preprocess": "^6.0.3",
     "svelte-range-slider-pips": "^3.1.1",
     "svelte-switch": "^0.0.5",
+    "svelte-tiptap": "^1.1.3",
     "tailwindcss": "^3.4.14",
     "throttle-debounce": "^5.0.2",
     "tippy.js": "^6.3.7",
@@ -100,4 +113,4 @@
     "vite-plugin-pwa": "^0.20.5",
     "vitest": "^2.1.3"
   }
-}
+}

src/app.css

@@ -236,8 +236,40 @@ body,
   border: 1px solid var(--neutral-600);
 }
 
-/* note content */
+/* nostr-editor */
+.tiptap {
+  outline: none;
+  min-height: 0;
+  height: 100%;
+}
 
-.note-content > a {
-  text-decoration: underline;
+.tiptap pre code {
+  @apply link-content block w-full;
+}
+
+.tiptap p code {
+  @apply link-content;
+}
+
+.tiptap,
+[tag] {
+  @apply max-w-full overflow-hidden text-ellipsis whitespace-nowrap rounded px-1 no-underline;
 }
+
+.tiptap p.is-editor-empty:first-child::before {
+  color: #adb5bd;
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+
+.link-content,
+.tiptap [tag] {
+  @apply max-w-full overflow-hidden text-ellipsis whitespace-nowrap rounded bg-neutral-200 px-1 no-underline text-neutral-800;
+}
+
+.link-content.link-content-selected {
+  @apply bg-neutral-300;
+}
+

src/app/MenuDesktop.svelte

@@ -114,7 +114,7 @@
     <Anchor
       class="staatliches px-8 text-tinted-400 hover:text-tinted-100"
       on:click={() => setSubMenu("settings")}>Settings</Anchor>
-    <div class="staatliches block flex h-8 gap-2 px-8 text-tinted-500">
+    <div class="staatliches flex h-8 gap-2 px-8 text-tinted-500">
       <Anchor class="hover:text-tinted-100" href="/about">About</Anchor> /
       <Anchor external class="hover:text-tinted-100" href="/terms.html">Terms</Anchor> /
       <Anchor external class="hover:text-tinted-100" href="/privacy.html">Privacy</Anchor>

src/app/editor/EditBolt11.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import cx from "classnames"
+  import type {NodeViewProps} from "@tiptap/core"
+  import {NodeViewWrapper} from "svelte-tiptap"
+  import Anchor from "src/partials/Anchor.svelte"
+  import {copyToClipboard} from "src/util/html"
+  import {showInfo} from "src/partials/Toast.svelte"
+
+  export let node: NodeViewProps["node"]
+  export let selected: NodeViewProps["selected"]
+
+  const copy = () => copyToClipboard(node.attrs.lnbc) && showInfo("Copied to clipboard")
+</script>
+
+<NodeViewWrapper class="inline">
+  <Anchor on:click={copy} class={cx("link-content", {"link-content-selected": selected})}>
+    <i class="fas fa-bolt inline-block translate-y-px"></i>
+    {node.attrs.lnbc.slice(0, 16)}...
+  </Anchor>
+</NodeViewWrapper>

src/app/editor/EditEvent.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import cx from "classnames"
+  import type {NodeViewProps} from "@tiptap/core"
+  import {NodeViewWrapper} from "svelte-tiptap"
+  import {ellipsize, nthEq} from "@welshman/lib"
+  import {type TrustedEvent, fromNostrURI, Address} from "@welshman/util"
+  import {router} from "../util"
+  import {deriveEvent} from "src/engine"
+
+  export let node: NodeViewProps["node"]
+  export let selected: NodeViewProps["selected"]
+
+  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)
+
+  $: src = router
+    .at("notes")
+    .of(id || $event?.id, {relays})
+    .toString()
+</script>
+
+<NodeViewWrapper class="inline">
+  <a
+    target="_blank"
+    rel="noopener noreferrer"
+    href={src}
+    class={cx("link-content", {"link-content-selected": selected})}>
+    {displayEvent($event)}
+  </a>
+</NodeViewWrapper>

src/app/editor/EditLink.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import cx from "classnames"
+  import type {NodeViewProps} from "@tiptap/core"
+  import {NodeViewWrapper} from "svelte-tiptap"
+  import {displayUrl} from "@welshman/lib"
+
+  export let node: NodeViewProps["node"]
+  export let selected: NodeViewProps["selected"]
+</script>
+
+<NodeViewWrapper class="inline-block">
+  <a
+    target="_blank"
+    rel="noopener noreferrer"
+    href={node.attrs.url}
+    class={cx("link-content", {"link-content-selected": selected})}>
+    <i class="fas fa-link inline-block"></i>
+    {displayUrl(node.attrs.url)}
+  </a>
+</NodeViewWrapper>

src/app/editor/EditMedia.svelte

@@ -0,0 +1,37 @@
+<style>
+  .loading {
+    animation: blurPulse 1.5s infinite;
+  }
+
+  @keyframes blurPulse {
+    0% {
+      opacity: 0.2;
+    }
+    50% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0.2;
+    }
+  }
+</style>
+
+<script lang="ts">
+  import type {NodeViewProps} from "@tiptap/core"
+  import {NodeViewWrapper} from "svelte-tiptap"
+  import cx from "classnames"
+
+  export let node: NodeViewProps["node"]
+  export let selected: NodeViewProps["selected"]
+</script>
+
+<!-- this component display image or videos only, the filter is made by tiptap -->
+<NodeViewWrapper
+  class={cx("link-content inline", {
+    "link-content-selected": selected,
+  })}>
+  <span class:loading={node.attrs.uploading}>
+    <i class="fas fa-paperclip"></i>
+    {node.attrs.file?.name || node.attrs.src}
+  </span>
+</NodeViewWrapper>

src/app/editor/EditMention.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import cx from "classnames"
+  import type {NodeViewProps} from "@tiptap/core"
+  import {NodeViewWrapper} from "svelte-tiptap"
+  import PersonLink from "src/app/shared/PersonLink.svelte"
+
+  export let node: NodeViewProps["node"]
+  export let selected: NodeViewProps["selected"]
+</script>
+
+<NodeViewWrapper class={cx("link-content inline", {"link-content-selected": selected})}>
+  <PersonLink pubkey={node.attrs.pubkey} />
+</NodeViewWrapper>