contentEditable: support code highlighting

package-lock.json

@@ -3776,6 +3776,12 @@
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
       "dev": true
     },
+    "highlight.js": {
+      "version": "9.18.1",
+      "resolved": "https://registry.npm.taobao.org/highlight.js/download/highlight.js-9.18.1.tgz",
+      "integrity": "sha1-7SGqAB/mJSuxCj121HVzxlOf4Tw=",
+      "dev": true
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",

package.json

@@ -22,6 +22,7 @@
     "coffeescript": "^2.5.1",
     "css-loader": "^3.4.2",
     "fast-xml-parser": "^3.16.0",
+    "highlight.js": "^9.18.1",
     "html-webpack-inline-source-plugin": "0.0.10",
     "html-webpack-plugin": "^3.2.0",
     "json-loader": "^0.5.7",

src/web/index.coffee

@@ -1,6 +1,7 @@
 import React from "react"
 import ReactDOM from "react-dom"
 import "./styles/index.scss"
+import "highlight.js/scss/github.scss"
 import Home from "./home"
 
 elem = document.createElement "div"

src/web/pastebin.coffee

@@ -18,6 +18,7 @@ class Pastebin extends React.Component
         className="content-pastebin-edit"
         onUpdate={@onEditTextUpdate}
         value={@state.text}
+        highlightCode
         plainText/>
     </div>
 

src/web/styles/pastebin.scss

@@ -11,4 +11,5 @@
     overflow-y: auto;
     text-align: left;
     box-sizing: border-box;
+    font-family: monospace;
 }

src/web/util/contentEditable.coffee

@@ -1,5 +1,6 @@
 import React from "react"
 import ReactDOM from "react-dom"
+import hljs from "highlight.js"
 
 # Wrapper for a content-editable div
 # <https://stackoverflow.com/questions/22677931/react-js-onchange-event-for-contenteditable>
@@ -16,6 +17,10 @@ class ContentEditable extends React.Component
     else
       @domNode.innerHTML = text
 
+  codeHighlight: ->
+    if @props.plainText and @props.highlightCode
+      @domNode.innerHTML = hljs.highlightAuto(@domNode.innerText).value
+
   componentDidMount: ->
     @domNode = ReactDOM.findDOMNode @
 
@@ -23,11 +28,17 @@ class ContentEditable extends React.Component
     @domNode = null
 
   shouldComponentUpdate: (nextProps) ->
-    nextProps.value != @getText()
+    nextProps.value != @getText() or
+      nextProps.plainText != @props.plainText or
+      nextProps.highlightCode != @props.highlightCode
 
   componentDidUpdate: ->
     if @props.value != @getText()
       @setText @props.value
+      # Note that we will only update when the value passed by parent
+      # is different than what we know, i.e. the parent requested
+      # a change in value
+      @codeHighlight()
 
   emitUpdate: =>
     if @props.onUpdate
@@ -37,6 +48,10 @@ class ContentEditable extends React.Component
         target:
           value: @getText()
 
+  onBlur: =>
+    @codeHighlight()
+    @emitUpdate()
+
   onPaste: (ev) =>
     return false if not @props.plainText
     # <https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event>
@@ -52,7 +67,7 @@ class ContentEditable extends React.Component
     <div
       className={"#{@props.className} editable"}
       onInput={@emitUpdate}
-      onBlur={@emitUpdate}
+      onBlur={@onBlur}
       onPaste={@onPaste}
       spellCheck={false}
       contentEditable/>