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 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',
},

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 { 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,

View File

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

View File

@ -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'),

View File

@ -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 = () => {