@zzish/math-rich-input 0.1.1 → 0.1.2

package/README.md

@@ -1,13 +1,12 @@
 # MathRichInput
 
-This project is a math rich input component that allows users to edit a "text area" with the following key features:
-
-1. Ability to render, insert and edit equations in the input field
-2. A toolbar that appears on focus:
-  - Buttons for bold, italic, underline, subscript and superscript
-  - Button for accents
-  - Button for inserting equations
+This project is a `MathRichInput` component that allows users to edit a "text area" with the following key features:
 
+1. Ability to render, insert and edit mathematical equations in the input field
+2. A toolbar that appears on focus with:
+  - Five buttons for bold, italic, underline, subscript and superscript
+  - A button for accents and other special characters
+  - A button to bring up a WYSIWIG equation editor and insert equations
 
 ## Usage
 
@@ -71,6 +70,21 @@ export default class App extends Component {
   />
 }
 ```
+### Legacy usage
+
+By default the `MathRichInput` will output content in html via the `onChange` callback method. You can force it to output tex and plain text instead using the `outputTex` and `outputPlainText` properties as follows:
+
+```js
+  <MathRichInput
+    outputTex={true}
+    outputPlainText={true}
+    value={this.state.value}
+    mimeType={this.state.mimeType}
+    options={this.state.options}
+    onChange={this.handleInputChange}
+  />
+```
+
 
 ### Rendering content created using MathRichInput with MathRichArea
 
@@ -82,91 +96,106 @@ export default class App extends Component {
 
 See the section on MathRichArea below for more information and alternative ways to render.
 
-#### Mime type
+## Mime types
 
-In basic usage, the MathRichInput will attempt to work out the appropriate mime type for the inital value property if supplied. However, it is good practice to explicitly set the initial mime type when it is known. For normal usage you can simply set the mime type to application/x-zzish-html-math. You only need to read further if you have preexisting content in application/x-tex format.
+In basic usage, the `MathRichInput` will attempt to work out the appropriate mime type for the inital value property if not supplied. However, it is good practice to explicitly set the initial mime type when it is known. For normal usage of `MathRichInput` using default settings, you can simply set the mime type to `application/x-zzish-html-math`. You only need to read further if you have preexisting content in `text/plain` or `application/x-tex` mime types.
 
 The four supported mime types are:
 
-1. text/plain
-2. text/html
-3. application/x-zzish-html-math 
-4. application/x-tex
+1. `text/plain`
+2. `application/x-tex`
+3. `text/html`
+4. `application/x-zzish-html-math`
+
+2 and 4 support math equations.
+
+Content in the `application/x-tex` mime type contains maths in tex equation format between a pair of $ symbols, or pairs of escaped round or square brackets, `\( \)` or `\[ \]`. 
+
+Content in the `application/x-zzish-html-math` contains maths in tex equation format between a pair of `<math></math>` tags.
 
-The latter two mime types support math equations. Content in the application/x-tex mime type contains maths in tex equation format between a pair of $ symbols. Content in the application/x-zzish-html-math contains maths in tex equation format between a pair of `<math></math>` tags.  Here are examples of the two types:
+Here are examples of content in the two types:
 
 * "Find all solutions for $x$ when $x^2 + 4x - 2 = \sqrt{9}$"
 * "Find `<b>`all`</b>` solutions for `<math>`x`</math>` when `<math>`x^2 + 4x - 2 = \sqrt{9}`</math>`"
 
-Note that the application/x-zzish-html-math mime type allows for text with full html formatting richness including `<p></p>`,`<b></b>`,`<i></i>`,`<u></u>`,`<sup></sup>` and `<sub></sub>` tags.
+Note that the `application/x-zzish-html-math` mime type allows for text with full html formatting richness including `<p></p>`,`<b></b>`,`<i></i>`,`<u></u>`,`<sup></sup>` and `<sub></sub>` tags.
 
-The MathRichInput supports the four mime types above, but the key consideration for developers is choosing witheter to set the mime-type initially to one of application/x-tex or application/x-zzish-html-math.
+The MathRichInput supports the four mime types above, but the key consideration for developers is choosing witheter to set the mime-type initially to one of `plain/text`, `application/x-tex` or `application/x-zzish-html-math`.
 
-If your content is only ever created using this MathRichInput component, then you can safely always set the mimeType to application/x-zzish-html-math. This is because, by default, the component will only ever output content in one of the first three mime types and the application/x-zzish-html-math mime type is a superset of the text/plain and text/html formats.
+If your content is only ever created using this `MathRichInput` component with default settings, then you can safely always set the mimeType to `application/x-zzish-html-math`. This is because, by default, the component will only ever output content as `text/html` or `application/x-zzish-html-math` and the `application/x-zzish-html-math` mime type is a superset of the `text/html` mime type.
 
-If, however, you have some legacy content in tex/latex format, you should set the mimeType to application/x-tex when the legacy content is known to be in tex/latex format.  If you are unsure whether the content is tex or not, then you can not set a mime type and the MathRichInput will determine the best mime-type. 99% of the time the MathRichInput will choose the correct mime type.
+If, however, you have some legacy content in plain text or tex/latex format, you should ideally set the mimeType as appropriate. If you are unsure as to the type of your content, then you can leave the mime type unset and the `MathRichInput` will choose the best mime-type automatically. It will generally make good choices, but it will make the wrong choice on plain text such as the following:
 
-Whatever the value and mime type of any initial content provided, the input field will always return the content in one of the first three mime types by default (via the onChange callback method):
+* "To bold text in html you should put the text betweeen `<b>` and `<\b>` tags"
 
-1. text/plain
-2. text/html
-3. application/x-zzish-html-math 
+In this example, the automatic detection will assume this is html, as it will identify the bold html tags. It will thus bold the word 'and'. It is not possible for the automatic detection to determine that this was in fact plain text.
 
-These mime types should ideally be stored along with the value and supplied to the MathRichInput and MathRichArea in future.
+Whatever the value and mime type of any initial content provided, the input field will always return the content in one of the two html mime types by default (via the onChange callback method):
 
-If you desire the output to be in tex\latex, then pass the parameter outputTex={true}. When you choose to output in tex, font styling (eg. bold) and multiline are disabled for users. Unless you have a good reason to output in tex, you should not use this settting.
+1. `text/html`
+3. `application/x-zzish-html-math` 
 
-#### Options
+These mime types should ideally be stored along with the value and supplied back to the `MathRichInput` and `MathRichArea` in future.
+
+If you desire the output to be `tex\latex`, then pass the parameter `outputTex={true}`. When you choose to output in tex, font styling (eg. bold) and multiline are disabled for users.
+
+By default, any output content that does not contain multiple lines (i.e. `<p></p>` tags), any html font styling (e.g. `<b></b>`), or any math elements will still be returned as `text\html` and any special html characters will be converted to their html codings (for example `<` will be converted to `&gt;`). If required you can choose to have content that does not need any html or math formatting returned as plain text using `outputPlainText={true}`.
+
+In general, unless you have a *very* good reason to, you should not set `outputTex={true}` or `outputPlainText={true}` and you should have your content returned as html (`text/html`) or html math (`application/x-zzish-html-math`) as happens with the default settings.
+
+## Options
 
 The options property is used to return the current state of the equation editor so that if the user closes and reopens the equation editor, the state is remembered. In particular it allows you to store whether the user: 
 
 * Is using the equation editor in expert mode
-* Has selected a specific synbols tab
+* Has selected a specific symbols tab
 
 Note that normally options should be a global object with the same options used across all input fields. This is so that the user does not need to reselect expert mode and/or select the same tab each time they reopen the equation editor.
 
-The options property can be initialed to null rather than set explicitly as above. The options can be saved against the users persistent settings if desired.
+The options property can be initialised to null rather than set explicitly as above. The options can be saved against the user's persistent user settings if desired.
 
 #### Other properties
 
 ##### enableFontStyling
 
-(not yet implemented) 
-
-Set enableFontStyling={false} to:
+Set `enableFontStyling={false}` to:
 
 * Disable the bold, italic, underline, subscript and superscript buttons on the toolbar
 * Disalbe CTRL-B and other font styling hot keys
 
 ##### enableMultiline
 
-(not yet implemented) 
-
-Set enableMultiline={false} to:
+Set `enableMultiline={false}` to:
 
 * Disable new lines being entered by pressing the return key
 
 ##### enableMath
 
-Set enableMath={false} to:
+Set `enableMath={false}` to:
 
 * Disable the equation editor button on the toolbar
 
 ##### outputTex
 
-(not yet implemented) 
-
-Set outputTex={true} to:
+Set `outputTex={true}` to:
 
 * Force output to be in tex (math equations are enclosed in a pair of $ symbols)
 
-As a side effect, this also implicitly sets enableMultiline and enableFontStyling to false (see above).
+As a side effect, this also implicitly sets `enableMultiline` and `enableFontStyling` to false (see above).
+
+##### outputPlainText
+
+Set `outputPlainText={true}` to:
+
+* Force output to be in plain text when the input text contains no html and no maths
+
+Note that this does not disable multiline or font styling
 
 ##### editable
 
 (not yet implemented) 
 
-Set editable={false} to purely render the value and not allow it to be edited by the user. Note that normally you would use the non-editable MathRichArea component to purely render values (it is a much lighter component).
+Set `editable={false}` to purely render the value and not allow it to be edited by the user. Note that normally you would use the non-editable MathRichArea component to purely render values (it is a much lighter component).
 
 ## MathRichArea
 
@@ -187,7 +216,7 @@ For example, assuming that you had a page containing some content:
   <div className="question">{this.state.questionText}</div>
   <div className="answer">{this.state.answerText}</div>
 ```
