From 54510ddf32b8771e963eec31bbc18bf4fbce4e81 Mon Sep 17 00:00:00 2001
From: Peter Cai <peter@typeblog.net>
Date: Tue, 18 Feb 2020 10:33:12 +0800
Subject: [PATCH] contentEditable: support code highlighting

---
 package-lock.json                   |  6 ++++++
 package.json                        |  1 +
 src/web/index.coffee                |  1 +
 src/web/pastebin.coffee             |  1 +
 src/web/styles/pastebin.scss        |  1 +
 src/web/util/contentEditable.coffee | 19 +++++++++++++++++--
 6 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b9ac9df..77a7c82 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index d57408e..9589417 100644
--- a/package.json
+++ b/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",
diff --git a/src/web/index.coffee b/src/web/index.coffee
index f3b93b0..535bce5 100644
--- a/src/web/index.coffee
+++ b/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"
diff --git a/src/web/pastebin.coffee b/src/web/pastebin.coffee
index ba225b7..d0f79f1 100644
--- a/src/web/pastebin.coffee
+++ b/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>
 
diff --git a/src/web/styles/pastebin.scss b/src/web/styles/pastebin.scss
index 46ffa2b..c810160 100644
--- a/src/web/styles/pastebin.scss
+++ b/src/web/styles/pastebin.scss
@@ -11,4 +11,5 @@
     overflow-y: auto;
     text-align: left;
     box-sizing: border-box;
+    font-family: monospace;
 }
\ No newline at end of file
diff --git a/src/web/util/contentEditable.coffee b/src/web/util/contentEditable.coffee
index cbbc9d2..1f87f85 100644
--- a/src/web/util/contentEditable.coffee
+++ b/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/>