fix(Mermaid): fixed serialization of mermaid block inside other blocks (#577)

Author: d3m1d0v

src/extensions/additional/Mermaid/Mermaid.test.ts

@@ -1,8 +1,9 @@
 import {builders} from 'prosemirror-test-builder';
+import dd from 'ts-dedent';
 
 import {createMarkupChecker} from '../../../../tests/sameMarkup';
 import {ExtensionsManager} from '../../../core';
-import {BaseNode, BaseSchemaSpecs} from '../../specs';
+import {BaseNode, BaseSchemaSpecs, BlockquoteSpecs, blockquoteNodeName} from '../../specs';
 
 import {MermaidSpecs} from './MermaidSpecs';
 import {MermaidAttrs, mermaidNodeName} from './const';
@@ -12,17 +13,39 @@ const {
     markupParser: parser,
     serializer,
 } = new ExtensionsManager({
-    extensions: (builder) => builder.use(BaseSchemaSpecs, {}).use(MermaidSpecs, {}),
+    extensions: (builder) =>
+        builder.use(BaseSchemaSpecs, {}).use(BlockquoteSpecs).use(MermaidSpecs, {}),
 }).buildDeps();
 
-const {doc, mermaid} = builders<'doc' | 'mermaid'>(schema, {
+const {doc, mermaid, quote} = builders<'doc' | 'mermaid' | 'quote'>(schema, {
     doc: {nodeType: BaseNode.Doc},
     mermaid: {nodeType: mermaidNodeName},
+    quote: {nodeType: blockquoteNodeName},
 });
 
 const {same} = createMarkupChecker({parser, serializer});
 
 describe('Mermaid extension', () => {
     it('should parse mermaid', () =>
         same('```mermaid\ncontent\n```\n', doc(mermaid({[MermaidAttrs.content]: 'content\n'}))));
+
+    it('should parse mermaid inside blockqoute', () => {
+        const mermaidContent = dd`
+        sequenceDiagram
+          Alice->>Bob: Hi Bob
+          Bob->>Alice: Hi Alice
+
+        `;
+
+        const markup = dd`
+        > \`\`\`mermaid
+        > sequenceDiagram
+        >   Alice->>Bob: Hi Bob
+        >   Bob->>Alice: Hi Alice
+        > \`\`\`
+
+        `;
+
+        same(markup, doc(quote(mermaid({[MermaidAttrs.content]: mermaidContent}))));
+    });
 });

src/extensions/additional/Mermaid/MermaidSpecs/index.tsx

@@ -3,7 +3,7 @@ import {transform} from '@diplodoc/mermaid-extension';
 
 import type {ExtensionAuto, ExtensionNodeSpec} from '../../../../core';
 
-import {MermaidConsts, mermaidNodeName as mermaidNodeName} from './const';
+import {MermaidConsts, mermaidNodeName} from './const';
 export {mermaidNodeName} from './const';
 
 export type MermaidSpecsOptions = {
@@ -37,9 +37,11 @@ const MermaidSpecsExtension: ExtensionAuto<MermaidSpecsOptions> = (builder, {nod
                 dnd: {props: {offset: [8, 1]}},
             },
             toMd: (state, node) => {
-                state.write('```mermaid\n');
+                const content: string = node.attrs[MermaidConsts.NodeAttrs.content] || '';
+
+                state.write('```mermaid');
                 state.ensureNewLine();
-                state.write(node.attrs.content);
+                state.text(content.trim(), false);
                 state.ensureNewLine();
                 state.write('```');
                 state.ensureNewLine();