@parcel/codeframe 2.0.0-nightly.97 → 2.1.0

package/lib/codeframe.js

@@ -5,58 +5,98 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = codeFrame;
 
-var _chalk = _interopRequireDefault(require("chalk"));
+function _chalk() {
+  const data = _interopRequireDefault(require("chalk"));
 
-var _emphasize = _interopRequireDefault(require("emphasize"));
+  _chalk = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _emphasize() {
+  const data = _interopRequireDefault(require("emphasize"));
+
+  _emphasize = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _stringWidth() {
+  const data = _interopRequireDefault(require("string-width"));
+
+  _stringWidth = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _sliceAnsi() {
+  const data = _interopRequireDefault(require("slice-ansi"));
+
+  _sliceAnsi = function () {
+    return data;
+  };
+
+  return data;
+}
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const NEWLINE = /\r\n|[\n\r\u2028\u2029]/;
 const TAB_REPLACE_REGEX = /\t/g;
 const TAB_REPLACEMENT = '  ';
+const DEFAULT_TERMINAL_WIDTH = 80;
 
 const highlightSyntax = (txt, lang) => {
   if (lang) {
     try {
-      return _emphasize.default.highlight(lang, txt).value;
+      return _emphasize().default.highlight(lang, txt).value;
     } catch (e) {// fallback for unknown languages...
     }
   }
 
-  return _emphasize.default.highlightAuto(txt).value;
+  return _emphasize().default.highlightAuto(txt).value;
 };
 
-function codeFrame(code, highlights, // $FlowFixMe
-inputOpts = {}) {
+function codeFrame(code, highlights, inputOpts = {}) {
+  var _inputOpts$maxLines;
+
   if (highlights.length < 1) return '';
   let opts = {
     useColor: !!inputOpts.useColor,
     syntaxHighlighting: !!inputOpts.syntaxHighlighting,
     language: inputOpts.language,
-    maxLines: inputOpts.maxLines !== undefined ? inputOpts.maxLines : 12,
+    maxLines: (_inputOpts$maxLines = inputOpts.maxLines) !== null && _inputOpts$maxLines !== void 0 ? _inputOpts$maxLines : 12,
+    terminalWidth: inputOpts.terminalWidth || DEFAULT_TERMINAL_WIDTH,
     padding: inputOpts.padding || {
       before: 1,
       after: 2
     }
-  };
+  }; // Highlights messages and prefixes when colors are enabled
 
   const highlighter = (s, bold) => {
     if (opts.useColor) {
-      let redString = _chalk.default.red(s);
+      let redString = _chalk().default.red(s);
 
-      return bold ? _chalk.default.bold(redString) : redString;
+      return bold ? _chalk().default.bold(redString) : redString;
     }
 
     return s;
-  };
+  }; // Prefix lines with the line number
+
 
   const lineNumberPrefixer = params => {
     let {
       lineNumber,
-      endLine,
+      lineNumberLength,
       isHighlighted
     } = params;
-    return `${isHighlighted ? highlighter('>') : ' '} ${lineNumber ? lineNumber.padEnd(endLine.length, ' ') : ' '.repeat(endLine.length)} | `;
+    return `${isHighlighted ? highlighter('>') : ' '} ${lineNumber ? lineNumber.padStart(lineNumberLength, ' ') : ' '.repeat(lineNumberLength)} | `;
   }; // Make columns/lines start at 1
 
 
@@ -72,75 +112,127 @@ inputOpts = {}) {
       },
       message: h.message
     };
-  });
+  }); // Find first and last highlight
+
   let firstHighlight = highlights.length > 1 ? highlights.sort((a, b) => a.start.line - b.start.line)[0] : highlights[0];
-  let lastHighlight = highlights.length > 1 ? highlights.sort((a, b) => b.end.line - a.end.line)[0] : highlights[0];
+  let lastHighlight = highlights.length > 1 ? highlights.sort((a, b) => b.end.line - a.end.line)[0] : highlights[0]; // Calculate first and last line index of codeframe
+
   let startLine = firstHighlight.start.line - opts.padding.before;
   startLine = startLine < 0 ? 0 : startLine;
-  let endLine = lastHighlight.end.line + opts.padding.after;
-  endLine = endLine - startLine > opts.maxLines ? startLine + opts.maxLines - 1 : endLine;
-  let endLineString = endLine.toString(10);
-  let resultLines = [];
+  let endLineIndex = lastHighlight.end.line + opts.padding.after;
+  endLineIndex = endLineIndex - startLine > opts.maxLines ? startLine + opts.maxLines - 1 : endLineIndex;
+  let lineNumberLength = (endLineIndex + 1).toString(10).length; // Split input into lines and highlight syntax
+
   let lines = code.split(NEWLINE);
