updated eslint config and fixed cspell warnings

.eslintrc.json

@@ -49,7 +49,16 @@
       }
     ],
     "json/*": ["error", "allowComments"],
-    "no-empty": ["error", { "allowEmptyCatch": true }]
+    "no-empty": ["error", { "allowEmptyCatch": true }],
+    "@cspell/spellchecker": [
+      "warn",
+      {
+        "checkIdentifiers": false,
+        "checkStrings": false,
+        "checkStringTemplates": false,
+        "customWordListFile": { "path": "./myWords.txt" }
+      }
+    ]
   },
   "overrides": [
     {

myWords.txt

@@ -0,0 +1,14 @@
+customizability
+Gantt
+jison
+knsv
+Knut
+mindmap
+Mindmaps
+mitigations
+sandboxed
+Sveidqvist
+verdana
+Visio
+vitepress
+colour

packages/mermaid/src/diagrams/state/stateRenderer.js

@@ -47,7 +47,7 @@ const insertMarkers = function (elem) {
 export const draw = function (text, id, _version, diagObj) {
   conf = getConfig().state;
   const securityLevel = getConfig().securityLevel;
-  // Handle root and Document for when rendering in sanbox mode
+  // Handle root and Document for when rendering in sandbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {
     sandboxElement = select('#i' + id);

packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts

@@ -54,7 +54,7 @@ export const draw = function (text, id, version, diagObj) {
   diagObj.parser.parse(text + '\n');
 
   const securityLevel = getConfig().securityLevel;
-  // Handle root and Document for when rendering in sanbox mode
+  // Handle root and Document for when rendering in sandbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {
     sandboxElement = select('#i' + id);

packages/mermaid/src/diagrams/user-journey/svgDraw.js

@@ -218,7 +218,7 @@ export const drawSection = function (elem, section, conf) {
 
 let taskCount = -1;
 /**
- * Draws an actor in the diagram with the attaced line
+ * Draws an actor in the diagram with the attached line
  *
  * @param {any} elem The HTML element
  * @param {any} task The task to render

packages/mermaid/src/mermaidAPI.ts

@@ -110,7 +110,7 @@ export const decodeEntities = function (text: string): string {
  * @param {string} id The id of the element to be rendered
  * @param {string} text The graph definition
  * @param {(svgCode: string, bindFunctions?: (element: Element) => void) => void} cb Callback which
- *   is called after rendering is finished with the svg code as inparam.
+ *   is called after rendering is finished with the svg code as param.
  * @param {Element} container Selector to element in which a div with the graph temporarily will be
  *   inserted. If 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.
@@ -152,7 +152,7 @@ const render = async function (
     }
 
     if (cnf.securityLevel === 'sandbox') {
-      // IF we are in sandboxed mode, we do everyting mermaid related
+      // IF we are in sandboxed mode, we do everything mermaid related
       // in a sandboxed div
       const iframe = select(container)
         .append('iframe')
@@ -201,7 +201,7 @@ const render = async function (
     // d+id it will contain a svg with the id "id"
 
     if (cnf.securityLevel === 'sandbox') {
-      // IF we are in sandboxed mode, we do everyting mermaid related
+      // IF we are in sandboxed mode, we do everything mermaid related
       // in a sandboxed div
       const iframe = select('body')
         .append('iframe')
@@ -250,7 +250,7 @@ const render = async function (
   let userStyles = '';
   // user provided theme CSS
   // If you add more configuration driven data into the user styles make sure that the value is
-  // sanitized bye the santiizeCSS function
+  // sanitized bye the sanitizeCSS function
   if (cnf.themeCSS !== undefined) {
     userStyles += `\n${cnf.themeCSS}`;
   }

packages/mermaid/src/setupGraphViewbox.js

@@ -1,7 +1,7 @@
 import { log } from './logger';
 
 /**
- * Applys d3 attributes
+ * Applies d3 attributes
  *
  * @param {any} d3Elem D3 Element to apply the attributes onto
  * @param {[string, string][]} attrs Object.keys equivalent format of key to value mapping of attributes

packages/mermaid/src/themes/theme-base.js

@@ -126,7 +126,7 @@ class Theme {
     this.specialStateColor = this.lineColor;
 
     /* Color Scale */
-    /* Each color-set will have a background, a forgroupnd and a border color */
+    /* Each color-set will have a background, a foreground and a border color */
     this.cScale0 = this.cScale0 || this.primaryColor;
     this.cScale1 = this.cScale1 || this.secondaryColor;
     this.cScale2 = this.cScale2 || this.tertiaryColor;

packages/mermaid/src/themes/theme-dark.js

@@ -173,7 +173,7 @@ class Theme {
     this.cScale12 = this.cScale12 || '#010029';
 
     /* Color Scale */
-    /* Each color-set will have a background, a forgroupnd and a border color */
+    /* Each color-set will have a background, a foreground and a border color */
     this.cScale0 = this.cScale0 || this.primaryColor;
     this.cScale1 = this.cScale1 || this.secondaryColor;
     this.cScale2 = this.cScale2 || this.tertiaryColor;

packages/mermaid/src/themes/theme-default.js

@@ -121,7 +121,7 @@ class Theme {
   }
   updateColors() {
     /* Color Scale */
-    /* Each color-set will have a background, a forgroupnd and a border color */
+    /* Each color-set will have a background, a foreground and a border color */
     this.cScale0 = this.cScale0 || this.primaryColor;
     this.cScale1 = this.cScale1 || this.secondaryColor;
     this.cScale2 = this.cScale2 || this.tertiaryColor;

packages/mermaid/src/themes/theme-forest.js

@@ -94,7 +94,7 @@ class Theme {
     this.errorTextColor = '#552222';
   }
   updateColors() {
-    /* Each color-set will have a background, a forgroupnd and a border color */
+    /* Each color-set will have a background, a foreground and a border color */
     this.cScale0 = this.cScale0 || this.primaryColor;
     this.cScale1 = this.cScale1 || this.secondaryColor;
     this.cScale2 = this.cScale2 || this.tertiaryColor;

packages/mermaid/src/themes/theme-neutral.js

@@ -110,7 +110,7 @@ class Theme {
     this.border2 = this.contrast;
 
     /* Color Scale */
-    /* Each color-set will have a background, a forgroupnd and a border color */
+    /* Each color-set will have a background, a foreground and a border color */
 
     this.cScale0 = this.cScale0 || '#555';
     this.cScale1 = this.cScale1 || '#F4F4F4';

packages/mermaid/src/utils.ts

@@ -109,7 +109,7 @@ export const detectInit = function (text: string, config?: MermaidConfig): Merma
  *
  *   ```mermaid
  *   graph LR
- *    %%{somedirective}%%
+ *    %%{someDirective}%%
  *    a-->b
  *    b-->c
  *    c-->d
@@ -215,7 +215,7 @@ export const formatUrl = (linkStr, config) => {
 /**
  * Runs a function
  *
- * @param {string} functionName A dot seperated path to the function relative to the `window`
+ * @param {string} functionName A dot separated path to the function relative to the `window`
  * @param {...any} params Parameters to pass to the function
  */
 export const runFunc = (functionName, ...params) => {