From 5aeedb0a1c237341602d05d226057c57ebbd8fe9 Mon Sep 17 00:00:00 2001
From: Sinclair Chen <abc.sinclair@gmail.com>
Date: Sat, 23 Jul 2022 18:11:20 -0700
Subject: [PATCH] Render at mention with Linkify component

- mentions are now Next <Link> rather than <a>
- fix bug where editor.getText() returns [object Object] for mentions
- fix mention rendering for posted markets
---
 web/components/editor.tsx         | 18 +++++++-----------
 web/components/editor/mention.tsx | 29 +++++++++++++++++++++++++++++
 2 files changed, 36 insertions(+), 11 deletions(-)
 create mode 100644 web/components/editor/mention.tsx

diff --git a/web/components/editor.tsx b/web/components/editor.tsx
index 50258c87..eec2b706 100644
--- a/web/components/editor.tsx
+++ b/web/components/editor.tsx
@@ -22,6 +22,7 @@ import { FileUploadButton } from './file-upload-button'
 import { linkClass } from './site-link'
 import { useUsers } from 'web/hooks/use-users'
 import { mentionSuggestion } from './editor/mention-suggestion'
+import { DisplayMention } from './editor/mention'
 
 const proseClass = clsx(
   'prose prose-p:my-0 prose-li:my-0 prose-blockquote:not-italic max-w-none prose-quoteless leading-relaxed',
@@ -62,16 +63,7 @@ export function useTextEditor(props: {
             class: clsx('no-underline !text-indigo-700', linkClass),
           },
         }),
-        Mention.configure({
-          HTMLAttributes: {
-            class: clsx('not-prose text-indigo-700', linkClass),
-          },
-          renderLabel: ({ options, node }) =>
-            [
-              'a',
-              { href: node.attrs.label },
-              `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`,
-            ] as any,
+        DisplayMention.configure({
           suggestion: mentionSuggestion(users),
         }),
       ],
@@ -163,7 +155,11 @@ function RichContent(props: { content: JSONContent }) {
   const { content } = props
   const editor = useEditor({
     editorProps: { attributes: { class: proseClass } },
-    extensions: exhibitExts,
+    extensions: [
+      // replace tiptap's Mention with ours, to add style and link
+      ...exhibitExts.filter((ex) => ex.name !== Mention.name),
+      DisplayMention,
+    ],
     content,
     editable: false,
   })
diff --git a/web/components/editor/mention.tsx b/web/components/editor/mention.tsx
new file mode 100644
index 00000000..3ad5de39
--- /dev/null
+++ b/web/components/editor/mention.tsx
@@ -0,0 +1,29 @@
+import Mention from '@tiptap/extension-mention'
+import {
+  mergeAttributes,
+  NodeViewWrapper,
+  ReactNodeViewRenderer,
+} from '@tiptap/react'
+import clsx from 'clsx'
+import { Linkify } from '../linkify'
+
+const name = 'mention-component'
+
+const MentionComponent = (props: any) => {
+  return (
+    <NodeViewWrapper className={clsx(name, 'not-prose inline text-indigo-700')}>
+      <Linkify text={'@' + props.node.attrs.label} />
+    </NodeViewWrapper>
+  )
+}
+
+/**
+ *  Mention extension that renders React. See:
+ *  https://tiptap.dev/guide/custom-extensions#extend-existing-extensions
+ *  https://tiptap.dev/guide/node-views/react#render-a-react-component
+ */
+export const DisplayMention = Mention.extend({
+  parseHTML: () => [{ tag: name }],
+  renderHTML: ({ HTMLAttributes }) => [name, mergeAttributes(HTMLAttributes)],
+  addNodeView: () => ReactNodeViewRenderer(MentionComponent),
+})