@zzish/math-rich-input 0.1.0

package/src/mathRichInputHelper.js

@@ -0,0 +1,785 @@
+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>"
+
+const INLINE_TEX_REG_EXP = /\$\$[\s\S]+?\$\$|\\\[[\s\S]+?\\\]|\\\([\s\S]+?\\\)|\$[^$\\]*(?:\\.[^$\\]*)*\$/g;
+const BLOCK_TEX_REG_EXP = /\$\$[\s\S]+?\$\$|\\\[[\s\S]+?\\\]/g;
+
+// 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_REG_EXP = new RegExp(MARK, "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 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 isKatexNode(node) {
+  return node.className === "katex" || node.className === "katex-error"
+}
+
+function isTextNode(node) {
+  return node.nodeType === 3
+}
+
+function isBIUNode(node) {
+  if (node.nodeType !== 1)
+    return false
+
+  const tagName = node.tagName.toLowerCase()
+  return false ||
+    tagName === "b" ||
+    tagName === "i" ||
+    tagName === "u" ||
+    tagName === "sup" ||
+    tagName === "sub" ||
+    tagName === "p"
+}
+
+function isBrNode(node) {
+  if (node.tagName ===  undefined)
+    return false
+  return node.tagName.toLowerCase() === "br"
+}
+
+function isSmallSpace(node) {
+  if(node.nodeType === 3 && 
+     node.nodeValue.length === 1 &&
+     node.nodeValue.charCodeAt(0) === SMALL_SPACE_CHAR_CODE)
+     return true
+
+  return false
+}
+
+export function startsWithSmallSpace (node) {
+  let textNode = findFirstTextNode(node)
+  return isSmallSpace(textNode)
+
+}
+
+export function countNodeTypes(node, counter=null) {
+  if (counter === null)
+    counter = {
+      math:0,
+      html:0,
+      text:0
+    }
+
+  if (node == null || node === undefined) {
+    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))
+    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)
+
+  return counter
+}
+
+export function getNodeText(node) {
+  // console.log("getNodeText")
+  // console.log(node)
+
+  if (node.nodeType === 3)
+    return node.nodeValue
+  else if (node.nodeType === 1) {
+    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
+  }
+}
+
+export function getNodeTextLength(node) {
+  let text = getNodeText(node)
+  if (text === null || text === undefined)
+    return -1
+  
+  return text.length
+}
+
+export function removeMarks(raw_text) {
+  return raw_text.replace(MARK_REG_EXP,"")
+}
+
+export function getCharacterBeforeMarks(text) {
+  let start = text.indexOf(MARK)
+  if (start < 1) {
+    console.warn("Can't get character before mark. Start: "+start)
+    return null
+  }
+  return text.charAt(start-1)
+}
+
+export function replaceCharacterBeforeMarks(text, character) {
+  let start = text.indexOf(MARK)
+  if (start < 1) {
+    console.warn("Can't replace character before mark. Start: "+start)
+    return text
+  }
+  return text.substring(0, start-1) + character + text.substring(start)
+}
+
+export function replaceStringBeforeMarks(text, oldString, newString) {
+  let start = text.indexOf(MARK)
+  if (start < 1) {
+    console.warn("Can't replace character before mark. Start: "+start)
+    return text
+  }
+  return text.substring(0, start-oldString.length) + newString + text.substring(start)
+}
+
+
+export function insertCharacterBeforeMarks(text, character) {
+  let start = text.indexOf(MARK)
+  if (start < 0) {
+    console.warn("Can't replace character before mark. Start: "+start)
+    return text
+  }
+  return text.substring(0, start) + character + text.substring(start)
+}
+
+// export function replaceCharacterAfterMarks(text, character) {
+//    let start = text.indexOf(MARK) + MARK.length
+//    let end   = text.indexOf(MARK, start) + MARK.length
+//    return text.substring(0, end) + character + text.substring(end+1)
+// }
+
+function getFirstDescendentByTagName(node, tagName) {
+  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
+  }
+  return null
+}
+
+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
+    latex = decodeLatex(latex)
+    return latex
+  } catch (error) {
+    console.error(error)
+    console.log(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;") 
+  return text
+}
+
+var decodeFromHtml = (function() {
+  var translate_re = /&(#36|quot|apos|lt|gt|amp);/g,
+      translate = {
+          // 'nbsp': String.fromCharCode(160), 
+          '#36': '$',
+          'quot': '"',
+          'apos': '\'',
+          'lt'  : '<', 
+          'gt'  : '>',
+          'amp' : '&'
+      },
+      translator = function($0, $1) { 
+          return translate[$1]; 
+      };
+
+  return function(s) {
+    // return s
+      return s.replace(translate_re, translator);
+  };
+})();
+
+// function prettifyLatex(latex) {
+//   latex = latex.replace(/\\/g," \\")
+//   latex = latex.replace("="," = ")
+//   latex = latex.replace("{ ","{")
+//   latex = latex.replace("  "," ")
+//   latex.trim()
+//   console.log("Prettified: "+latex)
+//   return latex 
+// }
+
+// Note we don't need to encode it so do nothing here
+function encodeLatex(text) {
+  // console.log("Pre-encoded: "+text)
+  // console.log("Post-encoded: "+text)
+  return text
+}
+
+// Note we don't need to decode it so do nothing here
+function decodeLatex(text) {
+  // console.log("Pre-decoded: "+text)
+  // console.log("Post-decoded: "+text)
+  return text
+}
+
+function addText(arrayOfText, text, mark, offset) {
+  // 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)
+    }
+    arrayOfText.push(encodeToHtml(decoded.substring(offset)))
+  }
+}
+
+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) : 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++) {
+          addTextForNode(node.childNodes[i], arrayOfText, nodeToMark, offset, useHtmlMath)
+      }
+      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(encodeLatex(getLatex(node)))
+      arrayOfText.push(useHtmlMath ? RAW_TEXT_MATH_END_TAG_HTML_MATH : RAW_TEXT_MATH_END_TAG_TEX)
+      if (mark)
+        arrayOfText.push(MARK)
+    } else {
+      console.error("Cant 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)
+  }
+}
+
+// This method is similar to the innerText property of a specified node except that
+// it automatically converts complex katex maths nodes back to simple latex enclosed
+// in the specified custom tags and also adds marks to a specific node if a nodeToMark
+// is specified.
+//
+// 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) {
+  // console.log("Node to mark:")
+  // console.log(nodeToMark)
+  let nodes = element.childNodes
+  // console.log(nodes)
+  
+  let result = []
+
+  if ((nodes === null || nodes === undefined || nodes.length === 0) && nodeToMark !== null) {
+    // console.log("Empty field")
+    addText(result, "", true, 0)
+  } else {
+    for (let i = 0; i < nodes.length; i++)
+      addTextForNode(nodes[i], result, nodeToMark, offset, useHtmlMath)
+  }
+  let raw_text = result.join("")
+
+  // remove any zero-width spaces we added to the html
+  raw_text = raw_text.replace(SMALL_SPACE_REG_EXP,'') 
+  
+  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) +
+                    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
+}
+
+function stripDollars (stringToStrip) {
+  return stringToStrip[0] === "$" && stringToStrip[1] !== "$"
+    ? stringToStrip.slice(1, -1)
+    : stringToStrip.slice(2, -2)
+}
+
+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
+  }
+
+  return stringToStrip.substring(i+1,j)
+}
+
+function getDisplayType (stringToDisplay) {
+  return stringToDisplay.match(BLOCK_TEX_REG_EXP) ? "block" : "inline"
+}
+
+function renderLatexString (katex, s, t) {
+  let options = {
+    children: "",
+    displayMode: false,
+    output: "htmlAndMathml",
+    leqno: false,
+    fleqn: false,
+    throwOnError: false,
+    errorColor: "#cc0000",
+    macros: {},
+    minRuleThickness: 0,
+    colorIsTextColor: false,
+    strict: "warn",
+    trust: false
+  }
+
+  let renderedString;
+  try {
+      // returns HTML markup
+      renderedString = katex.renderToString(
+          s,
+          t === "block" ? Object.assign({ displayMode: true }, options) : options
+      );
+  } catch (err) {
+      console.error("couldn`t convert string", s);
+      return s;
+  }
+
+  // Reduce multiple base class spans to one single span
+  try {
+    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)
+      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)
+  }
+
+  return renderedString;
+};
+
+export function rawTextToHtml(katex, string, mimeType) {
+
+  if (string === "")
+    return ""
+
+  if (mimeType === null || mimeType === undefined || mimeType === "")
+    mimeType = determineMimeType(string)
+
+  if (mimeType === MIME_TYPE_PLAIN_TEXT)
+    return string
+
+  let parseAsTex = false
+  if (mimeType === MIME_TYPE_TEX || mimeType === MIME_TYPE_LATEX)
+    parseAsTex = true
+  if (!parseAsTex && (mimeType !== MIME_TYPE_HTML && mimeType !== MIME_TYPE_ZZISH_HTML_MATH)) {
+    console.error("Unknown mime type: "+mimeType)
+  }
+
+  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) {
+    for (let i = 0; i <stringElements.length; i++)
+      stringElements[i] = stringElements[i].replace(P_TAG_REG_EXP, P_ELEMENT_SMALL_SPACE)
+  }
+
+  if (stringElements.length === 1)
+    return stringElements[0]
+
+  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])
+
+    if (latexElements[i]) {
+      let element = latexElements[i]
+      const type = parseAsTex ? getDisplayType(element) : "inline"
+      element = parseAsTex ? stripDollars(element) : stripTags(element)
+
+      let renderedElement = renderLatexString(katex, element, type)
+      renderedElement = renderedElement + "&#"+SMALL_SPACE.charCodeAt(0)
+
+      result.push(renderedElement)
+    }
+  }
+
+  return result.join("")
+}
+
+export function isEmptyNode(node) {
+  return node.childNodes === null || node.childNodes === undefined || node.childNodes.length === 0
+}
+
+export function findIndexOfNode(node, nodeToFind, indexCounter=null) {
+  if (indexCounter === null) {
+    // Starting with root node
+    if (node === nodeToFind)
+      return 0
+    indexCounter = {count:0}
+  } else {
+    if (isKatexNode(node)) {
+      if (node === nodeToFind || node.contains(nodeToFind))
+        return indexCounter.count
+      else {
+        indexCounter.count ++
+        return -1
+      }
+    }
+
+    if (isBrNode(node)) {
+      if (node === nodeToFind) 
+        return indexCounter.count
+      else {
+        const nextSibling = node.nextSibling
+        if (nextSibling !== null && nextSibling !== undefined && isBrNode(nextSibling)) {
+          indexCounter.count ++
+          return -1
+        } else {
+          return -1
+        }
+
+      }
+    }
+
+    if (isTextNode(node)) {
+      if (node === nodeToFind)
+        return indexCounter.count
+
+      indexCounter.count ++
+    }
+    
+  }
+
+  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
+  }
+  
+  return -1
+}
+
+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
+    }
+    indexCounter = {count:0}
+  } else {
+    if (isKatexNode(node)) {
+      if (index === indexCounter.count)
+        return node
+      else {
+        indexCounter.count ++
+        return null
+      }
+    }
+
+    if (isBrNode(node)) {
+      if (index === indexCounter.count) 
+        return node
+      else {
+        const nextSibling = node.nextSibling
+        if (nextSibling !== null && nextSibling !== undefined && isBrNode(nextSibling)) {
+          indexCounter.count ++
+          return null
+        } else {
+          return null
+        }
+
+      }
+    }
+
+    // If not the root node then
+    if (isTextNode(node)) {
+      if (index === indexCounter.count)
+        return node
+
+      indexCounter.count ++
+    }
+  }
+
+  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)
+    if (found_node !== null) {
+      return found_node
+    }
+  }
+
+  return null
+}
+
+export function findFirstTextNode(node) {
+  if (isTextNode(node))
+    return node
+
+  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
+  }
+
+  return null
+}
+
+export function getRangeParams(editableDiv) {
+  // console.log ("getRangeParams")
+  // 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
+  }
+  
+  const selection = window.getSelection();
+  if (selection.rangeCount === 0) {
+    console.error("Can't get range params, window.getSelection did not return any ranges")
+    return null
+  }
+
+  const range = selection.getRangeAt(0);
+
+  let startNodeIndex = findIndexOfNode(editableDiv, range.startContainer)  
+  let endNodeIndex = findIndexOfNode(editableDiv, range.endContainer)  
+
+  // console.log(editableDiv)
+  // console.log("Start node: "+range.startContainer)
+  // console.log("Start node: |"+range.startContainer.nodeValue+"|")
+  // console.log("Start node index found: "+startNodeIndex)
+  // console.log("Start node offset: "+range.startOffset)
+  
+  let rangeParams = {
+    startNodeIndex: startNodeIndex,
+    startOffset: range.startOffset,
+    endNodeIndex: endNodeIndex,
+    endOffset: range.endOffset
+  }
+
+  return rangeParams
+}
+
+export function setRangeParams(editableDiv, params) {
+  // console.log("setRangeParams")
+  // console.log(params)
+
+  let new_range = null;
+  try {
+    if (params === null || params === undefined) {
+      console.error("Can't set range params: params === "+params)
+      return
+    }
+    if (params.startNodeIndex === null || params.startNodeIndex === undefined) {
+      console.error("Can't set range params: params.startNodeIndex === "+params.startNodeIndex)
+      return
+    }
+
+    // console.log("Setting cursor to range params: "+params.startNodeIndex+"->"+params.startOffset)
+    // console.log(params)
+
+    if (params.startNodeIndex < 0) {
+      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) {
+      // console.log("Not setting range params")
+      return
+    }
+
+    // console.log("Node["+params.startNodeIndex+"]:")
+    // console.log(nodes[params.startNodeIndex])
+    let startOffset = params.startOffset
+    let endOffset = params.endOffset
+
+    // Handle special case of auto inserted SMALL CHAR at beginning of input
+    if (params.startNodeIndex === 0 &&
+        params.startOffset === 1 &&
+        isSmallSpace(nodes[0]))
+      startOffset = 0
+
+    if (params.endNodeIndex === 0 &&
+        params.endOffset === 1 &&
+        isSmallSpace(nodes[0]))
+      endOffset = 0
+
+    let startNode = findNodeWithIndex(editableDiv, params.startNodeIndex)
+    let endNode = findNodeWithIndex(editableDiv, params.endNodeIndex)
+
+    // Lets make sure we are setting 
+    // if (params.startNodeIndex !== 0 &&
+    //   params.startOffset === 0) {
+    //   if (getNodeText(startNode).charAt(0) === SMALL_SPACE)
+    //     startOffset = SMALL_SPACE.length
+    // }
+    // if (params.endNodeIndex !== 0 &&
+    //   params.endOffset === 0) {
+    //   if (getNodeText(endNode).charAt(0) === SMALL_SPACE)
+    //     endOffset = SMALL_SPACE.length
+    // }
+    // console.log("End: "+params.endNodeIndex+"->"+endOffset)
+
+    // Set range in document
+    if (startNode === null) {
+      console.error("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)
+      // startNode = findFirstTextNode(startNode)
+      // if (startNode === null)
+      //   startNode = findFirstTextNode(editableDiv)
+      // startOffset = 0
+    }
+
+    if (endNode === null) {
+      console.error("Could not set range to start 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)
+      // startNode = findFirstTextNode(startNode)
+      // if (startNode === null)
+      //   startNode = findFirstTextNode(editableDiv)
+      // startOffset = 0
+    }
+
+    new_range = document.createRange();
+    new_range.setStart(startNode, startOffset);
+    new_range.setEnd(endNode, endOffset);
+
+    // console.log("Setting range")
+    // console.log(new_range)
+    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)
+  }
+}
+
+
+
+// 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');
+    div.innerHTML = s;
+    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)
+
+  return s
+}