FIX: paste long text bug

impanda-cookie · Oct 12, 2015 · f971a43 · f971a43
1 parent 299a405
commit f971a43
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 81 deletions.
diff --git a/lib/simditor.js b/lib/simditor.js
@@ -1,8 +1,3 @@
-/*!
-* Simditor v2.3.0
-* http://simditor.tower.im/
-* 2015-10-08
-*/
 (function (root, factory) {
   if (typeof define === 'function' && define.amd) {
     // AMD. Register as an anonymous module unless amdModuleId is set
@@ -53,7 +48,7 @@ Selection = (function(superClass) {
     this._selection = document.getSelection();
     this.editor.on('selectionchanged', (function(_this) {
       return function(e) {
-        _this._reset();
+        _this.reset();
         return _this._range = _this._selection.getRangeAt(0);
       };
     })(this));
@@ -64,7 +59,7 @@ Selection = (function(superClass) {
     })(this));
   };
 
-  Selection.prototype._reset = function() {
+  Selection.prototype.reset = function() {
     this._range = null;
     this._startNodes = null;
     this._endNodes = null;
@@ -81,7 +76,7 @@ Selection = (function(superClass) {
     } catch (_error) {
       e = _error;
     }
-    return this._reset();
+    return this.reset();
   };
 
   Selection.prototype.range = function(range) {
@@ -2195,29 +2190,33 @@ Clipboard = (function(superClass) {
     }
     return this.editor.body.on('paste', (function(_this) {
       return function(e) {
-        var $blockEl, isPlainText, range;
+        var range;
+        if (_this.pasting || _this._pasteBin) {
+          return;
+        }
         if (_this.editor.triggerHandler(e) === false) {
           return false;
         }
         range = _this.editor.selection.deleteRangeContents();
-        if (!range.collapsed) {
-          range.collapse(true);
-        }
-        _this.editor.selection.range(range);
-        $blockEl = _this.editor.selection.blockNodes().last();
-        isPlainText = $blockEl.is('pre, table');
-        if (!isPlainText && _this._processPasteByClipboardApi(e)) {
-          return false;
+        if (_this.editor.body.html()) {
+          if (!range.collapsed) {
+            range.collapse(true);
+          }
+        } else {
+          _this.editor.formatter.format();
+          _this.editor.selection.setRangeAtStartOf(_this.editor.body.find('p:first'));
         }
-        if (_this._pasteBin) {
+        if (_this._processPasteByClipboardApi(e)) {
           return false;
         }
         _this.editor.inputManager.throttledValueChanged.clear();
         _this.editor.inputManager.throttledSelectionChanged.clear();
         _this.editor.undoManager.throttledPushState.clear();
         _this.pasting = true;
-        return _this._getPasteContent(isPlainText, function(pasteContent) {
-          _this._processPasteContent(isPlainText, $blockEl, pasteContent);
+        return _this._getPasteContent(function(pasteContent) {
+          _this._processPasteContent(pasteContent);
+          _this._pasteInBlockEl = null;
+          _this._pastePlainText = null;
           return _this.pasting = false;
         });
       };
@@ -2252,7 +2251,7 @@ Clipboard = (function(superClass) {
     }
   };
 
-  Clipboard.prototype._getPasteContent = function(isPlainText, callback) {
+  Clipboard.prototype._getPasteContent = function(callback) {
     var state;
     this._pasteBin = $('<div contenteditable="true" />').addClass('simditor-paste-bin').attr('tabIndex', '-1').appendTo(this.editor.el);
     state = {
@@ -2267,8 +2266,11 @@ Clipboard = (function(superClass) {
         _this.editor.body.html(state.html);
         _this.editor.undoManager.caretPosition(state.caret);
         _this.editor.body.focus();
-        _this.editor.selection._reset();
-        if (isPlainText) {
+        _this.editor.selection.reset();
+        _this.editor.selection.range();
+        _this._pasteInBlockEl = _this.editor.selection.blockNodes().last();
+        _this._pastePlainText = _this._pasteInBlockEl.is('pre, table');
+        if (_this._pastePlainText) {
           pasteContent = _this.editor.formatter.clearHtml(_this._pasteBin.html(), true);
         } else {
           pasteContent = $('<div/>').append(_this._pasteBin.contents());
@@ -2285,14 +2287,15 @@ Clipboard = (function(superClass) {
     })(this), 0);
   };
 
-  Clipboard.prototype._processPasteContent = function(isPlainText, $blockEl, pasteContent) {
-    var $img, blob, children, insertPosition, k, l, lastLine, len, len1, len2, len3, len4, line, lines, m, node, o, q, ref, ref1, ref2, uploadOpt;
+  Clipboard.prototype._processPasteContent = function(pasteContent) {
+    var $blockEl, $img, blob, children, insertPosition, k, l, lastLine, len, len1, len2, len3, len4, line, lines, m, node, o, q, ref, ref1, ref2, uploadOpt;
     if (this.editor.triggerHandler('pasting', [pasteContent]) === false) {
       return;
     }
+    $blockEl = this._pasteInBlockEl;
     if (!pasteContent) {
       return;
-    } else if (isPlainText) {
+    } else if (this._pastePlainText) {
       if ($blockEl.is('table')) {
         lines = pasteContent.split('\n');
         lastLine = lines.pop();

diff --git a/site/assets/scripts/simditor.js b/site/assets/scripts/simditor.js
@@ -48,7 +48,7 @@ Selection = (function(superClass) {
     this._selection = document.getSelection();
     this.editor.on('selectionchanged', (function(_this) {
       return function(e) {
-        _this._reset();
+        _this.reset();
         return _this._range = _this._selection.getRangeAt(0);
       };
     })(this));
@@ -59,7 +59,7 @@ Selection = (function(superClass) {
     })(this));
   };
 
-  Selection.prototype._reset = function() {
+  Selection.prototype.reset = function() {
     this._range = null;
     this._startNodes = null;
     this._endNodes = null;
@@ -76,7 +76,7 @@ Selection = (function(superClass) {
     } catch (_error) {
       e = _error;
     }
-    return this._reset();
+    return this.reset();
   };
 
   Selection.prototype.range = function(range) {
@@ -2190,29 +2190,33 @@ Clipboard = (function(superClass) {
     }
     return this.editor.body.on('paste', (function(_this) {
       return function(e) {
-        var $blockEl, isPlainText, range;
+        var range;
+        if (_this.pasting || _this._pasteBin) {
+          return;
+        }
         if (_this.editor.triggerHandler(e) === false) {
           return false;
         }
         range = _this.editor.selection.deleteRangeContents();
-        if (!range.collapsed) {
-          range.collapse(true);
-        }
-        _this.editor.selection.range(range);
-        $blockEl = _this.editor.selection.blockNodes().last();
-        isPlainText = $blockEl.is('pre, table');
-        if (!isPlainText && _this._processPasteByClipboardApi(e)) {
-          return false;
+        if (_this.editor.body.html()) {
+          if (!range.collapsed) {
+            range.collapse(true);
+          }
+        } else {
+          _this.editor.formatter.format();
+          _this.editor.selection.setRangeAtStartOf(_this.editor.body.find('p:first'));
         }
-        if (_this._pasteBin) {
+        if (_this._processPasteByClipboardApi(e)) {
           return false;
         }
         _this.editor.inputManager.throttledValueChanged.clear();
         _this.editor.inputManager.throttledSelectionChanged.clear();
         _this.editor.undoManager.throttledPushState.clear();
         _this.pasting = true;
-        return _this._getPasteContent(isPlainText, function(pasteContent) {
-          _this._processPasteContent(isPlainText, $blockEl, pasteContent);
+        return _this._getPasteContent(function(pasteContent) {
+          _this._processPasteContent(pasteContent);
+          _this._pasteInBlockEl = null;
+          _this._pastePlainText = null;
           return _this.pasting = false;
         });
       };
@@ -2247,7 +2251,7 @@ Clipboard = (function(superClass) {
     }
   };
 
-  Clipboard.prototype._getPasteContent = function(isPlainText, callback) {
+  Clipboard.prototype._getPasteContent = function(callback) {
     var state;
     this._pasteBin = $('<div contenteditable="true" />').addClass('simditor-paste-bin').attr('tabIndex', '-1').appendTo(this.editor.el);
     state = {
@@ -2262,8 +2266,11 @@ Clipboard = (function(superClass) {
         _this.editor.body.html(state.html);
         _this.editor.undoManager.caretPosition(state.caret);
         _this.editor.body.focus();
-        _this.editor.selection._reset();
-        if (isPlainText) {
+        _this.editor.selection.reset();
+        _this.editor.selection.range();
+        _this._pasteInBlockEl = _this.editor.selection.blockNodes().last();
+        _this._pastePlainText = _this._pasteInBlockEl.is('pre, table');
+        if (_this._pastePlainText) {
           pasteContent = _this.editor.formatter.clearHtml(_this._pasteBin.html(), true);
         } else {
           pasteContent = $('<div/>').append(_this._pasteBin.contents());
@@ -2280,14 +2287,15 @@ Clipboard = (function(superClass) {
     })(this), 0);
   };
 
-  Clipboard.prototype._processPasteContent = function(isPlainText, $blockEl, pasteContent) {
-    var $img, blob, children, insertPosition, k, l, lastLine, len, len1, len2, len3, len4, line, lines, m, node, o, q, ref, ref1, ref2, uploadOpt;
+  Clipboard.prototype._processPasteContent = function(pasteContent) {
+    var $blockEl, $img, blob, children, insertPosition, k, l, lastLine, len, len1, len2, len3, len4, line, lines, m, node, o, q, ref, ref1, ref2, uploadOpt;
     if (this.editor.triggerHandler('pasting', [pasteContent]) === false) {
       return;
     }
+    $blockEl = this._pasteInBlockEl;
     if (!pasteContent) {
       return;
-    } else if (isPlainText) {
+    } else if (this._pastePlainText) {
       if ($blockEl.is('table')) {
         lines = pasteContent.split('\n');
         lastLine = lines.pop();

diff --git a/site/assets/styles/simditor.css b/site/assets/styles/simditor.css
@@ -239,15 +239,16 @@
 }
 .simditor .simditor-paste-bin {
   position: fixed;
-  bottom: 100px;
-  right: 100px;
-  width: 100px;
-  height: 100px;
+  bottom: 10px;
+  right: 10px;
+  width: 1px;
+  height: 20px;
   font-size: 1px;
   line-height: 1px;
   overflow: hidden;
   padding: 0;
   margin: 0;
+  opacity: 0;
   -webkit-user-select: text;
 }
 .simditor .simditor-toolbar {

diff --git a/src/clipboard.coffee b/src/clipboard.coffee
@@ -13,26 +13,29 @@ class Clipboard extends SimpleModule
       @opts.pasteImage = 'inline'
 
     @editor.body.on 'paste', (e) =>
+      return if @pasting or @_pasteBin
+
       if @editor.triggerHandler(e) == false
         return false
 
       range = @editor.selection.deleteRangeContents()
-      range.collapse(true) unless range.collapsed
-      @editor.selection.range range
-      $blockEl = @editor.selection.blockNodes().last()
-      isPlainText = $blockEl.is 'pre, table'
-
-      return false if !isPlainText and @_processPasteByClipboardApi(e)
+      if @editor.body.html()
+        range.collapse(true) unless range.collapsed
+      else
+        @editor.formatter.format()
+        @editor.selection.setRangeAtStartOf @editor.body.find('p:first')
 
-      return false if @_pasteBin
+      return false if @_processPasteByClipboardApi(e)
 
       @editor.inputManager.throttledValueChanged.clear()
       @editor.inputManager.throttledSelectionChanged.clear()
       @editor.undoManager.throttledPushState.clear()
 
       @pasting = true
-      @_getPasteContent isPlainText, (pasteContent) =>
-        @_processPasteContent isPlainText, $blockEl, pasteContent
+      @_getPasteContent (pasteContent) =>
+        @_processPasteContent pasteContent
+        @_pasteInBlockEl = null
+        @_pastePlainText = null
         @pasting = false
 
   _processPasteByClipboardApi: (e) ->
@@ -58,7 +61,7 @@ class Clipboard extends SimpleModule
         @editor.uploader?.upload(imageFile, uploadOpt)
         return true
 
-  _getPasteContent: (isPlainText, callback) ->
+  _getPasteContent: (callback) ->
     @_pasteBin = $ '<div contenteditable="true" />'
       .addClass 'simditor-paste-bin'
       .attr 'tabIndex', '-1'
@@ -75,9 +78,13 @@ class Clipboard extends SimpleModule
       @editor.body.html state.html
       @editor.undoManager.caretPosition state.caret
       @editor.body.focus()
-      @editor.selection._reset()
+      @editor.selection.reset()
+      @editor.selection.range()
+
+      @_pasteInBlockEl = @editor.selection.blockNodes().last()
+      @_pastePlainText = @_pasteInBlockEl.is 'pre, table'
 
-      if isPlainText
+      if @_pastePlainText
         pasteContent = @editor.formatter.clearHtml @_pasteBin.html(), true
       else
         pasteContent = $('<div/>').append(@_pasteBin.contents())
@@ -92,12 +99,13 @@ class Clipboard extends SimpleModule
       callback pasteContent
     , 0
 
-  _processPasteContent: (isPlainText, $blockEl, pasteContent) ->
+  _processPasteContent: (pasteContent) ->
     return if @editor.triggerHandler('pasting', [pasteContent]) == false
+    $blockEl = @_pasteInBlockEl
 
     if !pasteContent
       return
-    else if isPlainText
+    else if @_pastePlainText
       if $blockEl.is('table')
         lines = pasteContent.split('\n')
         lastLine = lines.pop()

diff --git a/src/selection.coffee b/src/selection.coffee
@@ -22,13 +22,13 @@ class Selection extends SimpleModule
     @_selection = document.getSelection()
 
     @editor.on 'selectionchanged', (e) =>
-      @_reset()
+      @reset()
       @_range = @_selection.getRangeAt 0
 
     @editor.on 'blur', (e) =>
       @clear()
 
-  _reset: ->
+  reset: ->
     @_range = null
     @_startNodes = null
     @_endNodes = null
@@ -42,7 +42,7 @@ class Selection extends SimpleModule
       @_selection.removeAllRanges()
     catch e
 
-    @_reset()
+    @reset()
 
   range: (range) ->
     if range

diff --git a/styles/editor.scss b/styles/editor.scss
@@ -120,15 +120,16 @@ $simditor-button-height: 40px;
 
   .simditor-paste-bin {
     position: fixed;
-    bottom: 100px;
-    right: 100px;
-    width: 100px;
-    height: 100px;
+    bottom: 10px;
+    right: 10px;
+    width: 1px;
+    height: 20px;
     font-size: 1px;
     line-height: 1px;
     overflow: hidden;
     padding: 0;
     margin: 0;
+    opacity: 0;
     -webkit-user-select: text;
   }