Merge pull request #4514 from Yokozuna59/resolve-info-html-assignment

resolve info `HTML` and `Document` assignment

docs/config/setup/modules/mermaidAPI.md

@@ -96,7 +96,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:667](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L667)
+[mermaidAPI.ts:669](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L669)
 
 ## Functions
 
@@ -127,7 +127,7 @@ Return the last node appended
 
 #### Defined in
 
-[mermaidAPI.ts:308](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L308)
+[mermaidAPI.ts:310](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L310)
 
 ---
 
@@ -320,4 +320,4 @@ Remove any existing elements from the given document
 
 #### Defined in
 
-[mermaidAPI.ts:358](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L358)
+[mermaidAPI.ts:360](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L360)

packages/mermaid/src/diagram-api/types.ts

@@ -79,8 +79,10 @@ export type DrawDefinition = (
  */
 export type ParseDirectiveDefinition = (statement: string, context: string, type: string) => void;
 
-export type HTML = d3.Selection<HTMLIFrameElement, unknown, Element, unknown>;
+export type HTML = d3.Selection<HTMLIFrameElement, unknown, Element | null, unknown>;
 
-export type SVG = d3.Selection<SVGSVGElement, unknown, Element, unknown>;
+export type SVG = d3.Selection<SVGSVGElement, unknown, Element | null, unknown>;
+
+export type Group = d3.Selection<SVGGElement, unknown, Element | null, unknown>;
 
 export type DiagramStylesProvider = (options?: any) => string;

packages/mermaid/src/diagrams/info/infoRenderer.ts

@@ -1,7 +1,7 @@
-import { select } from 'd3';
 import { log } from '../../logger.js';
-import { getConfig } from '../../config.js';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
-import type { DrawDefinition, HTML, SVG } from '../../diagram-api/types.js';
+import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js';
+import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
 
 /**
  * Draws a an info picture in the tag with id: id based on the graph definition in text.
@@ -11,40 +11,20 @@ import type { DrawDefinition, HTML, SVG } from '../../diagram-api/types.js';
  * @param version - MermaidJS version.
  */
 const draw: DrawDefinition = (text, id, version) => {
-  try {
+  log.debug('rendering info diagram\n' + text);
-    log.debug('rendering info diagram\n' + text);
 
-    const { securityLevel } = getConfig();
+  const svg: SVG = selectSvgElement(id);
-    // handle root and document for when rendering in sandbox mode
+  configureSvgSize(svg, 100, 400, true);
-    let sandboxElement: HTML | undefined;
-    let document: Document | null | undefined;
-    if (securityLevel === 'sandbox') {
-      sandboxElement = select('#i' + id);
-      document = sandboxElement.nodes()[0].contentDocument;
-    }
 
-    // @ts-ignore - figure out how to assign HTML to document type
+  const group: Group = svg.append('g');
-    const root: HTML =
+  group
-      sandboxElement !== undefined && document !== undefined && document !== null
+    .append('text')
-        ? select(document)
+    .attr('x', 100)
-        : select('body');
+    .attr('y', 40)
-
+    .attr('class', 'version')
-    const svg: SVG = root.select('#' + id);
+    .attr('font-size', 32)
-    svg.attr('height', 100);
+    .style('text-anchor', 'middle')
-    svg.attr('width', 400);
+    .text(`v${version}`);
-
-    const g = svg.append('g');
-
-    g.append('text') // text label for the x axis
-      .attr('x', 100)
-      .attr('y', 40)
-      .attr('class', 'version')
-      .attr('font-size', '32px')
-      .style('text-anchor', 'middle')
-      .text('v ' + version);
-  } catch (e) {
-    log.error('error while rendering info diagram', e);
-  }
 };
 
 export const renderer = { draw };

packages/mermaid/src/mermaidAPI.ts

@@ -285,7 +285,9 @@ export const cleanUpSvgCode = (
  * TODO replace btoa(). Replace with  buf.toString('base64')?
  */
 export const putIntoIFrame = (svgCode = '', svgElement?: D3Element): string => {
-  const height = svgElement ? svgElement.viewBox.baseVal.height + 'px' : IFRAME_HEIGHT;
+  const height = svgElement?.viewBox?.baseVal?.height
+    ? svgElement.viewBox.baseVal.height + 'px'
+    : IFRAME_HEIGHT;
   const base64encodedSrc = btoa('<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}">
   ${IFRAME_NOT_SUPPORTED_MSG}

packages/mermaid/src/rendering-util/selectSvgElement.ts

@@ -0,0 +1,22 @@
+import { select } from 'd3';
+import { getConfig } from '../config.js';
+import type { HTML, SVG } from '../diagram-api/types.js';
+
+/**
+ * Selects the SVG element using {@link id}.
+ *
+ * @param id - The diagram ID.
+ * @returns The selected {@link SVG} element using {@link id}.
+ */
+export const selectSvgElement = (id: string): SVG => {
+  const { securityLevel } = getConfig();
+  // handle root and document for when rendering in sandbox mode
+  let root: HTML = select('body');
+  if (securityLevel === 'sandbox') {
+    const sandboxElement: HTML = select(`#i${id}`);
+    const doc: Document = sandboxElement.node()?.contentDocument ?? document;
+    root = select(doc.body as HTMLIFrameElement);
+  }
+  const svg: SVG = root.select(`#${id}`);
+  return svg;
+};

packages/mermaid/src/setupGraphViewbox.js

@@ -1,4 +1,5 @@
 import { log } from './logger.js';
+import { SVG } from './diagram-api/types.js';
 
 /**
  * Applies d3 attributes
@@ -35,7 +36,7 @@ export const calculateSvgSizeAttrs = function (height, width, useMaxWidth) {
 /**
  * Applies attributes from `calculateSvgSizeAttrs`
  *
- * @param {SVGSVGElement} svgElem The SVG Element to configure
+ * @param {SVG} svgElem The SVG Element to configure
  * @param {number} height The height of the SVG
  * @param {number} width The width of the SVG
  * @param {boolean} useMaxWidth Whether or not to use max-width and set width to 100%