feat: mention markdown support

packages/client/src/tiptap/extensions/mention.ts

@@ -2,6 +2,7 @@ import BulitInMention from '@tiptap/extension-mention';
 import { ReactRenderer } from '@tiptap/react';
 import tippy from 'tippy.js';
 import { getUsers } from 'services/user';
+import { getDatasetAttribute } from '../utils/dataset';
 import { MentionList } from '../wrappers/mention-list';
 
 const suggestion = {
@@ -59,7 +60,20 @@ const suggestion = {
   },
 };
 
-export const Mention = BulitInMention.configure({
+export const Mention = BulitInMention.extend({
+  addAttributes() {
+    return {
+      id: {
+        default: '',
+        parseHTML: getDatasetAttribute('id'),
+      },
+      label: {
+        default: '',
+        parseHTML: getDatasetAttribute('label'),
+      },
+    };
+  },
+}).configure({
   HTMLAttributes: {
     class: 'mention',
   },

packages/client/src/tiptap/markdown/markdown-to-prosemirror/html-to-prosemirror/nodes/mention.ts

@@ -0,0 +1,9 @@
+import { Node } from './node';
+
+export class Mention extends Node {
+  type = 'mention';
+
+  matching() {
+    return this.DOMNode.nodeName === 'DIV' && this.DOMNode.classList.contains('mention');
+  }
+}

packages/client/src/tiptap/markdown/markdown-to-prosemirror/html-to-prosemirror/renderer.ts

@@ -5,6 +5,7 @@ import { Banner } from './nodes/banner';
 import { Status } from './nodes/status';
 import { DocumentReference } from './nodes/document-reference';
 import { DocumentChildren } from './nodes/document-children';
+import { Mention } from './nodes/mention';
 import { Mind } from './nodes/mind';
 // 通用
 import { CodeBlock } from './nodes/code-block';
@@ -57,6 +58,7 @@ export class Renderer {
       Banner,
       Iframe,
       Status,
+      Mention,
       Mind,
       DocumentChildren,
       DocumentReference,

packages/client/src/tiptap/markdown/markdown-to-prosemirror/markdown-to-html/index.ts

@@ -18,6 +18,7 @@ const markdownCountdown = createMarkdownContainer('countdown');
 const markdownDocumentReference = createMarkdownContainer('documentReference');
 const markdownDocumentChildren = createMarkdownContainer('documentChildren');
 const markdownIframe = createMarkdownContainer('iframe');
+const markdownMention = createMarkdownContainer('mention');
 const markdownMind = createMarkdownContainer('mind');
 
 const markdown = markdownit('commonmark')
@@ -37,6 +38,7 @@ const markdown = markdownit('commonmark')
   .use(markdownCountdown)
   .use(markdownIframe)
   .use(markdownStatus)
+  .use(markdownMention)
   .use(markdownMind)
   .use(markdownDocumentReference)
   .use(markdownDocumentChildren);

packages/client/src/tiptap/markdown/prosemirror-to-markdown/index.ts

@@ -12,6 +12,7 @@ import { HardBreak } from '../../extensions/hard-break';
 import { Heading } from '../../extensions/heading';
 import { HorizontalRule } from '../../extensions/horizontal-rule';
 import { marks } from '../../extensions/html-marks';
+import { Mention } from '../../extensions/mention';
 import { Iframe } from '../../extensions/iframe';
 import { Image } from '../../extensions/image';
 import { Italic } from '../../extensions/italic';
@@ -134,6 +135,7 @@ const SerializerConfig = {
     },
     [ListItem.name]: defaultMarkdownSerializer.nodes.list_item,
     [Mind.name]: renderCustomContainer('mind'),
+    [Mention.name]: renderCustomContainer('mention'),
     [OrderedList.name]: renderOrderedList,
     [Paragraph.name]: defaultMarkdownSerializer.nodes.paragraph,
     [Status.name]: renderCustomContainer('status'),

packages/client/src/tiptap/wrappers/mention-list/index.tsx

@@ -17,7 +17,7 @@ export const MentionList: React.FC<IProps> = forwardRef((props, ref) => {
   const selectItem = (index) => {
     const userName = props.items[index];
     if (!userName) return;
-    props.command({ id: userName });
+    props.command({ id: userName, label: userName });
   };
 
   const upHandler = () => {