KaTeX plugin: add mhchem extension for chemical syntax (#3601)

* add chemParse (mchem extension)

* add mchem.min.js

* Update tiddlywiki.files

* add chemical reference link

* Rename mchem.min.js to mhchem.min.js

* Update tiddlywiki.files

* renaming mchem to mhchem

* Update readme.tid

* add chemical examples

* Update usage.tid

editions/katexdemo/tiddlers/HelloThere.tid

@@ -1,6 +1,6 @@
 title: HelloThere
 
-This is a TiddlyWiki plugin for mathematical typesetting based on KaTeX from Khan Academy.
+This is a TiddlyWiki plugin for mathematical and chemical typesetting based on KaTeX from Khan Academy.
 
 It is completely self-contained, and doesn't need an Internet connection in order to work. It works both in the browser and under Node.js.
 
@@ -16,9 +16,9 @@ The usual way to include ~LaTeX is to use `$$`, as shown in the examples below.
 
 The underlying KaTeX widget is provided under the name `<$latex>` and is also available under the alias `<$katex>`. It's better to use the generic `<$latex>` name unless you are running multiple ~LaTeX plugins and wish to specifically target KaTeX.
 
-! Examples
+! Examples - mathematical typesetting
 
-These examples are taken from http://khan.github.io/KaTeX/
+These examples are taken from [ext[http://khan.github.io/KaTeX/]]
 
 !! Example 1
 
@@ -69,7 +69,7 @@ For more flexibility the KaTeX widget can also be used via the full widget synta
 
 <$latex text="f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi" displayMode="true"></$latex>
 
-! Error Handling
+! ''Error Handling''
 
 Any LaTeX syntax errors are flagged with the problematic syntax highlighted. For example:
 
@@ -79,3 +79,85 @@ $$ f(x) = \int_{-\infty}^\infinity\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi $$
 
 $$ f(x) = \int_{-\infty}^\infinity\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi $$
 
+<hr>
+
+! Examples - chemical typesetting
+
+These examples are taken from [ext[https://mhchem.github.io/MathJax-mhchem/]]
+
+!! Example 1
+
+```
+$$
+\ce{CO2 + C -> 2 CO}
+$$
+```
+
+$$
+\ce{CO2 + C -> 2 CO}
+$$
+
+
+!! Example 2
+
+```
+$$
+\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}
+$$
+```
+
+$$
+\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}
+$$
+
+
+!! Example 3
+
+```
+$$
+\ce{x Na(NH4)HPO4 ->[\Delta] (NaPO3)_x + x NH3 ^ + x H2O}
+$$
+```
+
+$$
+\ce{x Na(NH4)HPO4 ->[\Delta] (NaPO3)_x + x NH3 ^ + x H2O}
+$$
+
+
+!! Example 4
+
+```
+$$
+\ce{A\bond{~--}B\bond{~=}C\bond{-~-}D}
+$$
+```
+
+$$
+\ce{A\bond{~--}B\bond{~=}C\bond{-~-}D}
+$$
+
+
+!! Example 5
+
+```
+$$
+\ce{Li^x_{Li,1-2x}Mg^._{Li,x}$V$'_{Li,x}Cl^x_{Cl}}
+$$
+```
+
+$$
+\ce{Li^x_{Li,1-2x}Mg^._{Li,x}$V$'_{Li,x}Cl^x_{Cl}}
+$$
+
+
+!! Example 6
+
+```
+$$
+\ce{Zn^2+  <=>[+ 2OH-][+ 2H+]  $\underset{\text{amphoteres Hydroxid}}{\ce{Zn(OH)2 v}}$  <=>[+ 2OH-][+ 2H+]  $\underset{\text{Hydroxozikat}}{\ce{[Zn(OH)4]^2-}}$}
+$$
+```
+
+$$
+\ce{Zn^2+  <=>[+ 2OH-][+ 2H+]  $\underset{\text{amphoteres Hydroxid}}{\ce{Zn(OH)2 v}}$  <=>[+ 2OH-][+ 2H+]  $\underset{\text{Hydroxozikat}}{\ce{[Zn(OH)4]^2-}}$}
+$$

plugins/tiddlywiki/katex/files/tiddlywiki.files

@@ -26,6 +26,13 @@
 			},
 			"prefix": "(function(document) {\n",
 			"suffix": "\n})(!$tw.browser ? $tw.fakeDocument : window.document)\n"
+		},{
+			"file": "mhchem.min.js",
+			"fields": {
+				"type": "application/javascript",
+				"title": "$:/plugins/tiddlywiki/katex/mhchem.min.js",
+				"module-type": "library"
+			}
 		}
 	]
 }

plugins/tiddlywiki/katex/readme.tid

@@ -1,6 +1,6 @@
 title: $:/plugins/tiddlywiki/katex/readme
 
-This is a TiddlyWiki plugin for mathematical typesetting based on [[KaTeX from Khan Academy|http://khan.github.io/KaTeX/]].
+This is a TiddlyWiki plugin for mathematical and chemical typesetting based on [ext[KaTeX from Khan Academy|http://khan.github.io/KaTeX/]] and [ext[mhchem|https://github.com/mhchem/MathJax-mhchem]] through a [ext[Katex extension|https://github.com/KaTeX/KaTeX/tree/master/contrib/mhchem]].
 
 It is completely self-contained, and doesn't need an Internet connection in order to work. It works both in the browser and under Node.js.
 

plugins/tiddlywiki/katex/ui/EditorToolbar/katex-dropdown.tid

@@ -51,3 +51,5 @@ title: $:/plugins/tiddlywiki/katex/ui/EditorToolbar/katex-dropdown
 </$button>
 
 [ext[KaTeX functions catalogue|https://khan.github.io/KaTeX/function-support.html]]
+
+[ext[Chemical equations reference|https://mhchem.github.io/MathJax-mhchem/]]

plugins/tiddlywiki/katex/usage.tid

@@ -1,5 +1,12 @@
 title: $:/plugins/tiddlywiki/katex/usage
 
+!! Reference:
+
+# Mathematical typesetting: [ext[https://katex.org/docs/supported.html]]
+# Chemical typesetting: [ext[https://mhchem.github.io/MathJax-mhchem/]]
+
+<hr>
+
 The usual way to include ~LaTeX is to use `$$`. For example:
 
 ```

plugins/tiddlywiki/katex/wrapper.js

@@ -13,7 +13,20 @@ Wrapper for `katex.min.js` that provides a `<$latex>` widget. It is also availab
 "use strict";
 
 var katex = require("$:/plugins/tiddlywiki/katex/katex.min.js"),
+    parseChem = require("$:/plugins/tiddlywiki/katex/mhchem.min.js"),
 	Widget = require("$:/core/modules/widgets/widget.js").widget;
+// Add \ce, \pu, and \tripledash to the KaTeX macros.
+katex.__defineMacro("\\ce", function(context) {
+  return chemParse(context.consumeArgs(1)[0], "ce")
+});
+katex.__defineMacro("\\pu", function(context) {
+  return chemParse(context.consumeArgs(1)[0], "pu");
+});
+//  Needed for \bond for the ~ forms
+//  Raise by 2.56mu, not 2mu. We're raising a hyphen-minus, U+002D, not 
+//  a mathematical minus, U+2212. So we need that extra 0.56.
+katex.__defineMacro("\\tripledash", "{\\vphantom{-}\\raisebox{2.56mu}{$\\mkern2mu"
++ "\\tiny\\text{-}\\mkern1mu\\text{-}\\mkern1mu\\text{-}\\mkern2mu$}}");
 
 var KaTeXWidget = function(parseTreeNode,options) {
 	this.initialise(parseTreeNode,options);