@zzish/math-rich-input 0.1.47 → 0.1.49

package/src/mathRichInputHelper.js

@@ -1,11 +1,12 @@
-import { determineMimeType } from './mimeTypeHelper'
+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_HTML_MATH = "<math>"
-export const RAW_TEXT_MATH_END_TAG_HTML_MATH = "</math>"
+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 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
@@ -14,54 +15,52 @@ const BLOCK_TEX_REG_EXP = /\$\$[\s\S]+?\$\$|\\\[[\s\S]+?\\\]/g;
 
 // 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 SPAN_OPEN_BASE = '<span class="base">';
+const SPAN_CLOSE = "</span>";
 
-const MARK = String.fromCharCode(0)
+const MARK = String.fromCharCode(0);
 // const MARK = "_M_A_R_K_"
-const MARK_REG_EXP = new RegExp(MARK, "g")
+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 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")
+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");
 
-const P_TAG_REG_EXP = new RegExp("<[p|P]>", "g")
-const P_ELEMENT_SMALL_SPACE = "<p>" + SMALL_SPACE
+const P_TAG_REG_EXP = new RegExp("<[p|P]>", "g");
+const P_ELEMENT_SMALL_SPACE = "<p>" + SMALL_SPACE;
 
-const MIME_TYPE_PLAIN_TEXT      = "text/plain"
-const MIME_TYPE_HTML            = "text/html"
-const MIME_TYPE_TEX             = "application/x-tex"
-const MIME_TYPE_LATEX           = "application/x-latex"
-const MIME_TYPE_ZZISH_HTML_MATH = "application/x-zzish-html-math"
+const MIME_TYPE_PLAIN_TEXT = "text/plain";
+const MIME_TYPE_HTML = "text/html";
+const MIME_TYPE_TEX = "application/x-tex";
+const MIME_TYPE_LATEX = "application/x-latex";
+const MIME_TYPE_ZZISH_HTML_MATH = "application/x-zzish-html-math";
 
 export function getMark() {
-  return MARK
+  return MARK;
 }
 
 export function isKatexNode(node) {
-  return node.className === "katex" || node.className === "katex-error"
+  return node.className === "katex" || node.className === "katex-error";
 }
 
 function isTextNode(node) {
-  return node.nodeType === 3
+  return node.nodeType === 3;
 }
 
 function isBIUNode(node) {
-  if (node.nodeType !== 1)
-    return false
+  if (node.nodeType !== 1) return false;
 
     const tagName = node.tagName.toLowerCase();
-    if (tagName === "span")
-    return !isKatexNode(node)
-  return false ||
+  if (tagName === "span") return !isKatexNode(node);
+  return (
+    false ||
     tagName === "b" ||
     tagName === "strong" ||
     tagName === "i" ||
@@ -70,131 +69,131 @@ function isBIUNode(node) {
     tagName === "sup" ||
     tagName === "sub" ||
     tagName === "p"
+  );
 }
 
 function isBrNode(node) {
-  if (node.tagName ===  undefined)
-    return false
-  return node.tagName.toLowerCase() === "br"
+  if (node.tagName === undefined) return false;
+  return node.tagName.toLowerCase() === "br";
 }
 
 function nodeStartsWithSmallSpace(node) {
-  if (node.nodeType === 3 &&
+  if (
+    node.nodeType === 3 &&
       node.nodeValue.length >= 1 &&
-      node.nodeValue.charCodeAt(0) === SMALL_SPACE_CHAR_CODE)
+    node.nodeValue.charCodeAt(0) === SMALL_SPACE_CHAR_CODE
+  )
       return true;
   return false;
 }
 
 function isSmallSpace(node) {
-  if(node.nodeType === 3 && 
+  if (
+    node.nodeType === 3 &&
      node.nodeValue.length === 1 &&
-     node.nodeValue.charCodeAt(0) === SMALL_SPACE_CHAR_CODE)
-     return true
+    node.nodeValue.charCodeAt(0) === SMALL_SPACE_CHAR_CODE
+  )
+    return true;
 
-  return false
+  return false;
 }
 
-export function startsWithSmallSpace (editableDiv) {
+export function startsWithSmallSpace(editableDiv) {
     let textNode = findFirstTextNode(editableDiv);
     return isSmallSpace(textNode);
 }
 
-export function countNodeTypes(node, counter=null) {
+export function countNodeTypes(node, counter = null) {
   if (counter === null)
     counter = {
-      math:0,
-      html:0,
-      text:0
-    }
+      math: 0,
+      html: 0,
+      text: 0,
+    };
 
   if (node == null || node === undefined) {
-    console.error("Node: "+node)
-    return counter
+    console.error("Node: " + node);
+    return counter;
   }
 
-  if (isKatexNode(node))
-    counter.math++
-  else if (isBIUNode(node))
-    counter.html++
-  else if (isTextNode(node))
-    counter.text++
+  if (isKatexNode(node)) counter.math++;
+  else if (isBIUNode(node)) counter.html++;
+  else if (isTextNode(node)) counter.text++;
 
-  if (isKatexNode(node))
-    return counter
+  if (isKatexNode(node)) return counter;
 
-  if (node.childNodes === null || node.childNodes === undefined)
-    return counter
+  if (node.childNodes === null || node.childNodes === undefined) return counter;
   
   for (let i = 0; i < node.childNodes.length; i++)
-      countNodeTypes(node.childNodes[i], counter)
+    countNodeTypes(node.childNodes[i], counter);
 
-  return counter
+  return counter;
 }
 
 export function getNodeText(node) {
   // console.log("getNodeText")
   // console.log(node)
 
-  if (node.nodeType === 3)
-    return node.nodeValue
+  if (node.nodeType === 3) return node.nodeValue;
   else if (node.nodeType === 1) {
-    node = findFirstTextNode(node)
-    return node.nodeValue
+    node = findFirstTextNode(node);
+    return node.nodeValue;
   } else { 
-    console.error("Trying to get length of node that is not text or BUI: ")
-    console.log(node)
-    return null
+    console.error("Trying to get length of node that is not text or BUI: ");
+    console.log(node);
+    return null;
   }
 }
 
 export function getNodeTextLength(node) {
-  let text = getNodeText(node)
-  if (text === null || text === undefined)
-    return -1
+  let text = getNodeText(node);
+  if (text === null || text === undefined) return -1;
   
-  return text.length
+  return text.length;
 }
 
 export function removeMarks(raw_text) {
-  return raw_text.replace(MARK_REG_EXP,"")
+  return raw_text.replace(MARK_REG_EXP, "");
 }
 
 export function getCharacterBeforeMarks(text) {
-  let start = text.indexOf(MARK)
+  let start = text.indexOf(MARK);
   if (start < 1) {
-    console.warn("Can't get character before mark. Start: "+start)
-    return null
+    console.warn("Can't get character before mark. Start: " + start);
+    return null;
   }
-  return text.charAt(start-1)
+  return text.charAt(start - 1);
 }
 
 export function replaceCharacterBeforeMarks(text, character) {
-  let start = text.indexOf(MARK)
+  let start = text.indexOf(MARK);
   if (start < 1) {
-    console.warn("Can't replace character before mark. Start: "+start)
-    return text
+    console.warn("Can't replace character before mark. Start: " + start);
+    return text;
   }
-  return text.substring(0, start-1) + character + text.substring(start)
+  return text.substring(0, start - 1) + character + text.substring(start);
 }
 
 export function replaceStringBeforeMarks(text, oldString, newString) {
-  let start = text.indexOf(MARK)
+  let start = text.indexOf(MARK);
   if (start < 1) {
-    console.warn("Can't replace character before mark. Start: "+start)
-    return text
+    console.warn("Can't replace character before mark. Start: " + start);
+    return text;
   }
-  return text.substring(0, start-oldString.length) + newString + text.substring(start)
+  return (
+    text.substring(0, start - oldString.length) +
+    newString +
+    text.substring(start)
+  );
 }
 
-
 export function insertCharacterBeforeMarks(text, character) {
-  let start = text.indexOf(MARK)
+  let start = text.indexOf(MARK);
   if (start < 0) {
-    console.warn("Can't replace character before mark. Start: "+start)
-    return text
+    console.warn("Can't replace character before mark. Start: " + start);
+    return text;
   }
-  return text.substring(0, start) + character + text.substring(start)
+  return text.substring(0, start) + character + text.substring(start);
 }
 
 // export function replaceCharacterAfterMarks(text, character) {
@@ -204,16 +203,14 @@ export function insertCharacterBeforeMarks(text, character) {
 // }
 
 function getFirstDescendentByTagName(node, tagName) {
-  if (node.tagName === tagName)
-    return node
+  if (node.tagName === tagName) return node;
 
   if (node.childNodes !== null && node.childNodes !== undefined)
   for (let i = 0; i < node.childNodes.length; i++) {
-    let result = getFirstDescendentByTagName(node.childNodes[i],tagName)
-    if (result !== null)
-      return result
+      let result = getFirstDescendentByTagName(node.childNodes[i], tagName);
+      if (result !== null) return result;
   }
-  return null
+  return null;
 }
 
 function logAllDescendants(node) {
@@ -222,54 +219,69 @@ function logAllDescendants(node) {
   }
 }
 
-
 export function getLatex(node) {
   try {
     // Example:
     // <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
-    return latex
+    let annotation = getFirstDescendentByTagName(node, "annotation");
+
+    // Defensive checks for corrupt KaTeX nodes
+    if (!annotation) {
+      console.warn("KaTeX node missing annotation element");
+      return "error";
+    }
+
+    if (!annotation.childNodes || annotation.childNodes.length === 0) {
+      console.warn("KaTeX annotation element has no child nodes");
+      return "error";
+    }
+
+    if (!annotation.childNodes[0] || !annotation.childNodes[0].nodeValue) {
+      console.warn("KaTeX annotation missing text content");
+      return "error";
+    }
+
+    let latex = annotation.childNodes[0].nodeValue;
+    return latex;
   } catch (error) {
-    console.error(error)
-    console.log(node)
-    return "error"
+    console.error("Error extracting LaTeX from KaTeX node:", error);
+    console.log("Problematic node:", node);
+    return "error";
   }
 }
 
-
 function encodeToHtml(text) {
-  text = text.replace(/&/g,"&amp;") 
-  text = text.replace(/>/g,"&gt;") 
-  text = text.replace(/</g,"&lt;") 
-  text = text.replace(/'/g,"&apos;") 
-  text = text.replace(/"/g,"&quot;") 
-  text = text.replace(/\$/g,"&#36;")
-  text = text.replace(/,/g,"&#44;")
-  text = text.replace(/:/g,"&#58;")
-  text = text.replace(/\|/g,"&#124;")
-  return text
+  text = text.replace(/&/g, "&amp;");
+  text = text.replace(/>/g, "&gt;");
+  text = text.replace(/</g, "&lt;");
+  text = text.replace(/'/g, "&apos;");
+  text = text.replace(/"/g, "&quot;");
+  text = text.replace(/\$/g, "&#36;");
+  text = text.replace(/,/g, "&#44;");
+  text = text.replace(/:/g, "&#58;");
+  text = text.replace(/\|/g, "&#124;");
+  return text;
 }
 
-var decodeFromHtml = (function() {
+var decodeFromHtml = (function () {
   var translate_re = /&(#36|quot|apos|lt|gt|amp|#44|#58|#124);/g,
       translate = {
           // 'nbsp': String.fromCharCode(160), 
-          '#36': '$',
-          'quot': '"',
-          'apos': '\'',
-          'lt'  : '<', 
-          'gt'  : '>',
-          'amp' : '&',
-          '#44' : ',',
-          '#58' : ':',
-          '#124' : '|'
+      "#36": "$",
+      quot: '"',
+      apos: "'",
+      lt: "<",
+      gt: ">",
+      amp: "&",
+      "#44": ",",
+      "#58": ":",
+      "#124": "|",
       },
-      translator = function($0, $1) { 
+    translator = function ($0, $1) {
           return translate[$1]; 
       };
 
-  return function(s) {
+  return function (s) {
     // return s
       return s.replace(translate_re, translator);
   };
@@ -288,95 +300,120 @@ var decodeFromHtml = (function() {
 // Note we don't need to encode it so do nothing here
 function encodeToLatex(text) {
   // console.log("Pre-encoded: "+text)
-  text = text.replace(/\$/g,"\\$")
+  text = text.replace(/\$/g, "\\$");
   // console.log("Post-encoded: "+text)
-  return text
+  return text;
 }
 
 // Note we don't need to decode it so do nothing here
 function decodeFromLatex(text) {
   // console.log("Pre-decoded: "+text)
-  text = text.replace(/\\\$/g,"$")
+  text = text.replace(/\\\$/g, "$");
   // console.log("Post-decoded: "+text)
-  return text
+  return text;
 }
 
 export function removeEncodingIfPlainText(text, mimeType, useHtmlMath) {
-  if (mimeType !== MIME_TYPE_PLAIN_TEXT)
-    return text
+  if (mimeType !== MIME_TYPE_PLAIN_TEXT) return text;
   
-  if (useHtmlMath)
-    return decodeFromHtml(text)
-  else
-    return decodeFromLatex(text)
+  if (useHtmlMath) return decodeFromHtml(text);
+  else return decodeFromLatex(text);
 }
 
-function addText(arrayOfText, text, mark, offset, useHtmlMath=true) {
+function addText(arrayOfText, text, mark, offset, useHtmlMath = true) {
   // console.log("Mark: "+mark)
   if (offset === 0) {
     if (mark) {
-      arrayOfText.push(MARK)
-      arrayOfText.push(MARK)
+      arrayOfText.push(MARK);
+      arrayOfText.push(MARK);
     }
-    arrayOfText.push(text)
+    arrayOfText.push(text);
   } else {
     if (useHtmlMath) {
-      let decoded = decodeFromHtml(text)
-      arrayOfText.push(encodeToHtml(decoded.substring(0,offset)))
+      let decoded = decodeFromHtml(text);
+      arrayOfText.push(encodeToHtml(decoded.substring(0, offset)));
       if (mark) {
-        arrayOfText.push(MARK)
-        arrayOfText.push(MARK)
+        arrayOfText.push(MARK);
+        arrayOfText.push(MARK);
       }
-      arrayOfText.push(encodeToHtml(decoded.substring(offset)))
+      arrayOfText.push(encodeToHtml(decoded.substring(offset)));
     } else {
-      let decoded = decodeFromLatex(text)
-      arrayOfText.push(encodeToLatex(decoded.substring(0,offset)))
+      let decoded = decodeFromLatex(text);
+      arrayOfText.push(encodeToLatex(decoded.substring(0, offset)));
       if (mark) {
-        arrayOfText.push(MARK)
-        arrayOfText.push(MARK)
+        arrayOfText.push(MARK);
+        arrayOfText.push(MARK);
       }
-      arrayOfText.push(encodeToLatex(decoded.substring(offset)))
+      arrayOfText.push(encodeToLatex(decoded.substring(offset)));
     }
   }
 }
 
-function addTextForNode(node, arrayOfText, nodeToMark=null, offset=0, useHtmlMath=true) {
-  let mark = false
-  if (node === nodeToMark)
-    mark = true
+function addTextForNode(
+  node,
+  arrayOfText,
+  nodeToMark = null,
+  offset = 0,
+  useHtmlMath = true
+) {
+  let mark = false;
+  if (node === nodeToMark) mark = true;
     // console.log("Node: "+node+" "+mark)
 
   try {
     if (isTextNode(node)) {
-      addText(arrayOfText,
-              useHtmlMath ? encodeToHtml(node.nodeValue) : encodeToLatex(node.nodeValue),
-              mark, offset, useHtmlMath)
+      addText(
+        arrayOfText,
+        useHtmlMath
+          ? encodeToHtml(node.nodeValue)
+          : encodeToLatex(node.nodeValue),
+        mark,
+        offset,
+        useHtmlMath
+      );
     } else if (isBIUNode(node)) {
-      useHtmlMath && arrayOfText.push("<"+node.nodeName+">")
+      useHtmlMath && arrayOfText.push("<" + node.nodeName + ">");
         for (let i = 0; i < node.childNodes.length; i++) {
-          addTextForNode(node.childNodes[i], arrayOfText, nodeToMark, offset, useHtmlMath)
+        addTextForNode(
+          node.childNodes[i],
+          arrayOfText,
+          nodeToMark,
+          offset,
+          useHtmlMath
+        );
       }
-      useHtmlMath && arrayOfText.push("</"+node.nodeName+">")
+      useHtmlMath && arrayOfText.push("</" + node.nodeName + ">");
     } else if (isKatexNode(node)) {
-      if (mark)
-        arrayOfText.push(MARK)
-      arrayOfText.push(useHtmlMath ? RAW_TEXT_MATH_START_TAG_HTML_MATH : RAW_TEXT_MATH_START_TAG_TEX)
-      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)
+      if (mark) arrayOfText.push(MARK);
+      arrayOfText.push(
+        useHtmlMath
+          ? RAW_TEXT_MATH_START_TAG_HTML_MATH
+          : RAW_TEXT_MATH_START_TAG_TEX
+      );
+      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);
+    } else if (isBrNode(node)) {
+      // Handle BR tags as line breaks
+      if (mark) arrayOfText.push(MARK);
+      arrayOfText.push("\n");
+      if (mark) arrayOfText.push(MARK);
     } else {
-      console.error("Can't render node in editable div: Unknown node type")
-      console.log(node)
-      console.log("Node.type:"+node.type)
-      console.log("Node.tagName:"+node.tagName)
+      console.error("Can't render node in editable div: Unknown node type");
+      console.log(node);
+      console.log("Node.type:" + node.type);
+      console.log("Node.tagName:" + node.tagName);
     }    
   } catch (error) {
-    console.error(error)
-    console.log("Node: ")
-    console.log(node)
-    console.log("Node.type:"+node.type)
-    console.log("Node.tagName:"+node.tagName)
+    console.error(error);
+    console.log("Node: ");
+    console.log(node);
+    console.log("Node.type:" + node.type);
+    console.log("Node.tagName:" + node.tagName);
   }
 }
 
@@ -387,66 +424,87 @@ function addTextForNode(node, arrayOfText, nodeToMark=null, offset=0, useHtmlMat
 //
 // Marked nodes are useful if a node may need to be deleted and allows the node to be
 // deleted by stripping it out of the raw text. 
-export function elementToMarkedRawText(element, nodeToMark=null, offset=0, useHtmlMath=true) {
+export function elementToMarkedRawText(
+  element,
+  nodeToMark = null,
+  offset = 0,
+  useHtmlMath = true
+) {
   // console.log("elementToMarkedRawText")
   // console.log(element.innerHTML)
-  if (element.innerHTML === "<p><br></p>")
-    throw new Error ("We are here")
+
+  // Handle empty content cases gracefully
+  if (
+    element.innerHTML === "<p><br></p>" ||
+    element.innerHTML === "<br>" ||
+    element.innerHTML === ""
+  ) {
+    return "";
+  }
+
   // console.log("Node to mark:")
   // console.log(nodeToMark)
-  let nodes = element.childNodes
+  let nodes = element.childNodes;
   // console.log(nodes)
   
-  let result = []
+  let result = [];
 
-  if ((nodes === null || nodes === undefined || nodes.length === 0) && nodeToMark !== null) {
+  if (
+    (nodes === null || nodes === undefined || nodes.length === 0) &&
+    nodeToMark !== null
+  ) {
     // console.log("Empty field")
-    addText(result, "", true, 0)
+    addText(result, "", true, 0);
   } else {
     for (let i = 0; i < nodes.length; i++)
-      addTextForNode(nodes[i], result, nodeToMark, offset, useHtmlMath)
+      addTextForNode(nodes[i], result, nodeToMark, offset, useHtmlMath);
   }
-  let raw_text = result.join("")
+  let raw_text = result.join("");
 
   // remove any zero-width spaces we added to the html
-  raw_text = raw_text.replace(SMALL_SPACE_REG_EXP,'') 
+  raw_text = raw_text.replace(SMALL_SPACE_REG_EXP, "");
 
-  return raw_text
+  return raw_text;
 }
 
-export function replaceMarksWithMath(markedRawText, latex, useHtmlMath=true) {
-  let start_pos = markedRawText.indexOf(MARK)
-  let end_pos = markedRawText.indexOf(MARK, start_pos + MARK.length)
-  let new_raw_text = markedRawText.substring(0,start_pos) + 
-                    (useHtmlMath ? RAW_TEXT_MATH_START_TAG_HTML_MATH : RAW_TEXT_MATH_START_TAG_TEX) +
+export function replaceMarksWithMath(markedRawText, latex, useHtmlMath = true) {
+  let start_pos = markedRawText.indexOf(MARK);
+  let end_pos = markedRawText.indexOf(MARK, start_pos + MARK.length);
+  let new_raw_text =
+    markedRawText.substring(0, start_pos) +
+    (useHtmlMath
+      ? RAW_TEXT_MATH_START_TAG_HTML_MATH
+      : RAW_TEXT_MATH_START_TAG_TEX) +
                     latex + 
-                    (useHtmlMath ? RAW_TEXT_MATH_END_TAG_HTML_MATH : RAW_TEXT_MATH_END_TAG_TEX) +
-                    markedRawText.substring(end_pos + MARK.length)
-  return new_raw_text
+    (useHtmlMath
+      ? RAW_TEXT_MATH_END_TAG_HTML_MATH
+      : RAW_TEXT_MATH_END_TAG_TEX) +
+    markedRawText.substring(end_pos + MARK.length);
+  return new_raw_text;
 }
 
-function stripDollars (stringToStrip) {
+function stripDollars(stringToStrip) {
   return stringToStrip[0] === "$" && stringToStrip[1] !== "$"
     ? stringToStrip.slice(1, -1)
-    : stringToStrip.slice(2, -2)
+    : stringToStrip.slice(2, -2);
 }
 
-function stripTags (stringToStrip) {
-  let i = stringToStrip.indexOf(">")
-  let j = stringToStrip.lastIndexOf("<")
+function stripTags(stringToStrip) {
+  let i = stringToStrip.indexOf(">");
+  let j = stringToStrip.lastIndexOf("<");
   if (i <= 0 || j <= 0) {
-    console.error("Could not strip tag from string: "+stringToStrip)
-    return stringToStrip
+    console.error("Could not strip tag from string: " + stringToStrip);
+    return stringToStrip;
   }
 
-  return stringToStrip.substring(i+1,j)
+  return stringToStrip.substring(i + 1, j);
 }
 
-function getDisplayType (stringToDisplay) {
-  return stringToDisplay.match(BLOCK_TEX_REG_EXP) ? "block" : "inline"
+function getDisplayType(stringToDisplay) {
+  return stringToDisplay.match(BLOCK_TEX_REG_EXP) ? "block" : "inline";
 }
 
-function renderLatexString (katex, s, t) {
+function renderLatexString(katex, s, t) {
   let options = {
     children: "",
     displayMode: false,
@@ -459,8 +517,8 @@ function renderLatexString (katex, s, t) {
     minRuleThickness: 0,
     colorIsTextColor: false,
     strict: "warn",
-    trust: false
-  }
+    trust: false,
+  };
 
   let renderedString;
   try {
@@ -476,355 +534,368 @@ function renderLatexString (katex, s, t) {
 
   // Reduce multiple base class spans to one single span
   try {
-    let fixed_renderedString = renderedString
-    let i = fixed_renderedString.indexOf(SPAN_OPEN_BASE)
+    let fixed_renderedString = renderedString;
+    let i = fixed_renderedString.indexOf(SPAN_OPEN_BASE);
     do {
-      i = fixed_renderedString.indexOf(SPAN_OPEN_BASE, i + SPAN_OPEN_BASE.length)
-      if (i < 0)
-        break;
-      let j = fixed_renderedString.lastIndexOf(SPAN_CLOSE, i)
+      i = fixed_renderedString.indexOf(
+        SPAN_OPEN_BASE,
+        i + SPAN_OPEN_BASE.length
+      );
+      if (i < 0) break;
+      let j = fixed_renderedString.lastIndexOf(SPAN_CLOSE, i);
       fixed_renderedString = 
-        fixed_renderedString.substring(0,j) + 
-        fixed_renderedString.substring(i+SPAN_OPEN_BASE.length)
-    } while (i > 0)
-    renderedString = fixed_renderedString
+        fixed_renderedString.substring(0, j) +
+        fixed_renderedString.substring(i + SPAN_OPEN_BASE.length);
+    } while (i > 0);
+    renderedString = fixed_renderedString;
   } catch (error) {
-    console.log(error)
+    console.log(error);
   }
 
   return renderedString;
-};
+}
 
 export function rawTextToHtml(katex, string, mimeType) {
-
-  if (string === "")
-    return "<p>"+SMALL_SPACE+"</p>"
+  if (string === "") return "<p>" + SMALL_SPACE + "</p>";
 
   if (mimeType == null || mimeType === "") {
       mimeType = determineMimeType(string);
   }
 
-  if (mimeType === MIME_TYPE_PLAIN_TEXT)
-    return encodeToHtml(string)
+  if (mimeType === MIME_TYPE_PLAIN_TEXT) return encodeToHtml(string);
 
-  let parseAsTex
-  if (mimeType === MIME_TYPE_TEX ||
-      mimeType === MIME_TYPE_LATEX)
-    parseAsTex = true
-  else if (mimeType === MIME_TYPE_HTML || 
-           mimeType === MIME_TYPE_ZZISH_HTML_MATH)
-    parseAsTex = false
+  let parseAsTex;
+  if (mimeType === MIME_TYPE_TEX || mimeType === MIME_TYPE_LATEX)
+    parseAsTex = true;
+  else if (
+    mimeType === MIME_TYPE_HTML ||
+    mimeType === MIME_TYPE_ZZISH_HTML_MATH
+  )
+    parseAsTex = false;
   else {
-    parseAsTex = false
-    console.error("Unknown mime type: "+mimeType)
+    parseAsTex = false;
+    console.error("Unknown mime type: " + mimeType);
   }
 
   // console.log("Original string: "+string)
-  if (parseAsTex)
-    string = string.replace(DOLLAR_SLASH_REG_EXP, TEMP_CHAR)
+  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);
+  const stringElements = string.split(
+    parseAsTex ? INLINE_TEX_REG_EXP : HTML_MATH_REG_EXP
+  );
 
   if (parseAsTex) {
-    for (let i = 0; i <stringElements.length; i++) {
-      stringElements[i] = stringElements[i].replace(TEMP_CHAR_REG_EXP, "$")
-      stringElements[i] = encodeToHtml(stringElements[i])
+    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)
+    for (let i = 0; i < stringElements.length; i++)
+      stringElements[i] = stringElements[i].replace(
+        P_TAG_REG_EXP,
+        P_ELEMENT_SMALL_SPACE
+      );
   }
     
   // 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)
+  if (stringElements[0] === "")
+    // This means the original string stars with latex
+    stringElements[0] = "&#" + SMALL_SPACE.charCodeAt(0);
 
-  if (stringElements.length === 1)
-    return stringElements[0]
+  if (stringElements.length === 1) return stringElements[0];
 
-  const latexElements = string.match(parseAsTex ? INLINE_TEX_REG_EXP : HTML_MATH_REG_EXP);    
+  const latexElements = string.match(
+    parseAsTex ? INLINE_TEX_REG_EXP : HTML_MATH_REG_EXP
+  );
 
   const result = [];
   for (let i = 0; i < stringElements.length; i++) {
-    result.push(stringElements[i])
+    result.push(stringElements[i]);
 
     if (latexElements[i]) {
-      let element = latexElements[i]
-      let type
+      let element = latexElements[i];
+      let type;
       if (parseAsTex) {
-        type = getDisplayType(element)
-        element = stripDollars(element)
-        element = element.replace(TEMP_CHAR_REG_EXP, "\\$")
+        type = getDisplayType(element);
+        element = stripDollars(element);
+        element = element.replace(TEMP_CHAR_REG_EXP, "\\$");
       } else {
-        type = "inline"
-        element = stripTags(element)
+        type = "inline";
+        element = stripTags(element);
       }
 
-      let renderedElement = renderLatexString(katex, element, type)
-      renderedElement = renderedElement + "&#"+SMALL_SPACE.charCodeAt(0)
+      let renderedElement = renderLatexString(katex, element, type);
+      renderedElement = renderedElement + "&#" + SMALL_SPACE.charCodeAt(0);
 
-      result.push(renderedElement)
+      result.push(renderedElement);
     }
   }
 
-  return result.join("")
+  return result.join("");
 }
 
 export function isEmptyNode(node) {
-  return node.childNodes === null || node.childNodes === undefined || node.childNodes.length === 0
+  return (
+    node.childNodes === null ||
+    node.childNodes === undefined ||
+    node.childNodes.length === 0
+  );
 }
 
-export function findIndexOfNode(node, nodeToFind, indexCounter=null) {
+export function findIndexOfNode(node, nodeToFind, indexCounter = null) {
   if (indexCounter === null) {
     // Starting with root node
-    if (node === nodeToFind)
-      return 0
-    indexCounter = {count:0}
+    if (node === nodeToFind) return 0;
+    indexCounter = { count: 0 };
   } else {
     if (isKatexNode(node)) {
       if (node === nodeToFind || node.contains(nodeToFind))
-        return indexCounter.count
+        return indexCounter.count;
       else {
-        indexCounter.count ++
-        return -1
+        indexCounter.count++;
+        return -1;
       }
     }
 
     if (isBrNode(node)) {
-      if (node === nodeToFind) 
-        return indexCounter.count
+      if (node === nodeToFind) return indexCounter.count;
       else {
-        const nextSibling = node.nextSibling
-        if (nextSibling !== null && nextSibling !== undefined && isBrNode(nextSibling)) {
-          indexCounter.count ++
-          return -1
+        const nextSibling = node.nextSibling;
+        if (
+          nextSibling !== null &&
+          nextSibling !== undefined &&
+          isBrNode(nextSibling)
+        ) {
+          indexCounter.count++;
+          return -1;
         } else {
-          return -1
+          return -1;
         }
-
       }
     }
 
     if (isTextNode(node)) {
-      if (node === nodeToFind)
-        return indexCounter.count
+      if (node === nodeToFind) return indexCounter.count;
 
-      indexCounter.count ++
+      indexCounter.count++;
     }
-    
   }
 
-  const childNodes = node.childNodes
-  if (childNodes === null || childNodes === undefined)
-    return -1
+  const childNodes = node.childNodes;
+  if (childNodes === null || childNodes === undefined) return -1;
   
   for (let i = 0; i < childNodes.length; i++) {
-    let index = findIndexOfNode(childNodes[i], nodeToFind, indexCounter)
-    if (index >= 0)
-      return index
+    let index = findIndexOfNode(childNodes[i], nodeToFind, indexCounter);
+    if (index >= 0) return index;
   }
   
-  return -1
+  return -1;
 }
 
-export function findNodeWithIndex(node, index, indexCounter=null) {
+export function findNodeWithIndex(node, index, indexCounter = null) {
   if (indexCounter === null) {
     // Starting with root node
     if (index === 0 && isEmptyNode(node)) {
       // console.log("Empty node")
-      return node
+      return node;
     }
-    indexCounter = {count:0}
+    indexCounter = { count: 0 };
   } else {
     if (isKatexNode(node)) {
-      if (index === indexCounter.count)
-        return node
+      if (index === indexCounter.count) return node;
       else {
-        indexCounter.count ++
-        return null
+        indexCounter.count++;
+        return null;
       }
     }
 
     if (isBrNode(node)) {
-      if (index === indexCounter.count) 
-        return node
+      if (index === indexCounter.count) return node;
       else {
-        const nextSibling = node.nextSibling
-        if (nextSibling !== null && nextSibling !== undefined && isBrNode(nextSibling)) {
-          indexCounter.count ++
-          return null
+        const nextSibling = node.nextSibling;
+        if (
+          nextSibling !== null &&
+          nextSibling !== undefined &&
+          isBrNode(nextSibling)
+        ) {
+          indexCounter.count++;
+          return null;
         } else {
-          return null
+          return null;
         }
-
       }
     }
 
     // If not the root node then
     if (isTextNode(node)) {
-      if (index === indexCounter.count)
-        return node
+      if (index === indexCounter.count) return node;
 
-      indexCounter.count ++
+      indexCounter.count++;
     }
   }
 
-  const childNodes = node.childNodes
-  if (childNodes === null || childNodes === undefined)
-    return null
+  const childNodes = node.childNodes;
+  if (childNodes === null || childNodes === undefined) return null;
 
   for (let i = 0; i < childNodes.length; i++) {
-    let found_node = findNodeWithIndex(childNodes[i], index, indexCounter)
+    let found_node = findNodeWithIndex(childNodes[i], index, indexCounter);
     if (found_node !== null) {
-      return found_node
+      return found_node;
     }
   }
 
     return null;
 }
 
-function findGlobalOffset(node, nodeToFind, offset, result=null) {
+function findGlobalOffset(node, nodeToFind, offset, result = null) {
   // console.log(node.nodeType+":"+node.nodeValue+" === "+ nodeToFind.nodeType+":"+nodeToFind.nodeValue)
   // console.log(node === nodeToFind)
-  if (result === null || result === undefined)
-    throw error
+  if (result === null || result === undefined) throw error;
   if (node === nodeToFind) {
-    result.offset = result.offset + offset
+    result.offset = result.offset + offset;
     // console.log("result.offset now: "+result.offset)
     if (isTextNode(node) && nodeStartsWithSmallSpace(node)) {
-      if (offset > 0)
-        result.offset = result.offset - 1
+      if (offset > 0) result.offset = result.offset - 1;
     }
-    return true
+    return true;
   }
   if (isKatexNode(node)) {
-    if (node === nodeToFind || node.contains(nodeToFind))
-      return true
+    if (node === nodeToFind || node.contains(nodeToFind)) return true;
     else {
-      result.offset++
-      return false
+      result.offset++;
+      return false;
     }
   }
   if (isTextNode(node)) {
-    result.offset += node.nodeValue.length
-    if (nodeStartsWithSmallSpace(node))
-      result.offset -= 1
-    return false
+    result.offset += node.nodeValue.length;
+    if (nodeStartsWithSmallSpace(node)) result.offset -= 1;
+    return false;
   }
-  const childNodes = node.childNodes
-  if (childNodes === null || childNodes === undefined)
-    return false
+  const childNodes = node.childNodes;
+  if (childNodes === null || childNodes === undefined) return false;
   
   for (let i = 0; i < childNodes.length; i++) {
-    let child = childNodes[i]
+    let child = childNodes[i];
     // console.log("Checking child:"+child.nodeType+":"+child.tagName+":"+child.nodeValue)
-    let found = findGlobalOffset(child, nodeToFind, offset, result)
-    if (found)
-      return true
+    let found = findGlobalOffset(child, nodeToFind, offset, result);
+    if (found) return true;
   }
   if (node.nodeType === 1 && node.tagName === "P") {
-    result.offset ++
+    result.offset++;
   }
   
   return false;
 }
 
-function findNodeAndOffsetForGlobalOffset(node, globalOffset, result=null) {
+function findNodeAndOffsetForGlobalOffset(node, globalOffset, result = null) {
   if (isKatexNode(node)) {
       result.node = null;
       result.offset++;
       return false;
   }
   if (isTextNode(node)) {
-    result.node = node
-    result.lastTextNode = node
+    result.node = node;
+    result.lastTextNode = node;
     // console.log("Found text node \'"+node.nodeValue+"\' of length "+node.nodeValue.length)
     // console.log("result.offset was: "+result.offset)
-    result.offset += node.nodeValue.length
+    result.offset += node.nodeValue.length;
     if (nodeStartsWithSmallSpace(node)) {
       // console.log("Text node starts with small space")
-      result.offset -= 1
+      result.offset -= 1;
     }
     // console.log("result.offset now: "+result.offset)
-    return false
+    return false;
   }
-  const childNodes = node.childNodes
-  if (childNodes === null || childNodes === undefined)
-    return false
+  const childNodes = node.childNodes;
+  if (childNodes === null || childNodes === undefined) return false;
   
   for (let i = 0; i < childNodes.length; i++) {
-    let found = findNodeAndOffsetForGlobalOffset(childNodes[i], globalOffset, result)
-    if (found)
-      return true
+    let found = findNodeAndOffsetForGlobalOffset(
+      childNodes[i],
+      globalOffset,
+      result
+    );
+    if (found) return true;
     
     if (result.node !== null && result.node !== undefined) {
       if (result.offset >= globalOffset) {
-        result.offset = globalOffset-(result.offset-result.node.nodeValue.length)  
-        return true 
+        result.offset =
+          globalOffset - (result.offset - result.node.nodeValue.length);
+        return true;
       }
     }
   }
   
   if (node.nodeType === 1 && node.tagName === "P") {
     // console.log("Leaving p node")
-    result.node = null
-    result.offset ++
+    result.node = null;
+    result.offset++;
     // console.log("result.offset now: "+result.offset)
   }
   return false;
 }
 
 export function findFirstTextNode(node) {
-  if (isTextNode(node))
-    return node
+  if (isTextNode(node)) return node;
 
-  const nodes = node.childNodes
+  const nodes = node.childNodes;
   for (let i = 0; i < nodes.length; i++) {
-    let found_node = findFirstTextNode(nodes[i])
-    if (found_node !== null)
-      return found_node
+    let found_node = findFirstTextNode(nodes[i]);
+    if (found_node !== null) return found_node;
   }
 
-  return null
+  return null;
 }
 
-function findNodeAndOffsetForGlobalOffsetInEditableDiv(editableDiv, globalOffset) {
-  let result = {offset:0}
+function findNodeAndOffsetForGlobalOffsetInEditableDiv(
+  editableDiv,
+  globalOffset
+) {
+  let result = { offset: 0 };
   // console.log("Finding node and offset within: "+editableDiv.outerHTML)
-  findNodeAndOffsetForGlobalOffset(editableDiv, globalOffset, result)
+  findNodeAndOffsetForGlobalOffset(editableDiv, globalOffset, result);
   // console.log(result)
 
   if (result.node === null) {
     if (globalOffset > 0 && result.lastTextNode !== null) {
-      result.node = result.lastTextNode
-      result.offset = result.lastTextNode.nodeValue.length
+      result.node = result.lastTextNode;
+      result.offset = result.lastTextNode.nodeValue.length;
     } else {
-      console.warn("Unable to find node and offset for global offset: "+globalOffset)
-      console.log(editableDiv.innerHTML)
-      console.log(result)
-      result.node = findFirstTextNode(editableDiv)
-      result.offset = 0
+      console.warn(
+        "Unable to find node and offset for global offset: " + globalOffset
+      );
+      console.log(editableDiv.innerHTML);
+      console.log(result);
+      result.node = findFirstTextNode(editableDiv);
+      result.offset = 0;
     }
   }
 
-  if (result.offset === 0 && 
+  if (
+    result.offset === 0 &&
     result.node.nodeValue.length > 0 && 
-    nodeStartsWithSmallSpace(result.node)) {
-    result.offset = 1
+    nodeStartsWithSmallSpace(result.node)
+  ) {
+    result.offset = 1;
   }
 
   if (result.offset > result.node.nodeValue.length) {
-    console.warn("Unexpected offset when converting global offset to node and offset")
-    console.log("Global offset: "+globalOffset)
-    console.log("Result:")
-    console.log(result)
-    console.log("result.offset  > result.node.nodeValue.length")
-    result.offset = result.node.nodeValue.length  
+    console.warn(
+      "Unexpected offset when converting global offset to node and offset"
+    );
+    console.log("Global offset: " + globalOffset);
+    console.log("Result:");
+    console.log(result);
+    console.log("result.offset  > result.node.nodeValue.length");
+    console.log("Node value: '" + result.node.nodeValue + "'");
+    console.log("Node value length: " + result.node.nodeValue.length);
+    console.log("Calculated offset: " + result.offset);
+    result.offset = result.node.nodeValue.length;
   }
 
-  return result
+  return result;
 }
 
 // https://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html
@@ -833,14 +904,18 @@ export function getRangeParams(editableDiv) {
   // console.log("Inner html: "+editableDiv.innerHTML)
   const isSupported = typeof window.getSelection !== "undefined";
   if (!isSupported) {
-    console.error("Can't get range params, browser does not support window.getSelection")
-    return null
+    console.error(
+      "Can't get range params, browser does not support window.getSelection"
+    );
+    return null;
   }
   
   const selection = window.getSelection();
   if (selection.rangeCount === 0) {
-    console.error("Can't get range params, window.getSelection did not return any ranges")
-    return null
+    console.error(
+      "Can't get range params, window.getSelection did not return any ranges"
+    );
+    return null;
   }
 
   const range = selection.getRangeAt(0);
@@ -849,31 +924,61 @@ export function getRangeParams(editableDiv) {
   // If the range is not within a text node, move it to a text node
   // This typically happens when the end of a range is at the start of a new line
   if (range.startContainer.nodeType !== 3) {
-    let textNode = findFirstTextNode(range.startContainer) 
+    let textNode = findFirstTextNode(range.startContainer);
     if (textNode !== null) {
-      console.warn("Adjusting start pos in getRangeParams as container was of type: "+range.startContainer.nodeName)
-      range.setStart(textNode,0)
+      console.warn(
+        "Adjusting start pos in getRangeParams as container was of type: " +
+          range.startContainer.nodeName
+      );
+      range.setStart(textNode, 0);
     } else {
-      console.error("Unable to getRangeParams. seletion.startContainer is not a text node. "+
-                  "Node type: "+range.startContainer.nodeName)
-      return null
+      // Handle empty content case - return default range params
+      // This is normal behavior after selecting all and deleting content
+      console.log(
+        "getRangeParams: Empty content detected, using default range params. " +
+          "Node type: " +
+          range.startContainer.nodeName
+      );
+      return {
+        startNodeIndex: 0,
+        startOffset: 0,
+        endNodeIndex: 0,
+        endOffset: 0,
+        startGlobalOffset: 0,
+        endGlobalOffset: 0,
+      };
     }
   }
   if (range.endContainer.nodeType !== 3) {
-    let textNode = findFirstTextNode(range.endContainer) 
+    let textNode = findFirstTextNode(range.endContainer);
     if (textNode !== null) {
-      console.warn("Adjusting end pos in getRangeParams as container was of type: "+range.endContainer.nodeName)
-      range.setEnd(textNode,0)
+      console.warn(
+        "Adjusting end pos in getRangeParams as container was of type: " +
+          range.endContainer.nodeName
+      );
+      range.setEnd(textNode, 0);
     } else {
-      console.error("Unable to getRangeParams. seletion.endContainer is not a text node. "+
-                  "Node type: "+range.endContainer.nodeName)
-                  return null
+      // Handle empty content case - return default range params
+      // This is normal behavior after selecting all and deleting content
+      console.log(
+        "getRangeParams: Empty content detected, using default range params. " +
+          "Node type: " +
+          range.endContainer.nodeName
+      );
+      return {
+        startNodeIndex: 0,
+        startOffset: 0,
+        endNodeIndex: 0,
+        endOffset: 0,
+        startGlobalOffset: 0,
+        endGlobalOffset: 0,
+      };
     }
   }
   // Find the index of the start and end nodes
 
-  let startNodeIndex = findIndexOfNode(editableDiv, range.startContainer)  
-  let endNodeIndex = findIndexOfNode(editableDiv, range.endContainer)  
+  let startNodeIndex = findIndexOfNode(editableDiv, range.startContainer);
+  let endNodeIndex = findIndexOfNode(editableDiv, range.endContainer);
 
   // console.log(editableDiv)
   // console.log("Start node: "+range.startContainer)
@@ -882,11 +987,16 @@ export function getRangeParams(editableDiv) {
   // console.log("Start node offset: "+range.startOffset)
     
     // Find the global offset of the start and end nodes
-  let startResult = {offset:0}
-  findGlobalOffset(editableDiv, range.startContainer, range.startOffset, startResult)
+  let startResult = { offset: 0 };
+  findGlobalOffset(
+    editableDiv,
+    range.startContainer,
+    range.startOffset,
+    startResult
+  );
   // console.log("Global offset of start: "+startResult.offset)
-  let endResult = {offset:0}
-  findGlobalOffset(editableDiv, range.endContainer, range.endOffset, endResult)
+  let endResult = { offset: 0 };
+  findGlobalOffset(editableDiv, range.endContainer, range.endOffset, endResult);
   // console.log("Global offset of end: "+endResult.offset)
   
   let rangeParams = {
@@ -895,8 +1005,8 @@ export function getRangeParams(editableDiv) {
     endNodeIndex: endNodeIndex,
     endOffset: range.endOffset,
     startGlobalOffset: startResult.offset,
-    endGlobalOffset: endResult.offset
-  }
+    endGlobalOffset: endResult.offset,
+  };
 
     return rangeParams;
 }
@@ -905,12 +1015,16 @@ function setRangeParamsFromGlobalOffsets(editableDiv, params) {
   let new_range = null;
   try {
     if (params === null || params === undefined)
-      throw new Error("Can't set range params: params === "+params)
-    let startResult = 
-      findNodeAndOffsetForGlobalOffsetInEditableDiv(editableDiv, params.startGlobalOffset)
+      throw new Error("Can't set range params: params === " + params);
+    let startResult = findNodeAndOffsetForGlobalOffsetInEditableDiv(
+      editableDiv,
+      params.startGlobalOffset
+    );
 
-    let endResult = 
-      findNodeAndOffsetForGlobalOffsetInEditableDiv(editableDiv, params.endGlobalOffset)
+    let endResult = findNodeAndOffsetForGlobalOffsetInEditableDiv(
+      editableDiv,
+      params.endGlobalOffset
+    );
 
     if (startResult.node !== null) {
       // console.log("Setting range to start in node:")
@@ -919,21 +1033,21 @@ function setRangeParamsFromGlobalOffsets(editableDiv, params) {
       // console.log("  node value: "+startResult.node.nodeValue)
       // console.log("  offset:"+startResult.offset)
     } else {
-      console.warn("Can't set range, null start node returned")
-      return      
+      console.warn("Can't set range, null start node returned");
+      return;
     }
 
     new_range = document.createRange();
     new_range.setStart(startResult.node, startResult.offset);
     new_range.setEnd(endResult.node, endResult.offset);
     const selection = window.getSelection();
-    selection.removeAllRanges()
-    selection.addRange(new_range)
+    selection.removeAllRanges();
+    selection.addRange(new_range);
   } catch (error) {
-    console.error(error)
-    console.log("Trying to set range:")
-    console.log(new_range)
-    console.log(editableDiv.childNodes)
+    console.error(error);
+    console.log("Trying to set range:");
+    console.log(new_range);
+    console.log(editableDiv.childNodes);
   }
 }
 
@@ -944,54 +1058,67 @@ export function setRangeParams(editableDiv, params) {
   let new_range = null;
   try {
     if (params === null || params === undefined) {
-      console.error("Can't set range params: params === "+params)
-      return
+      console.error("Can't set range params: params === " + params);
+      return;
     }
     
     // New way of doing things
-    if (params.startGlobalOffset !== null && params.startGlobalOffset !== undefined) {
+    if (
+      params.startGlobalOffset !== null &&
+      params.startGlobalOffset !== undefined
+    ) {
       // console.log("Setting range from global offsets")
-      setRangeParamsFromGlobalOffsets(editableDiv, params)
-      return
+      setRangeParamsFromGlobalOffsets(editableDiv, params);
+      return;
     }
 
     // Otherwise use the old way of doing things
     // console.log("Setting range from node index and local offset")
 
     if (params.startNodeIndex === null || params.startNodeIndex === undefined) {
-      console.error("Can't set range params: params.startNodeIndex === "+params.startNodeIndex)
-      return
+      console.error(
+        "Can't set range params: params.startNodeIndex === " +
+          params.startNodeIndex
+      );
+      return;
     }
     if (params.startNodeIndex < 0) {
-      console.error("Can't set range params: params.startNodeIndex < 0")
-      return
+      console.error("Can't set range params: params.startNodeIndex < 0");
+      return;
     }
 
-    let nodes = editableDiv.childNodes
-    if (params.startNodeIndex === 0 && params.startOffset === 0 && nodes.length === 0) {
-      return
+    let nodes = editableDiv.childNodes;
+    if (
+      params.startNodeIndex === 0 &&
+      params.startOffset === 0 &&
+      nodes.length === 0
+    ) {
+      return;
     }
 
     // Set the offsets within the nodes
-    let startOffset = params.startOffset
-    let endOffset = params.endOffset
+    let startOffset = params.startOffset;
+    let endOffset = params.endOffset;
 
     // Handle special case of auto inserted SMALL CHAR at beginning of input
     // TODO This sectin may no longer be neceesary and may be introducing a bug
-    if (params.startNodeIndex === 0 &&
+    if (
+      params.startNodeIndex === 0 &&
         params.startOffset === 1 &&
-        isSmallSpace(nodes[0]))
-      startOffset = 0
+      isSmallSpace(nodes[0])
+    )
+      startOffset = 0;
 
-    if (params.endNodeIndex === 0 &&
+    if (
+      params.endNodeIndex === 0 &&
         params.endOffset === 1 &&
-        isSmallSpace(nodes[0]))
-      endOffset = 0
-
+      isSmallSpace(nodes[0])
+    )
+      endOffset = 0;
 
     // Find the nodes
-    let startNode = findNodeWithIndex(editableDiv, params.startNodeIndex)
-    let endNode = findNodeWithIndex(editableDiv, params.endNodeIndex)
+    let startNode = findNodeWithIndex(editableDiv, params.startNodeIndex);
+    let endNode = findNodeWithIndex(editableDiv, params.endNodeIndex);
 
     // console.log("Setting range to start in node:")
     // console.log("  node type: "+startNode.nodeType)
@@ -1007,16 +1134,18 @@ export function setRangeParams(editableDiv, params) {
 
     // Set range in document
     if (startNode === null) {
-      console.warn("Could not set range to start node with index "+params.startNodeIndex)
-      startNode = findFirstTextNode(editableDiv)
-      startOffset = 0
+      console.warn(
+        "Could not set range to start node with index " + params.startNodeIndex
+      );
+      startNode = findFirstTextNode(editableDiv);
+      startOffset = 0;
     }
 
     if (!isTextNode(startNode)) {
-      console.warn("Start node found for range start is not a text a node")
-      console.log(editableDiv.childNodes)
-      console.log(params)
-      console.log(startNode)
+      console.warn("Start node found for range start is not a text a node");
+      console.log(editableDiv.childNodes);
+      console.log(params);
+      console.log(startNode);
       // startNode = findFirstTextNode(startNode)
       // if (startNode === null)
       //   startNode = findFirstTextNode(editableDiv)
@@ -1024,16 +1153,18 @@ export function setRangeParams(editableDiv, params) {
     }
 
     if (endNode === null) {
-      console.warn("Could not set range to end node with index "+params.endNodeIndex)
-      endNode = findFirstTextNode(editableDiv)
-      endOffset = 0
+      console.warn(
+        "Could not set range to end node with index " + params.endNodeIndex
+      );
+      endNode = findFirstTextNode(editableDiv);
+      endOffset = 0;
     }
 
     if (!isTextNode(endNode)) {
-      console.warn("End node found for range start is not a text a node")
-      console.log(editableDiv.childNodes)
-      console.log(params)
-      console.log(startNode)
+      console.warn("End node found for range start is not a text a node");
+      console.log(editableDiv.childNodes);
+      console.log(params);
+      console.log(startNode);
       // startNode = findFirstTextNode(startNode)
       // if (startNode === null)
       //   startNode = findFirstTextNode(editableDiv)
@@ -1042,73 +1173,89 @@ export function setRangeParams(editableDiv, params) {
 
     new_range = document.createRange();
     if (startOffset > startNode.nodeValue.length) {
-      console.warn("endOffset > endNode.nodeValue.length when setting range: "+
-              startOffset+ " > "+startNode.nodeValue.length+
-              " - "+stateNode.nodeType+
-              " - "+startNode.nodeValue)
-              startOffset = startNode.nodeValue.length
+      console.warn(
+        "endOffset > endNode.nodeValue.length when setting range: " +
+          startOffset +
+          " > " +
+          startNode.nodeValue.length +
+          " - " +
+          stateNode.nodeType +
+          " - " +
+          startNode.nodeValue
+      );
+      startOffset = startNode.nodeValue.length;
     }
 
     new_range.setStart(startNode, startOffset);
     if (endOffset > endNode.nodeValue.length) {
-        console.warn("endOffset > endNode.nodeValue.length when setting range: "+
-                endOffset+ " > "+endNode.nodeValue.length+
-                " - "+endNode.nodeType+
-                " - "+endNode.nodeValue)
-                endOffset = endNode.nodeValue.length
+      console.warn(
+        "endOffset > endNode.nodeValue.length when setting range: " +
+          endOffset +
+          " > " +
+          endNode.nodeValue.length +
+          " - " +
+          endNode.nodeType +
+          " - " +
+          endNode.nodeValue
+      );
+      endOffset = endNode.nodeValue.length;
     }
     new_range.setEnd(endNode, endOffset);
 
     // console.log("Setting range")
     // console.log(new_range)
     const selection = window.getSelection();
-    selection.removeAllRanges()
-    selection.addRange(new_range)
+    selection.removeAllRanges();
+    selection.addRange(new_range);
   } catch (error) {
-    console.error(error)
-    console.log("Trying to set range:")
-    console.log(new_range)
-    console.log(editableDiv.childNodes)
+    console.error(error);
+    console.log("Trying to set range:");
+    console.log(new_range);
+    console.log(editableDiv.childNodes);
   }
 }
 
-
-
 // https://stackoverflow.com/questions/6659351/removing-all-script-tags-from-html-with-js-regular-expression
 export function stripScripts(s) {
   do {
-    var div = document.createElement('div');
+    var div = document.createElement("div");
     div.innerHTML = s;
-    var scripts = div.getElementsByTagName('script');
+    var scripts = div.getElementsByTagName("script");
     var i = scripts.length;
     while (i--) {
       scripts[i].parentNode.removeChild(scripts[i]);
     }
     s = div.innerHTML;
-  } while (scripts !== null && scripts !== undefined && scripts.length > 0)
+  } while (scripts !== null && scripts !== undefined && scripts.length > 0);
 
-  return s
+  return s;
 }
 
 function sanitiseHtmlForElement(element) {
-  if (isTextNode(element))
-    return document.createTextNode(element.nodeValue)
+  if (isTextNode(element)) return document.createTextNode(element.nodeValue);
   if (isKatexNode(element)) {
     // console.log("Copying katex node")
-    let clone = element.cloneNode(true)
-    return clone
+    let clone = element.cloneNode(true);
+    return clone;
   }
-  if (element.tagName === "HEAD" ||
+  // Preserve math tags - they should be processed as math content
+  if (element.nodeType === 1 && element.tagName.toLowerCase() === "math") {
+    let clone = element.cloneNode(true);
+    return clone;
+  }
+  if (
+    element.tagName === "HEAD" ||
       element.tagName === "STYLE" || 
-      element.tagName === "LINK")
-    return null
-  let new_element = null
+    element.tagName === "LINK"
+  )
+    return null;
+  let new_element = null;
   if (isBIUNode(element)) {
     // console.log("Updating descendent: "+element.textContent)
     new_element = document.createElement(element.tagName);
-  } else if (element.nodeType === 1 && 
-        (
-         element.tagName === "LI" || 
+  } else if (
+    element.nodeType === 1 &&
+    (element.tagName === "LI" ||
          element.tagName === "DT" || 
          element.tagName === "DD" || 
          element.tagName === "THEAD" || 
@@ -1118,126 +1265,209 @@ function sanitiseHtmlForElement(element) {
          element.tagName === "H3" || 
          element.tagName === "H4" || 
          element.tagName === "H5" || 
-         element.tagName === "H6"
-         )) {
+      element.tagName === "H6")
+  ) {
     // console.log("Converting descendent: <"+element.tagName+">"+element.textContent)
-    new_element = document.createElement('p');
+    new_element = document.createElement("p");
   } else {
     // console.log("Stripping descendent:  <"+element.tagName+">"+element.textContent)
-    new_element = document.createElement('span');
+    new_element = document.createElement("span");
   }
   if (element.hasChildNodes()) {
     for (let i = 0; i < element.childNodes.length; i++) {
-      let new_child = sanitiseHtmlForElement(element.childNodes[i])
-      if (new_child !== null)
-        new_element.appendChild(new_child)
-      if (element.childNodes[i].tagName === "TH" || element.childNodes[i].tagName === "TD")
-        new_element.appendChild(document.createTextNode(" "))
+      let new_child = sanitiseHtmlForElement(element.childNodes[i]);
+      if (new_child !== null) new_element.appendChild(new_child);
+      if (
+        element.childNodes[i].tagName === "TH" ||
+        element.childNodes[i].tagName === "TD"
+      )
+        new_element.appendChild(document.createTextNode(" "));
     }
   }
-  return new_element
+  return new_element;
 }
-const SPAN_TAG = new RegExp("<span>|</span>","g")
+const SPAN_TAG = new RegExp("<span>|</span>", "g");
 // const BR_TAG_REG_EXP = new RegExp("<br[\s\S]*?>","g")
 // const COMMENT_TAG_REG_EXP = new RegExp("<!--.+?-->","g")
 // const COMMENT_TAG_REG_EXP = new RegExp("(?=<!--([\s\S]*?)-->","g")
 // const COMMENT_TAG_REG_EXP = new RegExp("<!--[\s\S]*?-->","gm")
 // const MULTI_WHITE_SPACE_REG_EXP = new RegExp("\s{2,}","gm")
-const KATEX_START_HTML = "<span class=\"katex\""
-const KATEX_END_HTML = "</span></span></span></span>"
+const KATEX_START_HTML = '<span class="katex"';
+const KATEX_END_HTML = "</span></span></span></span>";
 export function sanitiseHtml(s) {
   // Remove all <br> tags (as some of these can be inside katex tags)
-  s = s.replace(/<br[\s\S]*?>/gm,"")
+  s = s.replace(/<br[\s\S]*?>/gm, "");
   // console.log("After removing comments:")
   // console.log(s)
   // Next, convert all elements to supported elements
-  var div = document.createElement('div');
+  var div = document.createElement("div");
   div.innerHTML = s;
-  let sanitisedElement = sanitiseHtmlForElement(div)
-  let sanitised = sanitisedElement.innerHTML
+  let sanitisedElement = sanitiseHtmlForElement(div);
+  let sanitised = sanitisedElement.innerHTML;
   // Next, remove all span tags, except those for katex span nodes
   // NB: A simpler solution may have been to create something other than
   // span tags in the sanitiseHtmlForElement(div) method and then simply
   // remove all span tags.
-  let i = 0
-  let j = 0
-  let its = 0
-  let output = []
+  let i = 0;
+  let j = 0;
+  let its = 0;
+  let output = [];
   do {
-    its++
-    j = sanitised.indexOf(KATEX_START_HTML,i)
+    its++;
+    j = sanitised.indexOf(KATEX_START_HTML, i);
     if (j < 0) {
-      let part = sanitised.substring(i,sanitised.length)
-      part = part.replace(SPAN_TAG,"")
-      output.push(part)
-      break
+      let part = sanitised.substring(i, sanitised.length);
+      part = part.replace(SPAN_TAG, "");
+      output.push(part);
+      break;
     } 
-    let part = sanitised.substring(i,j)
-    part = part.replace(SPAN_TAG,"")
-    output.push(part)
-    let k = sanitised.indexOf(KATEX_END_HTML, j) + KATEX_END_HTML.length
+    let part = sanitised.substring(i, j);
+    part = part.replace(SPAN_TAG, "");
+    output.push(part);
+    let k = sanitised.indexOf(KATEX_END_HTML, j) + KATEX_END_HTML.length;
     if (k < 0) {
-      console.warn("Unable to find closing katex tag")
-      k = sanitised.length
+      console.warn("Unable to find closing katex tag");
+      k = sanitised.length;
     }
-    output.push(sanitised.substring(j,k))
-    i = k
+    output.push(sanitised.substring(j, k));
+    i = k;
+  } while (j > 0 && its < 20);
     
-  } while (j > 0 && its < 20)
-  
-  sanitised = output.join("")
+  sanitised = output.join("");
   // Remove new lines
-  sanitised = sanitised.replace(/(\r\n|\r|\n)/gm, "") // new line
+  sanitised = sanitised.replace(/(\r\n|\r|\n)/gm, ""); // new line
   // Convert any multispaces to a single space
-  sanitised = sanitised.replace(/\s{2,}/gm, " ") // 2 or more white spaces
+  sanitised = sanitised.replace(/\s{2,}/gm, " "); // 2 or more white spaces
   // Next, make sure that each line of html is wrapped in paragraph tags
-  i = 0
-  j = 0
-  its = 0
-  output = []
+  i = 0;
+  j = 0;
+  its = 0;
+  output = [];
   do {
-    its++
-    j = sanitised.indexOf("</p>",i)
+    its++;
+    j = sanitised.indexOf("</p>", i);
     if (j < 0) {
-      output.push(sanitised.substring(i,sanitised.length))
-      break
+      output.push(sanitised.substring(i, sanitised.length));
+      break;
     }
-    j = j+4 // Move j four characters to end of </p> tag
-    output.push(sanitised.substring(i,j)) // copy as far as </p>
+    j = j + 4; // Move j four characters to end of </p> tag
+    output.push(sanitised.substring(i, j)); // copy as far as </p>
     // if we have reached the end of the string, finish
-    if (j === sanitised.length)
-      break
+    if (j === sanitised.length) break;
     // if not enough characters for a <p> then can't be a <p>
-    if (j+3 > sanitised.length) {
-      output.push("<p>")
-      output.push(sanitised.substring(j,sanitised.length))
-      output.push("</p>")
-      break
+    if (j + 3 > sanitised.length) {
+      output.push("<p>");
+      output.push(sanitised.substring(j, sanitised.length));
+      output.push("</p>");
+      break;
     }
     // If the next characters are the start of a paragraph tag then continue
-    let nextChars = sanitised.substring(j,j+3)
+    let nextChars = sanitised.substring(j, j + 3);
     if (nextChars === "<p>") {
-      i = j
-      continue
+      i = j;
+      continue;
     }
     // If the next characters are the start of a katex tag then continue
-    if (j+KATEX_START_HTML.length < sanitised.length) {
-      nextChars = sanitised.substring(j,j+KATEX_START_HTML.length)
+    if (j + KATEX_START_HTML.length < sanitised.length) {
+      nextChars = sanitised.substring(j, j + KATEX_START_HTML.length);
       if (nextChars === KATEX_START_HTML) {
-        i = j
-        continue
+        i = j;
+        continue;
       }
     }
     // Ok! We have found some html that is not wrapped in a paragraph tag
     // Lets insert the paragraph tags
-    output.push("<p>")
-    let k = sanitised.indexOf("<p>",j)
-    if (k < 0)
-      k = sanitised.length
-    output.push(sanitised.substring(j,k))
-    output.push("</p>")
-    i = k
-  } while (j > 0 && its < 20)
-  sanitised = output.join("")
-  return sanitised
-}
+    output.push("<p>");
+    let k = sanitised.indexOf("<p>", j);
+    if (k < 0) k = sanitised.length;
+    output.push(sanitised.substring(j, k));
+    output.push("</p>");
+    i = k;
+  } while (j > 0 && its < 20);
+  sanitised = output.join("");
+  return sanitised;
+}
+
+// Helper functions for advanced text navigation
+export function isWordBoundary(char) {
+  // Word boundaries are spaces, punctuation, or start/end of string
+  return !char || /[\s\.,;:!?\-\(\)\[\]{}'"]/g.test(char);
+}
+
+export function findWordBoundary(text, startPos, direction) {
+  // direction: 1 for forward, -1 for backward
+  let pos = startPos;
+  let len = text.length;
+
+  if (direction === 1) {
+    // Moving forward - find end of current word, then skip whitespace
+    while (pos < len && !isWordBoundary(text[pos])) {
+      pos++;
+    }
+    while (pos < len && isWordBoundary(text[pos])) {
+      pos++;
+    }
+  } else {
+    // Moving backward - find start of current word, then skip whitespace
+    if (pos > 0) pos--; // Move back one character first
+    while (pos > 0 && isWordBoundary(text[pos])) {
+      pos--;
+    }
+    while (pos > 0 && !isWordBoundary(text[pos - 1])) {
+      pos--;
+    }
+  }
+
+  return Math.max(0, Math.min(pos, len));
+}
+
+export function findLineBoundary(text, startPos, direction) {
+  // direction: 1 for end of line, -1 for start of line
+  let pos = startPos;
+  let len = text.length;
+
+  if (direction === 1) {
+    // Find end of current line
+    while (pos < len && text[pos] !== "\n") {
+      pos++;
+    }
+  } else {
+    // Find start of current line
+    while (pos > 0 && text[pos - 1] !== "\n") {
+      pos--;
+    }
+  }
+
+  return Math.max(0, Math.min(pos, len));
+}
+
+export function getPlainTextFromEditableDiv(editableDiv) {
+  // Convert the editable div content to plain text for boundary detection
+  let text = elementToMarkedRawText(editableDiv, null, 0, false);
+  text = removeMarks(text);
+  // Remove HTML tags and convert to plain text
+  text = text.replace(/<[^>]*>/g, "");
+  text = text.replace(/&nbsp;/g, " ");
+  text = text.replace(/&amp;/g, "&");
+  text = text.replace(/&lt;/g, "<");
+  text = text.replace(/&gt;/g, ">");
+  text = text.replace(/&quot;/g, '"');
+  text = text.replace(/&#39;/g, "'");
+  return text;
+}
+
+export function globalOffsetToPlainTextOffset(editableDiv, globalOffset) {
+  // Convert global offset to plain text offset for boundary detection
+  let plainText = getPlainTextFromEditableDiv(editableDiv);
+  // This is a simplified mapping - in a real implementation you'd want
+  // to account for the difference between HTML and plain text offsets
+  return Math.min(globalOffset, plainText.length);
+}
+
+export function plainTextOffsetToGlobalOffset(editableDiv, plainTextOffset) {
+  // Convert plain text offset back to global offset
+  // This is a simplified mapping - in a real implementation you'd want
+  // to account for the difference between HTML and plain text offsets
+  let plainText = getPlainTextFromEditableDiv(editableDiv);
+  return Math.min(plainTextOffset, plainText.length);
+}