tiptap: markdown support for flow

This commit is contained in:
fantasticit 2022-05-19 14:05:19 +08:00
parent 71d3a6342e
commit c8f37fecf9
5 changed files with 18 additions and 1 deletions

View File

@ -16,6 +16,7 @@ import { DocumentChildren } from 'tiptap/core/extensions/document-children';
import { DocumentReference } from 'tiptap/core/extensions/document-reference'; import { DocumentReference } from 'tiptap/core/extensions/document-reference';
import { Dropcursor } from 'tiptap/core/extensions/dropcursor'; import { Dropcursor } from 'tiptap/core/extensions/dropcursor';
import { Emoji } from 'tiptap/core/extensions/emoji'; import { Emoji } from 'tiptap/core/extensions/emoji';
import { Flow } from 'tiptap/core/extensions/flow';
import { Focus } from 'tiptap/core/extensions/focus'; import { Focus } from 'tiptap/core/extensions/focus';
import { FontSize } from 'tiptap/core/extensions/font-size'; import { FontSize } from 'tiptap/core/extensions/font-size';
import { Gapcursor } from 'tiptap/core/extensions/gapcursor'; import { Gapcursor } from 'tiptap/core/extensions/gapcursor';
@ -130,4 +131,5 @@ export const AllExtensions = [
DocumentWithTitle, DocumentWithTitle,
Title, Title,
Document, Document,
Flow,
]; ];

View File

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

View File

@ -17,6 +17,7 @@ import { CodeBlockWrapper } from './nodes/code-block-wrapper';
import { Countdown } from './nodes/countdown'; import { Countdown } from './nodes/countdown';
import { DocumentChildren } from './nodes/document-children'; import { DocumentChildren } from './nodes/document-children';
import { DocumentReference } from './nodes/document-reference'; import { DocumentReference } from './nodes/document-reference';
import { Flow } from './nodes/flow';
import { HardBreak } from './nodes/hard-break'; import { HardBreak } from './nodes/hard-break';
import { Heading } from './nodes/heading'; import { Heading } from './nodes/heading';
import { HorizontalRule } from './nodes/horizontal-rule'; import { HorizontalRule } from './nodes/horizontal-rule';
@ -61,6 +62,7 @@ export class Renderer {
Mind, Mind,
DocumentChildren, DocumentChildren,
DocumentReference, DocumentReference,
Flow,
CodeBlock, CodeBlock,
CodeBlockWrapper, CodeBlockWrapper,

View File

@ -21,6 +21,7 @@ const markdownDocumentChildren = createMarkdownContainer('documentChildren');
const markdownIframe = createMarkdownContainer('iframe'); const markdownIframe = createMarkdownContainer('iframe');
const markdownMention = createMarkdownContainer('mention'); const markdownMention = createMarkdownContainer('mention');
const markdownMind = createMarkdownContainer('mind'); const markdownMind = createMarkdownContainer('mind');
const markdownFlow = createMarkdownContainer('flow');
const markdown = markdownit('commonmark') const markdown = markdownit('commonmark')
.enable('strikethrough') .enable('strikethrough')
@ -42,7 +43,8 @@ const markdown = markdownit('commonmark')
.use(markdownMention) .use(markdownMention)
.use(markdownMind) .use(markdownMind)
.use(markdownDocumentReference) .use(markdownDocumentReference)
.use(markdownDocumentChildren); .use(markdownDocumentChildren)
.use(markdownFlow);
export const markdownToHTML = (rawMarkdown) => { export const markdownToHTML = (rawMarkdown) => {
return sanitize(markdown.render(rawMarkdown), {}); return sanitize(markdown.render(rawMarkdown), {});

View File

@ -9,6 +9,7 @@ import { CodeBlock } from 'tiptap/core/extensions/code-block';
import { Countdown } from 'tiptap/core/extensions/countdown'; import { Countdown } from 'tiptap/core/extensions/countdown';
import { DocumentChildren } from 'tiptap/core/extensions/document-children'; import { DocumentChildren } from 'tiptap/core/extensions/document-children';
import { DocumentReference } from 'tiptap/core/extensions/document-reference'; import { DocumentReference } from 'tiptap/core/extensions/document-reference';
import { Flow } from 'tiptap/core/extensions/flow';
import { HardBreak } from 'tiptap/core/extensions/hard-break'; import { HardBreak } from 'tiptap/core/extensions/hard-break';
import { Heading } from 'tiptap/core/extensions/heading'; import { Heading } from 'tiptap/core/extensions/heading';
import { HorizontalRule } from 'tiptap/core/extensions/horizontal-rule'; import { HorizontalRule } from 'tiptap/core/extensions/horizontal-rule';
@ -125,6 +126,7 @@ const SerializerConfig = {
[Countdown.name]: renderCustomContainer('countdown'), [Countdown.name]: renderCustomContainer('countdown'),
[DocumentChildren.name]: renderCustomContainer('documentChildren'), [DocumentChildren.name]: renderCustomContainer('documentChildren'),
[DocumentReference.name]: renderCustomContainer('documentReference'), [DocumentReference.name]: renderCustomContainer('documentReference'),
[Flow.name]: renderCustomContainer('flow'),
[HardBreak.name]: renderHardBreak, [HardBreak.name]: renderHardBreak,
[Heading.name]: defaultMarkdownSerializer.nodes.heading, [Heading.name]: defaultMarkdownSerializer.nodes.heading,
[HorizontalRule.name]: defaultMarkdownSerializer.nodes.horizontal_rule, [HorizontalRule.name]: defaultMarkdownSerializer.nodes.horizontal_rule,