mirror of https://github.com/fantasticit/think.git
feat: mention markdown support
This commit is contained in:
parent
57146873e7
commit
1756161ead
|
@ -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',
|
||||||
},
|
},
|
||||||
|
|
|
@ -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');
|
||||||
|
}
|
||||||
|
}
|
|
@ -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,
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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'),
|
||||||
|
|
|
@ -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 = () => {
|
||||||
|
|
Loading…
Reference in New Issue