refactor: post editor

src/components/PostEditor/PostTextarea/CustomMention.ts

@@ -0,0 +1,92 @@
+import { formatNpub } from '@/lib/pubkey'
+import { ExtendedRegExpMatchArray, InputRule, PasteRule, Range, SingleCommands } from '@tiptap/core'
+import Mention from '@tiptap/extension-mention'
+import { ReactNodeViewRenderer } from '@tiptap/react'
+import MentionNode from './MentionNode'
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    mention: {
+      createMention: (id: string) => ReturnType
+    }
+  }
+}
+
+const MENTION_REGEX = /(nostr:)?(npub1[a-z0-9]{58}|nprofile1[a-z0-9]+)/g
+
+const CustomMention = Mention.extend({
+  selectable: true,
+
+  addNodeView() {
+    return ReactNodeViewRenderer(MentionNode)
+  },
+
+  addCommands() {
+    return {
+      ...this.parent?.(),
+
+      createMention:
+        (npub: string) =>
+        ({ chain }) => {
+          chain()
+            .focus()
+            .insertContent([
+              {
+                type: 'mention',
+                attrs: {
+                  id: npub,
+                  label: formatNpub(npub)
+                }
+              },
+              {
+                type: 'text',
+                text: ' '
+              }
+            ])
+            .run()
+
+          return true
+        }
+    }
+  },
+
+  addInputRules() {
+    return [
+      new InputRule({
+        find: MENTION_REGEX,
+        handler: (props) => handler(props)
+      })
+    ]
+  },
+
+  addPasteRules() {
+    return [
+      new PasteRule({
+        find: MENTION_REGEX,
+        handler: (props) => handler(props)
+      })
+    ]
+  }
+})
+export default CustomMention
+
+function handler({
+  range,
+  match,
+  commands
+}: {
+  commands: SingleCommands
+  match: ExtendedRegExpMatchArray
+  range: Range
+}) {
+  const mention = match[0]
+  if (!mention) return
+  const npub = mention.replace('nostr:', '')
+
+  const matchLength = mention.length
+  const end = range.to
+  const start = Math.max(0, end - matchLength)
+
+  commands.deleteRange({ from: start, to: end })
+  commands.createMention(npub)
+}

src/components/PostEditor/PostTextarea/FileHandler.ts

@@ -0,0 +1,155 @@
+import mediaUpload from '@/services/media-upload.service'
+import { Extension } from '@tiptap/core'
+import { EditorView } from '@tiptap/pm/view'
+import { Plugin, TextSelection } from 'prosemirror-state'
+
+const DRAGOVER_CLASS_LIST = [
+  'outline-2',
+  'outline-offset-4',
+  'outline-dashed',
+  'outline-border',
+  'rounded-md'
+]
+
+export interface FileHandlerOptions {
+  onUploadStart?: (file: File) => void
+  onUploadSuccess?: (file: File, result: any) => void
+  onUploadError?: (file: File, error: any) => void
+}
+
+export const FileHandler = Extension.create<FileHandlerOptions>({
+  name: 'fileHandler',
+
+  addOptions() {
+    return {
+      onUploadStart: undefined,
+      onUploadSuccess: undefined,
+      onUploadError: undefined
+    }
+  },
+
+  addProseMirrorPlugins() {
+    const options = this.options
+
+    return [
+      new Plugin({
+        props: {
+          handleDOMEvents: {
+            dragover(view, event) {
+              event.preventDefault()
+              view.dom.classList.add(...DRAGOVER_CLASS_LIST)
+              return false
+            },
+            dragleave(view) {
+              view.dom.classList.remove(...DRAGOVER_CLASS_LIST)
+              return false
+            },
+            drop(view, event) {
+              event.preventDefault()
+              view.dom.classList.remove(...DRAGOVER_CLASS_LIST)
+
+              const items = Array.from(event.dataTransfer?.files ?? [])
+              const mediaFile = items.find(
+                (item) => item.type.includes('image') || item.type.includes('video')
+              )
+              if (!mediaFile) return false
+
+              uploadFile(view, mediaFile, options)
+
+              return true
+            }
+          },
+          handlePaste(view, event) {
+            const items = Array.from(event.clipboardData?.items ?? [])
+            const mediaItem = items.find(
+              (item) => item.type.includes('image') || item.type.includes('video')
+            )
+            if (!mediaItem) return false
+
+            const file = mediaItem.getAsFile()
+            if (!file) return false
+
+            uploadFile(view, file, options)
+
+            return true
+          }
+        }
+      })
+    ]
+  }
+})
+
+async function uploadFile(view: EditorView, file: File, options: FileHandlerOptions) {
+  const name = file.name
+
+  options.onUploadStart?.(file)
+
+  const placeholder = `[Uploading "${name}"...]`
+  const uploadingNode = view.state.schema.text(placeholder)
+  const tr = view.state.tr.replaceSelectionWith(uploadingNode)
+  view.dispatch(tr)
+
+  mediaUpload
+    .upload(file)
+    .then((result) => {
+      options.onUploadSuccess?.(file, result)
+      const urlNode = view.state.schema.text(result.url)
+
+      const tr = view.state.tr
+      let didReplace = false
+
+      view.state.doc.descendants((node, pos) => {
+        if (node.isText && node.text && node.text.includes(placeholder) && !didReplace) {
+          const startPos = node.text.indexOf(placeholder)
+          const from = pos + startPos
+          const to = from + placeholder.length
+          tr.replaceWith(from, to, urlNode)
+          didReplace = true
+          return false
+        }
+        return true
+      })
+
+      if (didReplace) {
+        view.dispatch(tr)
+      } else {
+        const endPos = view.state.doc.content.size
+
+        const paragraphNode = view.state.schema.nodes.paragraph.create(
+          null,
+          view.state.schema.text(result.url)
+        )
+
+        const insertTr = view.state.tr.insert(endPos, paragraphNode)
+        const newPos = endPos + 1 + result.url.length
+        insertTr.setSelection(TextSelection.near(insertTr.doc.resolve(newPos)))
+        view.dispatch(insertTr)
+      }
+    })
+    .catch((error) => {
+      console.error('Upload failed:', error)
+      options.onUploadError?.(file, error)
+
+      const tr = view.state.tr
+      let didReplace = false
+
+      view.state.doc.descendants((node, pos) => {
+        if (node.isText && node.text && node.text.includes(placeholder) && !didReplace) {
+          const startPos = node.text.indexOf(placeholder)
+          const from = pos + startPos
+          const to = from + placeholder.length
+          const errorNode = view.state.schema.text(`[Error uploading "${name}"]`)
+          tr.replaceWith(from, to, errorNode)
+          didReplace = true
+          return false
+        }
+        return true
+      })
+
+      if (didReplace) {
+        view.dispatch(tr)
+      }
+
+      throw error
+    })
+}

