tiny-markdown-editor 0.1.13 → 0.1.15

package/lib/TinyMDE.js

@@ -32,18 +32,18 @@ class Editor {
       element = document.getElementById(props.element);
     }
     if (!element) {
-      element = document.getElementsByTagName('body')[0];
+      element = document.getElementsByTagName("body")[0];
     }
-    if (element.tagName == 'TEXTAREA') {
+    if (element.tagName == "TEXTAREA") {
       this.textarea = element;
       element = this.textarea.parentNode;
     }
     if (this.textarea) {
-      this.textarea.style.display = 'none';
+      this.textarea.style.display = "none";
     }
     this.createEditorElement(element);
     // TODO Placeholder for empty content
-    this.setContent(props.content || (this.textarea ? this.textarea.value : false) || '# Hello TinyMDE!\nEdit **here**');
+    this.setContent(props.content || (this.textarea ? this.textarea.value : "# Hello TinyMDE!\nEdit **here**"));
   }
 
   /**
@@ -51,24 +51,23 @@ class Editor {
    * @param element The target element of the DOM tree
    */
   createEditorElement(element) {
-    this.e = document.createElement('div');
-    this.e.className = 'TinyMDE';
+    this.e = document.createElement("div");
+    this.e.className = "TinyMDE";
     this.e.contentEditable = true;
     // The following is important for formatting purposes, but also since otherwise the browser replaces subsequent spaces with     
-    // That breaks a lot of stuff, so we do this here and not in CSS—therefore, you don't have to remember to but this in the CSS file
-    this.e.style.whiteSpace = 'pre-wrap';
+    // That breaks a lot of stuff, so we do this here and not in CSS—therefore, you don't have to remember to put this in the CSS file
+    this.e.style.whiteSpace = "pre-wrap";
     // Avoid formatting (B / I / U) popping up on iOS
-    this.e.style.webkitUserModify = 'read-write-plaintext-only';
+    this.e.style.webkitUserModify = "read-write-plaintext-only";
     if (this.textarea && this.textarea.parentNode == element && this.textarea.nextSibling) {
       element.insertBefore(this.e, this.textarea.nextSibling);
     } else {
       element.appendChild(this.e);
     }
     this.e.addEventListener("input", e => this.handleInputEvent(e));
-    // this.e.addEventListener("keydown", (e) => this.handleKeydownEvent(e));
+    this.e.addEventListener("compositionend", e => this.handleInputEvent(e));
     document.addEventListener("selectionchange", e => this.handleSelectionChangeEvent(e));
     this.e.addEventListener("paste", e => this.handlePaste(e));
-    // this.e.addEventListener('keydown', (e) => this.handleKeyDown(e));
     this.lineElements = this.e.childNodes; // this will automatically update
   }
 
