diff --git a/packages/mermaid/src/rendering-util/splitText.spec.ts b/packages/mermaid/src/rendering-util/splitText.spec.ts index a09d683d3..95512edfb 100644 --- a/packages/mermaid/src/rendering-util/splitText.spec.ts +++ b/packages/mermaid/src/rendering-util/splitText.spec.ts @@ -53,6 +53,8 @@ describe('split lines', () => { { str: 'hello 12 world', width: 4, split: ['hell', 'o 12', 'worl', 'd'] }, { str: 'hello 1 2 world', width: 4, split: ['hell', 'o 1', '2', 'worl', 'd'] }, { str: 'hello 1 2 world', width: 6, split: ['hello', ' 1 2', 'world'] }, + // width = 0, impossible, so split into individual characters + { str: '🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻', width: 0, split: ['🏳️‍⚧️', '🏳️‍🌈', '👩🏾‍❤️‍👨🏻'] }, { str: '🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻', width: 1, split: ['🏳️‍⚧️', '🏳️‍🌈', '👩🏾‍❤️‍👨🏻'] }, { str: '🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻', width: 2, split: ['🏳️‍⚧️🏳️‍🌈', '👩🏾‍❤️‍👨🏻'] }, { str: '🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻', width: 3, split: ['🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻'] }, diff --git a/packages/mermaid/src/rendering-util/splitText.ts b/packages/mermaid/src/rendering-util/splitText.ts index f32f3aacf..64a6cebbe 100644 --- a/packages/mermaid/src/rendering-util/splitText.ts +++ b/packages/mermaid/src/rendering-util/splitText.ts @@ -67,6 +67,11 @@ function splitWordToFitWidthRecursion( if (checkFit([{ content: newWord.join(''), type }])) { return splitWordToFitWidthRecursion(checkFit, newWord, rest, type); } + if (usedChars.length === 0 && nextChar) { + // If the first character does not fit, split it anyway + usedChars.push(nextChar); + remainingChars.shift(); + } return [ { content: usedChars.join(''), type }, { content: remainingChars.join(''), type }, @@ -127,7 +132,9 @@ function splitLineToFitWidthRecursion( // There was no text in newLine, so we need to split nextWord const [line, rest] = splitWordToFitWidth(checkFit, nextWord); lines.push([line]); - words.unshift(rest); + if (rest.content) { + words.unshift(rest); + } } return splitLineToFitWidthRecursion(words, checkFit, lines); }