fix: review comments

src/config.ts

@@ -134,7 +134,7 @@ export const setConfig = (conf: MermaidConfig): MermaidConfig => {
  *
  * @returns {any} - The currentConfig
  */
-export const getConfig = () => {
+export const getConfig = (): MermaidConfig => {
   return assignWithDepth({}, currentConfig);
 };
 /**

src/config.type.ts

@@ -10,6 +10,7 @@ export interface MermaidConfig {
   darkMode?: boolean;
   htmlLabels?: boolean;
   fontFamily?: string;
+  altFontFamily?: string;
   logLevel?: number;
   securityLevel?: string;
   startOnLoad?: boolean;
@@ -225,6 +226,7 @@ export interface ErDiagramConfig extends BaseDiagramConfig {
 }
 
 export interface StateDiagramConfig extends BaseDiagramConfig {
+  arrowMarkerAbsolute?: boolean;
   dividerMargin?: number;
   sizeUnit?: number;
   padding?: number;

src/diagram-api/diagramAPI.ts

@@ -165,11 +165,10 @@ const diagrams: Record<string, DiagramDefinition> = {
     renderer: stateRenderer,
     parser: stateParser,
     init: (cnf) => {
-      // TODO Q: Why is state diagram init setting cnf.class.arrowMarkerAbsolute ?
+      if (!cnf.state) {
-      if (!cnf.class) {
+        cnf.state = {};
-        cnf.class = {};
       }
-      cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+      cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
       stateDb.clear();
     },
   },
@@ -178,11 +177,10 @@ const diagrams: Record<string, DiagramDefinition> = {
     renderer: stateRendererV2,
     parser: stateParser,
     init: (cnf) => {
-      // TODO Q: Why is state diagram init setting cnf.class.arrowMarkerAbsolute ?
+      if (!cnf.state) {
-      if (!cnf.class) {
+        cnf.state = {};
-        cnf.class = {};
       }
-      cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+      cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
       stateDb.clear();
     },
   },

src/diagrams/flowchart/flowRenderer.js

@@ -458,9 +458,7 @@ export const draw = function (text, id, _version, diagObj) {
   }
 
   // Add label rects for non html labels
-  // TODO: This always evaluates to true. Bug?
+  if (!conf.htmlLabels) {
-  // eslint-disable-next-line no-constant-condition
-  if (!evaluate(conf.htmlLabels) || true) {
     const labels = doc.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
     for (let k = 0; k < labels.length; k++) {
       const label = labels[k];

src/diagrams/state/stateRenderer-v2.js

@@ -248,7 +248,7 @@ export const draw = function (text, id, _version, diag) {
     dir = 'LR';
   }
 
-  const { securityLevel, state: conf } = getConfig().state;
+  const { securityLevel, state: conf } = getConfig();
   const nodeSpacing = conf.nodeSpacing || 50;
   const rankSpacing = conf.rankSpacing || 50;
 

src/mermaid.ts

@@ -61,10 +61,6 @@ const initThrowsErrors = function (
   }
 
   // if last argument is a function this is the callback function
-
-  if (!callback && typeof conf?.mermaid?.callback === 'function') {
-    callback = conf.mermaid.callback;
-  }
   log.debug(`${!callback ? 'No ' : ''}Callback function found`);
   let nodesToProcess: NodeListOf<HTMLElement>;
   if (typeof nodes === 'undefined') {

src/mermaidAPI.ts

@@ -103,20 +103,21 @@ export const decodeEntities = function (text: string): string {
  * });
  * ```
  *
- * @param {any} id The id of the element to be rendered
+ * @param {string} id The id of the element to be rendered
- * @param {any} text The graph definition
+ * @param {string} text The graph definition
- * @param {any} cb Callback which is called after rendering is finished with the svg code as inparam.
+ * @param {(svgCode: string, bindFunctions?: (element: Element) => void) => void} cb Callback which
- * @param {any} container Selector to element in which a div with the graph temporarily will be
+ *   is called after rendering is finished with the svg code as inparam.
+ * @param {Element} container Selector to element in which a div with the graph temporarily will be
  *   inserted. In one is provided a hidden div will be inserted in the body of the page instead. The
  *   element will be removed when rendering is completed.
- * @returns {any}
+ * @returns {void}
  */
 const render = function (
   id: string,
   text: string,
   cb: (svgCode: string, bindFunctions?: (element: Element) => void) => void,
   container: Element
-) {
+): void {
   configApi.reset();
   text = text.replace(/\r\n?/g, '\n'); // parser problems on CRLF ignore all CR and leave LF;;
   const graphInit = utils.detectInit(text);
@@ -129,7 +130,7 @@ const render = function (
   log.debug(cnf);
 
   // Check the maximum allowed text size
-  if (text.length > cnf.maxTextSize) {
+  if (text.length > cnf.maxTextSize!) {
     text = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';
   }
 
@@ -137,18 +138,6 @@ const render = function (
 
   // In regular execution the container will be the div with a mermaid class
   if (typeof container !== 'undefined') {
-    if (cnf.securityLevel === 'sandbox') {
-      // IF we are in sandboxed mode, we do everyting mermaid related
-      // in a sandboxed div
-      const iframe = select('body')
-        .append('iframe')
-        .attr('id', 'i' + id)
-        .attr('style', 'width: 100%; height: 100%;')
-        .attr('sandbox', '');
-      root = select(iframe.nodes()[0]!.contentDocument!.body);
-      root.node().style.margin = 0;
-    }
-
     // A container was provided by the caller
     if (container) {
       container.innerHTML = '';
@@ -190,11 +179,12 @@ const render = function (
 
     // Remove previous tpm element if it exists
     let element;
-    if (cnf.securityLevel !== 'sandbox') {
+    if (cnf.securityLevel === 'sandbox') {
-      element = document.querySelector('#' + 'd' + id);
+      element = document.querySelector('#i' + id);
     } else {
-      element = document.querySelector('#' + 'i' + id);
+      element = document.querySelector('#d' + id);
     }
+
     if (element) {
       element.remove();
     }
@@ -260,7 +250,7 @@ const render = function (
   // classDef
   if (graphType === 'flowchart' || graphType === 'flowchart-v2' || graphType === 'graph') {
     const classes: any = flowRenderer.getClasses(text, diag);
-    const htmlLabels = cnf.htmlLabels || cnf.flowchart.htmlLabels;
+    const htmlLabels = cnf.htmlLabels || cnf.flowchart?.htmlLabels;
     for (const className in classes) {
       if (htmlLabels) {
         userStyles += `\n.${className} > * { ${classes[className].styles.join(
@@ -318,10 +308,8 @@ const render = function (
   let svgCode = root.select('#d' + id).node().innerHTML;
 
   log.debug('cnf.arrowMarkerAbsolute', cnf.arrowMarkerAbsolute);
-  if (
+  // TODO Q: Needs verification.
-    (!cnf.arrowMarkerAbsolute || cnf.arrowMarkerAbsolute === 'false') &&
+  if (!cnf.arrowMarkerAbsolute && cnf.securityLevel !== 'sandbox') {
-    cnf.arrowMarkerAbsolute !== 'sandbox'
-  ) {
     svgCode = svgCode.replace(/marker-end="url\(.*?#/g, 'marker-end="url(#', 'g');
   }