# All files / src/html codeblockProcessor.ts

13.63% Statements 12/88
2.22% Branches 1/45
9.09% Functions 1/11
14.28% Lines 12/84

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    2037x
    7x

    7x
    7x

    7x

    7x

    7x
    1x
    1x
    1x
    1x

    1x

     import cheerio from 'cheerio';
    import has from 'lodash/has';
    import { NodeOrText, MbNode } from '../utils/node';

    import md from '../lib/markdown-it';
    import * as util from '../lib/markdown-it/utils';

    const _ = {
      has,
    };

    interface TraverseLinePartData {
      numCharsTraversed: number,
      shouldParentHighlight: boolean,
      highlightRange?: number[],
    }

    /**
     * Traverses a line part and applies highlighting if necessary.
     * @param node The node of the line part to be traversed
     * @param hlStart The highlight start position, relative to the start of the line part
     * @param hlEnd The highlight end position, relative to the start of the line part
     * @param color Optional color for the highlight
     * @returns  An object that contains data to be used by the node's parent.
     */
    function traverseLinePart(
      node: NodeOrText,
      hlStart: number,
      hlEnd: number,
      color?: string,
    ): TraverseLinePartData {
      const resData: TraverseLinePartData = {
        numCharsTraversed: 0,
        shouldParentHighlight: false,
        highlightRange: undefined,
      };

      Iif (hlEnd <= 0) {
        // Highlight end has passed, no need to traverse further
        return resData;
      }

      Iif (node.type === 'text') {
        /*
         * Node is a text node. It is not an inherent HTML element of its own,
         * so to actually highlight this text, we have to ask to apply at its parent.
         */

        const cleanedText = util.unescapeHtml(node.data);
        const textLength = cleanedText.length;
        resData.numCharsTraversed = textLength;

        Iif (hlStart >= textLength) {
          // Highlight start is not in this text
          resData.shouldParentHighlight = false;
          return resData;
        }

        Iif (hlStart <= 0 && hlEnd >= textLength) {
          // Highlight spans across the entirety of text
          resData.shouldParentHighlight = true;
          return resData;
        }

        // Partial text highlighting
        resData.shouldParentHighlight = true;
        resData.highlightRange = [hlStart, hlEnd];
        return resData;
      }

      Iif (!node.children) {
        return resData;
      }

      /*
       * The remaining possibility is that node is a tag node.
       * It has at least one child (to contain the text content).
       * It may have more children, such as inner tag nodes.
       */

      const highlightData = node.children.map((child) => {
        const [relativeHlStart, relativeHlEnd] = [hlStart, hlEnd].map(x => x - resData.numCharsTraversed);
        const data = traverseLinePart(child, relativeHlStart, relativeHlEnd, color);
        resData.numCharsTraversed += data.numCharsTraversed;
        return data;
      });

      Iif (highlightData.every(data => data.shouldParentHighlight && !data.highlightRange)) {
        /*
         * Every child wants highlight to be applied to the whole content at node level.
         * For conciseness, ask for the node's parent to highlight, if possible
         */
        resData.shouldParentHighlight = true;
        return resData;
      }

      /*
       * If node level highlighting is not possible, highlight the individual children as needed.
       * For text nodes, it is trickier, as we have to wrap the text inside a <span> first.
       * Essentially, we have to change the text node to become a tag node.
       */

      node.children.forEach((child, idx) => {
        const data = highlightData[idx];
        Iif (!data.shouldParentHighlight) {
          return;
        }

        Iif (child.type === 'tag') {
          child.attribs = child.attribs ?? {};
          Iif (color) {
            child.attribs.style = child.attribs.style
              ? `${child.attribs.style} background-color: ${color};`
              : `background-color: ${color};`;
            return;
          }
          // Apply the 'highlighted' class if no color is provided
          child.attribs.class = child.attribs.class
            ? `${child.attribs.class} highlighted`
            : 'highlighted';
          return;
        }

        if (!data.highlightRange) {
          if (color) {
            cheerio(child).wrap(`<span style='background-color: ${color};'></span>`);
          } else Iif (child.type === 'text') {
            cheerio(child).wrap('<span class="highlighted"></span>');
          }
        } else {
          const [start, end] = data.highlightRange;
          const cleaned = util.unescapeHtml(child.data);
          const split = [cleaned.substring(0, start), cleaned.substring(start, end), cleaned.substring(end)];
          const [pre, highlighted, post] = split.map(md.utils.escapeHtml);

          if (color) {
            const s = `<span>${pre}<span style='background-color: ${color};'>${highlighted}</span>${post}</span>`;
            const newElement = cheerio(s);
            cheerio(child).replaceWith(newElement);
          } else {
            const str = `<span>${pre}<span class="highlighted">${highlighted}</span>${post}</span>`;
            const newElement = cheerio(str);
            cheerio(child).replaceWith(newElement);
          }
        }
      });

      resData.shouldParentHighlight = false;
      return resData;
    }

    /**
     * Applies pending highlighting to the code block.
     * This looks into each line for highlighting data, and if found,
     * traverses over the line and applies the highlight.
     * @param node Root of the code block element, which is the 'pre' node
     */
    export function highlightCodeBlock(node: MbNode) {
      Iif (!node.children) {
        return;
      }
      const codeNode = node.children.find(c => c.name === 'code');
      Iif (!codeNode || (!codeNode.children)) {
        return;
      }

      codeNode.children.forEach((lineNode) => {
        Iif ((!lineNode.attribs) || !_.has(lineNode.attribs, 'hl-data')) {
          return;
        }

        const bounds = lineNode.attribs['hl-data']
          .split(',')
          .map((boundStr) => {
            const [range, color] = boundStr.split(':');
            const [start, end] = range.split('-');
            return [start, end, color];
          });
        bounds.forEach(([start, end, color]) => traverseLinePart(lineNode, Number(start), Number(end), color));
        delete lineNode.attribs['hl-data'];
      });
    }

    /**
     * Adjust the class attribute of code blocks according to the global line numbers setting.
     * Append the 'line-numbers' class if the global setting is true.
     * @param node the code block element, which is the 'code' node
     * @param showCodeLineNumbers true if line numbers should be shown, false otherwise
     */
    export function setCodeLineNumbers(node: MbNode, showCodeLineNumbers: boolean) {
      const existingClass = node.attribs.class || '';
      const styleClassRegex = /(^|\s)(no-)?line-numbers($|\s)/;
      const hasStyleClass = styleClassRegex.test(existingClass);
      Iif (hasStyleClass) {
        return;
      }

      Iif (showCodeLineNumbers) {
        node.attribs = node.attribs ?? {};
        node.attribs.class = `line-numbers${existingClass === '' ? '' : ` ${existingClass}`}`;
      }
    }