tiny-markdown-editor 0.1.29 → 0.1.31

package/lib/TinyMDE.js

@@ -44,27 +44,32 @@ class Editor {
     if (this.textarea) {
       this.textarea.style.display = "none";
     }
-    this.createEditorElement(element);
+    this.createEditorElement(element, props);
     this.setContent(typeof props.content === "string" ? props.content : this.textarea ? this.textarea.value : "# Hello TinyMDE!\nEdit **here**");
   }
 
   /**
    * Creates the editor element inside the target element of the DOM tree
    * @param element The target element of the DOM tree
+   * @param props options, passed from constructor's props
    */
-  createEditorElement(element) {
-    this.e = document.createElement("div");
-    this.e.className = "TinyMDE";
+  createEditorElement(element, props) {
+    if (props && props.editor !== undefined) {
+      if (props.editor.tagName) this.e = props.editor;else this.e = document.getElementById(props.editor);
+    } else this.e = document.createElement("div");
+    this.e.classList.add("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 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";
-    if (this.textarea && this.textarea.parentNode == element && this.textarea.nextSibling) {
-      element.insertBefore(this.e, this.textarea.nextSibling);
-    } else {
-      element.appendChild(this.e);
+    if (props.editor === undefined) {
+      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("compositionend", e => this.handleInputEvent(e));
@@ -165,7 +170,7 @@ class Editor {
   /**
    * Determines line types for all lines based on the line / block grammar. Captures the results of the respective line
    * grammar regular expressions.
-   * Updates this.lineTypes, this.lineCaptures, and this.lineReplacements.
+   * Updates this.lineTypes, this.lineCaptures, and this.lineReplacements, as well as this.lineDirty.
    */
   updateLineTypes() {
     let codeBlockType = false;
@@ -921,13 +926,13 @@ class Editor {
       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) {
+      this.lines[firstChangedLine] == this.lineElements[firstChangedLine].textContent && this.lineTypes[firstChangedLine] == this.lineElements[firstChangedLine].className) {
         firstChangedLine++;
       }
 
       // End also from the end
       let lastChangedLine = -1;
-      while (-lastChangedLine < this.lines.length && -lastChangedLine < this.lineElements.length && this.lines[this.lines.length + lastChangedLine] == this.lineElements[this.lineElements.length + lastChangedLine].textContent) {
+      while (-lastChangedLine < this.lines.length && -lastChangedLine < this.lineElements.length && this.lines[this.lines.length + lastChangedLine] == this.lineElements[this.lineElements.length + lastChangedLine].textContent && this.lineTypes[this.lines.length + lastChangedLine] == this.lineElements[this.lineElements.length + lastChangedLine].className) {
         lastChangedLine--;
       }
       let linesToDelete = this.lines.length + lastChangedLine + 1 - firstChangedLine;
@@ -943,9 +948,10 @@ class Editor {
       for (let line = 0; line < this.lineElements.length; line++) {
         let e = this.lineElements[line];
         let ct = e.textContent;
-        if (this.lines[line] !== ct) {
+        if (this.lines[line] !== ct || this.lineTypes[line] !== e.className) {
           // Line changed, update it
           this.lines[line] = ct;
+          this.lineTypes[line] = e.className;
           this.lineDirty[line] = true;
         }
       }
@@ -977,14 +983,12 @@ class Editor {
         break;
     }
     let lines = this.lines[sel.row].replace(/\n\n$/, "\n").split(/(?:\r\n|\n|\r)/);
-    if (lines.length == 1) {
-      // No new line
-      this.updateFormatting();
-      return;
+    if (lines.length > 1) {
+      // New line
+      this.spliceLines(sel.row, 1, lines, true);
+      sel.row++;
+      sel.col = 0;
     }
-    this.spliceLines(sel.row, 1, lines, true);
-    sel.row++;
-    sel.col = 0;
     if (continuableType) {
       // Check if the previous line was non-empty
       let capture = _grammar.lineGrammar[continuableType].regexp.exec(this.lines[sel.row - 1]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tiny-markdown-editor",
-  "version": "0.1.29",
+  "version": "0.1.31",
   "description": "TinyMDE: A tiny, ultra low dependency, embeddable HTML/JavaScript Markdown editor.",
   "main": "lib/index.js",
   "files": [