marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-20 14:39:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

Encode string to UTF-8 before encoding to Base64

Browse Source
This commit is contained in:
Ian Sanders
2024-05-14 13:57:32 -04:00
parent 0326d899c4
commit dfa71317ad
3 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/mermaid/src/mermaidAPI.spec.ts
View File

@@ -176,7 +176,7 @@ describe('mermaidAPI', () => {
}); });
describe('putIntoIFrame', () => { describe('putIntoIFrame', () => {
const inputSvgCode = 'this is the SVG code'; const inputSvgCode = 'this is the SVG code ⛵';
it('uses the default SVG iFrame height is used if no svgElement given', () => { it('uses the default SVG iFrame height is used if no svgElement given', () => {
const result = putIntoIFrame(inputSvgCode); const result = putIntoIFrame(inputSvgCode);

4
packages/mermaid/src/mermaidAPI.ts
View File

@@ -31,6 +31,7 @@ import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.
import type { DiagramMetadata, DiagramStyleClassDef } from './diagram-api/types.js'; import type { DiagramMetadata, DiagramStyleClassDef } from './diagram-api/types.js';
import { preprocessDiagram } from './preprocess.js'; import { preprocessDiagram } from './preprocess.js';
import { decodeEntities } from './utils.js'; import { decodeEntities } from './utils.js';
import {toBase64} from './utils/base64.js';
const MAX_TEXTLENGTH = 50_000; const MAX_TEXTLENGTH = 50_000;
const MAX_TEXTLENGTH_EXCEEDED_MSG = const MAX_TEXTLENGTH_EXCEEDED_MSG =
@@ -249,13 +250,12 @@ export const cleanUpSvgCode = (
* @param svgCode - the svg code to put inside the iFrame * @param svgCode - the svg code to put inside the iFrame
* @param svgElement - the d3 node that has the current svgElement so we can get the height from it * @param svgElement - the d3 node that has the current svgElement so we can get the height from it
* @returns - the code with the iFrame that now contains the svgCode * @returns - the code with the iFrame that now contains the svgCode
* TODO replace btoa(). Replace with buf.toString('base64')?
*/ */
export const putIntoIFrame = (svgCode = '', svgElement?: D3Element): string => { export const putIntoIFrame = (svgCode = '', svgElement?: D3Element): string => {
const height = svgElement?.viewBox?.baseVal?.height const height = svgElement?.viewBox?.baseVal?.height
? svgElement.viewBox.baseVal.height + 'px' ? svgElement.viewBox.baseVal.height + 'px'
: IFRAME_HEIGHT; : IFRAME_HEIGHT;
const base64encodedSrc = btoa('<body style="' + IFRAME_BODY_STYLE + '">' + svgCode + '</body>'); const base64encodedSrc = toBase64('<body style="' + IFRAME_BODY_STYLE + '">' + svgCode + '</body>');
return `<iframe style="width:${IFRAME_WIDTH};height:${height};${IFRAME_STYLES}" src="data:text/html;base64,${base64encodedSrc}" sandbox="${IFRAME_SANDBOX_OPTS}"> return `<iframe style="width:${IFRAME_WIDTH};height:${height};${IFRAME_STYLES}" src="data:text/html;base64,${base64encodedSrc}" sandbox="${IFRAME_SANDBOX_OPTS}">
${IFRAME_NOT_SUPPORTED_MSG} ${IFRAME_NOT_SUPPORTED_MSG}
</iframe>`; </iframe>`;

6
packages/mermaid/src/utils/base64.ts Normal file
View File

@@ -0,0 +1,6 @@
export function toBase64(str: string) {
// ref: https://developer.mozilla.org/en-US/docs/Glossary/Base64#the_unicode_problem
const utf8Bytes = new TextEncoder().encode(str);
const utf8Str = Array.from(utf8Bytes, (byte) => String.fromCodePoint(byte)).join('');
return btoa(utf8Str);
}