wip: new composer

src/app/notes/components/editor/post.tsx

@@ -1,25 +1,39 @@
+import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
+import CharacterCount from '@tiptap/extension-character-count';
 import Image from '@tiptap/extension-image';
 import Placeholder from '@tiptap/extension-placeholder';
 import { EditorContent, useEditor } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
+import { convert } from 'html-to-text';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+import { useNDK } from '@libs/ndk/provider';
+
+import { MediaUploader, MentionPopup } from '@shared/composer';
+import { LoaderIcon } from '@shared/icons';
 
 export function PostEditor() {
+  const { ndk } = useNDK();
+  const [loading, setLoading] = useState(false);
+
   const editor = useEditor({
     extensions: [
       StarterKit.configure(),
-      Placeholder.configure({ placeholder: 'Type something...' }),
+      Placeholder.configure({ placeholder: 'Sharing some thoughts...' }),
       Image.configure({
         HTMLAttributes: {
           class:
-            'rounded-lg w-full h-auto border border-white/10 outline outline-2 outline-offset-0 outline-white/20 ml-1',
+            'rounded-lg w-full object-cover h-auto max-h-[400px] border border-neutral-200 dark:border-neutral-800 outline outline-1 outline-offset-0 outline-neutral-300 dark:outline-neutral-700',
         },
       }),
+      CharacterCount.configure(),
     ],
     content: JSON.parse(localStorage.getItem('editor-post') || '{}'),
     editorProps: {
       attributes: {
         class:
-          'h-full outline-none prose prose-lg prose-neutral max-w-none select-text whitespace-pre-line break-words dark:prose-invert hover:prose-a:text-blue-500',
+          'outline-none prose prose-lg prose-neutral max-w-none select-text whitespace-pre-line break-words dark:prose-invert hover:prose-a:text-blue-500',
       },
     },
     onUpdate: ({ editor }) => {
@@ -28,13 +42,79 @@ export function PostEditor() {
     },
   });
 
+  const submit = async () => {
+    try {
+      setLoading(true);
+
+      // get plaintext content
+      const html = editor.getHTML();
+      const serializedContent = convert(html, {
+        selectors: [
+          { selector: 'a', options: { linkBrackets: false } },
+          { selector: 'img', options: { linkBrackets: false } },
+        ],
+      });
+
+      // define tags
+      const tags: string[][] = [];
+
+      // add hashtag to tags if present
+      const hashtags = serializedContent
+        .split(/\s/gm)
+        .filter((s: string) => s.startsWith('#'));
+      hashtags?.forEach((tag: string) => {
+        tags.push(['t', tag.replace('#', '')]);
+      });
+
+      // publish message
+      const event = new NDKEvent(ndk);
+      event.content = serializedContent;
+      event.kind = NDKKind.Text;
+      event.tags = tags;
+
+      const publishedRelays = await event.publish();
+      if (publishedRelays) {
+        toast.success(`Broadcasted to ${publishedRelays.size} relays successfully.`);
+        // update state
+        setLoading(false);
+        // reset editor
+        editor.commands.clearContent();
+        localStorage.setItem('editor-post', '{}');
+      }
+    } catch (e) {
+      setLoading(false);
+      toast.error(e);
+    }
+  };
+
   return (
-    <EditorContent
-      editor={editor}
-      spellCheck="false"
-      autoComplete="off"
-      autoCorrect="off"
-      autoCapitalize="off"
-    />
+    <div className="flex h-full flex-col justify-between">
+      <EditorContent
+        editor={editor}
+        spellCheck="false"
+        autoComplete="off"
+        autoCorrect="off"
+        autoCapitalize="off"
+      />
+      <div className="flex h-16 w-full items-center justify-between border-t border-neutral-100 dark:border-neutral-900">
+        <span className="text-sm font-medium tabular-nums text-neutral-600 dark:text-neutral-400">
+          {editor?.storage?.characterCount.characters()}
+        </span>
+        <div className="flex items-center">
+          <div className="inline-flex items-center gap-2">
+            <MediaUploader editor={editor} />
+            <MentionPopup editor={editor} />
+          </div>
+          <div className="mx-3 h-6 w-px bg-neutral-200 dark:bg-neutral-800" />
+          <button
+            onClick={() => submit()}
+            disabled={editor && editor.isEmpty}
+            className="inline-flex h-9 w-20 items-center justify-center rounded-lg bg-blue-500 px-2 font-medium text-white hover:bg-blue-600 disabled:opacity-50"
+          >
+            {loading === true ? <LoaderIcon className="h-5 w-5 animate-spin" /> : 'Post'}
+          </button>
+        </div>
+      </div>
+    </div>
   );
 }