src/components/PostEditor/PostTextarea/MentionList.tsx

@@ -0,0 +1,100 @@
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { formatNpub, userIdToPubkey } from '@/lib/pubkey'
+import { cn } from '@/lib/utils'
+import { SuggestionKeyDownProps } from '@tiptap/suggestion'
+import { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
+import Nip05 from '../../Nip05'
+import { SimpleUserAvatar } from '../../UserAvatar'
+import { SimpleUsername } from '../../Username'
+
+export interface MentionListProps {
+  items: string[]
+  command: (payload: { id: string; label?: string }) => void
+}
+
+export interface MentionListHandle {
+  onKeyDown: (args: SuggestionKeyDownProps) => boolean
+}
+
+const MentionList = forwardRef<MentionListHandle, MentionListProps>((props, ref) => {
+  const [selectedIndex, setSelectedIndex] = useState<number>(0)
+
+  const selectItem = (index: number) => {
+    const item = props.items[index]
+
+    if (item) {
+      props.command({ id: item, label: formatNpub(item) })
+    }
+  }
+
+  const upHandler = () => {
+    setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length)
+  }
+
+  const downHandler = () => {
+    setSelectedIndex((selectedIndex + 1) % props.items.length)
+  }
+
+  const enterHandler = () => {
+    selectItem(selectedIndex)
+  }
+
+  useEffect(() => {
+    setSelectedIndex(0)
+  }, [props.items])
+
+  useImperativeHandle(ref, () => ({
+    onKeyDown: ({ event }: SuggestionKeyDownProps) => {
+      if (event.key === 'ArrowUp') {
+        upHandler()
+        return true
+      }
+
+      if (event.key === 'ArrowDown') {
+        downHandler()
+        return true
+      }
+
+      if (event.key === 'Enter') {
+        enterHandler()
+        return true
+      }
+
+      return false
+    }
+  }))
+
+  if (props.items.length === 0) {
+    return null
+  }
+
+  return (
+    <ScrollArea
+      className="border rounded-lg bg-background z-50 pointer-events-auto flex flex-col max-h-80 overflow-y-auto"
+      onWheel={(e) => e.stopPropagation()}
+      onTouchMove={(e) => e.stopPropagation()}
+    >
+      {props.items.map((item, index) => (
+        <button
+          className={cn(
+            'cursor-pointer text-start items-center m-1 p-2 outline-none transition-colors [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 rounded-md',
+            selectedIndex === index && 'bg-accent text-accent-foreground'
+          )}
+          key={item}
+          onClick={() => selectItem(index)}
+          onMouseEnter={() => setSelectedIndex(index)}
+        >
+          <div className="flex gap-2 w-80 items-center truncate pointer-events-none">
+            <SimpleUserAvatar userId={item} />
+            <div className="flex-1 w-0">
+              <SimpleUsername userId={item} className="font-semibold truncate" />
+              <Nip05 pubkey={userIdToPubkey(item)} />
+            </div>
+          </div>
+        </button>
+      ))}
+    </ScrollArea>
+  )
+})
+MentionList.displayName = 'MentionList'
+export default MentionList

