From 390e22cc0b13c809ef790e3054e0ea1f384fed19 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Tue, 31 Oct 2023 18:28:45 +0530 Subject: [PATCH 1/6] fix: getMessageAPI so it considers entity codes --- packages/mermaid/src/Diagram.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts index b77091f28c..4fc12d1036 100644 --- a/packages/mermaid/src/Diagram.ts +++ b/packages/mermaid/src/Diagram.ts @@ -5,6 +5,7 @@ import { detectType, getDiagramLoader } from './diagram-api/detectType.js'; import { UnknownDiagramError } from './errors.js'; import type { DetailedError } from './utils.js'; import type { DiagramDefinition, DiagramMetadata } from './diagram-api/types.js'; +import { encodeEntities } from './mermaidAPI.js'; export type ParseErrorFunction = (err: string | DetailedError | unknown, hash?: any) => void; @@ -81,6 +82,8 @@ export const getDiagramFromText = async ( text: string, metadata: Pick = {} ): Promise => { + text = encodeEntities(text); + const type = detectType(text, configApi.getConfig()); try { // Trying to find the diagram From fff25e7e2cec66e432756ec742ad8e6bbb864762 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Tue, 31 Oct 2023 19:32:20 +0530 Subject: [PATCH 2/6] add spec --- packages/mermaid/src/diagram-api/types.ts | 9 +++++++++ packages/mermaid/src/diagram.spec.ts | 14 ++++++++++++++ packages/mermaid/src/mermaidAPI.ts | 2 -- 3 files changed, 23 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts index 58d98107ea..232550b4f0 100644 --- a/packages/mermaid/src/diagram-api/types.ts +++ b/packages/mermaid/src/diagram-api/types.ts @@ -19,6 +19,14 @@ export interface InjectUtils { _parseDirective: any; } +export type Message = { + type: number; + to: string; + from: string; + message: string; + wrap: boolean; +}; + /** * Generic Diagram DB that may apply to any diagram type. */ @@ -37,6 +45,7 @@ export interface DiagramDB { setDisplayMode?: (title: string) => void; bindFunctions?: (element: Element) => void; + getMessages?: () => Message[]; } // This is what is returned from getClasses(...) methods. diff --git a/packages/mermaid/src/diagram.spec.ts b/packages/mermaid/src/diagram.spec.ts index 19a65b716b..4e3c4884d1 100644 --- a/packages/mermaid/src/diagram.spec.ts +++ b/packages/mermaid/src/diagram.spec.ts @@ -69,4 +69,18 @@ Expecting 'TXT', got 'NEWLINE'" '"No diagram type detected matching given configuration for text: thor TD; A-->B"' ); }); + + test('should consider entity codes when present in diagram defination', async () => { + const diagram = await getDiagramFromText(`sequenceDiagram + A->>B: I #9829; you! + B->>A: I #9829; you #infin; times more!`); + const messages = diagram.db?.getMessages?.(); + if (!messages) { + throw new Error('Messages not found!'); + } + const result = ['I fl°°9829¶ß you!', 'I fl°°9829¶ß you fl°infin¶ß times more!']; + messages.forEach((message, index: number) => { + expect(message.message).toBe(result[index]); + }); + }); }); diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts index 5250f0b190..9637eca002 100644 --- a/packages/mermaid/src/mermaidAPI.ts +++ b/packages/mermaid/src/mermaidAPI.ts @@ -436,8 +436,6 @@ const render = async function ( appendDivSvgG(root, id, enclosingDivID); } - text = encodeEntities(text); - // ------------------------------------------------------------------------------- // Create the diagram From 6e6e92a1d13e3742c6e340d3271a597668059143 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Fri, 3 Nov 2023 13:16:30 +0530 Subject: [PATCH 3/6] review fixes --- packages/mermaid/src/Diagram.ts | 3 +- packages/mermaid/src/diagram-api/types.ts | 9 ------ packages/mermaid/src/diagram.spec.ts | 8 ++--- packages/mermaid/src/mermaidAPI.spec.ts | 3 +- packages/mermaid/src/mermaidAPI.ts | 38 +---------------------- packages/mermaid/src/utils.ts | 37 ++++++++++++++++++++++ 6 files changed, 44 insertions(+), 54 deletions(-) diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts index 4fc12d1036..37795ed62e 100644 --- a/packages/mermaid/src/Diagram.ts +++ b/packages/mermaid/src/Diagram.ts @@ -3,9 +3,8 @@ import { log } from './logger.js'; import { getDiagram, registerDiagram } from './diagram-api/diagramAPI.js'; import { detectType, getDiagramLoader } from './diagram-api/detectType.js'; import { UnknownDiagramError } from './errors.js'; -import type { DetailedError } from './utils.js'; +import { encodeEntities, type DetailedError } from './utils.js'; import type { DiagramDefinition, DiagramMetadata } from './diagram-api/types.js'; -import { encodeEntities } from './mermaidAPI.js'; export type ParseErrorFunction = (err: string | DetailedError | unknown, hash?: any) => void; diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts index 232550b4f0..58d98107ea 100644 --- a/packages/mermaid/src/diagram-api/types.ts +++ b/packages/mermaid/src/diagram-api/types.ts @@ -19,14 +19,6 @@ export interface InjectUtils { _parseDirective: any; } -export type Message = { - type: number; - to: string; - from: string; - message: string; - wrap: boolean; -}; - /** * Generic Diagram DB that may apply to any diagram type. */ @@ -45,7 +37,6 @@ export interface DiagramDB { setDisplayMode?: (title: string) => void; bindFunctions?: (element: Element) => void; - getMessages?: () => Message[]; } // This is what is returned from getClasses(...) methods. diff --git a/packages/mermaid/src/diagram.spec.ts b/packages/mermaid/src/diagram.spec.ts index 4e3c4884d1..2a84736808 100644 --- a/packages/mermaid/src/diagram.spec.ts +++ b/packages/mermaid/src/diagram.spec.ts @@ -74,13 +74,13 @@ Expecting 'TXT', got 'NEWLINE'" const diagram = await getDiagramFromText(`sequenceDiagram A->>B: I #9829; you! B->>A: I #9829; you #infin; times more!`); + //@ts-ignore const messages = diagram.db?.getMessages?.(); if (!messages) { throw new Error('Messages not found!'); } - const result = ['I fl°°9829¶ß you!', 'I fl°°9829¶ß you fl°infin¶ß times more!']; - messages.forEach((message, index: number) => { - expect(message.message).toBe(result[index]); - }); + + expect(messages[0].message).toBe('I fl°°9829¶ß you!'); + expect(messages[1].message).toBe('I fl°°9829¶ß you fl°infin¶ß times more!'); }); }); diff --git a/packages/mermaid/src/mermaidAPI.spec.ts b/packages/mermaid/src/mermaidAPI.spec.ts index a79fd44c4a..32647ee625 100644 --- a/packages/mermaid/src/mermaidAPI.spec.ts +++ b/packages/mermaid/src/mermaidAPI.spec.ts @@ -38,8 +38,6 @@ import type { MermaidConfig } from './config.type.js'; import mermaidAPI, { removeExistingElements } from './mermaidAPI.js'; import { - encodeEntities, - decodeEntities, createCssStyles, createUserStyles, appendDivSvgG, @@ -68,6 +66,7 @@ vi.mock('stylis', () => { }; }); import { compile, serialize } from 'stylis'; +import { decodeEntities, encodeEntities } from './utils.js'; /** * @see https://vitest.dev/guide/mocking.html Mock part of a module diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts index 9637eca002..09d0077803 100644 --- a/packages/mermaid/src/mermaidAPI.ts +++ b/packages/mermaid/src/mermaidAPI.ts @@ -30,6 +30,7 @@ import isEmpty from 'lodash-es/isEmpty.js'; import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.js'; import type { DiagramStyleClassDef } from './diagram-api/types.js'; import { preprocessDiagram } from './preprocess.js'; +import { decodeEntities } from './utils.js'; const MAX_TEXTLENGTH = 50_000; const MAX_TEXTLENGTH_EXCEEDED_MSG = @@ -110,43 +111,6 @@ async function parse(text: string, parseOptions?: ParseOptions): Promise Date: Fri, 3 Nov 2023 13:25:26 +0530 Subject: [PATCH 4/6] move decodeEntities to utils --- packages/mermaid/src/Diagram.ts | 4 +++- packages/mermaid/src/dagre-wrapper/createLabel.js | 2 +- packages/mermaid/src/dagre-wrapper/shapes/util.js | 2 +- packages/mermaid/src/rendering-util/createText.ts | 2 +- 4 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts index 37795ed62e..f1d1bc6e8e 100644 --- a/packages/mermaid/src/Diagram.ts +++ b/packages/mermaid/src/Diagram.ts @@ -3,7 +3,9 @@ import { log } from './logger.js'; import { getDiagram, registerDiagram } from './diagram-api/diagramAPI.js'; import { detectType, getDiagramLoader } from './diagram-api/detectType.js'; import { UnknownDiagramError } from './errors.js'; -import { encodeEntities, type DetailedError } from './utils.js'; +import { encodeEntities } from './utils.js'; + +import type { DetailedError } from './utils.js'; import type { DiagramDefinition, DiagramMetadata } from './diagram-api/types.js'; export type ParseErrorFunction = (err: string | DetailedError | unknown, hash?: any) => void; diff --git a/packages/mermaid/src/dagre-wrapper/createLabel.js b/packages/mermaid/src/dagre-wrapper/createLabel.js index c120f2083c..4c947879cb 100644 --- a/packages/mermaid/src/dagre-wrapper/createLabel.js +++ b/packages/mermaid/src/dagre-wrapper/createLabel.js @@ -2,7 +2,7 @@ import { select } from 'd3'; import { log } from '../logger.js'; import { getConfig } from '../diagram-api/diagramAPI.js'; import { evaluate } from '../diagrams/common/common.js'; -import { decodeEntities } from '../mermaidAPI.js'; +import { decodeEntities } from '../utils.js'; /** * @param dom diff --git a/packages/mermaid/src/dagre-wrapper/shapes/util.js b/packages/mermaid/src/dagre-wrapper/shapes/util.js index fbcb5198fb..079125e3a6 100644 --- a/packages/mermaid/src/dagre-wrapper/shapes/util.js +++ b/packages/mermaid/src/dagre-wrapper/shapes/util.js @@ -1,9 +1,9 @@ import createLabel from '../createLabel.js'; import { createText } from '../../rendering-util/createText.js'; import { getConfig } from '../../diagram-api/diagramAPI.js'; -import { decodeEntities } from '../../mermaidAPI.js'; import { select } from 'd3'; import { evaluate, sanitizeText } from '../../diagrams/common/common.js'; +import { decodeEntities } from '../../utils.js'; export const labelHelper = async (parent, node, _classes, isNode) => { let classes; diff --git a/packages/mermaid/src/rendering-util/createText.ts b/packages/mermaid/src/rendering-util/createText.ts index a15b921939..2b48cf5f3a 100644 --- a/packages/mermaid/src/rendering-util/createText.ts +++ b/packages/mermaid/src/rendering-util/createText.ts @@ -3,8 +3,8 @@ import type { Group } from '../diagram-api/types.js'; import type { D3TSpanElement, D3TextElement } from '../diagrams/common/commonTypes.js'; import { log } from '../logger.js'; -import { decodeEntities } from '../mermaidAPI.js'; import { markdownToHTML, markdownToLines } from '../rendering-util/handle-markdown-text.js'; +import { decodeEntities } from '../utils.js'; import { splitLineToFitWidth } from './splitText.js'; import type { MarkdownLine, MarkdownWord } from './types.js'; From a818f3e3ae6cf83436db51b5b0f8b9af7b3a9838 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Fri, 3 Nov 2023 13:31:21 +0530 Subject: [PATCH 5/6] add comment for ts ignore --- packages/mermaid/src/diagram.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagram.spec.ts b/packages/mermaid/src/diagram.spec.ts index 2a84736808..4354f57bce 100644 --- a/packages/mermaid/src/diagram.spec.ts +++ b/packages/mermaid/src/diagram.spec.ts @@ -74,7 +74,7 @@ Expecting 'TXT', got 'NEWLINE'" const diagram = await getDiagramFromText(`sequenceDiagram A->>B: I #9829; you! B->>A: I #9829; you #infin; times more!`); - //@ts-ignore + // @ts-ignore: we need to add types for sequenceDb which will be done in separate PR const messages = diagram.db?.getMessages?.(); if (!messages) { throw new Error('Messages not found!'); From dff13439f635d9b46b97a259c1b418296b876809 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Mon, 6 Nov 2023 12:17:43 +0530 Subject: [PATCH 6/6] review fixes --- .../interfaces/mermaidAPI.ParseOptions.md | 2 +- .../interfaces/mermaidAPI.RenderResult.md | 4 +- docs/config/setup/modules/mermaidAPI.md | 58 +++---------------- packages/mermaid/src/Diagram.ts | 3 +- 4 files changed, 13 insertions(+), 54 deletions(-) diff --git a/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md b/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md index ea390899e4..4386be9380 100644 --- a/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md +++ b/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md @@ -16,4 +16,4 @@ #### Defined in -[mermaidAPI.ts:59](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L59) +[mermaidAPI.ts:60](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L60) diff --git a/docs/config/setup/interfaces/mermaidAPI.RenderResult.md b/docs/config/setup/interfaces/mermaidAPI.RenderResult.md index 18ee5e4316..6209782f75 100644 --- a/docs/config/setup/interfaces/mermaidAPI.RenderResult.md +++ b/docs/config/setup/interfaces/mermaidAPI.RenderResult.md @@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present. #### Defined in -[mermaidAPI.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L79) +[mermaidAPI.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L80) --- @@ -51,4 +51,4 @@ The svg code for the rendered graph. #### Defined in -[mermaidAPI.ts:69](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L69) +[mermaidAPI.ts:70](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L70) diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md index 0a948b6f39..6337807883 100644 --- a/docs/config/setup/modules/mermaidAPI.md +++ b/docs/config/setup/modules/mermaidAPI.md @@ -25,7 +25,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi) #### Defined in -[mermaidAPI.ts:63](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L63) +[mermaidAPI.ts:64](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L64) ## Variables @@ -96,7 +96,7 @@ mermaid.initialize(config); #### Defined in -[mermaidAPI.ts:641](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L641) +[mermaidAPI.ts:603](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L603) ## Functions @@ -127,7 +127,7 @@ Return the last node appended #### Defined in -[mermaidAPI.ts:299](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L299) +[mermaidAPI.ts:263](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L263) --- @@ -153,7 +153,7 @@ the cleaned up svgCode #### Defined in -[mermaidAPI.ts:245](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L245) +[mermaidAPI.ts:209](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L209) --- @@ -178,7 +178,7 @@ the string with all the user styles #### Defined in -[mermaidAPI.ts:175](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L175) +[mermaidAPI.ts:139](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L139) --- @@ -201,7 +201,7 @@ the string with all the user styles #### Defined in -[mermaidAPI.ts:222](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L222) +[mermaidAPI.ts:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L186) --- @@ -228,47 +228,7 @@ with an enclosing block that has each of the cssClasses followed by !important; #### Defined in -[mermaidAPI.ts:160](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L160) - ---- - -### decodeEntities - -▸ **decodeEntities**(`text`): `string` - -#### Parameters - -| Name | Type | Description | -| :----- | :------- | :----------------- | -| `text` | `string` | text to be decoded | - -#### Returns - -`string` - -#### Defined in - -[mermaidAPI.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L146) - ---- - -### encodeEntities - -▸ **encodeEntities**(`text`): `string` - -#### Parameters - -| Name | Type | Description | -| :----- | :------- | :----------------- | -| `text` | `string` | text to be encoded | - -#### Returns - -`string` - -#### Defined in - -[mermaidAPI.ts:117](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L117) +[mermaidAPI.ts:124](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L124) --- @@ -294,7 +254,7 @@ Put the svgCode into an iFrame. Return the iFrame code #### Defined in -[mermaidAPI.ts:276](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L276) +[mermaidAPI.ts:240](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L240) --- @@ -319,4 +279,4 @@ Remove any existing elements from the given document #### Defined in -[mermaidAPI.ts:349](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L349) +[mermaidAPI.ts:313](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L313) diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts index f1d1bc6e8e..2b5ae89923 100644 --- a/packages/mermaid/src/Diagram.ts +++ b/packages/mermaid/src/Diagram.ts @@ -23,6 +23,7 @@ export class Diagram { private detectError?: UnknownDiagramError; constructor(public text: string, public metadata: Pick = {}) { + this.text = encodeEntities(text); this.text += '\n'; const cnf = configApi.getConfig(); try { @@ -83,8 +84,6 @@ export const getDiagramFromText = async ( text: string, metadata: Pick = {} ): Promise => { - text = encodeEntities(text); - const type = detectType(text, configApi.getConfig()); try { // Trying to find the diagram