@zzish/math-rich-input 0.1.24 → 0.1.26

package/src/equationEditorButtonsHelper.js

@@ -214,7 +214,8 @@ const LATEX_SYMBOLS = [
   {name:"Double integral",latex:"\\iint_{#}^{#}",buttonLatex:"\\iint",tooltip:"Double integral",moveCursor:-2},
   {name:"Triple integral",latex:"\\iiint_{#}^{#}",buttonLatex:"\\iiint",tooltip:"Double integral",moveCursor:-2},
   {name:"Contour integral",latex:"\\oint_{#}^{#}",buttonLatex:"\\oint",tooltip:"Contour integral",moveCursor:-2},
-
+  {name:"Surface integral",latex:"\\oiint_{#}^{#}",buttonLatex:"\\oiint",tooltip:"Surface integral",moveCursor:-2},
+  {name:"Volume integral",latex:"\\oiiint_{#}^{#}",buttonLatex:"\\oiiint",tooltip:"Volume integral",moveCursor:-2},
   {name:"Integral a b",latex:"\\int_{#}^{#}",buttonLatex:"\\int_{a}^{b}",tooltip:"Integral",moveCursor:-2,scale:90},
   {name:"Double integral a b",latex:"\\iint_{#}^{#}",buttonLatex:"\\iint_{a}^{b}",tooltip:"Double integral",moveCursor:-2},
   {name:"Triple integral a b",latex:"\\iiint_{#}^{#}",buttonLatex:"\\iiint_{a}^{b}",tooltip:"Double integral",moveCursor:-2},
@@ -229,7 +230,8 @@ const LATEX_SYMBOLS = [
   {name:"Box",latex:"\\square",buttonLatex:"\\square",tooltip:"Box"},
   {name:"Plus",latex:"+",buttonLatex:"+",tooltip:"Plus"},
   {name:"Minus",latex:"-",buttonLatex:"-",tooltip:"Mius"},
-  {name:"Plus or minus",latex:"\\pm",buttonLatex:"\\pm",tooltip:"Plus or minus"},
+  {name: "Plus or minus", latex: "\\pm", buttonLatex: "\\pm", tooltip: "Plus or minus"},
+  {name:"Minus or plus",latex:"\\mp",buttonLatex:"\\mp",tooltip:"Minus or plus"},
   {name:"Times",latex:"\\times",buttonLatex:"\\times",tooltip:"Times"},
   {name:"Divide",latex:"\\div",buttonLatex:"\\div",tooltip:"Divide"},
   {name:"Center dot",latex:"\\cdot",buttonLatex:"\\cdot",tooltip:"Center dot"},
@@ -366,7 +368,7 @@ const BUTTON_AREAS = {
                 "zeta", "eta", "theta", "iota",
                 "kappa", "lambda", "mu", "nu",
                 "xi", "omicron", "pi", "rho", "sigma", "tau",
-                "upsilon", "phi", "chi", "psi", "omega"],
+                "upsilon", "phi", "varphi", "chi", "psi", "omega"],
   "GreekUpper": ["Gamma", "Delta", "Theta", "Lambda",
                 "Xi", "Pi", "Sigma", "Phi", "Psi", "Omega","nabla"],
   "Sets": ["cup", "cap", "in", "notin",
@@ -403,13 +405,13 @@ const BUTTON_AREAS = {
   "Physics2": ["Plus","Minus","Plus or minus","Times","Equals",
                "Approximately", "Proportionate"],
   "Physics3": ["alpha","varepsilon", "eta", "gamma","lambda", "omega", "mu", "nu",
-               "pi", "rho", "sigma", "phi", "varPhi", "theta",
+               "pi", "rho", "sigma", "phi", "Phi", "theta",
                "overline{v_e}","overline{v_\\mu}",
                "Subscript zero", "Subscript max", "Subscript min", "Subscript rms"],
   "Expert": ["langle","rangle", 
-             "Double integral", "Triple integral", "Contour integral", 
+             "Double integral", "Triple integral", "Contour integral", "Surface integral", "Volume integral", 
              "Double dot", "Widehat","Check", "Tilde","Mathring",
-             "Right arrow with text","rightleftharpoons"],
+             "Right arrow with text","rightleftharpoons", "Minus or plus"],
   "Matrices": ["1-vector", "1x2 matrix","1x3 matrix",
                "2-vector", "2x2 matrix", "2x3 matrix",
                "3-vector", "3x2 matrix","3x3 matrix",
@@ -485,10 +487,17 @@ function toDict(symbols) {
   return dict;
 } 
 
-const LATEX_SYMBOLS_DICT = toDict(LATEX_SYMBOLS)
-const NORMAL_SYMBOLS_DICT = toDict(NORMAL_SYMBOLS)
+let LATEX_SYMBOLS_DICT = null;
+let NORMAL_SYMBOLS_DICT = null;
+
+function initialise() {
+  LATEX_SYMBOLS_DICT = toDict(LATEX_SYMBOLS)
+  NORMAL_SYMBOLS_DICT = toDict(NORMAL_SYMBOLS) 
+}
 
 function getSymbolData(name) {
+  if (LATEX_SYMBOLS_DICT === null)
+    initialise();
   if (name in LATEX_SYMBOLS_DICT)
       return LATEX_SYMBOLS_DICT[name]
 

package/src/mathRichInputHelper.js

@@ -42,6 +42,10 @@ 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
+}
+
 export function isKatexNode(node) {
   return node.className === "katex" || node.className === "katex-error"
 }
@@ -54,10 +58,14 @@ function isBIUNode(node) {
   if (node.nodeType !== 1)
     return false
 
-  const tagName = node.tagName.toLowerCase()
+    const tagName = node.tagName.toLowerCase();
+    if (tagName === "span")
+    return !isKatexNode(node)
   return false ||
     tagName === "b" ||
+    tagName === "strong" ||
     tagName === "i" ||
+    tagName === "em" ||
     tagName === "u" ||
     tagName === "sup" ||
     tagName === "sub" ||
@@ -70,6 +78,14 @@ function isBrNode(node) {
   return node.tagName.toLowerCase() === "br"
 }
 
+function nodeStartsWithSmallSpace(node) {
+    if (node.nodeType === 3 &&
+        node.nodeValue.length >= 1 &&
+        node.nodeValue.charCodeAt(0) === SMALL_SPACE_CHAR_CODE)
+        return true;
+  return false;
+}
+
 function isSmallSpace(node) {
   if(node.nodeType === 3 && 
      node.nodeValue.length === 1 &&
@@ -79,10 +95,9 @@ function isSmallSpace(node) {
   return false
 }
 
-export function startsWithSmallSpace (node) {
-  let textNode = findFirstTextNode(node)
-  return isSmallSpace(textNode)
-
+export function startsWithSmallSpace (editableDiv) {
+    let textNode = findFirstTextNode(editableDiv);
+    return isSmallSpace(textNode);
 }
 
 export function countNodeTypes(node, counter=null) {
@@ -201,6 +216,13 @@ function getFirstDescendentByTagName(node, tagName) {
   return null
 }
 
+function logAllDescendants(node) {
+  for (let i = 0; i < node.childNodes.length; i++) {
+      logAllDescendants(node.childNodes[i]);
+  }
+}
+
+
 export function getLatex(node) {
   try {
     // Example:
@@ -323,8 +345,6 @@ function addTextForNode(node, arrayOfText, nodeToMark=null, offset=0, useHtmlMat
       addText(arrayOfText,
               useHtmlMath ? encodeToHtml(node.nodeValue) : encodeToLatex(node.nodeValue),
               mark, offset, useHtmlMath)
-    } else if (isBrNode(node)) {
-      useHtmlMath && arrayOfText.push("<br>") 
     } else if (isBIUNode(node)) {
       useHtmlMath && arrayOfText.push("<"+node.nodeName+">")
         for (let i = 0; i < node.childNodes.length; i++) {
@@ -468,10 +488,11 @@ function renderLatexString (katex, s, t) {
 export function rawTextToHtml(katex, string, mimeType) {
 
   if (string === "")
-    return ""
+    return "<p>"+SMALL_SPACE+"</p>"
 
-  if (mimeType === null || mimeType === undefined || mimeType === "")
-    mimeType = determineMimeType(string)
+  if (mimeType == null || mimeType === "") {
+      mimeType = determineMimeType(string);
+  }
 
   if (mimeType === MIME_TYPE_PLAIN_TEXT)
     return encodeToHtml(string)
@@ -651,7 +672,91 @@ export function findNodeWithIndex(node, index, indexCounter=null) {
     }
   }
 
-  return null
+    return 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 (node === nodeToFind) {
+    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
+    }
+    return true
+  }
+  if (isKatexNode(node)) {
+    if (node === nodeToFind || node.contains(nodeToFind))
+      return true
+    else {
+      result.offset++
+      return false
+    }
+  }
+  if (isTextNode(node)) {
+    result.offset += node.nodeValue.length
+    if (nodeStartsWithSmallSpace(node))
+      result.offset -= 1
+    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]
+    // console.log("Checking child:"+child.nodeType+":"+child.tagName+":"+child.nodeValue)
+    let found = findGlobalOffset(child, nodeToFind, offset, result)
+    if (found)
+      return true
+  }
+  if (node.nodeType === 1 && node.tagName === "P") {
+    result.offset ++
+  }
+  
+    return false;
+}
+
+function findNodeAndOffsetForGlobalOffset(node, globalOffset, result=null) {
+  if (isKatexNode(node)) {
+      result.node = null;
+      result.offset++;
+      return false;
+  }
+  if (isTextNode(node)) {
+    result.node = node
+    result.offset += node.nodeValue.length
+    if (nodeStartsWithSmallSpace(node))
+      result.offset -= 1
+    // console.log("result.offset now: "+result.offset)
+    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
+    
+    if (result.node !== null && result.node !== undefined) {
+      if (result.offset >= globalOffset) {
+        result.offset = globalOffset-(result.offset-result.node.nodeValue.length)  
+        return true 
+      }
+    }
+  }
+  
+  if (node.nodeType === 1 && node.tagName === "P") {
+    result.node = null
+    result.offset ++
+  }
+    return false;
 }
 
 export function findFirstTextNode(node) {
@@ -668,6 +773,7 @@ export function findFirstTextNode(node) {
   return null
 }
 
+// https://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html
 export function getRangeParams(editableDiv) {
   // console.log ("getRangeParams")
   // console.log("Inner html: "+editableDiv.innerHTML)
@@ -684,6 +790,32 @@ export function getRangeParams(editableDiv) {
   }
 
   const range = selection.getRangeAt(0);
+  // logAllDescendants(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) 
+    if (textNode !== null) {
+      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
+    }
+  }
+  if (range.endContainer.nodeType !== 3) {
+    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)
+    } else {
+      console.error("Unable to getRangeParams. seletion.endContainer is not a text node. "+
+                  "Node type: "+range.endContainer.nodeName)
+                  return null
+    }
+  }
+  // Find the index of the start and end nodes
 
   let startNodeIndex = findIndexOfNode(editableDiv, range.startContainer)  
   let endNodeIndex = findIndexOfNode(editableDiv, range.endContainer)  
@@ -693,15 +825,72 @@ export function getRangeParams(editableDiv) {
   // console.log("Start node: |"+range.startContainer.nodeValue+"|")
   // console.log("Start node index found: "+startNodeIndex)
   // 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)
+  // console.log("Global offset of start: "+startResult.offset)
+  let endResult = {offset:0}
+  findGlobalOffset(editableDiv, range.endContainer, range.endOffset, endResult)
+  // console.log("Global offset of end: "+endResult.offset)
   
   let rangeParams = {
     startNodeIndex: startNodeIndex,
     startOffset: range.startOffset,
     endNodeIndex: endNodeIndex,
-    endOffset: range.endOffset
+    endOffset: range.endOffset,
+    startGlobalOffset: startResult.offset,
+    endGlobalOffset: endResult.offset
   }
 
-  return rangeParams
+    return rangeParams;
+}
+
+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 = {offset:0}
+    findNodeAndOffsetForGlobalOffset(editableDiv, params.startGlobalOffset, startResult)
+    // console.log(startResult.node.nodeType+":"+startResult.node.tagName+":"+
+    //             startResult.node.nodeValue+":"+startResult.offset)
+    let endResult = {offset:0}
+    findNodeAndOffsetForGlobalOffset(editableDiv, params.endGlobalOffset, endResult)
+    // console.log(endResult.node.nodeType+":"+endResult.node.tagName+":"+
+    //             endResult.node.nodeValue+":"+endResult.offset)
+    if (!startResult.node || !endResult.node ||
+        !startResult.offset || !endResult.offset) {
+      console.log("Can't set range with start and end results")
+      console.log(startResult)
+      console.log(endResult) 
+      throw new Error("Could not extract valid nodes and offsets from params")
+    }
+    if (startResult.offset === 0 && 
+        startResult.node.nodeValue.length > 0 && 
+        nodeStartsWithSmallSpace(startResult.node)) {
+      startResult.offset = 1
+    }
+    if (endResult.offset === 0 && 
+        endResult.node.nodeValue.length > 0 && 
+      nodeStartsWithSmallSpace(endResult.node)) {
+      endResult.offset = 1
+    }
+    // console.log("Setting range to:")
+    // console.log(startResult.node.nodeType+":"+startResult.node.tagName+":"+
+    //             startResult.node.nodeValue+":"+startResult.offset)
+    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)
+  } catch (error) {
+    console.error(error)
+    console.log("Trying to set range:")
+    console.log(new_range)
+    console.log(editableDiv.childNodes)
+  }
 }
 
 export function setRangeParams(editableDiv, params) {
@@ -714,6 +903,12 @@ export function setRangeParams(editableDiv, params) {
       console.error("Can't set range params: params === "+params)
       return
     }
+      
+    if (params.startGlobalOffset) {
+      setRangeParamsFromGlobalOffsets(editableDiv, params)
+      return
+    }
+      
     if (params.startNodeIndex === null || params.startNodeIndex === undefined) {
       console.error("Can't set range params: params.startNodeIndex === "+params.startNodeIndex)
       return
@@ -785,7 +980,7 @@ export function setRangeParams(editableDiv, params) {
     }
 
     if (endNode === null) {
-      console.error("Could not set range to start node with index "+params.endNodeIndex)
+      console.error("Could not set range to end node with index "+params.endNodeIndex)
       endNode = findFirstTextNode(editableDiv)
       endOffset = 0
     }
@@ -803,6 +998,13 @@ export function setRangeParams(editableDiv, params) {
 
     new_range = document.createRange();
     new_range.setStart(startNode, startOffset);
+    if (endOffset > endNode.length) {
+        console.warn("endOffset > endNode.length when setting range: "+
+                endOffset+ " > "+endNode.length+
+                " - "+endNode.nodeType+
+                " - "+endNode.nodeValue)
+                endOffset = endNode.length
+    }
     new_range.setEnd(endNode, endOffset);
 
     // console.log("Setting range")
@@ -835,3 +1037,155 @@ export function stripScripts(s) {
 
   return s
 }
+
+function sanitiseHtmlForElement(element) {
+  if (isTextNode(element))
+    return document.createTextNode(element.nodeValue)
+  if (isKatexNode(element)) {
+    // console.log("Copying katex node")
+    let clone = element.cloneNode(true)
+    return clone
+  }
+  if (element.tagName === "HEAD" ||
+      element.tagName === "STYLE" || 
+      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" || 
+         element.tagName === "DT" || 
+         element.tagName === "DD" || 
+         element.tagName === "THEAD" || 
+         element.tagName === "TR" || 
+         element.tagName === "H1" || 
+         element.tagName === "H2" || 
+         element.tagName === "H3" || 
+         element.tagName === "H4" || 
+         element.tagName === "H5" || 
+         element.tagName === "H6"
+         )) {
+    // console.log("Converting descendent: <"+element.tagName+">"+element.textContent)
+    new_element = document.createElement('p');
+  } else {
+    // console.log("Stripping descendent:  <"+element.tagName+">"+element.textContent)
+    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(" "))
+    }
+  }
+  return new_element
+}
+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>"
+export function sanitiseHtml(s) {
+  // Remove all <br> tags (as some of these can be inside katex tags)
+  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');
+  div.innerHTML = s;
+  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 = []
+  do {
+    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,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
+    }
+    output.push(sanitised.substring(j,k))
+    i = k
+    
+  } while (j > 0 && its < 20)
+  
+  sanitised = output.join("")
+  // Remove new lines
+  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
+  // Next, make sure that each line of html is wrapped in paragraph tags
+  i = 0
+  j = 0
+  its = 0
+  output = []
+  do {
+    its++
+    j = sanitised.indexOf("</p>",i)
+    if (j < 0) {
+      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>
+    // if we have reached the end of the string, finish
+    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 the next characters are the start of a paragraph tag then continue
+    let nextChars = sanitised.substring(j,j+3)
+    if (nextChars === "<p>") {
+      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 (nextChars === KATEX_START_HTML) {
+        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
+}