-  let syntaxHighlightedLines = (opts.syntaxHighlighting ? highlightSyntax(code, opts.language) : code).replace(TAB_REPLACE_REGEX, TAB_REPLACEMENT).split(NEWLINE);
+  let syntaxHighlightedLines = (opts.syntaxHighlighting ? highlightSyntax(code, opts.language) : code).replace(TAB_REPLACE_REGEX, TAB_REPLACEMENT).split(NEWLINE); // Loop over all lines and create codeframe
+
+  let resultLines = [];
+
+  for (let currentLineIndex = startLine; currentLineIndex < syntaxHighlightedLines.length; currentLineIndex++) {
+    if (currentLineIndex > endLineIndex) break;
+    if (currentLineIndex > syntaxHighlightedLines.length - 1) break; // Find highlights that need to get rendered on the current line
+
+    let lineHighlights = highlights.filter(highlight => highlight.start.line <= currentLineIndex && highlight.end.line >= currentLineIndex).sort((a, b) => (a.start.line < currentLineIndex ? 0 : a.start.column) - (b.start.line < currentLineIndex ? 0 : b.start.column)); // Check if this line has a full line highlight
+
+    let isWholeLine = lineHighlights.length && !!lineHighlights.find(h => h.start.line < currentLineIndex && h.end.line > currentLineIndex);
+    let lineLengthLimit = opts.terminalWidth > lineNumberLength + 7 ? opts.terminalWidth - (lineNumberLength + 5) : 10; // Split the line into line parts that will fit the provided terminal width
+
+    let colOffset = 0;
+    let lineEndCol = lineLengthLimit;
+    let syntaxHighlightedLine = syntaxHighlightedLines[currentLineIndex];
+
+    if ((0, _stringWidth().default)(syntaxHighlightedLine) > lineLengthLimit) {
+      if (lineHighlights.length > 0) {
+        if (lineHighlights[0].start.line === currentLineIndex) {
+          colOffset = lineHighlights[0].start.column - 5;
+        } else if (lineHighlights[0].end.line === currentLineIndex) {
+          colOffset = lineHighlights[0].end.column - 5;
+        }
+      }
+
+      colOffset = colOffset > 0 ? colOffset : 0;
+      lineEndCol = colOffset + lineLengthLimit;
+      syntaxHighlightedLine = (0, _sliceAnsi().default)(syntaxHighlightedLine, colOffset, lineEndCol);
+    } // Write the syntax highlighted line part
+
 
-  for (let i = startLine; i < lines.length; i++) {
-    if (i > endLine) break;
-    let originalLine = lines[i];
-    let syntaxHighlightedLine = syntaxHighlightedLines[i];
-    let foundHighlights = highlights.filter(highlight => highlight.start.line <= i && highlight.end.line >= i);
     resultLines.push(lineNumberPrefixer({
-      lineNumber: (i + 1).toString(10),
-      endLine: endLineString,
-      isHighlighted: foundHighlights.length > 0
+      lineNumber: (currentLineIndex + 1).toString(10),
+      lineNumberLength,
+      isHighlighted: lineHighlights.length > 0
     }) + syntaxHighlightedLine);
+    let lineWidth = (0, _stringWidth().default)(syntaxHighlightedLine);
+    let highlightLine = '';
 
-    if (foundHighlights.length > 0) {
-      let highlightLine = lineNumberPrefixer({
-        endLine: endLineString,
-        isHighlighted: true
-      });
-      let isWholeLine = !!foundHighlights.find(h => h.start.line < i && h.end.line > i);
-
-      if (isWholeLine) {
-        // If there's a whole line highlight
-        // don't even bother creating seperate highlight
-        highlightLine += highlighter('^'.repeat(originalLine.replace(TAB_REPLACE_REGEX, TAB_REPLACEMENT).length));
-      } else {
-        let sortedColumns = foundHighlights.length > 1 ? foundHighlights.sort((a, b) => (a.start.line < i ? 0 : a.start.column) - (b.start.line < i ? 0 : b.start.column)) : foundHighlights;
-        let lastCol = 0;
-
-        for (let col of sortedColumns) {
-          let startCol = col.start.line === i ? col.start.column : 0;
-          let endCol = (col.end.line === i ? col.end.column : originalLine.length - (lastCol || 1)) + 1;
-
-          if (startCol - lastCol > 0) {
-            let whitespace = originalLine.substring(lastCol, startCol).replace(TAB_REPLACE_REGEX, TAB_REPLACEMENT).replace(/\S/g, ' ');
-            highlightLine += whitespace;
-          }
+    if (isWholeLine) {
+      highlightLine = highlighter('^'.repeat(lineWidth));
+    } else if (lineHighlights.length > 0) {
+      let lastCol = 0;
+      let highlight = null;
+      let highlightHasEnded = false;
 
-          let highlightStartColumn = lastCol >= startCol ? lastCol : startCol;
+      for (let highlightIndex = 0; highlightIndex < lineHighlights.length; highlightIndex++) {
+        // Set highlight to current highlight
+        highlight = lineHighlights[highlightIndex];
+        highlightHasEnded = false; // Calculate the startColumn and get the real width by doing a substring of the original
+        // line and replacing tabs with our tab replacement to support tab handling
+
+        let startCol = 0;
+
+        if (highlight.start.line === currentLineIndex && highlight.start.column > colOffset) {
+          startCol = lines[currentLineIndex].substring(colOffset, highlight.start.column).replace(TAB_REPLACE_REGEX, TAB_REPLACEMENT).length;
+        } // Calculate the endColumn and get the real width by doing a substring of the original
+        // line and replacing tabs with our tab replacement to support tab handling
 
-          if (endCol - highlightStartColumn > 0) {
-            let renderedHighlightLength = originalLine.substring(highlightStartColumn, endCol).replace(TAB_REPLACE_REGEX, TAB_REPLACEMENT).length;
-            highlightLine += highlighter('^'.repeat(renderedHighlightLength));
-            lastCol = endCol;
-          }
-        }
 
-        let endsWithFullLine = !!sortedColumns.find(h => h.end.line > i);
+        let endCol = lineWidth - 1;
 
-        if (!endsWithFullLine) {
-          let sortedByEnd = sortedColumns.sort((a, b) => a.end.column - b.end.column);
-          let lastHighlightForColumn = sortedByEnd[sortedByEnd.length - 1];
+        if (highlight.end.line === currentLineIndex) {
+          endCol = lines[currentLineIndex].substring(colOffset, highlight.end.column).replace(TAB_REPLACE_REGEX, TAB_REPLACEMENT).length; // If the endCol is too big for this line part, trim it so we can handle it in the next one
 
-          if (lastHighlightForColumn.message) {
-            highlightLine += ' ' + highlighter(lastHighlightForColumn.message, true);
+          if (endCol > lineWidth) {
+            endCol = lineWidth - 1;
           }
+
+          highlightHasEnded = true;
+        } // If endcol is smaller than lastCol it overlaps with another highlight and is no longer visible, we can skip those
+
+
+        if (endCol >= lastCol) {
+          let characters = endCol - startCol + 1;
+
+          if (startCol > lastCol) {
+            // startCol is before lastCol, so add spaces as padding before the highlight indicators
+            highlightLine += ' '.repeat(startCol - lastCol);
+          } else if (lastCol > startCol) {
+            // If last column is larger than the start, there's overlap in highlights
+            // This line adjusts the characters count to ensure we don't add too many characters
+            characters += startCol - lastCol;
+          } // Append the highlight indicators
+
+
+          highlightLine += highlighter('^'.repeat(characters)); // Set the lastCol equal to character count between start of line part and highlight end-column
+
+          lastCol = endCol + 1;
+        } // There's no point in processing more highlights if we reached the end of the line
+
+
+        if (endCol >= lineEndCol - 1) {
+          break;
         }
+      } // Append the highlight message if the current highlights ends on this line part
+
+
+      if (highlight && highlight.message && highlightHasEnded) {
+        highlightLine += ' ' + highlighter(highlight.message, true);
       }
+    }
 
-      resultLines.push(highlightLine);
+    if (highlightLine) {
+      resultLines.push(lineNumberPrefixer({
+        lineNumberLength,
+        isHighlighted: true
+      }) + highlightLine);
     }
   }
 

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "@parcel/codeframe",
-  "version": "2.0.0-nightly.97+a63f3fc9",
+  "version": "2.1.0",
   "description": "Blazing fast, zero configuration web application bundler",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/parcel"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/parcel-bundler/parcel.git"
@@ -13,11 +17,16 @@
   "main": "lib/codeframe.js",
   "source": "src/codeframe.js",
   "engines": {
-    "node": ">= 10.0.0"
+    "node": ">= 12.0.0"
   },
   "dependencies": {
-    "chalk": "^2.4.2",
-    "emphasize": "^2.1.0"
+    "chalk": "^4.1.0",
+    "emphasize": "^4.2.0",
+    "slice-ansi": "^4.0.0",
+    "string-width": "^4.2.0"
+  },
+  "devDependencies": {
+    "strip-ansi": "^6.0.0"
   },
-  "gitHead": "a63f3fc9726483219412920faeb255e035f90747"
+  "gitHead": "5a80fbe4af8797d0aab248a66f5254f42f00e83e"
 }

package/src/codeframe.js

@@ -3,31 +3,29 @@ import type {DiagnosticCodeHighlight} from '@parcel/diagnostic';
 
 import chalk from 'chalk';
 import emphasize from 'emphasize';
+import stringWidth from 'string-width';
+import sliceAnsi from 'slice-ansi';
 
 type CodeFramePadding = {|
   before: number,
   after: number,
 |};
 
-type CodeFrameOptionsInput = {|
-  useColor?: boolean,
-  maxLines?: number,
-  padding?: CodeFramePadding,
-  syntaxHighlighting?: boolean,
-  language?: string,
-|};
+type CodeFrameOptionsInput = $Shape<CodeFrameOptions>;
 
 type CodeFrameOptions = {|
   useColor: boolean,
   syntaxHighlighting: boolean,
   maxLines: number,
   padding: CodeFramePadding,
+  terminalWidth: number,
   language?: string,
 |};
 
 const NEWLINE = /\r\n|[\n\r\u2028\u2029]/;
 const TAB_REPLACE_REGEX = /\t/g;
 const TAB_REPLACEMENT = '  ';
+const DEFAULT_TERMINAL_WIDTH = 80;
 
 const highlightSyntax = (txt: string, lang?: string): string => {
   if (lang) {
@@ -44,7 +42,6 @@ const highlightSyntax = (txt: string, lang?: string): string => {
 export default function codeFrame(
   code: string,
   highlights: Array<DiagnosticCodeHighlight>,
-  // $FlowFixMe
   inputOpts: CodeFrameOptionsInput = {},
 ): string {
   if (highlights.length < 1) return '';
@@ -53,13 +50,15 @@ export default function codeFrame(
     useColor: !!inputOpts.useColor,
     syntaxHighlighting: !!inputOpts.syntaxHighlighting,
     language: inputOpts.language,
-    maxLines: inputOpts.maxLines !== undefined ? inputOpts.maxLines : 12,
+    maxLines: inputOpts.maxLines ?? 12,
+    terminalWidth: inputOpts.terminalWidth || DEFAULT_TERMINAL_WIDTH,
     padding: inputOpts.padding || {
       before: 1,
       after: 2,
     },
   };
 
+  // Highlights messages and prefixes when colors are enabled
   const highlighter = (s: string, bold?: boolean) => {
     if (opts.useColor) {
       let redString = chalk.red(s);
@@ -69,17 +68,18 @@ export default function codeFrame(
     return s;
   };
 
+  // Prefix lines with the line number
   const lineNumberPrefixer = (params: {|
     lineNumber?: string,
-    endLine: string,
+    lineNumberLength: number,
     isHighlighted: boolean,
   |}) => {
-    let {lineNumber, endLine, isHighlighted} = params;
+    let {lineNumber, lineNumberLength, isHighlighted} = params;
 
     return `${isHighlighted ? highlighter('>') : ' '} ${
       lineNumber
-        ? lineNumber.padEnd(endLine.length, ' ')
-        : ' '.repeat(endLine.length)
+        ? lineNumber.padStart(lineNumberLength, ' ')
+        : ' '.repeat(lineNumberLength)
     } | `;
   };
 
@@ -98,6 +98,7 @@ export default function codeFrame(
     };
   });
 
+  // Find first and last highlight
   let firstHighlight =
     highlights.length > 1
       ? highlights.sort((a, b) => a.start.line - b.start.line)[0]
@@ -107,111 +108,176 @@ export default function codeFrame(
       ? highlights.sort((a, b) => b.end.line - a.end.line)[0]
       : highlights[0];
 
+  // Calculate first and last line index of codeframe
   let startLine = firstHighlight.start.line - opts.padding.before;
   startLine = startLine < 0 ? 0 : startLine;
-  let endLine = lastHighlight.end.line + opts.padding.after;
-  endLine =
-    endLine - startLine > opts.maxLines
+  let endLineIndex = lastHighlight.end.line + opts.padding.after;
+  endLineIndex =
+    endLineIndex - startLine > opts.maxLines
       ? startLine + opts.maxLines - 1
-      : endLine;
-  let endLineString = endLine.toString(10);
+      : endLineIndex;
 
-  let resultLines = [];
+  let lineNumberLength = (endLineIndex + 1).toString(10).length;
+
+  // Split input into lines and highlight syntax
   let lines = code.split(NEWLINE);
-  let syntaxHighlightedLines = (opts.syntaxHighlighting
-    ? highlightSyntax(code, opts.language)
-    : code
+  let syntaxHighlightedLines = (
+    opts.syntaxHighlighting ? highlightSyntax(code, opts.language) : code
   )
     .replace(TAB_REPLACE_REGEX, TAB_REPLACEMENT)
     .split(NEWLINE);
-  for (let i = startLine; i < lines.length; i++) {
-    if (i > endLine) break;
 
-    let originalLine: string = lines[i];
-    let syntaxHighlightedLine = syntaxHighlightedLines[i];
+  // Loop over all lines and create codeframe
+  let resultLines = [];
+  for (
+    let currentLineIndex = startLine;
+    currentLineIndex < syntaxHighlightedLines.length;
+    currentLineIndex++
+  ) {
+    if (currentLineIndex > endLineIndex) break;
+    if (currentLineIndex > syntaxHighlightedLines.length - 1) break;
 
-    let foundHighlights = highlights.filter(
-      highlight => highlight.start.line <= i && highlight.end.line >= i,
-    );
+    // Find highlights that need to get rendered on the current line
+    let lineHighlights = highlights
+      .filter(
+        highlight =>
+          highlight.start.line <= currentLineIndex &&
+          highlight.end.line >= currentLineIndex,
+      )
+      .sort(
+        (a, b) =>
+          (a.start.line < currentLineIndex ? 0 : a.start.column) -
+          (b.start.line < currentLineIndex ? 0 : b.start.column),
+      );
+
+    // Check if this line has a full line highlight
+    let isWholeLine =
+      lineHighlights.length &&
+      !!lineHighlights.find(
+        h => h.start.line < currentLineIndex && h.end.line > currentLineIndex,
+      );
+
+    let lineLengthLimit =
+      opts.terminalWidth > lineNumberLength + 7
+        ? opts.terminalWidth - (lineNumberLength + 5)
+        : 10;
+
+    // Split the line into line parts that will fit the provided terminal width
+    let colOffset = 0;
+    let lineEndCol = lineLengthLimit;
+    let syntaxHighlightedLine = syntaxHighlightedLines[currentLineIndex];
+    if (stringWidth(syntaxHighlightedLine) > lineLengthLimit) {
+      if (lineHighlights.length > 0) {
+        if (lineHighlights[0].start.line === currentLineIndex) {
+          colOffset = lineHighlights[0].start.column - 5;
+        } else if (lineHighlights[0].end.line === currentLineIndex) {
+          colOffset = lineHighlights[0].end.column - 5;
+        }
+      }
+
+      colOffset = colOffset > 0 ? colOffset : 0;
+      lineEndCol = colOffset + lineLengthLimit;
 
+      syntaxHighlightedLine = sliceAnsi(
+        syntaxHighlightedLine,
+        colOffset,
+        lineEndCol,
+      );
+    }
+
+    // Write the syntax highlighted line part
     resultLines.push(
       lineNumberPrefixer({
-        lineNumber: (i + 1).toString(10),
-        endLine: endLineString,
-        isHighlighted: foundHighlights.length > 0,
+        lineNumber: (currentLineIndex + 1).toString(10),
+        lineNumberLength,
+        isHighlighted: lineHighlights.length > 0,
       }) + syntaxHighlightedLine,
     );
 
-    if (foundHighlights.length > 0) {
-      let highlightLine = lineNumberPrefixer({
-        endLine: endLineString,
-        isHighlighted: true,
-      });
+    let lineWidth = stringWidth(syntaxHighlightedLine);
+    let highlightLine = '';
+    if (isWholeLine) {
+      highlightLine = highlighter('^'.repeat(lineWidth));
+    } else if (lineHighlights.length > 0) {
+      let lastCol = 0;
+      let highlight = null;
+      let highlightHasEnded = false;
 
-      let isWholeLine = !!foundHighlights.find(
-        h => h.start.line < i && h.end.line > i,
-      );
+      for (
+        let highlightIndex = 0;
+        highlightIndex < lineHighlights.length;
+        highlightIndex++
+      ) {
+        // Set highlight to current highlight
+        highlight = lineHighlights[highlightIndex];
+        highlightHasEnded = false;
 
-      if (isWholeLine) {
-        // If there's a whole line highlight
-        // don't even bother creating seperate highlight
-        highlightLine += highlighter(
-          '^'.repeat(
-            originalLine.replace(TAB_REPLACE_REGEX, TAB_REPLACEMENT).length,
-          ),
-        );
-      } else {
-        let sortedColumns =
-          foundHighlights.length > 1
-            ? foundHighlights.sort(
-                (a, b) =>
-                  (a.start.line < i ? 0 : a.start.column) -
-                  (b.start.line < i ? 0 : b.start.column),
-              )
-            : foundHighlights;
-
-        let lastCol = 0;
-        for (let col of sortedColumns) {
-          let startCol = col.start.line === i ? col.start.column : 0;
-          let endCol =
-            (col.end.line === i
-              ? col.end.column
-              : originalLine.length - (lastCol || 1)) + 1;
-
-          if (startCol - lastCol > 0) {
-            let whitespace = originalLine
-              .substring(lastCol, startCol)
-              .replace(TAB_REPLACE_REGEX, TAB_REPLACEMENT)
-              .replace(/\S/g, ' ');
-
-            highlightLine += whitespace;
-          }
+        // Calculate the startColumn and get the real width by doing a substring of the original
+        // line and replacing tabs with our tab replacement to support tab handling
+        let startCol = 0;
+        if (
+          highlight.start.line === currentLineIndex &&
+          highlight.start.column > colOffset
+        ) {
+          startCol = lines[currentLineIndex]
+            .substring(colOffset, highlight.start.column)
+            .replace(TAB_REPLACE_REGEX, TAB_REPLACEMENT).length;
+        }
 
-          let highlightStartColumn = lastCol >= startCol ? lastCol : startCol;
-          if (endCol - highlightStartColumn > 0) {
-            let renderedHighlightLength = originalLine
-              .substring(highlightStartColumn, endCol)
-              .replace(TAB_REPLACE_REGEX, TAB_REPLACEMENT).length;
-            highlightLine += highlighter('^'.repeat(renderedHighlightLength));
-            lastCol = endCol;
+        // Calculate the endColumn and get the real width by doing a substring of the original
+        // line and replacing tabs with our tab replacement to support tab handling
+        let endCol = lineWidth - 1;
+        if (highlight.end.line === currentLineIndex) {
+          endCol = lines[currentLineIndex]
+            .substring(colOffset, highlight.end.column)
+            .replace(TAB_REPLACE_REGEX, TAB_REPLACEMENT).length;
+
+          // If the endCol is too big for this line part, trim it so we can handle it in the next one
+          if (endCol > lineWidth) {
+            endCol = lineWidth - 1;
           }
-        }
 
-        let endsWithFullLine = !!sortedColumns.find(h => h.end.line > i);
-        if (!endsWithFullLine) {
-          let sortedByEnd = sortedColumns.sort(
-            (a, b) => a.end.column - b.end.column,
-          );
+          highlightHasEnded = true;
+        }
 
-          let lastHighlightForColumn = sortedByEnd[sortedByEnd.length - 1];
-          if (lastHighlightForColumn.message) {
-            highlightLine +=
-              ' ' + highlighter(lastHighlightForColumn.message, true);
+        // If endcol is smaller than lastCol it overlaps with another highlight and is no longer visible, we can skip those
+        if (endCol >= lastCol) {
+          let characters = endCol - startCol + 1;
+          if (startCol > lastCol) {
+            // startCol is before lastCol, so add spaces as padding before the highlight indicators
+            highlightLine += ' '.repeat(startCol - lastCol);
+          } else if (lastCol > startCol) {
+            // If last column is larger than the start, there's overlap in highlights
+            // This line adjusts the characters count to ensure we don't add too many characters
+            characters += startCol - lastCol;
           }
+
+          // Append the highlight indicators
+          highlightLine += highlighter('^'.repeat(characters));
+
+          // Set the lastCol equal to character count between start of line part and highlight end-column
+          lastCol = endCol + 1;
+        }
+
+        // There's no point in processing more highlights if we reached the end of the line
+        if (endCol >= lineEndCol - 1) {
+          break;
         }
       }
 
-      resultLines.push(highlightLine);
+      // Append the highlight message if the current highlights ends on this line part
+      if (highlight && highlight.message && highlightHasEnded) {
+        highlightLine += ' ' + highlighter(highlight.message, true);
+      }
+    }
+
+    if (highlightLine) {
+      resultLines.push(
+        lineNumberPrefixer({
+          lineNumberLength,
+          isHighlighted: true,
+        }) + highlightLine,
+      );
     }
   }
 

package/test/codeframe.test.js

@@ -1,4 +1,6 @@
 import assert from 'assert';
+import {readFileSync} from 'fs';
+import {join as joinPath} from 'path';
 
 import codeframe from '../src/codeframe';
 
@@ -393,7 +395,7 @@ describe('codeframe', () => {
     assert.equal(lines[7], '  9 | test');
   });
 
-  it('should properly pad numbers', () => {
+  it('should properly pad numbers for large files', () => {
     let codeframeString = codeframe('test\n'.repeat(1000), [
       {
         start: {
@@ -415,17 +417,22 @@ describe('codeframe', () => {
           column: 2,
           line: 100,
         },
-        message: 'test',
+        message: 'test 2',
       },
     ]);
 
     let lines = codeframeString.split(LINE_END);
     assert.equal(lines.length, 7);
-    assert.equal(lines[0], '  98  | test');
+    assert.equal(lines[0], '   98 | test');
+    assert.equal(lines[1], '>  99 | test');
+    assert.equal(lines[2], '>     |  ^ test');
+    assert.equal(lines[3], '> 100 | test');
+    assert.equal(lines[4], '>     |  ^ test 2');
+    assert.equal(lines[5], '  101 | test');
     assert.equal(lines[6], '  102 | test');
   });
 
-  it('should properly pad numbers', () => {
+  it('should properly pad numbers for short files', () => {
     let codeframeString = codeframe('test\n'.repeat(1000), [
       {
         start: {
@@ -453,13 +460,17 @@ describe('codeframe', () => {
 
     let lines = codeframeString.split(LINE_END);
     assert.equal(lines.length, 11);
-    assert.equal(lines[0], '  6  | test');
+    assert.equal(lines[0], '   6 | test');
+    assert.equal(lines[4], '   9 | test');
+    assert.equal(lines[5], '  10 | test');
+    assert.equal(lines[6], '  11 | test');
     assert.equal(lines[10], '  14 | test');
   });
 
   it('should properly use maxLines', () => {
+    let line = 'test '.repeat(100);
     let codeframeString = codeframe(
-      'test\n'.repeat(100),
+      `${line}\n`.repeat(100),
       [
         {
           start: {
@@ -487,14 +498,16 @@ describe('codeframe', () => {
       {
         useColor: false,
         maxLines: 10,
+        terminalWidth: 5,
       },
     );
 
     let lines = codeframeString.split(LINE_END);
     assert.equal(lines.length, 13);
-    assert.equal(lines[0], '  4  | test');
-    assert.equal(lines[11], '> 13 | test');
-    assert.equal(lines[12], '>    | ^^^^');
+    assert.equal(lines[0], '   4 | test test ');
+    assert.equal(lines[7], '  10 | test test ');
+    assert.equal(lines[11], '> 13 | test test ');
+    assert.equal(lines[12], '>    | ^^^^^^^^^^');
   });
 
   it('should be able to handle tabs', () => {
@@ -507,7 +520,7 @@ describe('codeframe', () => {
             line: 1,
           },
           end: {
-            column: 7,
+            column: 8,
             line: 1,
           },
           message: 'test',
@@ -518,7 +531,7 @@ describe('codeframe', () => {
 
     let lines = codeframeString.split(LINE_END);
     assert.equal(lines[0], '> 1 | hel  lo wor  ld');
-    assert.equal(lines[1], '>   |      ^^^ test');
+    assert.equal(lines[1], '>   |      ^^^^ test');
     assert.equal(lines[2], '  2 | Enjoy thi  s nice cod  eframe');
   });
 
@@ -585,4 +598,202 @@ describe('codeframe', () => {
     assert.equal(lines[4], '> 3 | test');
     assert.equal(lines[5], '>   | ^^ test');
   });
+
+  it('Should truncate long lines and print message', () => {
+    let originalLine = 'hello world '.repeat(1000);
+    let codeframeString = codeframe(
+      originalLine,
+      [
+        {
+          start: {
+            column: 1000,
+            line: 1,
+          },
+          end: {
+            column: 1200,
+            line: 1,
+          },
+          message: 'This is a message',
+        },
+      ],
+      {useColor: false, terminalWidth: 25},
+    );
+
+    let lines = codeframeString.split(LINE_END);
+    assert.equal(lines.length, 2);
+    assert.equal(lines[0], '> 1 | d hello world hello');
+    assert.equal(lines[1], '>   |      ^^^^^^^^^^^^^^ This is a message');
+  });
+
+  it('Truncation across multiple lines', () => {
+    let originalLine =
+      'hello world '.repeat(100) + '\n' + 'new line '.repeat(100);
+    let codeframeString = codeframe(
+      originalLine,
+      [
+        {
+          start: {
+            column: 15,
+            line: 1,
+          },
+          end: {
+            column: 400,
+            line: 1,
+          },
+          message: 'This is the first line',
+        },
+        {
+          start: {
+            column: 2,
+            line: 2,
+          },
+          end: {
+            column: 100,
+            line: 2,
+          },
+          message: 'This is the second line',
+        },
+      ],
+      {useColor: false, terminalWidth: 25},
+    );
+
+    let lines = codeframeString.split(LINE_END);
+    assert.equal(lines.length, 4);
+    assert.equal(lines[0], '> 1 | ld hello world hell');
+    assert.equal(lines[1], '>   |      ^^^^^^^^^^^^^^ This is the first line');
+    assert.equal(lines[2], '> 2 | new line new line n');
+    assert.equal(lines[3], '>   |  ^^^^^^^^^^^^^^^^^^ This is the second line');
+  });
+
+  it('Truncation across various types and positions of highlights', () => {
+    let originalLine =
+      'hello world '.repeat(100) + '\n' + 'new line '.repeat(100);
+    let codeframeString = codeframe(
+      originalLine,
+      [
+        {
+          start: {
+            column: 2,
+            line: 1,
+          },
+          end: {
+            column: 5,
+            line: 1,
+          },
+        },
+        {
+          start: {
+            column: 6,
+            line: 1,
+          },
+          end: {
+            column: 10,
+            line: 1,
+          },
+          message: 'I have a message',
+        },
+        {
+          start: {
+            column: 15,
+            line: 1,
+          },
+          end: {
+            column: 25,
+            line: 1,
+          },
+          message: 'I also have a message',
+        },
+        {
+          start: {
+            column: 2,
+            line: 2,
+          },
+          end: {
+            column: 5,
+            line: 2,
+          },
+          message: 'This is the second line',
+        },
+      ],
+      {useColor: false, terminalWidth: 25},
+    );
+
+    let lines = codeframeString.split(LINE_END);
+    assert.equal(lines.length, 4);
+    assert.equal(lines[0], '> 1 | hello world hello w');
+    assert.equal(lines[1], '>   |  ^^^^^^^^^    ^^^^^ I also have a message');
+    assert.equal(lines[2], '> 2 | new line new line n');
+    assert.equal(lines[3], '>   |  ^^^^ This is the second line');
+  });
+
+  it('Multi-line highlight w/ truncation', () => {
+    let originalLine =
+      'hello world '.repeat(100) + '\n' + 'new line '.repeat(100);
+    let codeframeString = codeframe(
+      originalLine,
+      [
+        {
+          start: {
+            column: 2,
+            line: 1,
+          },
+          end: {
+            column: 151,
+            line: 2,
+          },
+          message: 'I have a message',
+        },
+      ],
+      {useColor: false, terminalWidth: 25},
+    );
+
+    let lines = codeframeString.split(LINE_END);
+    assert.equal(lines.length, 4);
+    assert.equal(lines[0], '> 1 | hello world hello w');
+    assert.equal(lines[1], '>   |  ^^^^^^^^^^^^^^^^^^');
+    assert.equal(lines[2], '> 2 | ew line new line ne');
+    assert.equal(lines[3], '>   | ^^^^^^ I have a message');
+  });
+
+  it('Should pad properly, T-650', () => {
+    let fileContent = readFileSync(
+      joinPath(__dirname, './fixtures/a.js'),
+      'utf8',
+    );
+    let codeframeString = codeframe(
+      fileContent,
+      [
+        {
+          start: {
+            line: 8,
+            column: 10,
+          },
+          end: {
+            line: 8,
+            column: 48,
+          },
+        },
+      ],
+      {
+        useColor: false,
+        syntaxHighlighting: false,
+        language: 'js',
+        terminalWidth: 100,
+      },
+    );
+
+    let lines = codeframeString.split(LINE_END);
+    assert.equal(lines.length, 5);
+    assert.equal(lines[0], `   7 | import Tooltip from '../tooltip';`);
+    assert.equal(
+      lines[1],
+      `>  8 | import VisuallyHidden from '../visually-hidden';`,
+    );
+    assert.equal(
+      lines[2],
+      '>    |          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^',
+    );
+    assert.equal(lines[3], '   9 | ');
+    assert.equal(lines[4], '  10 | /**');
+  });
 });

package/test/fixtures/a.js

@@ -0,0 +1,13 @@
+import test from 'test';
+import component from './component';
+
+/**
+ * This is a comment
+ */
+import Tooltip from '../tooltip';
+import VisuallyHidden from '../visually-hidden';
+
+/**
+ * This is another comment
+ */
+import {Label} from './label';