-where the question and answer text was simple text in the legacy codebase, but is not the content.value returned from a MathRichInput (and thus may - or may not - contain html or maths).
+where the question and answer text was simple text in any one of the four supported mime types.
 
 Simply add the following code:
 

package/dist/index.js

@@ -20466,6 +20466,8 @@ function isTextLatexMath(text) {
   // We need at least two dollar signs to be latex
   var i = text.indexOf("$");
   if (i < 0) return false;
+  var j = text.indexOf("\\$");
+  if (j >= 0) return true;
   i = text.indexOf("$", i + 1);
   if (i < 0) return false; // Lets try and extract the potentially latex nodes
 
@@ -20528,15 +20530,15 @@ function isTextLatexMath(text) {
         var allWords = true;
         var longWord = false;
 
-        for (var j = 0; j < words.length; j++) {
+        for (var _j = 0; _j < words.length; _j++) {
           // console.log(j+":"+words[j])
-          if (words[j].length > 0 && WORDS_REG_EXP.test(words[j]) === false) {
+          if (words[_j].length > 0 && WORDS_REG_EXP.test(words[_j]) === false) {
             // console.log("Not: "+words[j])
             allWords = false;
             break;
           }
 
-          if (words[j].length >= 3) longWord = true;
+          if (words[_j].length >= 3) longWord = true;
         }
 
         if (allWords && longWord) return false;
@@ -20619,18 +20621,25 @@ function determineMimeType(text) {
         {this.test("$a bcd> e$", "application/x-tex")}
 */
 
-var RAW_TEXT_MATH_START_TAG_TEX = "$";
-var RAW_TEXT_MATH_END_TAG_TEX = "$";
+var RAW_TEXT_MATH_START_TAG_TEX = "\\[";
+var RAW_TEXT_MATH_END_TAG_TEX = "\\]";
 var RAW_TEXT_MATH_START_TAG_HTML_MATH = "<math>";
 var RAW_TEXT_MATH_END_TAG_HTML_MATH = "</math>";
 var INLINE_TEX_REG_EXP = /\$\$[\s\S]+?\$\$|\\\[[\s\S]+?\\\]|\\\([\s\S]+?\\\)|\$[^$\\]*(?:\\.[^$\\]*)*\$/g;
-var BLOCK_TEX_REG_EXP = /\$\$[\s\S]+?\$\$|\\\[[\s\S]+?\\\]/g; // const HTML_MATH_REG_EXP = /<math>.*?<\/math>/gi;
+var BLOCK_TEX_REG_EXP = /\$\$[\s\S]+?\$\$|\\\[[\s\S]+?\\\]/g; // const INLINE_TEX_REG_EXP = /(?<!\\)\$[\s\S]+?(?<!\\)\$/g
+// In general, (?<!Y)X matches an X that is not preceded by a Y.  so (?<!\\)\$
+// const INLINE_TEX_REG_EXP = /(?<!\\)(?:((?<!\$)\${1,2}(?!\$))|(\\\()|(\\\[)|(\\begin\{equation\}))(?(1)(.*?)(?<!\\)(?<!\$)\1(?!\$)|(?:(.*(?R)?.*)(?<!\\)(?:(?(2)\\\)|(?(3)\\\]|\\end\{equation\})))))/
+// const HTML_MATH_REG_EXP = /<math>.*?<\/math>/gi;
 
 var HTML_MATH_REG_EXP = /<math>[\s\S]*?<\/math>/gi;
 var SPAN_OPEN_BASE = "<span class=\"base\">";
 var SPAN_CLOSE = "</span>";
-var MARK$1 = "_M_A_R_K_";
+var MARK$1 = String.fromCharCode(0); // const MARK = "_M_A_R_K_"
+
 var MARK_REG_EXP$1 = new RegExp(MARK$1, "g");
+var TEMP_CHAR = String.fromCharCode(1);
+var TEMP_CHAR_REG_EXP = new RegExp(TEMP_CHAR, "g");
+var DOLLAR_SLASH_REG_EXP = /\\\$/g;
 var SMALL_SPACE_CHAR_CODE$1 = 8203;
 var SMALL_SPACE$1 = String.fromCharCode(SMALL_SPACE_CHAR_CODE$1);
 var SMALL_SPACE_REG_EXP = new RegExp(SMALL_SPACE$1, "g");
@@ -20772,7 +20781,6 @@ function getLatex(node) {
     // <annotation encoding="application/x-tex">L' = {L}{\sqrt{1-\frac{v^2}{c^2}}}</annotation>
     var annotation = getFirstDescendentByTagName(node, "annotation");
     var latex = annotation.childNodes[0].nodeValue;
-    latex = decodeLatex(latex);
     return latex;
   } catch (error) {
     console.error(error);
@@ -20822,41 +20830,60 @@ var decodeFromHtml = function () {
 // Note we don't need to encode it so do nothing here
 
 
-function encodeLatex(text) {
+function encodeToLatex(text) {
   // console.log("Pre-encoded: "+text)
-  // console.log("Post-encoded: "+text)
+  text = text.replace(/\$/g, "\\$"); // console.log("Post-encoded: "+text)
+
   return text;
 } // Note we don't need to decode it so do nothing here
 
 
-function decodeLatex(text) {
+function decodeFromLatex(text) {
   // console.log("Pre-decoded: "+text)
-  // console.log("Post-decoded: "+text)
+  text = text.replace(/\\\$/g, "$"); // console.log("Post-decoded: "+text)
+
   return text;
 }
 
+function removeEncodingIfPlainText(text, mimeType, useHtmlMath) {
+  if (mimeType !== MIME_TYPE_PLAIN_TEXT$1) return text;
+  if (useHtmlMath) return decodeFromHtml(text);else return decodeFromLatex(text);
+}
+
 function addText(arrayOfText, text, mark, offset) {
+  var useHtmlMath = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
+
   // console.log("Mark: "+mark)
   if (offset === 0) {
     if (mark) {
-      arrayOfText.push(MARK$1); // arrayOfText.push(" ")
-
+      arrayOfText.push(MARK$1);
       arrayOfText.push(MARK$1);
     }
 
     arrayOfText.push(text);
   } else {
-    var decoded = decodeFromHtml(text); // console.log("Decoded: "+decoded)
+    if (useHtmlMath) {
+      var decoded = decodeFromHtml(text);
+      arrayOfText.push(encodeToHtml(decoded.substring(0, offset)));
 
-    arrayOfText.push(encodeToHtml(decoded.substring(0, offset)));
+      if (mark) {
+        arrayOfText.push(MARK$1);
+        arrayOfText.push(MARK$1);
+      }
 
-    if (mark) {
-      arrayOfText.push(MARK$1); // arrayOfText.push(" ")
+      arrayOfText.push(encodeToHtml(decoded.substring(offset)));
+    } else {
+      var _decoded = decodeFromLatex(text);
 
-      arrayOfText.push(MARK$1);
-    }
+      arrayOfText.push(encodeToLatex(_decoded.substring(0, offset)));
 
-    arrayOfText.push(encodeToHtml(decoded.substring(offset)));
+      if (mark) {
+        arrayOfText.push(MARK$1);
+        arrayOfText.push(MARK$1);
+      }
+
+      arrayOfText.push(encodeToLatex(_decoded.substring(offset)));
+    }
   }
 }
 
@@ -20869,7 +20896,7 @@ function addTextForNode(node, arrayOfText) {
 
   try {
     if (isTextNode(node)) {
-      addText(arrayOfText, useHtmlMath ? encodeToHtml(node.nodeValue) : node.nodeValue, mark, offset, useHtmlMath);
+      addText(arrayOfText, useHtmlMath ? encodeToHtml(node.nodeValue) : encodeToLatex(node.nodeValue), mark, offset, useHtmlMath);
     } else if (isBrNode(node)) {
       useHtmlMath && arrayOfText.push("<br>");
     } else if (isBIUNode(node)) {
@@ -20883,7 +20910,7 @@ function addTextForNode(node, arrayOfText) {
     } else if (isKatexNode(node)) {
       if (mark) arrayOfText.push(MARK$1);
       arrayOfText.push(useHtmlMath ? RAW_TEXT_MATH_START_TAG_HTML_MATH : RAW_TEXT_MATH_START_TAG_TEX);
-      arrayOfText.push(encodeLatex(getLatex(node)));
+      arrayOfText.push(getLatex(node));
       arrayOfText.push(useHtmlMath ? RAW_TEXT_MATH_END_TAG_HTML_MATH : RAW_TEXT_MATH_END_TAG_TEX);
       if (mark) arrayOfText.push(MARK$1);
     } else {
@@ -20930,6 +20957,7 @@ function elementToMarkedRawText(element) {
   var raw_text = result.join(""); // remove any zero-width spaces we added to the html
 
   raw_text = raw_text.replace(SMALL_SPACE_REG_EXP, '');
+  console.log("Marked raw text: " + raw_text);
   return raw_text;
 }
 function replaceMarksWithMath(markedRawText, latex) {
@@ -21009,22 +21037,29 @@ function renderLatexString(katex, s, t) {
 function rawTextToHtml(katex, string, mimeType) {
   if (string === "") return "";
   if (mimeType === null || mimeType === undefined || mimeType === "") mimeType = determineMimeType(string);
-  if (mimeType === MIME_TYPE_PLAIN_TEXT$1) return string;
-  var parseAsTex = false;
-  if (mimeType === MIME_TYPE_TEX$1 || mimeType === MIME_TYPE_LATEX) parseAsTex = true;
-
-  if (!parseAsTex && mimeType !== MIME_TYPE_HTML$1 && mimeType !== MIME_TYPE_ZZISH_HTML_MATH$1) {
+  if (mimeType === MIME_TYPE_PLAIN_TEXT$1) return encodeToHtml(string);
+  var parseAsTex;
+  if (mimeType === MIME_TYPE_TEX$1 || mimeType === MIME_TYPE_LATEX) parseAsTex = true;else if (mimeType === MIME_TYPE_HTML$1 || mimeType === MIME_TYPE_ZZISH_HTML_MATH$1) parseAsTex = false;else {
+    parseAsTex = false;
     console.error("Unknown mime type: " + mimeType);
-  }
+  } // console.log("Original string: "+string)
+
+  if (parseAsTex) string = string.replace(DOLLAR_SLASH_REG_EXP, TEMP_CHAR); // console.log("Modded string: "+string)
 
   var stringElements = string.split(parseAsTex ? INLINE_TEX_REG_EXP : HTML_MATH_REG_EXP); // Insert small space at start of first element if it is an empty element
 
   if (stringElements[0] === "") // This means the original string stars with latex
-    stringElements[0] = "&#" + SMALL_SPACE$1.charCodeAt(0); // Insert small space at end of <p></p> elements so that empty lines get rendered
+    stringElements[0] = "&#" + SMALL_SPACE$1.charCodeAt(0);
 
-  if (mimeType === MIME_TYPE_ZZISH_HTML_MATH$1 || mimeType === MIME_TYPE_HTML$1) {
+  if (parseAsTex) {
     for (var i = 0; i < stringElements.length; i++) {
-      stringElements[i] = stringElements[i].replace(P_TAG_REG_EXP, P_ELEMENT_SMALL_SPACE);
+      stringElements[i] = stringElements[i].replace(TEMP_CHAR_REG_EXP, "$");
+      stringElements[i] = encodeToHtml(stringElements[i]);
+    }
+  } else {
+    // Insert small space at end of <p></p> elements so that empty lines get rendered
+    for (var _i = 0; _i < stringElements.length; _i++) {
+      stringElements[_i] = stringElements[_i].replace(P_TAG_REG_EXP, P_ELEMENT_SMALL_SPACE);
     }
   }
 
@@ -21032,13 +21067,22 @@ function rawTextToHtml(katex, string, mimeType) {
   var latexElements = string.match(parseAsTex ? INLINE_TEX_REG_EXP : HTML_MATH_REG_EXP);
   var result = [];
 
-  for (var _i = 0; _i < stringElements.length; _i++) {
-    result.push(stringElements[_i]);
+  for (var _i2 = 0; _i2 < stringElements.length; _i2++) {
+    result.push(stringElements[_i2]);
+
+    if (latexElements[_i2]) {
+      var element = latexElements[_i2];
+      var type = void 0;
+
+      if (parseAsTex) {
+        type = getDisplayType(element);
+        element = stripDollars(element);
+        element = element.replace(TEMP_CHAR_REG_EXP, "\\$");
+      } else {
+        type = "inline";
+        element = stripTags(element);
+      }
 
-    if (latexElements[_i]) {
-      var element = latexElements[_i];
-      var type = parseAsTex ? getDisplayType(element) : "inline";
-      element = parseAsTex ? stripDollars(element) : stripTags(element);
       var renderedElement = renderLatexString(katex, element, type);
       renderedElement = renderedElement + "&#" + SMALL_SPACE$1.charCodeAt(0);
       result.push(renderedElement);
@@ -21545,6 +21589,8 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
       var mimeType = _this2.getMimeType(nodeCounts.html > 0, nodeCounts.math > 0);
 
+      raw_text = removeEncodingIfPlainText(raw_text, mimeType, _this2.enableHtml());
+
       _this2.applyChangesToComponent(raw_text, mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab); // Consume the event
 
 
@@ -21810,6 +21856,8 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
         var mimeType = _this2.getMimeType(nodeCounts.html > 0, true);
 
+        raw_text = removeEncodingIfPlainText(raw_text, mimeType, _this2.enableHtml());
+
         _this2.applyChangesToComponent(raw_text, mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
       } catch (error) {
         console.error(error);
@@ -22114,6 +22162,8 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
         var mimeType = _this2.getMimeType(nodeCounts.html > 0, nodeCounts.math > 0);
 
+        raw_text = removeEncodingIfPlainText(raw_text, mimeType, _this2.enableHtml());
+
         _this2.applyChangesToComponent(raw_text, mimeType, params, _this2.props.useExpertMode, _this2.props.selectedTab);
       } catch (error) {
         console.error(error);
@@ -22394,6 +22444,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
           var _mimeType = null;
           if (_this2.editingExistingEquation) _mimeType = _this2.getMimeType(_nodeCounts.html > 0, _nodeCounts.katex > 1);else _mimeType = _this2.getMimeType(_nodeCounts.html > 0, _nodeCounts.katex > 0);
+          _new_raw_text = removeEncodingIfPlainText(_new_raw_text, _mimeType, _this2.enableHtml());
 
           _this2.applyChangesToComponent(_new_raw_text, _mimeType, _new_rangeParams6, _this2.props.useExpertMode, _this2.props.selectedTab);
 
@@ -22442,6 +22493,8 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
         var mimeType = _this2.getMimeType(nodeCounts.html > 0, true);
 
+        new_raw_text = removeEncodingIfPlainText(new_raw_text, mimeType, _this2.enableHtml());
+
         _this2.applyChangesToComponent(new_raw_text, mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
 
         _this2.setState({
@@ -22526,6 +22579,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, new_text));
         if (rangeParams.startNodeIndex === rangeParams.endNodeIndex && rangeParams.startOffset === rangeParams.endOffset) new_rangeParams.startOffset = new_rangeParams.startOffset + new_text.length;
         new_rangeParams.endOffset = new_rangeParams.endOffset + new_text.length;
+        new_raw_text = removeEncodingIfPlainText(new_raw_text, _this2.state.mimeType, _this2.enableHtml());
 
         _this2.applyChangesToComponent(new_raw_text, _this2.state.mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
       } catch (error) {
@@ -22557,6 +22611,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         console.log(new_rangeParams);
         console.log("Old nodes");
         console.log(_this2.editableDiv.childNodes);
+        new_raw_text = removeEncodingIfPlainText(new_raw_text, _this2.state.mimeType, _this2.enableHtml());
 
         _this2.applyChangesToComponent(new_raw_text, _this2.state.mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
       } catch (error) {
@@ -22593,6 +22648,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         console.log(new_rangeParams);
         console.log("Old nodes");
         console.log(_this2.editableDiv.childNodes);
+        new_raw_text = removeEncodingIfPlainText(new_raw_text, _this2.state.mimeType, _this2.enableHtml());
 
         _this2.applyChangesToComponent(new_raw_text, _this2.state.mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
       } catch (error) {
@@ -22618,6 +22674,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, new_char));
         if (rangeParams.startNodeIndex === rangeParams.endNodeIndex && rangeParams.startOffset === rangeParams.endOffset) new_rangeParams.startOffset = new_rangeParams.startOffset + new_char.length + 1;
         new_rangeParams.endOffset = new_rangeParams.endOffset + new_char.length + 1;
+        new_raw_text = removeEncodingIfPlainText(new_raw_text, _this2.state.mimeType, _this2.enableHtml());
 
         _this2.applyChangesToComponent(new_raw_text, _this2.state.mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
       } catch (error) {
@@ -22643,6 +22700,8 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           new_rangeParams.endOffset = new_rangeParams.endOffset + new_char.length;
         } else new_raw_text = removeMarks(replaceCharacterBeforeMarks(raw_text, new_char));
 
+        new_raw_text = removeEncodingIfPlainText(new_raw_text, _this2.state.mimeType, _this2.enableHtml());
+
         _this2.applyChangesToComponent(new_raw_text, _this2.state.mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
       } catch (error) {
         console.error(error);
@@ -22768,12 +22827,19 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
   }, {
     key: "getMimeType",
-    value: function getMimeType(isHtml, hasMath) {
-      if (isHtml) {
-        if (hasMath) return MIME_TYPE_ZZISH_HTML_MATH;else return MIME_TYPE_HTML;
-      } else {
-        if (hasMath) return MIME_TYPE_TEX;else return MIME_TYPE_PLAIN_TEXT;
+    value: function getMimeType(hasHtml, hasMath) {
+      var _this$props$outputTex2, _this$props$outputPla;
+
+      var outputTex = (_this$props$outputTex2 = this.props.outputTex) !== null && _this$props$outputTex2 !== void 0 ? _this$props$outputTex2 : false;
+      var outputPlainText = (_this$props$outputPla = this.props.outputPlainText) !== null && _this$props$outputPla !== void 0 ? _this$props$outputPla : false;
+
+      if (outputTex) {
+        if (hasMath || !outputPlainText) return MIME_TYPE_TEX;else return MIME_TYPE_PLAIN_TEXT;
       }
+
+      if (hasMath) return MIME_TYPE_ZZISH_HTML_MATH;
+      if (hasHtml || !outputPlainText) return MIME_TYPE_HTML;
+      return MIME_TYPE_PLAIN_TEXT;
     }
   }, {
     key: "setOldRangeParams",
@@ -23019,7 +23085,9 @@ var MathRichArea = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var html = rawTextToHtml(katex$1, this.props.children, this.props.mime_type);
+      // console.log("Mime type: "+this.props.mimeType)
+      var html = rawTextToHtml(katex$1, this.props.children, this.props.mimeType); // console.log("html: "+html)
+
       return /*#__PURE__*/React.createElement("span", {
         dangerouslySetInnerHTML: {
           __html: html
@@ -23031,6 +23099,4 @@ var MathRichArea = /*#__PURE__*/function (_React$Component) {
   return MathRichArea;
 }(React.Component);
 
-console.log("hello charles");
-
 export { MathRichArea, MathRichInput, renderMathInNode };

package/dist/math-rich-input.css

@@ -61,148 +61,6 @@
   margin: 0px 2px 0px 2px;
 }
 
-/* Note that the top left position of the toolbar is set programatically in componentDidMount */
-
-.Toolbar {
-  position: fixed;
-  z-index: 1;
-  /* width:270px; */
-  height:42px;
-  background-color: white;
-  border: 1px solid #d0d0d0;
-  border-radius: 5px;
-  box-shadow: 1px 1px 5px #a0a0a0;
-	animation: 0.5s fadeIn1;
-  animation-fill-mode: forwards;
-  top: 0px;
-  left: 0px;  /* important to set this so that toolbar initially renders full width */
-}
-
-@keyframes fadeIn1 {
-  0% {
-    opacity: 0;
-  } 
-  100% {
-    opacity: 1.0;
-  }
-}
-
-.Toolbar-button {
-  font-family:sans-serif;
-  font-size: 16px;
-  width:40px;
-  height: 36px;
-  background-color: white;
-  border-radius: 5px;
-  border: 0px;
-  padding: 1px;
-  margin: 2px;
-}
-
-
-.Toolbar-button:hover {
-  color: white;
-  background: #663676;
-  cursor: pointer;
-}
-
-.Toolbar-button:active {
-  background: #808080;
-  color: white;
-  cursor: pointer;
-}
-
-.TB-narrow {
-  width:30px;
-}
-
-.TB-wide {
-  width:46px;
-}
-
-.TB-up4 {
-  position: relative;
-  top:-4px;
-}
-
-.TB-selected {
-  background: #D0D0D0;
-  color: black;
-  cursor: pointer;
-	animation: 0.2s TB-fadeIn;
-  animation-fill-mode: forwards;
-}
-
-.TB-selected:hover {
-  color: white;
-  background: #663676;
-  cursor: pointer;
-}
-
-@keyframes TB-fadeIn {
-  00% {
-    background: white;
-  } 
-  100% {
-    background: #D0D0D0;
-  }
-}
-
-
-/* Tooltip text */
-.Toolbar-button .tooltiptext {
-  font-weight: normal;
-  visibility: hidden;
-  width: 100px;
-  background-color: #222;
-  color: #fff;
-  /*font-weight: bold;*/
-  font-size: 12px;
-  text-align: center;
-  padding: 4px 10px;
-  border-radius: 6px;
- 
-  /* Position the tooltip text - see examples below! */
-  position: absolute;
-  z-index: 2;
-  top: -90%;  /* Must leave a small gap between tooltip and button */
-  left: 50px;
-
-  /* transform: translate (50%,0%); */
-}
-
-/* Show the tooltip text when you mouse over the tooltip container */
-.Toolbar-button:hover .tooltiptext {
-	animation: 0.8s fadeIn2;
-  animation-fill-mode: forwards;
-  visibility: visible;
-  /* width: 100px; */
-  /* top: -90%; */  /* Must leave a small gap between tooltip and button */
-  /* left: 20%; */
-  /* margin-left: -50px; */
-}
-
-@keyframes fadeIn2 {
-  00% {
-    opacity: 0;
-  } 
-  70% {
-    opacity: 0;
-  } 
-  100% {
-    visibility: visible;
-    opacity: 0.9;
-  }
-}
-
-/* .tooltip {
-  position: relative;
-  display: inline-block;
-  border-bottom: 1px dotted black; /* If you want dots under the hoverable text 
-} */
-
- 
-
 
 .EquationEditorModal-background {
   position: fixed;
@@ -366,7 +224,149 @@ input:checked + .slider:before {
 
 .slider.round:before {
   border-radius: 50%;
+}/* Note that the top left position of the toolbar is set programatically in componentDidMount */
+
+.Toolbar {
+  position: fixed;
+  z-index: 1;
+  /* width:270px; */
+  height:42px;
+  background-color: white;
+  border: 1px solid #d0d0d0;
+  border-radius: 5px;
+  box-shadow: 1px 1px 5px #a0a0a0;
+	animation: 0.5s fadeIn1;
+  animation-fill-mode: forwards;
+  top: 0px;
+  left: 0px;  /* important to set this so that toolbar initially renders full width */
+}
+
+@keyframes fadeIn1 {
+  0% {
+    opacity: 0;
+  } 
+  100% {
+    opacity: 1.0;
+  }
+}
+
+.Toolbar-button {
+  font-family:sans-serif;
+  font-size: 16px;
+  width:40px;
+  height: 36px;
+  background-color: white;
+  border-radius: 5px;
+  border: 0px;
+  padding: 1px;
+  margin: 2px;
 }
+
+
+.Toolbar-button:hover {
+  color: white;
+  background: #663676;
+  cursor: pointer;
+}
+
+.Toolbar-button:active {
+  background: #808080;
+  color: white;
+  cursor: pointer;
+}
+
+.TB-narrow {
+  width:30px;
+}
+
+.TB-wide {
+  width:46px;
+}
+
+.TB-up4 {
+  position: relative;
+  top:-4px;
+}
+
+.TB-selected {
+  background: #D0D0D0;
+  color: black;
+  cursor: pointer;
+	animation: 0.2s TB-fadeIn;
+  animation-fill-mode: forwards;
+}
+
+.TB-selected:hover {
+  color: white;
+  background: #663676;
+  cursor: pointer;
+}
+
+@keyframes TB-fadeIn {
+  00% {
+    background: white;
+  } 
+  100% {
+    background: #D0D0D0;
+  }
+}
+
+
+/* Tooltip text */
+.Toolbar-button .tooltiptext {
+  font-weight: normal;
+  visibility: hidden;
+  width: 100px;
+  background-color: #222;
+  color: #fff;
+  /*font-weight: bold;*/
+  font-size: 12px;
+  text-align: center;
+  padding: 4px 10px;
+  border-radius: 6px;
+ 
+  /* Position the tooltip text - see examples below! */
+  position: absolute;
+  z-index: 2;
+  top: -90%;  /* Must leave a small gap between tooltip and button */
+  left: 50px;
+
+  /* transform: translate (50%,0%); */
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.Toolbar-button:hover .tooltiptext {
+	animation: 0.8s fadeIn2;
+  animation-fill-mode: forwards;
+  visibility: visible;
+  /* width: 100px; */
+  /* top: -90%; */  /* Must leave a small gap between tooltip and button */
+  /* left: 20%; */
+  /* margin-left: -50px; */
+}
+
+@keyframes fadeIn2 {
+  00% {
+    opacity: 0;
+  } 
+  70% {
+    opacity: 0;
+  } 
+  100% {
+    visibility: visible;
+    opacity: 0.9;
+  }
+}
+
+/* .tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black; /* If you want dots under the hoverable text 
+} */
+
+ 
+
+
 /* Note that the top left position of the accent bar is set programatically in componentDidMount */
 
 .AccentBar {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zzish/math-rich-input",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "React component for user to enter rich text with embedded math equations.",
   "repository": {
     "type": "git",

package/rollup.config.js

@@ -9,7 +9,7 @@ export default {
     input: "src/index.js",
     output: {
         file: "dist/index.js",
-        // format: "cjs",
+        format: "cjs",
     },
     plugins: [
         nodeResolve({ main: true }),

package/src/MathRichArea.jsx

@@ -3,7 +3,7 @@ import React from 'react'
 import katex from "katex";
 import {setupKatex} from "./katexHelper"
 import {rawTextToHtml} from './mathRichInputHelper'
-import {MIME_TYPE_TEX, MIME_TYPE_HTML, MIME_TYPE_ZZISH_HTML_MATH, 
+import {MIME_TYPE_TEX, MIME_TYPE_HTML, MIME_TYPE_ZZISH_HTML_MATH,
         isTextLatexMath, isTextHtml, isTextHtmlMath} from './mimeTypeHelper'
 
 
@@ -96,8 +96,13 @@ export default class MathRichArea extends React.Component {
   }
 
   render() {
-    let html = rawTextToHtml(katex, this.props.children, this.props.mime_type)
+    // console.log("Mime type: "+this.props.mimeType)
+    let html = rawTextToHtml(katex, this.props.children, this.props.mimeType)
+    // console.log("html: "+html)
 
     return <span dangerouslySetInnerHTML={{__html: html}}></span>
   }
-}
+}
+
+
+

package/src/MathRichInput.jsx

@@ -9,6 +9,7 @@ import Toolbar from './Toolbar'
 import {
   isKatexNode,
   elementToMarkedRawText,
+  removeEncodingIfPlainText,
   rawTextToHtml,
   getLatex,
   setRangeParams, 
@@ -147,18 +148,23 @@ export default class MathRichInput extends React.Component {
   //           /<\s*sub[^>]*>(.*?)<\s*\/\s*sub\s*>/i.test(text)
   // }
   
-  getMimeType(isHtml, hasMath) {
-    if (isHtml) {
-      if (hasMath)
-        return MIME_TYPE_ZZISH_HTML_MATH
-      else 
-        return MIME_TYPE_HTML
-    } else {
-      if (hasMath)
+  getMimeType(hasHtml, hasMath) {
+    let outputTex = this.props.outputTex ?? false
+    let outputPlainText = this.props.outputPlainText ?? false
+    
+    if (outputTex) {
+      if (hasMath || !outputPlainText)
         return MIME_TYPE_TEX
       else 
         return MIME_TYPE_PLAIN_TEXT
-    }    
+    }
+
+    if (hasMath)
+      return MIME_TYPE_ZZISH_HTML_MATH
+    if (hasHtml || !outputPlainText)
+      return MIME_TYPE_HTML
+
+    return MIME_TYPE_PLAIN_TEXT
   }
 
   _countNodeTypes = () => {
@@ -420,6 +426,7 @@ export default class MathRichInput extends React.Component {
 
     let nodeCounts = this._countNodeTypes()
     let mimeType = this.getMimeType(nodeCounts.html > 0, nodeCounts.math > 0)
+    raw_text = removeEncodingIfPlainText(raw_text, mimeType, this.enableHtml())
 
     this.applyChangesToComponent(raw_text, mimeType, new_rangeParams, 
                                 this.props.useExpertMode, this.props.selectedTab)
@@ -697,6 +704,7 @@ export default class MathRichInput extends React.Component {
 
       let nodeCounts = this._countNodeTypes()
       let mimeType = this.getMimeType(nodeCounts.html > 0, true)
+      raw_text = removeEncodingIfPlainText(raw_text, mimeType, this.enableHtml())
 
       this.applyChangesToComponent(raw_text,
                                   mimeType,
@@ -991,7 +999,7 @@ export default class MathRichInput extends React.Component {
   handleInput = (event) => {
     try {
       // console.log("handleInput")
-      const raw_text = elementToMarkedRawText(this.editableDiv, null, 0, this.enableHtml())
+      let raw_text = elementToMarkedRawText(this.editableDiv, null, 0, this.enableHtml())
       const params = this._getRangeParams()
       if (params === null || params === undefined)
         console.error("Could not get range params from input field")
@@ -1004,6 +1012,8 @@ export default class MathRichInput extends React.Component {
 
       let nodeCounts = this._countNodeTypes()
       let mimeType = this.getMimeType(nodeCounts.html > 0, nodeCounts.math > 0)
+      raw_text = removeEncodingIfPlainText(raw_text, mimeType, this.enableHtml())
+
       this.applyChangesToComponent(raw_text, mimeType, params, 
         this.props.useExpertMode, this.props.selectedTab)
     } catch (error) {
@@ -1305,6 +1315,7 @@ export default class MathRichInput extends React.Component {
           mimeType = this.getMimeType(nodeCounts.html > 0, nodeCounts.katex > 1)
         else
           mimeType = this.getMimeType(nodeCounts.html > 0, nodeCounts.katex > 0)
+        new_raw_text = removeEncodingIfPlainText(new_raw_text, mimeType, this.enableHtml())
 
         this.applyChangesToComponent(new_raw_text, mimeType, new_rangeParams, 
                                   this.props.useExpertMode, this.props.selectedTab)
@@ -1346,6 +1357,7 @@ export default class MathRichInput extends React.Component {
 
       let nodeCounts = this._countNodeTypes()
       let mimeType = this.getMimeType(nodeCounts.html > 0, true)
+      new_raw_text = removeEncodingIfPlainText(new_raw_text, mimeType, this.enableHtml())
 
       this.applyChangesToComponent(new_raw_text, mimeType, new_rangeParams, 
                                 this.props.useExpertMode, this.props.selectedTab)
@@ -1430,6 +1442,8 @@ export default class MathRichInput extends React.Component {
         new_rangeParams.startOffset = new_rangeParams.startOffset + new_text.length
       new_rangeParams.endOffset = new_rangeParams.endOffset + new_text.length
 
+      new_raw_text = removeEncodingIfPlainText(new_raw_text, this.state.mimeType, this.enableHtml())
+
       this.applyChangesToComponent(new_raw_text, this.state.mimeType, new_rangeParams, 
                                   this.props.useExpertMode, this.props.selectedTab)
     } catch (error) {
@@ -1460,6 +1474,8 @@ export default class MathRichInput extends React.Component {
       console.log("Old nodes")
       console.log(this.editableDiv.childNodes)
 
+      new_raw_text = removeEncodingIfPlainText(new_raw_text, this.state.mimeType, this.enableHtml())
+
       this.applyChangesToComponent(new_raw_text, this.state.mimeType, new_rangeParams, 
                                   this.props.useExpertMode, this.props.selectedTab)
     } catch (error) {
@@ -1498,6 +1514,8 @@ export default class MathRichInput extends React.Component {
       console.log("Old nodes")
       console.log(this.editableDiv.childNodes)
 
+      new_raw_text = removeEncodingIfPlainText(new_raw_text, this.state.mimeType, this.enableHtml())
+
       this.applyChangesToComponent(new_raw_text, this.state.mimeType, new_rangeParams, 
                                   this.props.useExpertMode, this.props.selectedTab)
     } catch (error) {
@@ -1521,6 +1539,7 @@ export default class MathRichInput extends React.Component {
         new_rangeParams.startOffset = new_rangeParams.startOffset + new_char.length + 1
       new_rangeParams.endOffset = new_rangeParams.endOffset + new_char.length + 1
 
+      new_raw_text = removeEncodingIfPlainText(new_raw_text, this.state.mimeType, this.enableHtml())
       this.applyChangesToComponent(new_raw_text, this.state.mimeType, new_rangeParams, 
                                   this.props.useExpertMode, this.props.selectedTab)
     } catch (error) {
@@ -1547,6 +1566,7 @@ export default class MathRichInput extends React.Component {
       else
         new_raw_text = removeMarks(replaceCharacterBeforeMarks(raw_text, new_char))
 
+      new_raw_text = removeEncodingIfPlainText(new_raw_text, this.state.mimeType, this.enableHtml())
       this.applyChangesToComponent(new_raw_text, this.state.mimeType, new_rangeParams, 
                                   this.props.useExpertMode, this.props.selectedTab)
     } catch (error) {

package/src/mathRichInputHelper.js

@@ -1,22 +1,34 @@
 import { determineMimeType } from './mimeTypeHelper'
 
-export const RAW_TEXT_MATH_START_TAG_TEX = "$"
-export const RAW_TEXT_MATH_END_TAG_TEX = "$"
+export const RAW_TEXT_MATH_START_TAG_TEX = "\\["
+export const RAW_TEXT_MATH_END_TAG_TEX = "\\]"
 export const RAW_TEXT_MATH_START_TAG_HTML_MATH = "<math>"
 export const RAW_TEXT_MATH_END_TAG_HTML_MATH = "</math>"
 
 const INLINE_TEX_REG_EXP = /\$\$[\s\S]+?\$\$|\\\[[\s\S]+?\\\]|\\\([\s\S]+?\\\)|\$[^$\\]*(?:\\.[^$\\]*)*\$/g;
 const BLOCK_TEX_REG_EXP = /\$\$[\s\S]+?\$\$|\\\[[\s\S]+?\\\]/g;
 
+// const INLINE_TEX_REG_EXP = /(?<!\\)\$[\s\S]+?(?<!\\)\$/g
+
+// In general, (?<!Y)X matches an X that is not preceded by a Y.  so (?<!\\)\$
+
+// const INLINE_TEX_REG_EXP = /(?<!\\)(?:((?<!\$)\${1,2}(?!\$))|(\\\()|(\\\[)|(\\begin\{equation\}))(?(1)(.*?)(?<!\\)(?<!\$)\1(?!\$)|(?:(.*(?R)?.*)(?<!\\)(?:(?(2)\\\)|(?(3)\\\]|\\end\{equation\})))))/
+
+
 // const HTML_MATH_REG_EXP = /<math>.*?<\/math>/gi;
 const HTML_MATH_REG_EXP = /<math>[\s\S]*?<\/math>/gi;
 
 const SPAN_OPEN_BASE = "<span class=\"base\">"
 const SPAN_CLOSE = "</span>"
 
-const MARK = "_M_A_R_K_"
+const MARK = String.fromCharCode(0)
+// const MARK = "_M_A_R_K_"
 const MARK_REG_EXP = new RegExp(MARK, "g")
 
+const TEMP_CHAR = String.fromCharCode(1)
+const TEMP_CHAR_REG_EXP = new RegExp(TEMP_CHAR, "g")
+const DOLLAR_SLASH_REG_EXP = /\\\$/g
+
 const SMALL_SPACE_CHAR_CODE = 8203
 const SMALL_SPACE = String.fromCharCode(SMALL_SPACE_CHAR_CODE)
 const SMALL_SPACE_REG_EXP = new RegExp(SMALL_SPACE, "g")
@@ -195,7 +207,6 @@ export function getLatex(node) {
     // <annotation encoding="application/x-tex">L' = {L}{\sqrt{1-\frac{v^2}{c^2}}}</annotation>
     let annotation = getFirstDescendentByTagName(node, "annotation")
     let latex = annotation.childNodes[0].nodeValue
-    latex = decodeLatex(latex)
     return latex
   } catch (error) {
     console.error(error)
@@ -211,7 +222,7 @@ function encodeToHtml(text) {
   text = text.replace(/</g,"&lt;") 
   text = text.replace(/'/g,"&apos;") 
   text = text.replace(/"/g,"&quot;") 
-  text = text.replace(/\$/g,"&#36;") 
+  text = text.replace(/\$/g,"&#36;")
   return text
 }
 
@@ -247,38 +258,57 @@ var decodeFromHtml = (function() {
 // }
 
 // Note we don't need to encode it so do nothing here
-function encodeLatex(text) {
+function encodeToLatex(text) {
   // console.log("Pre-encoded: "+text)
+  text = text.replace(/\$/g,"\\$")
   // console.log("Post-encoded: "+text)
   return text
 }
 
 // Note we don't need to decode it so do nothing here
-function decodeLatex(text) {
+function decodeFromLatex(text) {
   // console.log("Pre-decoded: "+text)
+  text = text.replace(/\\\$/g,"$")
   // console.log("Post-decoded: "+text)
   return text
 }
 
-function addText(arrayOfText, text, mark, offset) {
+export function removeEncodingIfPlainText(text, mimeType, useHtmlMath) {
+  if (mimeType !== MIME_TYPE_PLAIN_TEXT)
+    return text
+  
+  if (useHtmlMath)
+    return decodeFromHtml(text)
+  else
+    return decodeFromLatex(text)
+}
+
+function addText(arrayOfText, text, mark, offset, useHtmlMath=true) {
   // console.log("Mark: "+mark)
   if (offset === 0) {
     if (mark) {
       arrayOfText.push(MARK)
-      // arrayOfText.push(" ")
       arrayOfText.push(MARK)
     }
     arrayOfText.push(text)
   } else {
-    let decoded = decodeFromHtml(text)
-    // console.log("Decoded: "+decoded)
-    arrayOfText.push(encodeToHtml(decoded.substring(0,offset)))
-    if (mark) {
-      arrayOfText.push(MARK)
-      // arrayOfText.push(" ")
-      arrayOfText.push(MARK)
+    if (useHtmlMath) {
+      let decoded = decodeFromHtml(text)
+      arrayOfText.push(encodeToHtml(decoded.substring(0,offset)))
+      if (mark) {
+        arrayOfText.push(MARK)
+        arrayOfText.push(MARK)
+      }
+      arrayOfText.push(encodeToHtml(decoded.substring(offset)))
+    } else {
+      let decoded = decodeFromLatex(text)
+      arrayOfText.push(encodeToLatex(decoded.substring(0,offset)))
+      if (mark) {
+        arrayOfText.push(MARK)
+        arrayOfText.push(MARK)
+      }
+      arrayOfText.push(encodeToLatex(decoded.substring(offset)))
     }
-    arrayOfText.push(encodeToHtml(decoded.substring(offset)))
   }
 }
 
@@ -291,7 +321,7 @@ function addTextForNode(node, arrayOfText, nodeToMark=null, offset=0, useHtmlMat
   try {
     if (isTextNode(node)) {
       addText(arrayOfText,
-              useHtmlMath ? encodeToHtml(node.nodeValue) : node.nodeValue,
+              useHtmlMath ? encodeToHtml(node.nodeValue) : encodeToLatex(node.nodeValue),
               mark, offset, useHtmlMath)
     } else if (isBrNode(node)) {
       useHtmlMath && arrayOfText.push("<br>") 
@@ -305,7 +335,7 @@ function addTextForNode(node, arrayOfText, nodeToMark=null, offset=0, useHtmlMat
       if (mark)
         arrayOfText.push(MARK)
       arrayOfText.push(useHtmlMath ? RAW_TEXT_MATH_START_TAG_HTML_MATH : RAW_TEXT_MATH_START_TAG_TEX)
-      arrayOfText.push(encodeLatex(getLatex(node)))
+      arrayOfText.push(getLatex(node))
       arrayOfText.push(useHtmlMath ? RAW_TEXT_MATH_END_TAG_HTML_MATH : RAW_TEXT_MATH_END_TAG_TEX)
       if (mark)
         arrayOfText.push(MARK)
@@ -350,7 +380,9 @@ export function elementToMarkedRawText(element, nodeToMark=null, offset=0, useHt
 
   // remove any zero-width spaces we added to the html
   raw_text = raw_text.replace(SMALL_SPACE_REG_EXP,'') 
-  
+
+  console.log("Marked raw text: " + raw_text)
+
   return raw_text
 }
 
@@ -444,23 +476,38 @@ export function rawTextToHtml(katex, string, mimeType) {
     mimeType = determineMimeType(string)
 
   if (mimeType === MIME_TYPE_PLAIN_TEXT)
-    return string
+    return encodeToHtml(string)
 
-  let parseAsTex = false
-  if (mimeType === MIME_TYPE_TEX || mimeType === MIME_TYPE_LATEX)
+  let parseAsTex
+  if (mimeType === MIME_TYPE_TEX ||
+      mimeType === MIME_TYPE_LATEX)
     parseAsTex = true
-  if (!parseAsTex && (mimeType !== MIME_TYPE_HTML && mimeType !== MIME_TYPE_ZZISH_HTML_MATH)) {
+  else if (mimeType === MIME_TYPE_HTML || 
+           mimeType === MIME_TYPE_ZZISH_HTML_MATH)
+    parseAsTex = false
+  else {
+    parseAsTex = false
     console.error("Unknown mime type: "+mimeType)
   }
 
+  // console.log("Original string: "+string)
+  if (parseAsTex)
+    string = string.replace(DOLLAR_SLASH_REG_EXP, TEMP_CHAR)
+  // console.log("Modded string: "+string)
+
   const stringElements = string.split(parseAsTex ? INLINE_TEX_REG_EXP : HTML_MATH_REG_EXP);
 
   // Insert small space at start of first element if it is an empty element
   if (stringElements[0] === "") // This means the original string stars with latex
     stringElements[0] = "&#" + SMALL_SPACE.charCodeAt(0)
 
-  // Insert small space at end of <p></p> elements so that empty lines get rendered
-  if (mimeType === MIME_TYPE_ZZISH_HTML_MATH || mimeType === MIME_TYPE_HTML) {
+  if (parseAsTex) {
+    for (let i = 0; i <stringElements.length; i++) {
+      stringElements[i] = stringElements[i].replace(TEMP_CHAR_REG_EXP, "$")
+      stringElements[i] = encodeToHtml(stringElements[i])
+    }
+  } else {
+    // Insert small space at end of <p></p> elements so that empty lines get rendered
     for (let i = 0; i <stringElements.length; i++)
       stringElements[i] = stringElements[i].replace(P_TAG_REG_EXP, P_ELEMENT_SMALL_SPACE)
   }
@@ -476,8 +523,15 @@ export function rawTextToHtml(katex, string, mimeType) {
 
     if (latexElements[i]) {
       let element = latexElements[i]
-      const type = parseAsTex ? getDisplayType(element) : "inline"
-      element = parseAsTex ? stripDollars(element) : stripTags(element)
+      let type
+      if (parseAsTex) {
+        type = getDisplayType(element)
+        element = stripDollars(element)
+        element = element.replace(TEMP_CHAR_REG_EXP, "\\$")
+      } else {
+        type = "inline"
+        element = stripTags(element)
+      }
 
       let renderedElement = renderLatexString(katex, element, type)
       renderedElement = renderedElement + "&#"+SMALL_SPACE.charCodeAt(0)

package/src/mimeTypeHelper.js

@@ -25,6 +25,9 @@ export function isTextLatexMath(text) {
   let i = text.indexOf("$")
   if (i < 0)
     return false
+  let j = text.indexOf("\\$")
+  if (j >=0)
+    return true 
   i = text.indexOf("$",i+1)
   if (i < 0)
     return false