diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index fa981df78..fe119fdb9 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -852,7 +852,10 @@ This feature is applicable to node labels, edge labels, and subgraph labels. The auto wrapping can be disabled by using - %%{init: {"markdownAutoWrap": false} }%% + --- + config: + markdownAutoWrap: false + --- graph LR ## Interaction diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index b875a2949..462a9aecc 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -540,7 +540,10 @@ This feature is applicable to node labels, edge labels, and subgraph labels. The auto wrapping can be disabled by using ``` -%%{init: {"markdownAutoWrap": false} }%% +--- +config: + markdownAutoWrap: false +--- graph LR ``` diff --git a/packages/mermaid/src/rendering-util/createText.ts b/packages/mermaid/src/rendering-util/createText.ts index e53c18725..c50a019f1 100644 --- a/packages/mermaid/src/rendering-util/createText.ts +++ b/packages/mermaid/src/rendering-util/createText.ts @@ -1,5 +1,6 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ // @ts-nocheck TODO: Fix types +import type { MermaidConfig } from '../config.type.js'; import type { Group } from '../diagram-api/types.js'; import type { D3TSpanElement, D3TextElement } from '../diagrams/common/commonTypes.js'; import { log } from '../logger.js'; @@ -181,13 +182,14 @@ export const createText = ( isNode = true, width = 200, addSvgBackground = false, - } = {} + } = {}, + config: MermaidConfig = {} ) => { log.info('createText', text, style, isTitle, classes, useHtmlLabels, isNode, addSvgBackground); if (useHtmlLabels) { // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that? - const htmlText = markdownToHTML(text); + const htmlText = markdownToHTML(text, config); const node = { isNode, label: decodeEntities(htmlText).replace( @@ -199,7 +201,7 @@ export const createText = ( const vertexNode = addHtmlSpan(el, node, width, classes, addSvgBackground); return vertexNode; } else { - const structuredText = markdownToLines(text); + const structuredText = markdownToLines(text, config); const svgLabel = createFormattedText(width, el, structuredText, addSvgBackground); return svgLabel; } diff --git a/packages/mermaid/src/rendering-util/handle-markdown-text.spec.ts b/packages/mermaid/src/rendering-util/handle-markdown-text.spec.ts index 55c40127f..7362e6f70 100644 --- a/packages/mermaid/src/rendering-util/handle-markdown-text.spec.ts +++ b/packages/mermaid/src/rendering-util/handle-markdown-text.spec.ts @@ -1,6 +1,6 @@ +/* eslint-disable no-irregular-whitespace */ import { markdownToLines, markdownToHTML } from './handle-markdown-text.js'; import { test, expect } from 'vitest'; -import { setConfig } from '../config.js'; test('markdownToLines - Basic test', () => { const input = `This is regular text @@ -204,6 +204,31 @@ Word!`; expect(output).toEqual(expectedOutput); }); +test('markdownToLines - No auto wrapping', () => { + expect( + markdownToLines( + `Hello, how do + you do?`, + { markdownAutoWrap: false } + ) + ).toMatchInlineSnapshot(` + [ + [ + { + "content": "Hello, how do", + "type": "normal", + }, + ], + [ + { + "content": "you do?", + "type": "normal", + }, + ], + ] + `); +}); + test('markdownToHTML - Basic test', () => { const input = `This is regular text Here is a new line @@ -265,9 +290,11 @@ test('markdownToHTML - Unsupported formatting', () => { }); test('markdownToHTML - no auto wrapping', () => { - setConfig({ markdownAutoWrap: false }); expect( - markdownToHTML(`Hello, how do - you do?`) + markdownToHTML( + `Hello, how do + you do?`, + { markdownAutoWrap: false } + ) ).toMatchInlineSnapshot('"

Hello, how do
you do?

"'); }); diff --git a/packages/mermaid/src/rendering-util/handle-markdown-text.ts b/packages/mermaid/src/rendering-util/handle-markdown-text.ts index cde16bc11..c539f7268 100644 --- a/packages/mermaid/src/rendering-util/handle-markdown-text.ts +++ b/packages/mermaid/src/rendering-util/handle-markdown-text.ts @@ -2,14 +2,13 @@ import type { Content } from 'mdast'; import { fromMarkdown } from 'mdast-util-from-markdown'; import { dedent } from 'ts-dedent'; import type { MarkdownLine, MarkdownWordType } from './types.js'; -import { getConfig } from '../config.js'; +import type { MermaidConfig } from '../config.type.js'; /** * @param markdown - markdown to process * @returns processed markdown */ -function preprocessMarkdown(markdown: string): string { - const markdownAutoWrap = getConfig().markdownAutoWrap; +function preprocessMarkdown(markdown: string, { markdownAutoWrap }: MermaidConfig): string { // Replace multiple newlines with a single newline const withoutMultipleNewlines = markdown.replace(/\n{2,}/g, '\n'); // Remove extra spaces at the beginning of each line @@ -23,8 +22,8 @@ function preprocessMarkdown(markdown: string): string { /** * @param markdown - markdown to split into lines */ -export function markdownToLines(markdown: string): MarkdownLine[] { - const preprocessedMarkdown = preprocessMarkdown(markdown); +export function markdownToLines(markdown: string, config: MermaidConfig = {}): MarkdownLine[] { + const preprocessedMarkdown = preprocessMarkdown(markdown, config); const { children } = fromMarkdown(preprocessedMarkdown); const lines: MarkdownLine[] = [[]]; let currentLine = 0; @@ -61,17 +60,15 @@ export function markdownToLines(markdown: string): MarkdownLine[] { return lines; } -export function markdownToHTML(markdown: string) { +export function markdownToHTML(markdown: string, { markdownAutoWrap }: MermaidConfig = {}) { const { children } = fromMarkdown(markdown); - const markdownAutoWrap = getConfig().markdownAutoWrap; function output(node: Content): string { if (node.type === 'text') { if (markdownAutoWrap === false) { return node.value.replace(/\n/g, '
').replace(/ /g, ' '); - } else { - return node.value.replace(/\n/g, '
'); } + return node.value.replace(/\n/g, '
'); } else if (node.type === 'strong') { return `${node.children.map(output).join('')}`; } else if (node.type === 'emphasis') { diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index f613f8664..769e0a028 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -237,6 +237,7 @@ properties: default: 16 markdownAutoWrap: type: boolean + default: true $defs: # JSON Schema definition (maybe we should move these to a separate file) BaseDiagramConfig: