Adapt core/src/lib/markdown-it to TypeScript

.eslintignore

@@ -63,7 +63,6 @@ packages/core/test/unit/utils/data.js
 # Rules for pure JS files
 packages/core/src/lib/markdown-it/patches/*
 packages/core/src/lib/markdown-it/plugins/*
-!packages/core/src/lib/markdown-it/plugins/markdown-it-icons.js
 
 # --- packages/core end ---
 

packages/core/package.json

@@ -81,10 +81,13 @@
     "@types/htmlparser2": "^3.10.3",
     "@types/jest": "^27.4.1",
     "@types/js-beautify": "^1.13.3",
+    "@types/katex": "^0.16.0",
     "@types/lodash": "^4.14.181",
+    "@types/markdown-it": "^12.2.3",
     "@types/node": "^17.0.22",
     "@types/nunjucks": "^3.2.1",
     "@types/path-is-inside": "^1.0.0",
+    "@types/primer__octicons": "^17.11.0",
     "@types/url-parse": "^1.4.8",
     "@types/uuid": "^9.0.0",
     "jest": "^27.5.1",

packages/core/src/lib/markdown-it/highlight/HighlightRule.ts

@@ -1,24 +1,28 @@
-const { HighlightRuleComponent } = require('./HighlightRuleComponent');
-const { splitCodeAndIndentation } = require('./helper');
+import { HighlightRuleComponent } from './HighlightRuleComponent';
+import { splitCodeAndIndentation } from './helper';
 
-class HighlightRule {
-  constructor(ruleComponents) {
-    /**
-     * @type Array<HighlightRuleComponent>
-     */
+export class HighlightRule {
+  ruleComponents: HighlightRuleComponent[];
+  constructor(ruleComponents: HighlightRuleComponent[]) {
     this.ruleComponents = ruleComponents;
   }
 
-  static parseAllRules(allRules, lineOffset, tokenContent) {
+  static parseAllRules(allRules: string, lineOffset: number, tokenContent: string) {
     const highlightLines = this.splitByChar(allRules, ',');
     const strArray = tokenContent.split('\n');
-    return highlightLines
-      .map(ruleStr => HighlightRule.parseRule(ruleStr, lineOffset, strArray))
-      .filter(rule => rule); // discards invalid rules
+    const highlightRules: (HighlightRule | null)[]
+        = highlightLines.map(ruleStr => HighlightRule.parseRule(ruleStr, lineOffset, strArray));
+    const highlightRulesWithoutNull: HighlightRule[] = [];
+    highlightRules.forEach((c: HighlightRule | null) => {
+      if (c != null) {
+        highlightRulesWithoutNull.push(c);
+      }
+    });
+    return highlightRulesWithoutNull;
   }
 
   // this function splits allRules by a splitter while ignoring the splitter if it is within quotes
-  static splitByChar(allRules, splitter) {
+  static splitByChar(allRules: string, splitter: string) {
     const highlightRules = [];
     let isWithinQuote = false;
     let currentPosition = 0;
@@ -38,7 +42,7 @@ class HighlightRule {
     return highlightRules;
   }
 
-  static parseRule(ruleString, lineOffset, lines) {
+  static parseRule(ruleString: string, lineOffset: number, lines: string[]) {
     const components = this.splitByChar(ruleString, '-')
       .map(compString => HighlightRuleComponent.parseRuleComponent(compString, lineOffset, lines));
 
@@ -48,10 +52,16 @@ class HighlightRule {
       return null;
     }
 
-    return new HighlightRule(components);
+    const componentsWithoutNull: HighlightRuleComponent[] = [];
+    components.forEach((c: HighlightRuleComponent | null) => {
+      if (c !== null) {
+        componentsWithoutNull.push(c);
+      }
+    });
+    return new HighlightRule(componentsWithoutNull);
   }
 
-  shouldApplyHighlight(lineNumber) {
+  shouldApplyHighlight(lineNumber: number) {
     const compares = this.ruleComponents.map(comp => comp.compareLine(lineNumber));
     if (this.isLineRange()) {
       const withinRangeStart = compares[0] <= 0;
@@ -63,7 +73,7 @@ class HighlightRule {
     return atLineNumber;
   }
 
-  applyHighlight(line, lineNumber) {
+  applyHighlight(line: string, lineNumber: number) {
     // Applied rule is the first component until deduced otherwise
     let [appliedRule] = this.ruleComponents;
 
@@ -96,16 +106,16 @@ class HighlightRule {
     return HighlightRule._highlightWholeText(line);
   }
 
-  static _highlightWholeLine(codeStr) {
+  static _highlightWholeLine(codeStr: string) {
     return `<span class="highlighted">${codeStr}\n</span>`;
   }
 
-  static _highlightWholeText(codeStr) {
+  static _highlightWholeText(codeStr: string) {
     const [indents, content] = splitCodeAndIndentation(codeStr);
     return `<span>${indents}<span class="highlighted">${content}</span>\n</span>`;
   }
 
-  static _highlightPartOfText(codeStr, bounds) {
+  static _highlightPartOfText(codeStr: string, bounds: number[][]) {
     /*
      * Note: As part-of-text highlighting requires walking over the node of the generated
      * html by highlight.js, highlighting will be applied in NodeProcessor instead.
@@ -119,7 +129,3 @@ class HighlightRule {
     return this.ruleComponents.length === 2;
   }
 }
-
-module.exports = {
-  HighlightRule,
-};

packages/core/src/lib/markdown-it/highlight/HighlightRuleComponent.ts

@@ -1,12 +1,15 @@
-const { splitCodeAndIndentation } = require('./helper');
+import { splitCodeAndIndentation } from './helper';
 
 const LINESLICE_CHAR_REGEX = /(\d+)\[(\d*):(\d*)]/;
 const LINESLICE_WORD_REGEX = /(\d+)\[(\d*)::(\d*)]/;
 const LINEPART_REGEX = /(\d+)\[(["'])((?:\\.|[^\\])*?)\2]/;
 const UNBOUNDED = -1;
 
-class HighlightRuleComponent {
-  constructor(lineNumber, isSlice = false, bounds = []) {
+export class HighlightRuleComponent {
+  lineNumber: number;
+  isSlice: boolean;
+  bounds: number[][];
+  constructor(lineNumber: number, isSlice: boolean = false, bounds: number[][] = []) {
     /**
      * @type {number}
      */
@@ -21,7 +24,7 @@ class HighlightRuleComponent {
     this.bounds = bounds;
   }
 
-  static parseRuleComponent(compString, lineNumberOffset, lines) {
+  static parseRuleComponent(compString: string, lineNumberOffset: number, lines: string[]) {
     // Match line-part syntax
     const linepartMatch = compString.match(LINEPART_REGEX);
     if (linepartMatch) {
@@ -47,7 +50,11 @@ class HighlightRuleComponent {
       // There are four capturing groups: [full match, line number, start bound, end bound]
       const groups = sliceMatch.slice(1); // discard full match
 
-      let lineNumber = parseInt(groups.shift(), 10);
+      const lineNumberStr = groups.shift();
+      if (lineNumberStr === undefined) {
+        return null;
+      }
+      let lineNumber = parseInt(lineNumberStr, 10);
       if (Number.isNaN(lineNumber)) {
         return null;
       }
@@ -84,7 +91,7 @@ class HighlightRuleComponent {
    * @returns {number} A negative number, zero, or a positive number when the given line number
    *  is after, at, or before the component's line number
    */
-  compareLine(lineNumber) {
+  compareLine(lineNumber: number) {
     return this.lineNumber - lineNumber;
   }
 
@@ -103,7 +110,7 @@ class HighlightRuleComponent {
    * @param line The given line
    * @returns {[number, number]} The actual bound computed
    */
-  static computeCharBounds(bound, line) {
+  static computeCharBounds(bound: number[], line: string) {
     const [indents] = splitCodeAndIndentation(line);
     let [start, end] = bound;
 
@@ -145,13 +152,13 @@ class HighlightRuleComponent {
    * @param line The given line
    * @returns {[number, number]} The actual bound computed
    */
-  static computeWordBounds(bound, line) {
+  static computeWordBounds(bound: number[], line: string) {
     const [indents, content] = splitCodeAndIndentation(line);
     const words = content.split(/\s+/);
-    const wordPositions = [];
+    const wordPositions: number[][] = [];
     let contentRemaining = content;
     let curr = indents.length;
-    words.forEach((word) => {
+    words.forEach((word: string) => {
       const start = contentRemaining.indexOf(word);
       const end = start + word.length;
       wordPositions.push([curr + start, curr + end]);
@@ -190,7 +197,7 @@ class HighlightRuleComponent {
    * @returns {Array<[number, number]>} The bounds computed, each indicates the range of each
    * occurrences of the line part in the line
    */
-  static computeLinePartBounds(linePart, line) {
+  static computeLinePartBounds(linePart: string, line: string) {
     const [indents, content] = splitCodeAndIndentation(line);
     let contentRemaining = content;
     let start = contentRemaining.indexOf(linePart);
@@ -212,7 +219,3 @@ class HighlightRuleComponent {
     return bounds;
   }
 }
-
-module.exports = {
-  HighlightRuleComponent,
-};

packages/core/src/lib/markdown-it/highlight/helper.ts

@@ -1,12 +1,8 @@
 // Common helper functions to be used in HighlightRule or HighlightRuleComponent
 
-function splitCodeAndIndentation(codeStr) {
+export function splitCodeAndIndentation(codeStr: string) {
   const codeStartIdx = codeStr.search(/\S|$/);
   const indents = codeStr.substring(0, codeStartIdx);
   const content = codeStr.substring(codeStartIdx);
   return [indents, content];
 }
-
-module.exports = {
-  splitCodeAndIndentation,
-};