chore(katex): lint:fix

packages/mermaid/src/defaultConfig.ts

@@ -132,7 +132,7 @@ const config: Partial<MermaidConfig> = {
    */
   secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
   /**
-   * This option specifies if Mermaid can expected the dependnet to include KaTeX stylesheets for browsers
+   * This option specifies if Mermaid can expected the dependent to include KaTeX stylesheets for browsers
    * without their own MathML implementation. If this option is disabled and MathML is not supported, the math
    * equations are replaced with a warning. If this option is enabled and MathML is not supported, Mermaid will
    * fall back to legacy rendering for KaTeX.

packages/mermaid/src/diagrams/common/common.ts

@@ -172,7 +172,6 @@ export const parseGenericTypes = function (text: string): string {
   }
 };
 
-
 // TODO: find a better method for detecting support. This interface was added in the MathML 4 spec.
 // Firefox versions between [4,71] (0.47%) and Safari versions between [5,13.4] (0.17%) don't have this interface implemented but MathML is supported
 export const isMathMLSupported = window.MathMLElement !== undefined;
@@ -188,16 +187,15 @@ export const katexRegex = /\$\$(.*)\$\$/g;
 export const hasKatex = (text: string): boolean => (text.match(katexRegex)?.length ?? 0) > 0;
 
 /**
- * Computes the minimum dimensions needed to display a div contianing MathML
+ * Computes the minimum dimensions needed to display a div containing MathML
  *
  * @param text - The text to test
  * @param config - Configuration for Mermaid
- * @returns Object containing {width, height}
+ * @returns Object containing \{width, height\}
  */
 export const calculateMathMLDimensions = (text: string, config: MermaidConfig) => {
-
   text = renderKatex(text, config);
-  const divElem = document.createElement('div')
+  const divElem = document.createElement('div');
   divElem.innerHTML = text;
   divElem.id = 'katex-temp';
   divElem.style.visibility = 'hidden';
@@ -205,10 +203,10 @@ export const calculateMathMLDimensions = (text: string, config: MermaidConfig) =
   divElem.style.top = '0';
   const body = document.querySelector('body');
   body?.insertAdjacentElement('beforeend', divElem);
-  const dim = {width: divElem.clientWidth, height: divElem.clientHeight};
+  const dim = { width: divElem.clientWidth, height: divElem.clientHeight };
   divElem.remove();
   return dim;
-}
+};
 
 // export const temp = (text: string, config: MermaidConfig) => {
 //   return renderKatex(text, config).split(lineBreakRegex).map((text) =>
@@ -228,21 +226,26 @@ export const renderKatex = (text: string, config: MermaidConfig): string => {
   if (isMathMLSupported || (!isMathMLSupported && config.legacyMathML)) {
     return text
       .split(lineBreakRegex)
-        .map((line) => hasKatex(line) ?
+      .map((line) =>
-          `
+        hasKatex(line)
+          ? `
             <div style="display: flex; align-items: center; justify-content: center; white-space: nowrap;">
               ${line}
             </div>
-          ` :
+          `
-          `<div>${line}</div>`
+          : `<div>${line}</div>`
       )
       .join('')
       .replace(katexRegex, (r, c) =>
         katex
-          .renderToString(c, { throwOnError: true, displayMode: true, output: isMathMLSupported ? 'mathml' : 'htmlAndMathml' })
+          .renderToString(c, {
+            throwOnError: true,
+            displayMode: true,
+            output: isMathMLSupported ? 'mathml' : 'htmlAndMathml',
+          })
           .replace(/\n/g, ' ')
           .replace(/<annotation.*<\/annotation>/g, '')
-      )
+      );
   }
   return text.replace(katexRegex, 'MathML is unsupported in this environment.');
 };

packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js

@@ -318,7 +318,7 @@ export const addEdges = function (edges, g, diagObj) {
       edgeData.labelpos = 'c';
     }
     edgeData.labelType = edge.labelType;
