fixes to katex

- report errors
- non-greedy match
- handle inner newline
- handle surrounding punctuation

package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@types/immutable": "^3.8.4",
     "@types/jquery": "^2.0.34",
+    "@types/katex": "^0.5.0",
     "@types/lodash": "^4.14.36",
     "@types/react": "^0.14.36",
     "@types/react-dom": "^0.14.18",
@@ -27,8 +28,7 @@
     "katex": "^0.7.1",
     "lodash": "^4.15.0",
     "react": "^15.3.1",
-    "react-dom": "^15.3.1",
-    "react-katex": "^1.1.0"
+    "react-dom": "^15.3.1"
   },
   "devDependencies": {
     "@types/mocha": "^2.2.32",

src/plugins/latex/index.tsx

@@ -1,26 +1,29 @@
 import React from 'react'; // tslint:disable-line no-unused-variable
-///<reference path="typings/katex.d.ts"/>
 import katex from 'katex';
-///<reference path="typings/react-katex.d.ts"/>
-import { InlineMath, BlockMath } from 'react-katex';
 import 'katex/dist/katex.min.css';
 
 import { Token, RegexTokenizerSplitter, EmitFn } from '../../assets/js/utils/token_scanner';
 import { registerPlugin } from '../../assets/js/plugins';
 
+// ignore the group, allow whitespace, beginning of line, or open paren
+const latexPreRegex = '(?:\\s|^|\\()';
+// ignore the group, allow whitespace, end of line, punctuation, or close paren
+const latexPostRegex = '(?:\\s|$|\\.|,|!|\\?|\\))';
+
 registerPlugin<void>(
   {
     name: 'LaTeX',
     author: 'Jeff Wu',
     description: `
       Lets you inline LaTeX between $ delimiters,
       or add block LaTeX between $$ delimiters.
+      Limited to what KaTeX supports.
     `,
   },
   function(api) {
     api.registerHook('session', 'renderLineTokenHook', (tokenizer) => {
       return tokenizer.chain(RegexTokenizerSplitter<React.ReactNode>(
-        new RegExp('(?:\\s|^)(\\$\\$.+\\$\\$)(?:\\s|$)'),
+        new RegExp(latexPreRegex + '(\\$\\$(\\n|.)+?\\$\\$)' + latexPostRegex),
         (token: Token, emitToken: EmitFn<Token>, emit: EmitFn<React.ReactNode>) => {
           for (let i = 0; i < token.info.length; i++) {
             if (token.info[i].cursor) {
@@ -31,18 +34,15 @@ registerPlugin<void>(
             }
           }
           try {
-            katex.__parse(token.text.slice(2, -2));
-            emit(
-              <BlockMath key={`latex-${token.index}`}>
-                {token.text.slice(2, -2)}
-              </BlockMath>
-            );
+            const html = katex.renderToString(token.text.slice(2, -2), { displayMode: true });
+            emit(<div key={`latex-${token.index}`} dangerouslySetInnerHTML={{__html: html}}/>);
           } catch (e) {
+            api.session.showMessage(e.message, { text_class: 'error' });
             emitToken(token);
           }
         }
       )).chain(RegexTokenizerSplitter<React.ReactNode>(
-        new RegExp('(?:\\s|^)(\\$.+\\$)(?:\\s|$)'),
+        new RegExp(latexPreRegex + '(\\$(\\n|.)+?\\$)' + latexPostRegex),
         (token: Token, emitToken: EmitFn<Token>, emit: EmitFn<React.ReactNode>) => {
           for (let i = 0; i < token.info.length; i++) {
             if (token.info[i].cursor) {
@@ -53,13 +53,10 @@ registerPlugin<void>(
             }
           }
           try {
-            katex.__parse(token.text.slice(-1, 1));
-            emit(
-              <InlineMath key={`latex-${token.index}`}>
-                {token.text.slice(1, -1)}
-              </InlineMath>
-            );
+            const html = katex.renderToString(token.text.slice(1, -1), { displayMode: false });
+            emit(<span key={`latex-${token.index}`} dangerouslySetInnerHTML={{__html: html}}/>);
           } catch (e) {
+            api.session.showMessage(e.message, { text_class: 'error' });
             emitToken(token);
           }
         }