@@ -84,7 +83,7 @@ class Editor {
     this.lines = content.split(/(?:\r\n|\r|\n)/);
     this.lineDirty = [];
     for (let lineNum = 0; lineNum < this.lines.length; lineNum++) {
-      let le = document.createElement('div');
+      let le = document.createElement("div");
       this.e.appendChild(le);
       this.lineDirty.push(true);
     }
@@ -98,7 +97,7 @@ class Editor {
    * @returns {string} The editor content as a markdown string
    */
   getContent() {
-    return this.lines.join('\n');
+    return this.lines.join("\n");
   }
 
   /**
@@ -120,7 +119,7 @@ class Editor {
   updateLinkLabels() {
     this.linkLabels = [];
     for (let l = 0; l < this.lines.length; l++) {
-      if (this.lineTypes[l] == 'TMLinkReferenceDefinition') {
+      if (this.lineTypes[l] == "TMLinkReferenceDefinition") {
         this.linkLabels.push(this.lineCaptures[l][_grammar.lineGrammar.TMLinkReferenceDefinition.labelPlaceholder]);
       }
     }
@@ -128,22 +127,22 @@ class Editor {
 
   /**
    * Helper function to replace placeholders from a RegExp capture. The replacement string can contain regular dollar placeholders (e.g., $1),
-   * which are interpreted like in String.replace(), but also double dollar placeholders ($$1). In the case of double dollar placeholders, 
+   * which are interpreted like in String.replace(), but also double dollar placeholders ($$1). In the case of double dollar placeholders,
    * Markdown inline grammar is applied on the content of the captured subgroup, i.e., $$1 processes inline Markdown grammar in the content of the
    * first captured subgroup, and replaces `$$1` with the result.
-   * 
+   *
    * @param {string} replacement The replacement string, including placeholders.
    * @param  capture The result of a RegExp.exec() call
    * @returns The replacement string, with placeholders replaced from the capture result.
    */
   replace(replacement, capture) {
     return replacement.replace(/(\${1,2})([0-9])/g, (str, p1, p2) => {
-      if (p1 == '$') return (0, _grammar.htmlescape)(capture[p2]);else return `<span class="TMInlineFormatted">${this.processInlineStyles(capture[p2])}</span>`;
+      if (p1 == "$") return (0, _grammar.htmlescape)(capture[p2]);else return `<span class="TMInlineFormatted">${this.processInlineStyles(capture[p2])}</span>`;
     });
   }
 
   /**
-   * Applies the line types (from this.lineTypes as well as the capture result in this.lineReplacements and this.lineCaptures) 
+   * Applies the line types (from this.lineTypes as well as the capture result in this.lineReplacements and this.lineCaptures)
    * and processes inline formatting for all lines.
    */
   applyLineTypes() {
@@ -152,8 +151,8 @@ class Editor {
         let contentHTML = this.replace(this.lineReplacements[lineNum], this.lineCaptures[lineNum]);
         // this.lineHTML[lineNum] = (contentHTML == '' ? '<br />' : contentHTML); // Prevent empty elements which can't be selected etc.
         this.lineElements[lineNum].className = this.lineTypes[lineNum];
-        this.lineElements[lineNum].removeAttribute('style');
-        this.lineElements[lineNum].innerHTML = contentHTML == '' ? '<br />' : contentHTML; // Prevent empty elements which can't be selected etc.
+        this.lineElements[lineNum].removeAttribute("style");
+        this.lineElements[lineNum].innerHTML = contentHTML == "" ? "<br />" : contentHTML; // Prevent empty elements which can't be selected etc.
       }
 
       this.lineElements[lineNum].dataset.lineNum = lineNum;
@@ -170,48 +169,48 @@ class Editor {
     let codeBlockSeqLength = 0;
     let htmlBlock = false;
     for (let lineNum = 0; lineNum < this.lines.length; lineNum++) {
-      let lineType = 'TMPara';
+      let lineType = "TMPara";
       let lineCapture = [this.lines[lineNum]];
-      let lineReplacement = '$$0'; // Default replacement for paragraph: Inline format the entire line
+      let lineReplacement = "$$0"; // Default replacement for paragraph: Inline format the entire line
 
       // Check ongoing code blocks
       // if (lineNum > 0 && (this.lineTypes[lineNum - 1] == 'TMCodeFenceBacktickOpen' || this.lineTypes[lineNum - 1] == 'TMFencedCodeBacktick')) {
-      if (codeBlockType == 'TMCodeFenceBacktickOpen') {
+      if (codeBlockType == "TMCodeFenceBacktickOpen") {
         // We're in a backtick-fenced code block, check if the current line closes it
         let capture = _grammar.lineGrammar.TMCodeFenceBacktickClose.regexp.exec(this.lines[lineNum]);
-        if (capture && capture.groups['seq'].length >= codeBlockSeqLength) {
-          lineType = 'TMCodeFenceBacktickClose';
+        if (capture && capture.groups["seq"].length >= codeBlockSeqLength) {
+          lineType = "TMCodeFenceBacktickClose";
           lineReplacement = _grammar.lineGrammar.TMCodeFenceBacktickClose.replacement;
           lineCapture = capture;
           codeBlockType = false;
         } else {
-          lineType = 'TMFencedCodeBacktick';
-          lineReplacement = '$0';
+          lineType = "TMFencedCodeBacktick";
+          lineReplacement = "$0";
           lineCapture = [this.lines[lineNum]];
         }
       }
       // if (lineNum > 0 && (this.lineTypes[lineNum - 1] == 'TMCodeFenceTildeOpen' || this.lineTypes[lineNum - 1] == 'TMFencedCodeTilde')) {
-      else if (codeBlockType == 'TMCodeFenceTildeOpen') {
+      else if (codeBlockType == "TMCodeFenceTildeOpen") {
         // We're in a tilde-fenced code block
         let capture = _grammar.lineGrammar.TMCodeFenceTildeClose.regexp.exec(this.lines[lineNum]);
-        if (capture && capture.groups['seq'].length >= codeBlockSeqLength) {
-          lineType = 'TMCodeFenceTildeClose';
+        if (capture && capture.groups["seq"].length >= codeBlockSeqLength) {
+          lineType = "TMCodeFenceTildeClose";
           lineReplacement = _grammar.lineGrammar.TMCodeFenceTildeClose.replacement;
           lineCapture = capture;
           codeBlockType = false;
         } else {
-          lineType = 'TMFencedCodeTilde';
-          lineReplacement = '$0';
+          lineType = "TMFencedCodeTilde";
+          lineReplacement = "$0";
           lineCapture = [this.lines[lineNum]];
         }
       }
 
       // Check HTML block types
-      if (lineType == 'TMPara' && htmlBlock === false) {
+      if (lineType == "TMPara" && htmlBlock === false) {
         for (let htmlBlockType of _grammar.htmlBlockGrammar) {
           if (this.lines[lineNum].match(htmlBlockType.start)) {
             // Matching start condition. Check if this tag can start here (not all start conditions allow breaking a paragraph).
-            if (htmlBlockType.paraInterrupt || lineNum == 0 || !(this.lineTypes[lineNum - 1] == 'TMPara' || this.lineTypes[lineNum - 1] == 'TMUL' || this.lineTypes[lineNum - 1] == 'TMOL' || this.lineTypes[lineNum - 1] == 'TMBlockquote')) {
+            if (htmlBlockType.paraInterrupt || lineNum == 0 || !(this.lineTypes[lineNum - 1] == "TMPara" || this.lineTypes[lineNum - 1] == "TMUL" || this.lineTypes[lineNum - 1] == "TMOL" || this.lineTypes[lineNum - 1] == "TMBlockquote")) {
               htmlBlock = htmlBlockType;
               break;
             }
@@ -219,8 +218,8 @@ class Editor {
         }
       }
       if (htmlBlock !== false) {
-        lineType = 'TMHTMLBlock';
-        lineReplacement = '$0'; // No formatting in TMHTMLBlock
+        lineType = "TMHTMLBlock";
+        lineReplacement = "$0"; // No formatting in TMHTMLBlock
         lineCapture = [this.lines[lineNum]]; // This should already be set but better safe than sorry
 
         // Check if HTML block should be closed
@@ -238,7 +237,7 @@ class Editor {
       }
 
       // Check all regexps if we haven't applied one of the code block types
-      if (lineType == 'TMPara') {
+      if (lineType == "TMPara") {
         for (let type in _grammar.lineGrammar) {
           if (_grammar.lineGrammar[type].regexp) {
             let capture = _grammar.lineGrammar[type].regexp.exec(this.lines[lineNum]);
@@ -253,58 +252,58 @@ class Editor {
       }
 
       // If we've opened a code block, remember that
-      if (lineType == 'TMCodeFenceBacktickOpen' || lineType == 'TMCodeFenceTildeOpen') {
+      if (lineType == "TMCodeFenceBacktickOpen" || lineType == "TMCodeFenceTildeOpen") {
         codeBlockType = lineType;
-        codeBlockSeqLength = lineCapture.groups['seq'].length;
+        codeBlockSeqLength = lineCapture.groups["seq"].length;
       }
 
       // Link reference definition and indented code can't interrupt a paragraph
-      if ((lineType == 'TMIndentedCode' || lineType == 'TMLinkReferenceDefinition') && lineNum > 0 && (this.lineTypes[lineNum - 1] == 'TMPara' || this.lineTypes[lineNum - 1] == 'TMUL' || this.lineTypes[lineNum - 1] == 'TMOL' || this.lineTypes[lineNum - 1] == 'TMBlockquote')) {
+      if ((lineType == "TMIndentedCode" || lineType == "TMLinkReferenceDefinition") && lineNum > 0 && (this.lineTypes[lineNum - 1] == "TMPara" || this.lineTypes[lineNum - 1] == "TMUL" || this.lineTypes[lineNum - 1] == "TMOL" || this.lineTypes[lineNum - 1] == "TMBlockquote")) {
         // Fall back to TMPara
-        lineType = 'TMPara';
+        lineType = "TMPara";
         lineCapture = [this.lines[lineNum]];
-        lineReplacement = '$$0';
+        lineReplacement = "$$0";
       }
 
       // Setext H2 markers that can also be interpreted as an empty list item should be regarded as such (as per CommonMark spec)
-      if (lineType == 'TMSetextH2Marker') {
+      if (lineType == "TMSetextH2Marker") {
         let capture = _grammar.lineGrammar.TMUL.regexp.exec(this.lines[lineNum]);
         if (capture) {
-          lineType = 'TMUL';
+          lineType = "TMUL";
           lineReplacement = _grammar.lineGrammar.TMUL.replacement;
           lineCapture = capture;
         }
       }
 
       // Setext headings are only valid if preceded by a paragraph (and if so, they change the type of the previous paragraph)
-      if (lineType == 'TMSetextH1Marker' || lineType == 'TMSetextH2Marker') {
-        if (lineNum == 0 || this.lineTypes[lineNum - 1] != 'TMPara') {
+      if (lineType == "TMSetextH1Marker" || lineType == "TMSetextH2Marker") {
+        if (lineNum == 0 || this.lineTypes[lineNum - 1] != "TMPara") {
           // Setext marker is invalid. However, a H2 marker might still be a valid HR, so let's check that
           let capture = _grammar.lineGrammar.TMHR.regexp.exec(this.lines[lineNum]);
           if (capture) {
             // Valid HR
-            lineType = 'TMHR';
+            lineType = "TMHR";
             lineCapture = capture;
             lineReplacement = _grammar.lineGrammar.TMHR.replacement;
           } else {
             // Not valid HR, format as TMPara
-            lineType = 'TMPara';
+            lineType = "TMPara";
             lineCapture = [this.lines[lineNum]];
-            lineReplacement = '$$0';
+            lineReplacement = "$$0";
           }
         } else {
           // Valid setext marker. Change types of preceding para lines
           let headingLine = lineNum - 1;
-          const headingLineType = lineType == 'TMSetextH1Marker' ? 'TMSetextH1' : 'TMSetextH2';
+          const headingLineType = lineType == "TMSetextH1Marker" ? "TMSetextH1" : "TMSetextH2";
           do {
             if (this.lineTypes[headingLineType] != headingLineType) {
               this.lineTypes[headingLine] = headingLineType;
               this.lineDirty[headingLineType] = true;
             }
-            this.lineReplacements[headingLine] = '$$0';
+            this.lineReplacements[headingLine] = "$$0";
             this.lineCaptures[headingLine] = [this.lines[headingLine]];
             headingLine--;
-          } while (headingLine >= 0 && this.lineTypes[headingLine] == 'TMPara');
+          } while (headingLine >= 0 && this.lineTypes[headingLine] == "TMPara");
         }
       }
       // Lastly, save the line style to be applied later
@@ -327,19 +326,19 @@ class Editor {
   }
 
   /**
-   * Attempts to parse a link or image at the current position. This assumes that the opening [ or ![ has already been matched. 
+   * Attempts to parse a link or image at the current position. This assumes that the opening [ or ![ has already been matched.
    * Returns false if this is not a valid link, image. See below for more information
    * @param {string} originalString The original string, starting at the opening marker ([ or ![)
    * @param {boolean} isImage Whether or not this is an image (opener == ![)
-   * @returns false if not a valid link / image. 
-   * Otherwise returns an object with two properties: output is the string to be included in the processed output, 
+   * @returns false if not a valid link / image.
+   * Otherwise returns an object with two properties: output is the string to be included in the processed output,
    * charCount is the number of input characters (from originalString) consumed.
    */
   parseLinkOrImage(originalString, isImage) {
     // Skip the opening bracket
     let textOffset = isImage ? 2 : 1;
     let opener = originalString.substr(0, textOffset);
-    let type = isImage ? 'TMImage' : 'TMLink';
+    let type = isImage ? "TMImage" : "TMLink";
     let currentOffset = textOffset;
     let bracketLevel = 1;
     let linkText = false;
@@ -352,7 +351,7 @@ class Editor {
 
       // Capture any escapes and code blocks at current position, they bind more strongly than links
       // We don't have to actually process them here, that'll be done later in case the link / image is valid, but we need to skip over them.
-      for (let rule of ['escape', 'code', 'autolink', 'html']) {
+      for (let rule of ["escape", "code", "autolink", "html"]) {
         let cap = _grammar.inlineGrammar[rule].regexp.exec(string);
         if (cap) {
           currentOffset += cap[0].length;
@@ -404,10 +403,10 @@ class Editor {
     if (linkText === false) return false; // Nope
 
     // So far, so good. We've got a valid link text. Let's see what type of link this is
-    let nextChar = currentOffset < originalString.length ? originalString.substr(currentOffset, 1) : '';
+    let nextChar = currentOffset < originalString.length ? originalString.substr(currentOffset, 1) : "";
 
     // REFERENCE LINKS
-    if (nextChar == '[') {
+    if (nextChar == "[") {
       let string = originalString.substr(currentOffset);
       let cap = _grammar.inlineGrammar.linkLabel.regexp.exec(string);
       if (cap) {
@@ -425,7 +424,7 @@ class Editor {
         // Not a valid link label
         return false;
       }
-    } else if (nextChar != '(') {
+    } else if (nextChar != "(") {
       // Shortcut ref link
       linkRef = linkText.trim();
 
@@ -457,7 +456,7 @@ class Editor {
                 linkDetails[1] = linkDetails[1].concat(cap[0]);
               } else {
                 if (parenthesisLevel != 1) return false; // Unbalanced parenthesis
-                linkDetails.push(''); // Empty end delimiter for destination
+                linkDetails.push(""); // Empty end delimiter for destination
                 linkDetails.push(cap[0]); // Whitespace in between destination and title
               }
 
@@ -470,7 +469,7 @@ class Editor {
               return false;
             // This should never happen (no opener for title yet, but more whitespace to capture)
             case 5:
-              linkDetails.push('');
+              linkDetails.push("");
             // Whitespace at beginning of title, push empty title and continue
             case 6:
               linkDetails[5] = linkDetails[5].concat(cap[0]);
@@ -494,7 +493,7 @@ class Editor {
         if (cap) {
           switch (linkDetails.length) {
             case 0:
-              linkDetails.push('');
+              linkDetails.push("");
             // this opens the link destination, add empty opening delimiter and proceed to next case
             case 1:
               linkDetails.push(cap[0]);
@@ -511,7 +510,7 @@ class Editor {
               return false;
             // Lcaking opening delimiter for link title
             case 5:
-              linkDetails.push('');
+              linkDetails.push("");
             // This opens the link title
             case 6:
               linkDetails[5] = linkDetails[5].concat(cap[0]);
@@ -528,26 +527,26 @@ class Editor {
 
         // Process opening angle bracket as deilimiter of destination
         if (linkDetails.length < 2 && string.match(/^</)) {
-          if (linkDetails.length == 0) linkDetails.push('');
-          linkDetails[0] = linkDetails[0].concat('<');
+          if (linkDetails.length == 0) linkDetails.push("");
+          linkDetails[0] = linkDetails[0].concat("<");
           currentOffset++;
           continue inlineOuter;
         }
 
         // Process closing angle bracket as delimiter of destination
         if ((linkDetails.length == 1 || linkDetails.length == 2) && string.match(/^>/)) {
-          if (linkDetails.length == 1) linkDetails.push(''); // Empty link destination
-          linkDetails.push('>');
+          if (linkDetails.length == 1) linkDetails.push(""); // Empty link destination
+          linkDetails.push(">");
           currentOffset++;
           continue inlineOuter;
         }
 
-        // Process  non-parenthesis delimiter for title. 
+        // Process  non-parenthesis delimiter for title.
         cap = /^["']/.exec(string);
         // For this to be a valid opener, we have to either have no destination, only whitespace so far,
         // or a destination with trailing whitespace.
         if (cap && (linkDetails.length == 0 || linkDetails.length == 1 || linkDetails.length == 4)) {
-          while (linkDetails.length < 4) linkDetails.push('');
+          while (linkDetails.length < 4) linkDetails.push("");
           linkDetails.push(cap[0]);
           currentOffset++;
           continue inlineOuter;
@@ -555,7 +554,7 @@ class Editor {
 
         // For this to be a valid closer, we have to have an opener and some or no title, and this has to match the opener
         if (cap && (linkDetails.length == 5 || linkDetails.length == 6) && linkDetails[4] == cap[0]) {
-          if (linkDetails.length == 5) linkDetails.push(''); // Empty link title
+          if (linkDetails.length == 5) linkDetails.push(""); // Empty link title
           linkDetails.push(cap[0]);
           currentOffset++;
           continue inlineOuter;
@@ -566,30 +565,30 @@ class Editor {
         if (string.match(/^\(/)) {
           switch (linkDetails.length) {
             case 0:
-              linkDetails.push('');
+              linkDetails.push("");
             // this opens the link destination, add empty opening delimiter and proceed to next case
             case 1:
-              linkDetails.push('');
+              linkDetails.push("");
             // This opens the link destination
             case 2:
               // Part of the link destination
-              linkDetails[1] = linkDetails[1].concat('(');
+              linkDetails[1] = linkDetails[1].concat("(");
               if (!linkDetails[0].match(/<$/)) parenthesisLevel++;
               break;
             case 3:
-              linkDetails.push('');
+              linkDetails.push("");
             //  opening delimiter for link title
             case 4:
-              linkDetails.push('(');
+              linkDetails.push("(");
               break;
             // opening delimiter for link title
             case 5:
-              linkDetails.push('');
-            // opens the link title, add empty title content and proceed to next case 
+              linkDetails.push("");
+            // opens the link title, add empty title content and proceed to next case
             case 6:
               // Part of the link title. Un-escaped parenthesis only allowed in " or ' delimited title
-              if (linkDetails[4] == '(') return false;
-              linkDetails[5] = linkDetails[5].concat('(');
+              if (linkDetails[4] == "(") return false;
+              linkDetails[5] = linkDetails[5].concat("(");
               break;
             default:
               return false;
@@ -604,20 +603,20 @@ class Editor {
         if (string.match(/^\)/)) {
           if (linkDetails.length <= 2) {
             // We are inside the link destination. Parentheses have to be matched if not in angle brackets
-            while (linkDetails.length < 2) linkDetails.push('');
+            while (linkDetails.length < 2) linkDetails.push("");
             if (!linkDetails[0].match(/<$/)) parenthesisLevel--;
             if (parenthesisLevel > 0) {
-              linkDetails[1] = linkDetails[1].concat(')');
+              linkDetails[1] = linkDetails[1].concat(")");
             }
           } else if (linkDetails.length == 5 || linkDetails.length == 6) {
-            // We are inside the link title. 
-            if (linkDetails[4] == '(') {
+            // We are inside the link title.
+            if (linkDetails[4] == "(") {
               // This closes the link title
-              if (linkDetails.length == 5) linkDetails.push('');
-              linkDetails.push(')');
+              if (linkDetails.length == 5) linkDetails.push("");
+              linkDetails.push(")");
             } else {
               // Just regular ol' content
-              if (linkDetails.length == 5) linkDetails.push(')');else linkDetails[5] = linkDetails[5].concat(')');
+              if (linkDetails.length == 5) linkDetails.push(")");else linkDetails[5] = linkDetails[5].concat(")");
             }
           } else {
             parenthesisLevel--; // This should decrease it from 1 to 0...
@@ -625,7 +624,7 @@ class Editor {
 
           if (parenthesisLevel == 0) {
             // No invalid condition, let's make sure the linkDetails array is complete
-            while (linkDetails.length < 7) linkDetails.push('');
+            while (linkDetails.length < 7) linkDetails.push("");
           }
           currentOffset++;
           continue inlineOuter;
@@ -636,7 +635,7 @@ class Editor {
         if (cap) {
           switch (linkDetails.length) {
             case 0:
-              linkDetails.push('');
+              linkDetails.push("");
             // this opens the link destination, add empty opening delimiter and proceed to next case
             case 1:
               linkDetails.push(cap[0]);
@@ -653,7 +652,7 @@ class Editor {
               return false;
             // Lcaking opening delimiter for link title
             case 5:
-              linkDetails.push('');
+              linkDetails.push("");
             // This opens the link title
             case 6:
               linkDetails[5] = linkDetails[5].concat(cap[0]);
@@ -696,7 +695,7 @@ class Editor {
 
       // This should never happen, but better safe than sorry.
       while (linkDetails.length < 7) {
-        linkDetails.push('');
+        linkDetails.push("");
       }
       return {
         output: `<span class="TMMark TMMark_${type}">${opener}</span><span class="${type}">${this.processInlineStyles(linkText)}</span><span class="TMMark TMMark_${type}">](${linkDetails[0]}</span><span class="${type}Destination">${linkDetails[1]}</span><span class="TMMark TMMark_${type}">${linkDetails[2]}${linkDetails[3]}${linkDetails[4]}</span><span class="${type}Title">${linkDetails[5]}</span><span class="TMMark TMMark_${type}">${linkDetails[6]})</span>`,
@@ -712,13 +711,13 @@ class Editor {
    * @returns {string} The HTML formatted output
    */
   processInlineStyles(originalString) {
-    let processed = '';
+    let processed = "";
     let stack = []; // Stack is an array of objects of the format: {delimiter, delimString, count, output}
     let offset = 0;
     let string = originalString;
     outer: while (string) {
       // Process simple rules (non-delimiter)
-      for (let rule of ['escape', 'code', 'autolink', 'html']) {
+      for (let rule of ["escape", "code", "autolink", "html"]) {
         let cap = _grammar.inlineGrammar[rule].regexp.exec(string);
         if (cap) {
           string = string.substr(cap[0].length);
@@ -754,8 +753,8 @@ class Editor {
 
         // We have a delimiter run. Let's check if it can open or close an emphasis.
 
-        const preceding = offset > 0 ? originalString.substr(0, offset) : ' '; // beginning and end of line count as whitespace
-        const following = offset + cap[0].length < originalString.length ? string : ' ';
+        const preceding = offset > 0 ? originalString.substr(0, offset) : " "; // beginning and end of line count as whitespace
+        const following = offset + cap[0].length < originalString.length ? string : " ";
         const punctuationFollows = following.match(_grammar.punctuationLeading);
         const punctuationPrecedes = preceding.match(_grammar.punctuationTrailing);
         const whitespaceFollows = following.match(/^\s/);
@@ -766,7 +765,7 @@ class Editor {
         let canClose = !whitespacePrecedes && (!punctuationPrecedes || !!whitespaceFollows || !!punctuationFollows);
 
         // Underscores have more detailed rules than just being part of left- or right-flanking run:
-        if (currentDelimiter == '_' && canOpen && canClose) {
+        if (currentDelimiter == "_" && canOpen && canClose) {
           canOpen = punctuationPrecedes;
           canClose = punctuationFollows;
         }
@@ -819,7 +818,7 @@ class Editor {
             count: delimCount,
             output: processed
           });
-          processed = ''; // Current formatted output has been pushed on the stack and will be prepended when the stack gets popped
+          processed = ""; // Current formatted output has been pushed on the stack and will be prepended when the stack gets popped
           delimCount = 0;
         }
 
@@ -838,7 +837,7 @@ class Editor {
         let stackPointer = stack.length - 1;
         // See if we can find a matching opening delimiter, move down through the stack
         while (!consumed && stackPointer >= 0) {
-          if (stack[stackPointer].delimiter == '~') {
+          if (stack[stackPointer].delimiter == "~") {
             // We found a matching delimiter, let's construct the formatted string
 
             // Firstly, if we skipped any stack levels, pop them immediately (non-matching delimiters)
@@ -862,12 +861,12 @@ class Editor {
         // If there are still delimiters left, and the delimiter run can open, push it on the stack
         if (!consumed) {
           stack.push({
-            delimiter: '~',
-            delimString: '~~',
+            delimiter: "~",
+            delimString: "~~",
             count: 2,
             output: processed
           });
-          processed = ''; // Current formatted output has been pushed on the stack and will be prepended when the stack gets popped
+          processed = ""; // Current formatted output has been pushed on the stack and will be prepended when the stack gets popped
         }
 
         offset += cap[0].length;
@@ -883,7 +882,7 @@ class Editor {
         processed += _grammar.inlineGrammar.default.replacement.replace(/\$([1-9])/g, (str, p1) => (0, _grammar.htmlescape)(cap[p1]));
         continue outer;
       }
-      throw 'Infinite loop!';
+      throw "Infinite loop!";
     }
 
     // Empty the stack, any opening delimiters are unused
@@ -894,7 +893,7 @@ class Editor {
     return processed;
   }
 
-  /** 
+  /**
    * Clears the line dirty flag (resets it to an array of false)
    */
   clearDirtyFlag() {
@@ -909,7 +908,7 @@ class Editor {
    * @returns true if contents changed
    */
   updateLineContents() {
-    // this.lineDirty = []; 
+    // this.lineDirty = [];
     // Check if we have changed anything about the number of lines (inserted or deleted a paragraph)
     // < 0 means line(s) removed; > 0 means line(s) added
     let lineDelta = this.e.childElementCount - this.lines.length;
@@ -917,8 +916,9 @@ class Editor {
       // yup. Let's try how much we can salvage (find out which lines from beginning and end were unchanged)
       // Find lines from the beginning that haven't changed...
       let firstChangedLine = 0;
-      while (firstChangedLine <= this.lines.length && firstChangedLine <= this.lineElements.length && this.lineElements[firstChangedLine] // Check that the line element hasn't been deleted
-      && this.lines[firstChangedLine] == this.lineElements[firstChangedLine].textContent) {
+      while (firstChangedLine <= this.lines.length && firstChangedLine <= this.lineElements.length && this.lineElements[firstChangedLine] &&
+      // Check that the line element hasn't been deleted
+      this.lines[firstChangedLine] == this.lineElements[firstChangedLine].textContent) {
         firstChangedLine++;
       }
 
@@ -963,17 +963,17 @@ class Editor {
 
     let checkLine = sel.col > 0 ? sel.row : sel.row - 1;
     switch (this.lineTypes[checkLine]) {
-      case 'TMUL':
-        continuableType = 'TMUL';
+      case "TMUL":
+        continuableType = "TMUL";
         break;
-      case 'TMOL':
-        continuableType = 'TMOL';
+      case "TMOL":
+        continuableType = "TMOL";
         break;
-      case 'TMIndentedCode':
-        continuableType = 'TMIndentedCode';
+      case "TMIndentedCode":
+        continuableType = "TMIndentedCode";
         break;
     }
-    let lines = this.lines[sel.row].replace(/\n\n$/, '\n').split(/(?:\r\n|\n|\r)/);
+    let lines = this.lines[sel.row].replace(/\n\n$/, "\n").split(/(?:\r\n|\n|\r)/);
     if (lines.length == 1) {
       // No new line
       this.updateFormatting();
@@ -991,7 +991,7 @@ class Editor {
           // Previous line has content, continue the continuable type
 
           // Hack for OL: increment number
-          if (continuableType == 'TMOL') {
+          if (continuableType == "TMOL") {
             capture[1] = capture[1].replace(/\d{1,9}/, result => {
               return parseInt(result[0]) + 1;
             });
@@ -1001,7 +1001,7 @@ class Editor {
           sel.col = capture[1].length;
         } else {
           // Previous line has no content, remove the continuable type from the previous row
-          this.lines[sel.row - 1] = '';
+          this.lines[sel.row - 1] = "";
           this.lineDirty[sel.row - 1] = true;
         }
       }
@@ -1017,7 +1017,7 @@ class Editor {
   // processDelete(focus, forward) {
   //   if (!focus) return;
   //   let anchor = this.getSelection(true);
-  //   // Do we have a non-empty selection? 
+  //   // Do we have a non-empty selection?
   //   if (focus.col != anchor.col || focus.row != anchor.row) {
   //     // non-empty. direction doesn't matter.
   //     this.paste('', anchor, focus);
@@ -1037,7 +1037,7 @@ class Editor {
 
   /**
    * Gets the current position of the selection counted by row and column of the editor Markdown content (as opposed to the position in the DOM).
-   * 
+   *
    * @param {boolean} getAnchor if set to true, gets the selection anchor (start point of the selection), otherwise gets the focus (end point).
    * @return {object} An object representing the selection, with properties col and row.
    */
@@ -1046,7 +1046,7 @@ class Editor {
     const selection = window.getSelection();
     let startNode = getAnchor ? selection.anchorNode : selection.focusNode;
     if (!startNode) return null;
-    let offset = startNode.nodeType === Node.TEXT_NODE ? getAnchor ? selection.anchorOffset : selection.focusOffset : 0;
+    let offset = getAnchor ? selection.anchorOffset : selection.focusOffset;
     if (startNode == this.e) {
       return {
         row: 0,
@@ -1087,13 +1087,28 @@ class Editor {
    */
   computeColumn(startNode, offset) {
     let node = startNode;
-    let col = offset;
+    let col;
     // First, make sure we're actually in the editor.
     while (node && node.parentNode != this.e) {
       node = node.parentNode;
     }
     if (node == null) return null;
-    node = startNode;
+
+    // There are two ways that offset can be defined:
+    // - Either, the node is a text node, in which case it is the offset within the text
+    // - Or, the node is an element with child notes, in which case the offset refers to the
+    //   child node after which the selection is located
+    if (startNode.nodeType === Node.TEXT_NODE || offset === 0) {
+      // In the case that the node is non-text node but the offset is 0,
+      // The selection is at the beginning of that element so we
+      // can simply use the same approach as if it were at the beginning
+      // of a text node.
+      col = offset;
+      node = startNode;
+    } else if (offset > 0) {
+      node = startNode.childNodes[offset - 1];
+      col = node.textContent.length;
+    }
     while (node.parentNode != this.e) {
       if (node.previousSibling) {
         node = node.previousSibling;
@@ -1196,34 +1211,62 @@ class Editor {
     windowSelection.addRange(range);
   }
 
-  /** 
-   * Event handler for input events 
+  /**
+   * Event handler for input events
    */
   handleInputEvent(event) {
+    // For composition input, we are only updating the text after we have received
+    // a compositionend event, so we return upon insertCompositionText.
+    // Otherwise, the DOM changes break the text input.
+    if (event.inputType == "insertCompositionText") return;
     let focus = this.getSelection();
-    if ((event.inputType == 'insertParagraph' || event.inputType == 'insertLineBreak') && focus) {
+    if ((event.inputType == "insertParagraph" || event.inputType == "insertLineBreak") && focus) {
       this.clearDirtyFlag();
       this.processNewParagraph(focus);
     } else {
       if (!this.e.firstChild) {
         this.e.innerHTML = '<div class="TMBlankLine"><br></div>';
       } else {
-        for (let childNode = this.e.firstChild; childNode; childNode = childNode.nextSibling) {
-          if (childNode.nodeType != 3 || childNode.tagName != 'DIV') {
-            // Found a child node that's either not an element or not a div. Wrap it in a div.
-            let divWrapper = document.createElement('div');
-            this.e.insertBefore(divWrapper, childNode);
-            this.e.removeChild(childNode);
-            divWrapper.appendChild(childNode);
-          }
-        }
+        this.fixNodeHierarchy();
       }
       this.updateLineContentsAndFormatting();
     }
-    if (focus) this.setSelection(focus);
+    if (focus) {
+      this.setSelection(focus);
+    }
     this.fireChange();
   }
 
+  /**
+   * Fixes the node hierarchy – makes sure that each line is in a div, and there are no nested divs
+   */
+  fixNodeHierarchy() {
+    const originalChildren = Array.from(this.e.childNodes);
+    const replaceChild = function (child) {
+      const parent = child.parentElement;
+      const nextSibling = child.nextSibling;
+      parent.removeChild(child);
+      for (var _len = arguments.length, newChildren = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        newChildren[_key - 1] = arguments[_key];
+      }
+      newChildren.forEach(newChild => nextSibling ? parent.insertBefore(nextSibling, newChild) : parent.appendChild(newChild));
+    };
+    originalChildren.forEach(child => {
+      // child.parentElement.removeChild(child);
+      if (child.nodeType !== Node.ELEMENT_NODE || child.tagName !== "DIV") {
+        // Found a child node that's either not an element or not a div. Wrap it in a div.
+        const divWrapper = document.createElement("div");
+        replaceChild(child, divWrapper);
+        divWrapper.appendChild(child);
+      } else {
+        const grandChildren = Array.from(child.childNodes);
+        if (grandChildren.some(grandChild => grandChild.nodeType === Node.ELEMENT_NODE && grandChild.tagName === "DIV")) {
+          return replaceChild(child, grandChildren);
+        }
+      }
+    });
+  }
+
   /**
    * Event handler for "selectionchange" events.
    */
@@ -1232,11 +1275,11 @@ class Editor {
   }
 
   /**
-   * Convenience function to "splice" new lines into the arrays this.lines, this.lineDirty, this.lineTypes, and the DOM elements 
+   * Convenience function to "splice" new lines into the arrays this.lines, this.lineDirty, this.lineTypes, and the DOM elements
    * underneath the editor element.
    * This method is essentially Array.splice, only that the third parameter takes an un-spread array (and the forth parameter)
    * determines whether the DOM should also be adjusted.
-   * 
+   *
    * @param {int} startLine Position at which to start changing the array of lines
    * @param {int} linesToDelete Number of lines to delete
    * @param {array} linesToInsert Array of strings representing the lines to be inserted
@@ -1254,10 +1297,10 @@ class Editor {
     let insertedBlank = [];
     let insertedDirty = [];
     for (let i = 0; i < linesToInsert.length; i++) {
-      insertedBlank.push('');
+      insertedBlank.push("");
       insertedDirty.push(true);
       if (adjustLineElements) {
-        if (this.e.childNodes[startLine]) this.e.insertBefore(document.createElement('div'), this.e.childNodes[startLine]);else this.e.appendChild(document.createElement('div'));
+        if (this.e.childNodes[startLine]) this.e.insertBefore(document.createElement("div"), this.e.childNodes[startLine]);else this.e.appendChild(document.createElement("div"));
       }
     }
     this.lines.splice(startLine, linesToDelete, ...linesToInsert);
@@ -1272,7 +1315,7 @@ class Editor {
     event.preventDefault();
 
     // get text representation of clipboard
-    let text = (event.originalEvent || event).clipboardData.getData('text/plain');
+    let text = (event.originalEvent || event).clipboardData.getData("text/plain");
 
     // insert text manually
     this.paste(text);
@@ -1280,7 +1323,7 @@ class Editor {
 
   /**
    * Pastes the text at the current selection (or at the end, if no current selection)
-   * @param {string} text 
+   * @param {string} text
    */
   paste(text) {
     let anchor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
@@ -1401,18 +1444,17 @@ class Editor {
     }
 
     for (let cmd in _grammar.commands) {
-      if (_grammar.commands[cmd].type == 'inline') {
+      if (_grammar.commands[cmd].type == "inline") {
         if (!focus || focus.row != anchor.row || !this.isInlineFormattingAllowed(focus, anchor)) {
           commandState[cmd] = null;
         } else {
-          // The command state is true if there is a respective enclosing markup node (e.g., the selection is enclosed in a <b>..</b>) ... 
+          // The command state is true if there is a respective enclosing markup node (e.g., the selection is enclosed in a <b>..</b>) ...
           commandState[cmd] = !!this.computeEnclosingMarkupNode(focus, anchor, _grammar.commands[cmd].className) ||
           // ... or if it's an empty string preceded by and followed by formatting markers, e.g. **|** where | is the cursor
-
           focus.col == anchor.col && !!this.lines[focus.row].substr(0, focus.col).match(_grammar.commands[cmd].unset.prePattern) && !!this.lines[focus.row].substr(focus.col).match(_grammar.commands[cmd].unset.postPattern);
         }
       }
-      if (_grammar.commands[cmd].type == 'line') {
+      if (_grammar.commands[cmd].type == "line") {
         if (!focus) {
           commandState[cmd] = null;
         } else {
@@ -1432,11 +1474,11 @@ class Editor {
 
   /**
    * Sets a command state
-   * @param {string} command 
-   * @param {boolean} state 
+   * @param {string} command
+   * @param {boolean} state
    */
   setCommandState(command, state) {
-    if (_grammar.commands[command].type == 'inline') {
+    if (_grammar.commands[command].type == "inline") {
       let anchor = this.getSelection(true);
       let focus = this.getSelection(false);
       if (!anchor) anchor = focus;
@@ -1451,9 +1493,9 @@ class Editor {
         this.lineDirty[focus.row] = true;
         const startCol = this.computeColumn(markupNode, 0);
         const len = markupNode.textContent.length;
-        const left = this.lines[focus.row].substr(0, startCol).replace(_grammar.commands[command].unset.prePattern, '');
+        const left = this.lines[focus.row].substr(0, startCol).replace(_grammar.commands[command].unset.prePattern, "");
         const mid = this.lines[focus.row].substr(startCol, len);
-        const right = this.lines[focus.row].substr(startCol + len).replace(_grammar.commands[command].unset.postPattern, '');
+        const right = this.lines[focus.row].substr(startCol + len).replace(_grammar.commands[command].unset.postPattern, "");
         this.lines[focus.row] = left.concat(mid, right);
         anchor.col = left.length;
         focus.col = anchor.col + len;
@@ -1464,8 +1506,8 @@ class Editor {
         // Second case: Empty selection with surrounding formatting markers, remove those
       } else if (focus.col == anchor.col && !!this.lines[focus.row].substr(0, focus.col).match(_grammar.commands[command].unset.prePattern) && !!this.lines[focus.row].substr(focus.col).match(_grammar.commands[command].unset.postPattern)) {
         this.lineDirty[focus.row] = true;
-        const left = this.lines[focus.row].substr(0, focus.col).replace(_grammar.commands[command].unset.prePattern, '');
-        const right = this.lines[focus.row].substr(focus.col).replace(_grammar.commands[command].unset.postPattern, '');
+        const left = this.lines[focus.row].substr(0, focus.col).replace(_grammar.commands[command].unset.prePattern, "");
+        const right = this.lines[focus.row].substr(focus.col).replace(_grammar.commands[command].unset.postPattern, "");
         this.lines[focus.row] = left.concat(right);
         focus.col = anchor.col = left.length;
         this.updateFormatting();
@@ -1493,12 +1535,12 @@ class Editor {
         focus.col = startCol;
         anchor.col = endCol;
 
-        // Just insert markup before and after and hope for the best. 
+        // Just insert markup before and after and hope for the best.
         this.wrapSelection(_grammar.commands[command].set.pre, _grammar.commands[command].set.post, focus, anchor);
         this.fireChange();
         // TODO clean this up so that markup remains properly nested
       }
-    } else if (_grammar.commands[command].type == 'line') {
+    } else if (_grammar.commands[command].type == "line") {
       let anchor = this.getSelection(true);
       let focus = this.getSelection(false);
       if (!anchor) anchor = focus;
@@ -1511,7 +1553,7 @@ class Editor {
       }
       for (let line = start.row; line <= end.row; line++) {
         if (state && this.lineTypes[line] != _grammar.commands[command].className) {
-          this.lines[line] = this.lines[line].replace(_grammar.commands[command].set.pattern, _grammar.commands[command].set.replacement.replace('$#', line - start.row + 1));
+          this.lines[line] = this.lines[line].replace(_grammar.commands[command].set.pattern, _grammar.commands[command].set.replacement.replace("$#", line - start.row + 1));
           this.lineDirty[line] = true;
         }
         if (!state && this.lineTypes[line] == _grammar.commands[command].className) {
@@ -1532,7 +1574,7 @@ class Editor {
   }
 
   /**
-   * Returns whether or not inline formatting is allowed at the current focus 
+   * Returns whether or not inline formatting is allowed at the current focus
    * @param {object} focus The current focus
    */
   isInlineFormattingAllowed() {
@@ -1540,13 +1582,13 @@ class Editor {
     const sel = window.getSelection();
     if (!sel || !sel.focusNode || !sel.anchorNode) return false;
 
-    // Check if we can find a common ancestor with the class `TMInlineFormatted` 
+    // Check if we can find a common ancestor with the class `TMInlineFormatted`
 
     // Special case: Empty selection right before `TMInlineFormatted`
     if (sel.isCollapsed && sel.focusNode.nodeType == 3 && sel.focusOffset == sel.focusNode.nodeValue.length) {
       let node;
       for (node = sel.focusNode; node && node.nextSibling == null; node = node.parentNode);
-      if (node && node.nextSibling.className && node.nextSibling.className.includes('TMInlineFormatted')) return true;
+      if (node && node.nextSibling.className && node.nextSibling.className.includes("TMInlineFormatted")) return true;
     }
 
     // Look for a common ancestor
@@ -1555,7 +1597,7 @@ class Editor {
 
     // Check if there's an ancestor of class 'TMInlineFormatted' or 'TMBlankLine'
     while (ancestor && ancestor != this.e) {
-      if (ancestor.className && (ancestor.className.includes('TMInlineFormatted') || ancestor.className.includes('TMBlankLine'))) return true;
+      if (ancestor.className && (ancestor.className.includes("TMInlineFormatted") || ancestor.className.includes("TMBlankLine"))) return true;
       ancestor = ancestor.parentNode;
     }
     return false;
@@ -1578,7 +1620,7 @@ class Editor {
     const startCol = focus.col < anchor.col ? focus.col : anchor.col;
     const endCol = focus.col < anchor.col ? anchor.col : focus.col;
     const left = this.lines[focus.row].substr(0, startCol).concat(pre);
-    const mid = endCol == startCol ? '' : this.lines[focus.row].substr(startCol, endCol - startCol);
+    const mid = endCol == startCol ? "" : this.lines[focus.row].substr(startCol, endCol - startCol);
     const right = post.concat(this.lines[focus.row].substr(endCol));
     this.lines[focus.row] = left.concat(mid, right);
     anchor.col = left.length;