src/components/PostEditor/PostTextarea/MentionNode.tsx

@@ -0,0 +1,20 @@
+import { useFetchProfile } from '@/hooks'
+import { formatUserId } from '@/lib/pubkey'
+import { cn } from '@/lib/utils'
+import { NodeViewRendererProps, NodeViewWrapper } from '@tiptap/react'
+
+export default function MentionNode(props: NodeViewRendererProps & { selected: boolean }) {
+  const { profile } = useFetchProfile(props.node.attrs.id)
+
+  return (
+    <NodeViewWrapper
+      className={cn(
+        'inline text-primary bg-primary/10 rounded-md px-1 transition-colors',
+        props.selected ? 'bg-primary/20' : ''
+      )}
+    >
+      {'@'}
+      {profile ? profile.username : formatUserId(props.node.attrs.id)}
+    </NodeViewWrapper>
+  )
+}

src/components/PostEditor/PostTextarea/Preview.tsx

@@ -0,0 +1,11 @@
+import { Card } from '@/components/ui/card'
+import { createFakeEvent } from '@/lib/event'
+import Content from '../../Content'
+
+export default function Preview({ content }: { content: string }) {
+  return (
+    <Card className="p-3 min-h-52">
+      <Content event={createFakeEvent({ content })} className="pointer-events-none h-full" />
+    </Card>
+  )
+}

src/components/PostEditor/PostTextarea/index.tsx

@@ -0,0 +1,110 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { parseEditorJsonToText } from '@/lib/tiptap'
+import postContentCache from '@/services/post-content-cache.service'
+import Document from '@tiptap/extension-document'
+import History from '@tiptap/extension-history'
+import Paragraph from '@tiptap/extension-paragraph'
+import Placeholder from '@tiptap/extension-placeholder'
+import Text from '@tiptap/extension-text'
+import { TextSelection } from '@tiptap/pm/state'
+import { EditorContent, useEditor } from '@tiptap/react'
+import { Event } from 'nostr-tools'
+import { Dispatch, forwardRef, SetStateAction, useImperativeHandle } from 'react'
+import { useTranslation } from 'react-i18next'
+import CustomMention from './CustomMention'
+import { FileHandler } from './FileHandler'
+import Preview from './Preview'
+import suggestion from './suggestion'
+import { usePostEditor } from '../PostEditorProvider'
+
+export type TPostTextareaHandle = {
+  appendText: (text: string) => void
+}
+
+const PostTextarea = forwardRef<
+  TPostTextareaHandle,
+  {
+    text: string
+    setText: Dispatch<SetStateAction<string>>
+    defaultContent?: string
+    parentEvent?: Event
+  }
+>(({ text = '', setText, defaultContent, parentEvent }, ref) => {
+  const { t } = useTranslation()
+  const { setUploadingFiles } = usePostEditor()
+  const editor = useEditor({
+    extensions: [
+      Document,
+      Paragraph,
+      Text,
+      History,
+      Placeholder.configure({
+        placeholder: t('Write something...') + ' (' + t('Paste or drop media files to upload') + ')'
+      }),
+      CustomMention.configure({
+        suggestion
+      }),
+      FileHandler.configure({
+        onUploadStart: () => setUploadingFiles((prev) => prev + 1),
+        onUploadSuccess: () => setUploadingFiles((prev) => prev - 1),
+        onUploadError: () => setUploadingFiles((prev) => prev - 1)
+      })
+    ],
+    editorProps: {
+      attributes: {
+        class:
+          'border rounded-lg p-3 min-h-52 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring'
+      }
+    },
+    content: postContentCache.getPostCache({ defaultContent, parentEvent }),
+    onUpdate(props) {
+      setText(parseEditorJsonToText(props.editor.getJSON()))
+      postContentCache.setPostCache({ defaultContent, parentEvent }, props.editor.getJSON())
+    },
+    onCreate(props) {
+      setText(parseEditorJsonToText(props.editor.getJSON()))
+    }
+  })
+
+  useImperativeHandle(ref, () => ({
+    appendText: (text: string) => {
+      if (editor) {
+        editor
+          .chain()
+          .focus()
+          .command(({ tr, dispatch }) => {
+            if (dispatch) {
+              const endPos = tr.doc.content.size
+              const selection = TextSelection.create(tr.doc, endPos)
+              tr.setSelection(selection)
+              dispatch(tr)
+            }
+            return true
+          })
+          .insertContent(text)
+          .run()
+      }
+    }
+  }))
+
+  if (!editor) {
+    return null
+  }
+
+  return (
+    <Tabs defaultValue="edit" className="space-y-4">
+      <TabsList>
+        <TabsTrigger value="edit">{t('Edit')}</TabsTrigger>
+        <TabsTrigger value="preview">{t('Preview')}</TabsTrigger>
+      </TabsList>
+      <TabsContent value="edit">
+        <EditorContent className="tiptap" editor={editor} />
+      </TabsContent>
+      <TabsContent value="preview">
+        <Preview content={text} />
+      </TabsContent>
+    </Tabs>
+  )
+})
+PostTextarea.displayName = 'PostTextarea'
+export default PostTextarea

