tiny-markdown-editor 0.1.30 → 0.1.32

package/lib/TinyMDE.js

@@ -44,8 +44,73 @@ class Editor {
     if (this.textarea) {
       this.textarea.style.display = "none";
     }
+    this.undoStack = [];
+    this.redoStack = [];
+    this.isRestoringHistory = false;
+    this.maxHistory = 100;
     this.createEditorElement(element, props);
     this.setContent(typeof props.content === "string" ? props.content : this.textarea ? this.textarea.value : "# Hello TinyMDE!\nEdit **here**");
+    // Keyboard shortcuts for undo/redo
+    this.e.addEventListener("keydown", e => this.handleUndoRedoKey(e));
+  }
+  pushHistory() {
+    if (this.isRestoringHistory) return;
+    this.pushCurrentState();
+    this.redoStack = [];
+  }
+  pushCurrentState() {
+    this.undoStack.push({
+      content: this.getContent(),
+      selection: this.getSelection(),
+      anchor: this.getSelection(true)
+    });
+    if (this.undoStack.length > this.maxHistory) this.undoStack.shift();
+  }
+
+  /**
+   * Undoes the last action.
+   */
+  undo() {
+    if (this.undoStack.length < 2) return; // Don't undo initial state
+    this.isRestoringHistory = true;
+    this.pushCurrentState();
+    const current = this.undoStack.pop();
+    this.redoStack.push(current);
+    const prev = this.undoStack[this.undoStack.length - 1];
+    this.setContent(prev.content);
+    if (prev.selection) this.setSelection(prev.selection, prev.anchor);
+    this.undoStack.pop();
+    this.isRestoringHistory = false;
+  }
+
+  /**
+   * Redoes the last undone action.
+   */
+  redo() {
+    if (!this.redoStack.length) return;
+    this.isRestoringHistory = true;
+    this.pushCurrentState();
+    const next = this.redoStack.pop();
+    this.setContent(next.content);
+    if (next.selection) this.setSelection(next.selection, next.anchor);
+    this.isRestoringHistory = false;
+  }
+  handleUndoRedoKey(e) {
+    const isMac = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
+    const ctrl = isMac ? e.metaKey : e.ctrlKey;
+    if (ctrl && !e.altKey) {
+      if (e.key === "z" || e.key === "Z") {
+        if (e.shiftKey) {
+          this.redo();
+        } else {
+          this.undo();
+        }
+        e.preventDefault();
+      } else if (e.key === "y" || e.key === "Y") {
+        this.redo();
+        e.preventDefault();
+      }
+    }
   }
 
   /**
@@ -98,6 +163,7 @@ class Editor {
     this.lineTypes = new Array(this.lines.length);
     this.updateFormatting();
     this.fireChange();
+    if (!this.isRestoringHistory) this.pushHistory();
   }
 
   /**
@@ -162,7 +228,6 @@ class Editor {
         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,7 +235,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;
@@ -467,7 +532,6 @@ class Editor {
                 linkDetails.push(""); // Empty end delimiter for destination
                 linkDetails.push(cap[0]); // Whitespace in between destination and title
               }
-
               break;
             case 3:
               linkDetails.push(cap[0]);
@@ -491,7 +555,6 @@ class Editor {
               return false;
             // We should never get here
           }
-
           currentOffset += cap[0].length;
           continue inlineOuter;
         }
@@ -528,7 +591,6 @@ class Editor {
               return false;
             // After link title was closed, without closing parenthesis
           }
-
           currentOffset += cap[0].length;
           continue inlineOuter;
         }
@@ -602,7 +664,6 @@ class Editor {
               return false;
             // After link title was closed, without closing parenthesis
           }
-
           currentOffset++;
           continue inlineOuter;
         }
@@ -629,7 +690,6 @@ class Editor {
           } else {
             parenthesisLevel--; // This should decrease it from 1 to 0...
           }
-
           if (parenthesisLevel == 0) {
             // No invalid condition, let's make sure the linkDetails array is complete
             while (linkDetails.length < 7) linkDetails.push("");
@@ -670,16 +730,13 @@ class Editor {
               return false;
             // After link title was closed, without closing parenthesis
           }
-
           currentOffset += cap[0].length;
           continue inlineOuter;
         }
         throw "Infinite loop"; // we should never get here since the last test matches any character
       }
-
       if (parenthesisLevel > 0) return false; // Parenthes(es) not closed
     }
-
     if (linkRef !== false) {
       // Ref link; check that linkRef is valid
       let valid = false;
@@ -876,7 +933,6 @@ class Editor {
           });
           processed = ""; // Current formatted output has been pushed on the stack and will be prepended when the stack gets popped
         }
-
         offset += cap[0].length;
         string = string.substr(cap[0].length);
         continue outer;
@@ -926,13 +982,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;
@@ -948,9 +1004,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;
         }
       }
@@ -982,14 +1039,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]);
@@ -1017,32 +1072,6 @@ class Editor {
     this.updateFormatting();
   }
 
-  // /**
-  //  * Processes a "delete" input action.
-  //  * @param {object} focus The selection
-  //  * @param {boolean} forward If true, performs a forward delete, otherwise performs a backward delete
-  //  */
-  // processDelete(focus, forward) {
-  //   if (!focus) return;
-  //   let anchor = this.getSelection(true);
-  //   // 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);
-  //   } else {
-  //     if (forward) {
-  //       if (focus.col < this.lines[focus.row].length) this.paste('', {row: focus.row, col: focus.col + 1}, focus);
-  //       else if (focus.col < this.lines.length) this.paste('', {row: focus.row + 1, col: 0}, focus);
-  //       // Otherwise, we're at the very end and can't delete forward
-  //     } else {
-  //       if (focus.col > 0) this.paste('', {row: focus.row, col: focus.col - 1}, focus);
-  //       else if (focus.row > 0) this.paste('', {row: focus.row - 1, col: this.lines[focus.row - 1].length - 1}, focus);
-  //       // Otherwise, we're at the very beginning and can't delete backwards
-  //     }
-  //   }
-
-  // }
-
   /**
    * 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).
    *
@@ -1201,7 +1230,6 @@ class Editor {
   setSelection(focus) {
     let anchor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
     if (!focus) return;
-    let range = document.createRange();
     let {
       node: focusNode,
       offset: focusOffset
@@ -1216,17 +1244,15 @@ class Editor {
       anchorNode = node;
       anchorOffset = offset;
     }
-    if (anchorNode) range.setStart(anchorNode, anchorOffset);else range.setStart(focusNode, focusOffset);
-    range.setEnd(focusNode, focusOffset);
     let windowSelection = window.getSelection();
-    windowSelection.removeAllRanges();
-    windowSelection.addRange(range);
+    windowSelection.setBaseAndExtent(focusNode, focusOffset, anchorNode || focusNode, anchorNode ? anchorOffset : focusOffset);
   }
 
   /**
    * Event handler for input events
    */
   handleInputEvent(event) {
+    if (!this.isRestoringHistory) this.pushHistory();
     // 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.
@@ -1334,6 +1360,7 @@ class Editor {
    * Event handler for the "paste" event
    */
   handlePaste(event) {
+    if (!this.isRestoringHistory) this.pushHistory();
     event.preventDefault();
 
     // get text representation of clipboard
@@ -1359,7 +1386,6 @@ class Editor {
         col: this.lines[this.lines.length - 1].length
       }; // Insert at end
     }
-
     if (!anchor) {
       anchor = focus;
     }
@@ -1464,7 +1490,6 @@ class Editor {
       end.row--;
       end.col = this.lines[end.row].length; // Selection to beginning of next line is said to end at the beginning of the last line
     }
-
     for (let cmd in _grammar.commands) {
       if (_grammar.commands[cmd].type == "inline") {
         if (!focus || focus.row != anchor.row || !this.isInlineFormattingAllowed(focus, anchor)) {
@@ -1500,6 +1525,7 @@ class Editor {
    * @param {boolean} state
    */
   setCommandState(command, state) {
+    if (!this.isRestoringHistory) this.pushHistory();
     if (_grammar.commands[command].type == "inline") {
       let anchor = this.getSelection(true);
       let focus = this.getSelection(false);
@@ -1635,6 +1661,7 @@ class Editor {
   wrapSelection(pre, post) {
     let focus = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
     let anchor = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+    if (!this.isRestoringHistory) this.pushHistory();
     if (!focus) focus = this.getSelection(false);
     if (!anchor) anchor = this.getSelection(true);
     if (!focus || !anchor || focus.row != anchor.row) return;
@@ -1725,5 +1752,13 @@ class Editor {
       this.listeners.drop.push(listener);
     }
   }
+
+  // Optionally, expose canUndo/canRedo
+  get canUndo() {
+    return this.undoStack.length > 1;
+  }
+  get canRedo() {
+    return this.redoStack.length > 0;
+  }
 }
 var _default = exports.default = Editor;

package/lib/TinyMDECommandBar.js

@@ -5,96 +5,110 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _svg = _interopRequireDefault(require("./svg/svg"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const isMacLike = /(Mac|iPhone|iPod|iPad)/i.test(typeof navigator !== "undefined" ? navigator.platform : "");
 const DefaultCommands = {
-  'bold': {
-    name: 'bold',
-    action: 'bold',
+  bold: {
+    name: "bold",
+    action: "bold",
     innerHTML: _svg.default.bold,
-    title: 'Bold',
-    hotkey: 'Mod-B'
+    title: "Bold",
+    hotkey: "Mod-B"
   },
-  'italic': {
-    name: 'italic',
-    action: 'italic',
+  italic: {
+    name: "italic",
+    action: "italic",
     innerHTML: _svg.default.italic,
-    title: 'Italic',
-    hotkey: 'Mod-I'
+    title: "Italic",
+    hotkey: "Mod-I"
   },
-  'strikethrough': {
-    name: 'strikethrough',
-    action: 'strikethrough',
+  strikethrough: {
+    name: "strikethrough",
+    action: "strikethrough",
     innerHTML: _svg.default.strikethrough,
-    title: 'Strikethrough',
-    hotkey: 'Mod2-Shift-5'
+    title: "Strikethrough",
+    hotkey: "Mod2-Shift-5"
   },
-  'code': {
-    name: 'code',
-    action: 'code',
+  code: {
+    name: "code",
+    action: "code",
     innerHTML: _svg.default.code,
-    title: 'Format as code'
+    title: "Format as code"
   },
-  'h1': {
-    name: 'h1',
-    action: 'h1',
+  h1: {
+    name: "h1",
+    action: "h1",
     innerHTML: _svg.default.h1,
-    title: 'Level 1 heading',
-    hotkey: 'Mod-Shift-1'
+    title: "Level 1 heading",
+    hotkey: "Mod-Shift-1"
   },
-  'h2': {
-    name: 'h2',
-    action: 'h2',
+  h2: {
+    name: "h2",
+    action: "h2",
     innerHTML: _svg.default.h2,
-    title: 'Level 2 heading',
-    hotkey: 'Mod-Shift-2'
+    title: "Level 2 heading",
+    hotkey: "Mod-Shift-2"
   },
-  'ul': {
-    name: 'ul',
-    action: 'ul',
+  ul: {
+    name: "ul",
+    action: "ul",
     innerHTML: _svg.default.ul,
-    title: 'Bulleted list'
+    title: "Bulleted list"
   },
-  'ol': {
-    name: 'ol',
-    action: 'ol',
+  ol: {
+    name: "ol",
+    action: "ol",
     innerHTML: _svg.default.ol,
-    title: 'Numbered list'
+    title: "Numbered list"
   },
-  'blockquote': {
-    name: 'blockquote',
-    action: 'blockquote',
+  blockquote: {
+    name: "blockquote",
+    action: "blockquote",
     innerHTML: _svg.default.blockquote,
-    title: 'Quote',
-    hotkey: 'Mod2-Shift-Q'
+    title: "Quote",
+    hotkey: "Mod2-Shift-Q"
   },
-  'insertLink': {
-    name: 'insertLink',
+  insertLink: {
+    name: "insertLink",
     action: editor => {
-      if (editor.isInlineFormattingAllowed()) editor.wrapSelection('[', ']()');
+      if (editor.isInlineFormattingAllowed()) editor.wrapSelection("[", "]()");
     },
     enabled: (editor, focus, anchor) => editor.isInlineFormattingAllowed(focus, anchor) ? false : null,
     innerHTML: _svg.default.link,
-    title: 'Insert link',
-    hotkey: 'Mod-K'
+    title: "Insert link",
+    hotkey: "Mod-K"
   },
-  'insertImage': {
-    name: 'insertImage',
+  insertImage: {
+    name: "insertImage",
     action: editor => {
-      if (editor.isInlineFormattingAllowed()) editor.wrapSelection('![', ']()');
+      if (editor.isInlineFormattingAllowed()) editor.wrapSelection("![", "]()");
     },
     enabled: (editor, focus, anchor) => editor.isInlineFormattingAllowed(focus, anchor) ? false : null,
     innerHTML: _svg.default.image,
-    title: 'Insert image',
-    hotkey: 'Mod2-Shift-I'
+    title: "Insert image",
+    hotkey: "Mod2-Shift-I"
   },
-  'hr': {
-    name: 'hr',
-    action: editor => editor.paste('\n***\n'),
+  hr: {
+    name: "hr",
+    action: editor => editor.paste("\n***\n"),
     enabled: () => false,
     innerHTML: _svg.default.hr,
-    title: 'Insert horizontal line',
-    hotkey: 'Mod2-Shift-L'
+    title: "Insert horizontal line",
+    hotkey: "Mod2-Shift-L"
+  },
+  undo: {
+    name: "undo",
+    action: editor => editor.undo(),
+    enabled: editor => editor.canUndo ? false : null,
+    innerHTML: _svg.default.undo,
+    title: "Undo"
+  },
+  redo: {
+    name: "redo",
+    action: editor => editor.redo(),
+    enabled: editor => editor.canRedo ? false : null,
+    innerHTML: _svg.default.redo,
+    title: "Redo"
   }
 };
 class CommandBar {
@@ -112,17 +126,17 @@ class CommandBar {
     if (!element) {
       element = document.body;
     }
-    this.createCommandBarElement(element, props.commands || ['bold', 'italic', 'strikethrough', '|', 'code', '|', 'h1', 'h2', '|', 'ul', 'ol', '|', 'blockquote', 'hr', '|', 'insertLink', 'insertImage']);
-    document.addEventListener('keydown', e => this.handleKeydown(e));
+    this.createCommandBarElement(element, props.commands || ["bold", "italic", "strikethrough", "|", "code", "|", "h1", "h2", "|", "ul", "ol", "|", "blockquote", "hr", "|", "undo", "redo", "|", "insertLink", "insertImage"]);
+    document.addEventListener("keydown", e => this.handleKeydown(e));
     if (props.editor) this.setEditor(props.editor);
   }
   createCommandBarElement(parentElement, commands) {
-    this.e = document.createElement('div');
-    this.e.className = 'TMCommandBar';
+    this.e = document.createElement("div");
+    this.e.className = "TMCommandBar";
     for (let command of commands) {
-      if (command == '|') {
-        let el = document.createElement('div');
-        el.className = 'TMCommandDivider';
+      if (command == "|") {
+        let el = document.createElement("div");
+        el.className = "TMCommandDivider";
         this.e.appendChild(el);
       } else {
         let commandName;
@@ -145,54 +159,53 @@ class CommandBar {
         }
         let title = this.commands[commandName].title || commandName;
         if (this.commands[commandName].hotkey) {
-          const keys = this.commands[commandName].hotkey.split('-');
+          const keys = this.commands[commandName].hotkey.split("-");
           // construct modifiers
           let modifiers = [];
           let modifierexplanation = [];
           for (let i = 0; i < keys.length - 1; i++) {
             switch (keys[i]) {
-              case 'Ctrl':
-                modifiers.push('ctrlKey');
-                modifierexplanation.push('Ctrl');
+              case "Ctrl":
+                modifiers.push("ctrlKey");
+                modifierexplanation.push("Ctrl");
                 break;
-              case 'Cmd':
-                modifiers.push('metaKey');
-                modifierexplanation.push('⌘');
+              case "Cmd":
+                modifiers.push("metaKey");
+                modifierexplanation.push("⌘");
                 break;
-              case 'Alt':
-                modifiers.push('altKey');
-                modifierexplanation.push('Alt');
+              case "Alt":
+                modifiers.push("altKey");
+                modifierexplanation.push("Alt");
                 break;
-              case 'Option':
-                modifiers.push('altKey');
-                modifierexplanation.push('⌥');
+              case "Option":
+                modifiers.push("altKey");
+                modifierexplanation.push("⌥");
                 break;
-              case 'Win':
-                modifiers.push('metaKey');
-                modifierexplanation.push('⊞ Win');
+              case "Win":
+                modifiers.push("metaKey");
+                modifierexplanation.push("⊞ Win");
                 break;
-              case 'Shift':
-                modifiers.push('shiftKey');
-                modifierexplanation.push('⇧');
+              case "Shift":
+                modifiers.push("shiftKey");
+                modifierexplanation.push("⇧");
                 break;
-              case 'Mod':
+              case "Mod":
                 // Mod is a convenience mechanism: Ctrl on Windows, Cmd on Mac
                 if (isMacLike) {
-                  modifiers.push('metaKey');
-                  modifierexplanation.push('⌘');
+                  modifiers.push("metaKey");
+                  modifierexplanation.push("⌘");
                 } else {
-                  modifiers.push('ctrlKey');
-                  modifierexplanation.push('Ctrl');
+                  modifiers.push("ctrlKey");
+                  modifierexplanation.push("Ctrl");
                 }
                 break;
-              case 'Mod2':
-                modifiers.push('altKey');
-                if (isMacLike) modifierexplanation.push('⌥');else modifierexplanation.push('Alt');
+              case "Mod2":
+                modifiers.push("altKey");
+                if (isMacLike) modifierexplanation.push("⌥");else modifierexplanation.push("Alt");
                 break;
               // Mod2 is a convenience mechanism: Alt on Windows, Option on Mac
             }
           }
-
           modifierexplanation.push(keys[keys.length - 1]);
           let hotkey = {
             modifiers: modifiers,
@@ -205,13 +218,13 @@ class CommandBar {
             hotkey.key = keys[keys.length - 1].toLowerCase();
           }
           this.hotkeys.push(hotkey);
-          title = title.concat(` (${modifierexplanation.join('+')})`);
+          title = title.concat(` (${modifierexplanation.join("+")})`);
         }
-        this.buttons[commandName] = document.createElement('div');
-        this.buttons[commandName].className = 'TMCommandButton TMCommandButton_Disabled';
+        this.buttons[commandName] = document.createElement("div");
+        this.buttons[commandName].className = "TMCommandButton TMCommandButton_Disabled";
         this.buttons[commandName].title = title;
         this.buttons[commandName].innerHTML = this.commands[commandName].innerHTML;
-        this.buttons[commandName].addEventListener('mousedown', e => this.handleClick(commandName, e));
+        this.buttons[commandName].addEventListener("mousedown", e => this.handleClick(commandName, e));
         this.e.appendChild(this.buttons[commandName]);
       }
     }
@@ -228,7 +241,7 @@ class CommandBar {
   }
   setEditor(editor) {
     this.editor = editor;
-    editor.addEventListener('selection', e => this.handleSelection(e));
+    editor.addEventListener("selection", e => this.handleSelection(e));
   }
   handleSelection(event) {
     if (event.commandState) {
@@ -239,11 +252,11 @@ class CommandBar {
           this.state[command] = event.commandState[command];
         }
         if (this.state[command] === true) {
-          this.buttons[command].className = 'TMCommandButton TMCommandButton_Active';
+          this.buttons[command].className = "TMCommandButton TMCommandButton_Active";
         } else if (this.state[command] === false) {
-          this.buttons[command].className = 'TMCommandButton TMCommandButton_Inactive';
+          this.buttons[command].className = "TMCommandButton TMCommandButton_Inactive";
         } else {
-          this.buttons[command].className = 'TMCommandButton TMCommandButton_Disabled';
+          this.buttons[command].className = "TMCommandButton TMCommandButton_Disabled";
         }
       }
     }

package/lib/grammar.js

@@ -283,7 +283,6 @@ const commands = exports.commands = {
       postPattern: /^`+/
     } // FIXME this doesn't ensure balanced backticks right now
   },
-
   strikethrough: {
     type: 'inline',
     className: 'TMStrikethrough',

package/lib/index.js

@@ -17,4 +17,4 @@ Object.defineProperty(exports, "Editor", {
 });
 var _TinyMDECommandBar = _interopRequireDefault(require("./TinyMDECommandBar"));
 var _TinyMDE = _interopRequireDefault(require("./TinyMDE"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }