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?