src/components/PostEditor/PostTextarea/suggestion.ts

@@ -0,0 +1,101 @@
+import client from '@/services/client.service'
+import postEditor from '@/services/post-editor.service'
+import type { Editor } from '@tiptap/core'
+import { ReactRenderer } from '@tiptap/react'
+import { SuggestionKeyDownProps } from '@tiptap/suggestion'
+import tippy, { GetReferenceClientRect, Instance, Props } from 'tippy.js'
+import MentionList, { MentionListHandle, MentionListProps } from './MentionList'
+
+const suggestion = {
+  items: async ({ query }: { query: string }) => {
+    return await client.searchNpubs(query, 20)
+  },
+
+  render: () => {
+    let component: ReactRenderer<MentionListHandle, MentionListProps>
+    let popup: Instance[]
+    let touchListener: (e: TouchEvent) => void
+    let closePopup: () => void
+
+    return {
+      onBeforeStart: () => {
+        touchListener = (e: TouchEvent) => {
+          if (popup && popup[0] && postEditor.isSuggestionPopupOpen) {
+            const popupElement = popup[0].popper
+            if (popupElement && !popupElement.contains(e.target as Node)) {
+              popup[0].hide()
+            }
+          }
+        }
+        document.addEventListener('touchstart', touchListener)
+
+        closePopup = () => {
+          console.log('closePopup')
+          if (popup && popup[0]) {
+            popup[0].hide()
+          }
+        }
+        postEditor.addEventListener('closeSuggestionPopup', closePopup)
+      },
+      onStart: (props: { editor: Editor; clientRect?: (() => DOMRect | null) | null }) => {
+        component = new ReactRenderer(MentionList, {
+          props,
+          editor: props.editor
+        })
+
+        if (!props.clientRect) {
+          return
+        }
+
+        popup = tippy('body', {
+          getReferenceClientRect: props.clientRect as GetReferenceClientRect,
+          appendTo: () => document.body,
+          content: component.element,
+          showOnCreate: true,
+          interactive: true,
+          trigger: 'manual',
+          placement: 'bottom-start',
+          hideOnClick: true,
+          touch: true,
+          onShow() {
+            postEditor.isSuggestionPopupOpen = true
+          },
+          onHide() {
+            postEditor.isSuggestionPopupOpen = false
+          }
+        })
+      },
+
+      onUpdate(props: { clientRect?: (() => DOMRect | null) | null | undefined }) {
+        component.updateProps(props)
+
+        if (!props.clientRect) {
+          return
+        }
+
+        popup[0].setProps({
+          getReferenceClientRect: props.clientRect
+        } as Partial<Props>)
+      },
+
+      onKeyDown(props: SuggestionKeyDownProps) {
+        if (props.event.key === 'Escape') {
+          popup[0].hide()
+          return true
+        }
+        return component.ref?.onKeyDown(props) ?? false
+      },
+
+      onExit() {
+        postEditor.isSuggestionPopupOpen = false
+        popup[0].destroy()
+        component.destroy()
+
+        document.removeEventListener('touchstart', touchListener)
+        postEditor.removeEventListener('closeSuggestionPopup', closePopup)
+      }
+    }
+  }
+}
+
+export default suggestion