feat: mention markdown support

This commit is contained in:
fantasticit 2022-04-05 14:01:51 +08:00
parent 57146873e7
commit 1756161ead
6 changed files with 31 additions and 2 deletions

View File

@ -2,6 +2,7 @@ import BulitInMention from '@tiptap/extension-mention';
import { ReactRenderer } from '@tiptap/react'; import { ReactRenderer } from '@tiptap/react';
import tippy from 'tippy.js'; import tippy from 'tippy.js';
import { getUsers } from 'services/user'; import { getUsers } from 'services/user';
import { getDatasetAttribute } from '../utils/dataset';
import { MentionList } from '../wrappers/mention-list'; import { MentionList } from '../wrappers/mention-list';
const suggestion = { 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: { HTMLAttributes: {
class: 'mention', class: 'mention',
}, },

View File

@ -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');
}
}

View File

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

View File

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

View File

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

View File

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