From 54e597db7ec6c6cdfc3b4616d752c66da81481d2 Mon Sep 17 00:00:00 2001
From: Greg Price <greg@zulipchat.com>
Date: Thu, 26 Mar 2020 14:54:34 -0700
Subject: [PATCH] webview: Add LaTeX math support!

This incorporates the same KaTeX library we use in the Zulip webapp.
We add the dependency, add a build-webview step to copy the needed
files, and apply the stylesheet in our WebView HTML.

There are a couple of cases where the resulting HTML and CSS
doesn't quite look right.  We'll go on to take care of those in
upcoming commits.

Fixes: #2660
---
 package.json           |  1 +
 src/webview/css/css.js |  1 +
 tools/build-webview    | 21 ++++++++++++++++++++-
 yarn.lock              |  7 +++++++
 4 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 7f300e2dead..eec2fa1ec4b 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "blueimp-md5": "^2.10.0",
     "color": "^3.0.0",
     "date-fns": "^1.29.0",
+    "katex": "^0.11.1",
     "lodash.escape": "^4.0.1",
     "lodash.isequal": "^4.4.0",
     "lodash.omit": "^4.5.0",
diff --git a/src/webview/css/css.js b/src/webview/css/css.js
index 2bed42de1f2..0440b418140 100644
--- a/src/webview/css/css.js
+++ b/src/webview/css/css.js
@@ -6,6 +6,7 @@ import cssNight from './cssNight';
 
 export default (theme: ThemeName) => `
 <link rel='stylesheet' type='text/css' href='./base.css'>
+<link rel='stylesheet' type='text/css' href='./katex/katex.min.css'>
 <style>
 ${theme === 'night' ? cssNight : ''}
 ${cssPygments(theme === 'night')}
diff --git a/tools/build-webview b/tools/build-webview
index 8fa0ac8c974..1aec8a3c73b 100755
--- a/tools/build-webview
+++ b/tools/build-webview
@@ -156,8 +156,27 @@ sync() {
           --filter='. /dev/stdin'
 }
 
-# Sync the directory structure, preserving metadata.
+# Copy over files from KaTeX.
+sync "${root}/node_modules/katex/dist" "${dest}/katex" <<EOF
++ /katex.min.css
+
+# The KaTeX JS renders LaTeX code into HTML and MathML.
+# Our webview already has HTML and MathML, and just needs to style it.
+#+ /katex.min.js
+
+# The woff2 font format is preferred for browsers that support it,
+# which include Chrome 36+ and Mobile Safari 10+.  So that's all we need.
++ /fonts/
++ /fonts/*.woff2
+
+- *
+EOF
+
+# Copy over our own files.
 sync "${root}/src/webview/static" "${dest}" <<EOF
+# Leave alone the katex directory we just made.
+-,r /katex
+
 + /index.html
 + /base.css
 - *
diff --git a/yarn.lock b/yarn.lock
index ef5c1a9ab40..fb8c310d68e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5660,6 +5660,13 @@ jszip@^3.1.5:
     readable-stream "~2.3.6"
     set-immediate-shim "~1.0.1"
 
+katex@^0.11.1:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/katex/-/katex-0.11.1.tgz#df30ca40c565c9df01a466a00d53e079e84ffaa2"
+  integrity sha512-5oANDICCTX0NqYIyAiFCCwjQ7ERu3DQG2JFHLbYOf+fXaMoH8eg/zOq5WSYJsKMi/QebW+Eh3gSM+oss1H/bww==
+  dependencies:
+    commander "^2.19.0"
+
 katex@^0.7.1:
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/katex/-/katex-0.7.1.tgz#06bb5298efad05e1e7228035ba8e1591f3061b8f"