From 43e55a963bef2a2e4740ce27d456927b020b71f2 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Thu, 25 Oct 2018 12:19:56 +0100
Subject: Feature/syntaxhighlighting (#9)

* wip code highlighting of lines

* Implements gutter component

* WIP: Profiler with gutter

* cleaned up highlight code

* Removes before content for gutter styling

* Styles gutter

* Add correct Profiler code content

* Adds color variable for gutter gray

* refactor code component width gutter and diffing
---
 packages/dev-tools-pages/ts/highlight.tsx | 47 ++++++++++++++++++++++++++++---
 1 file changed, 43 insertions(+), 4 deletions(-)

(limited to 'packages/dev-tools-pages/ts/highlight.tsx')

diff --git a/packages/dev-tools-pages/ts/highlight.tsx b/packages/dev-tools-pages/ts/highlight.tsx
index 9d7844c89..7187118d0 100644
--- a/packages/dev-tools-pages/ts/highlight.tsx
+++ b/packages/dev-tools-pages/ts/highlight.tsx
@@ -1,8 +1,47 @@
-const highlight = require('highlight.js/lib/highlight');
+const hljs = require('highlight.js/lib/highlight');
 const javascript = require('highlight.js/lib/languages/javascript');
-const json = require('highlight.js/lib/languages/json');
 
-highlight.registerLanguage('javascript', javascript);
-highlight.registerLanguage('json', json);
+hljs.registerLanguage('javascript', javascript);
+
+interface PatchInterface {
+    [key: string]: string;
+}
+
+var PATCH_TYPES: PatchInterface = {
+    '+': 'addition',
+    '-': 'deletion',
+    '!': 'change',
+};
+
+function diffHighlight(language: string, code: any, gutter: any) {
+    return code
+        .split(/\r?\n/g)
+        .map((line: string, index: number) => {
+            var type;
+            if (/^-{3} [^-]+ -{4}$|^\*{3} [^*]+ \*{4}$|^@@ [^@]+ @@$/.test(line)) {
+                type = 'chunk';
+            } else if (/^Index: |^[+\-*]{3}|^[*=]{5,}$/.test(line)) {
+                type = 'header';
+            } else {
+                type = PATCH_TYPES[line[0] as string] || 'null';
+                line = line.replace(/^[+\-! ]/, '');
+            }
+
+            const g = gutter[index];
+
+            return `<span data-test="${g !== undefined ? g + 'x' : ''}" class="line-${type}">${
+                hljs.highlight(language, line).value
+            }</span>`;
+        })
+        .join('\n');
+}
+
+function highlight(language: string, code: string, diff: boolean, gutter: any) {
+    if (diff) {
+        return diffHighlight(language, code, gutter);
+    }
+
+    return hljs.highlight(language, code).value;
+}
 
 export default highlight;
-- 
cgit v1.2.3