# All files / src/html codeblockProcessor.ts

16% Statements 12/75
2.7% Branches 1/37
9.09% Functions 1/11
17.14% Lines 12/70

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
    1719x
    9x

    9x
    9x

    9x

    9x

    9x
    2x
    2x
    2x
    2x

    2x

     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
     * @returns  An object that contains data to be used by the node's parent.
     */
    function traverseLinePart(node: NodeOrText, hlStart: number, hlEnd: number): 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);
        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 ?? {};
          child.attribs.class = child.attribs.class ? `${child.attribs.class} highlighted` : 'highlighted';
          return;
        }

        if (!data.highlightRange) {
          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);
          const newElement = cheerio(`<span>${pre}<span class="highlighted">${highlighted}</span>${post}</span>`);
          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 => boundStr.split('-').map(Number));
        bounds.forEach(([start, end]) => traverseLinePart(lineNode, start, end));

        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}`}`;
      }
    }