Merge pull request #12 from usaatyuk/code-highlighting

Code highlighting

frontend/package.json

@@ -9,6 +9,7 @@
     "@types/autoprefixer": "^9.4.0",
     "@types/enzyme": "^3.9.1",
     "@types/enzyme-adapter-react-16": "^1.0.5",
+    "@types/highlight.js": "^9.12.3",
     "@types/jest": "^24.0.11",
     "@types/node-sass": "^4.11.0",
     "@types/parcel-bundler": "^1.12.0",
@@ -17,21 +18,21 @@
     "@types/react-redux": "^7.0.6",
     "@types/react-router": "^4.4.5",
     "@types/react-router-dom": "^4.3.2",
+    "@types/sass": "^1.16.0",
     "autoprefixer": "^9.5.1",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.12.1",
     "jest": "^24.7.1",
-    "node-sass": "^4.11.0",
     "parcel-bundler": "^1.12.3",
     "postcss-modules": "^1.4.1",
     "redux-devtools-extension": "^2.13.8",
+    "sass": "^1.19.0",
     "ts-jest": "^24.0.2"
   },
   "dependencies": {
     "@blueprintjs/core": "^3.15.1",
     "@blueprintjs/icons": "^3.8.0",
-    "http2": "^3.3.7",
-    "rea": "0.0.1",
+    "highlight.js": "^9.15.6",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-markdown": "^4.0.6",

frontend/src/Documents/CodeBlock.scss

@@ -0,0 +1,5 @@
+@import "../../node_modules/highlight.js/styles/a11y-light";
+
+.bp3-dark {
+    @import "../../node_modules/highlight.js/styles/a11y-dark";
+}

frontend/src/Documents/CodeBlock.tsx

@@ -0,0 +1,58 @@
+/* tslint:disable: blueprint-html-components */
+
+import * as hljs from "highlight.js";
+import * as React from "react";
+
+import "./CodeBlock.scss";
+
+export interface ICodeBlockProps {
+    value: string;
+    language?: string;
+}
+
+interface ICodeBlockState {
+    ref: HTMLElement | null;
+}
+
+export class CodeBlock extends React.PureComponent<
+    ICodeBlockProps,
+    ICodeBlockState
+> {
+    constructor(props: ICodeBlockProps) {
+        super(props);
+
+        this.setRef = this.setRef.bind(this);
+        this.state = { ref: null };
+    }
+
+    public render() {
+        return (
+            <pre>
+                <code
+                    ref={this.setRef}
+                    className={"lang-" + this.props.language}
+                >
+                    {this.props.value}
+                </code>
+            </pre>
+        );
+    }
+
+    public componentDidMount() {
+        this.highlightCode();
+    }
+
+    public componentDidUpdate() {
+        this.highlightCode();
+    }
+
+    private highlightCode() {
+        if (this.state.ref) {
+            hljs.highlightBlock(this.state.ref);
+        }
+    }
+
+    private setRef(ref: HTMLElement) {
+        this.setState({ ref });
+    }
+}

frontend/src/Documents/Docs.scss

@@ -107,7 +107,9 @@
             border-radius: 3px;
             border: 1px solid $light-gray2;
             background-color: $light-gray5;
+            padding: 0.75rem;
             code {
+                padding: 0;
                 background-color: inherit;
                 border: none;
             }

frontend/src/Documents/DocumentView.tsx

@@ -10,12 +10,14 @@ import { IDocumentJSON } from "~../../src/entity/Document";
 import { LoadingStub } from "~LoadingStub";
 import { fetchDocsStart } from "~redux/docs/actions";
 import { IAppState } from "~redux/reducers";
+import { CodeBlock } from "./CodeBlock";
 
 export interface IDocumentViewComponentProps extends RouteComponentProps {
     allDocs: { [key: number]: IDocumentJSON };
 
     fetching: boolean;
     spinner: boolean;
+
     fetchDocs: () => void;
 }
 
@@ -42,7 +44,12 @@ export class DocumentViewComponent extends React.PureComponent<
                         </div>
                     </div>
                     <div className="documentContents">
-                        <Markdown source={doc.content} />
+                        <Markdown
+                            source={doc.content}
+                            renderers={{
+                                code: CodeBlock,
+                            }}
+                        />
                     </div>
                 </div>
             );

frontend/src/Documents/tests/CodeBlock.test.tsx

@@ -0,0 +1,27 @@
+import { mount } from "enzyme";
+import * as React from "react";
+
+import * as hljs from "highlight.js";
+import { CodeBlock } from "../CodeBlock";
+
+const highlightSpy = jest.spyOn(hljs, "highlightBlock");
+
+afterEach(() => {
+    jest.restoreAllMocks();
+});
+
+describe("<CodeBlock />", () => {
+    it("should render code and highlight it when updated", () => {
+        const text1 = `console.log("Hello")`;
+        const text2 = `console.log("world")`;
+        const wrapper = mount(<CodeBlock value={text1} language="js" />);
+
+        expect(wrapper.find("pre")).toHaveLength(1);
+        expect(wrapper.text()).toBe(text1);
+        expect(highlightSpy).toHaveBeenCalledTimes(1);
+
+        wrapper.setProps({ value: text2, language: "js" });
+        expect(wrapper.text()).toBe(text2);
+        expect(highlightSpy).toHaveBeenCalledTimes(2);
+    });
+});

package-lock.json

@@ -1598,7 +1598,7 @@
             },
             "doctrine": {
                "version": "1.5.0",
-               "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-1.5.0.tgz",
+               "resolved": "http://registry.npmjs.org/doctrine/-/doctrine-1.5.0.tgz",
                "integrity": "sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=",
                "dev": true,
                "requires": {
@@ -1617,7 +1617,7 @@
             },
             "load-json-file": {
                "version": "2.0.0",
-               "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
+               "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
                "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=",
                "dev": true,
                "requires": {