-    edgeData.label = renderKatex(edge.text.replace(common.lineBreakRegex, '\n')), getConfig();
+    edgeData.label = renderKatex(edge.text.replace(common.lineBreakRegex, '\n'), getConfig());
 
     if (edge.style === undefined) {
       edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none;';

packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts

@@ -301,9 +301,9 @@ function boundMessage(_diagram, msgModel): number {
   const { startx, stopx, message } = msgModel;
   const lines = common.splitBreaks(message).length;
   const isKatexMsg = hasKatex(message);
-  const textDims = isKatexMsg ?
+  const textDims = isKatexMsg
-    calculateMathMLDimensions(message, configApi.getConfig()) :
+    ? calculateMathMLDimensions(message, configApi.getConfig())
-    utils.calculateTextDimensions(message, messageFont(conf));
+    : utils.calculateTextDimensions(message, messageFont(conf));
 
   if (!isKatexMsg) {
     const lineHeight = textDims.height / lines;
@@ -368,7 +368,9 @@ const drawMessage = function (diagram, msgModel, lineStartY: number, diagObj: Di
   textObj.textMargin = conf.wrapPadding;
   textObj.tspan = false;
 
-  hasKatex(textObj.text) ? drawKatex(diagram, textObj, {startx, stopx, starty: lineStartY}) : drawText(diagram, textObj);
+  hasKatex(textObj.text)
+    ? drawKatex(diagram, textObj, { startx, stopx, starty: lineStartY })
+    : drawText(diagram, textObj);
 
   const textWidth = textDims.width;
 
@@ -1011,9 +1013,9 @@ function getMaxMessageWidthPerActor(
       const wrappedMessage = msg.wrap
         ? utils.wrapLabel(msg.message, conf.width - 2 * conf.wrapPadding, textFont)
         : msg.message;
-      const messageDimensions = hasKatex(wrappedMessage) ?
+      const messageDimensions = hasKatex(wrappedMessage)
-        calculateMathMLDimensions(msg.message, configApi.getConfig()) :
+        ? calculateMathMLDimensions(msg.message, configApi.getConfig())
-        utils.calculateTextDimensions(wrappedMessage, textFont);
+        : utils.calculateTextDimensions(wrappedMessage, textFont);
       const messageWidth = messageDimensions.width + 2 * conf.wrapPadding;
 
       /*
@@ -1124,9 +1126,9 @@ function calculateActorMargins(
         actorFont(conf)
       );
     }
-    const actDims = hasKatex(actor.description) ?
+    const actDims = hasKatex(actor.description)
-     calculateMathMLDimensions(actor.description, configApi.getConfig()) :
+      ? calculateMathMLDimensions(actor.description, configApi.getConfig())
-     utils.calculateTextDimensions(actor.description, actorFont(conf));
+      : utils.calculateTextDimensions(actor.description, actorFont(conf));
 
     actor.width = actor.wrap
       ? conf.width
@@ -1190,9 +1192,9 @@ const buildNoteModel = function (msg, actors, diagObj) {
   const stopx = actors[msg.to].x;
   const shouldWrap = msg.wrap && msg.message;
 
-  let textDimensions: {width: number, height: number, lineHeight?: number} = hasKatex(msg.message) ?
+  let textDimensions: { width: number; height: number; lineHeight?: number } = hasKatex(msg.message)
-    calculateMathMLDimensions(msg.message, configApi.getConfig()) :
+    ? calculateMathMLDimensions(msg.message, configApi.getConfig())
-    utils.calculateTextDimensions(
+    : utils.calculateTextDimensions(
         shouldWrap ? utils.wrapLabel(msg.message, conf.width, noteFont(conf)) : msg.message,
         noteFont(conf)
       );

packages/mermaid/src/diagrams/sequence/svgDraw.js

@@ -149,7 +149,7 @@ export const drawKatex = function (elem, textData, msgModel = null) {
       stopx = temp;
     }
 
-    textElem.attr('x', Math.round(startx + Math.abs(startx - stopx) / 2 - dim.width / 2))
+    textElem.attr('x', Math.round(startx + Math.abs(startx - stopx) / 2 - dim.width / 2));
     if (textData.class === 'loopText') {
       textElem.attr('y', Math.round(starty));
     } else {
@@ -633,7 +633,6 @@ export const drawLoop = function (elem, loopModel, labelText, conf) {
   txt.fontWeight = fontWeight;
   txt.wrap = true;
 
-
   let textElem = hasKatex(txt.text) ? drawKatex(g, txt, loopModel) : drawText(g, txt);
 
   if (loopModel.sectionTitles !== undefined) {
@@ -910,6 +909,17 @@ const _drawTextCandidateFunc = (function () {
     _setTextAttrs(text, textAttrs);
   }
 
+  /**
+   *
+   * @param content
+   * @param g
+   * @param x
+   * @param y
+   * @param width
+   * @param height
+   * @param textAttrs
+   * @param conf
+   */
   function byKatex(content, g, x, y, width, height, textAttrs, conf) {
     // TODO duplicate render calls, optimize
     const dim = calculateMathMLDimensions(content, configApi.getConfig());
@@ -946,7 +956,9 @@ const _drawTextCandidateFunc = (function () {
   }
 
   return function (conf, hasKatex = false) {
-    if (hasKatex) return byKatex;
+    if (hasKatex) {
+      return byKatex;
+    }
     return conf.textPlacement === 'fo' ? byFo : conf.textPlacement === 'old' ? byText : byTspan;
   };
 })();