Merge pull request #841 from wordpress-mobile/issue/839-simplifies-paragraph-wrapping

Simplifies paragraph wrapping

Author: diegoreymendez

Assets/ZSSRichTextEditor.js

@@ -457,7 +457,12 @@ ZSSEditor.setBlockquote = function() {
     var sendStyles = false;
 
     var ancestorElement = this.getAncestorElementForSettingBlockquote(range);
-    
+    var focusedField = this.getFocusedField();
+
+    if (ancestorElement == focusedField.wrappedDomNode()) {
+        focusedField.wrapCaretInParagraphIfNecessary()
+    }
+
     if (ancestorElement) {
         sendStyles = true;
 
@@ -801,16 +806,35 @@ ZSSEditor.insertImage = function(url, alt) {
  *                                      does not check for that.  It would be a mistake.
  */
 ZSSEditor.insertLocalImage = function(imageNodeIdentifier, localImageUrl) {
-    var progressIdentifier = this.getImageProgressIdentifier(imageNodeIdentifier);
-    var imageContainerIdentifier = this.getImageContainerIdentifier(imageNodeIdentifier);
-    var imgContainerStart = '<span id="' + imageContainerIdentifier+'" class="img_container">';
-    var imgContainerEnd = '</span>';
-    var progress = '<progress id="' + progressIdentifier+'" value=0  class="wp_media_indicator"></progress>';
-    var image = '<img data-wpid="' + imageNodeIdentifier + '" src="' + localImageUrl + '" alt="" />';
-    var html = imgContainerStart + progress+image + imgContainerEnd;
-    
-    this.insertHTML(html);
-    this.sendEnabledStyles();
+
+    if (window.getSelection) {
+        sel = window.getSelection();
+        if (sel.getRangeAt && sel.rangeCount) {
+            var progressIdentifier = this.getImageProgressIdentifier(imageNodeIdentifier);
+
+            var span = document.createElement("span");
+            span.id = imageNodeIdentifier;
+            span.className = "img_container";
+
+            var progress = document.createElement("progress");
+            progress.id = progressIdentifier;
+            progress.value = 0;
+            progress.className = "wp_media_indicator";
+
+            var image = document.createElement("img");
+            image.setAttribute("data-wpid", imageNodeIdentifier);
+            image.src = localImageUrl;
+            image.alt = "";
+
+            span.appendChild(progress);
+            span.appendChild(image);
+
+            range = sel.getRangeAt(0);
+            range.insertNode(span);
+
+            this.sendEnabledStyles();
+        }
+    }
 };
 
 ZSSEditor.getImageNodeWithIdentifier = function(imageNodeIdentifier) {
@@ -927,36 +951,35 @@ ZSSEditor.setProgressOnImage = function(imageNodeIdentifier, progress) {
  *  @brief      Notifies that the image upload as finished
  *
  *  @param      imageNodeIdentifier     The unique image ID for the uploaded image
- *  @param      image  The image to be replaces
+ *  @param      image  The image to be replaced.
  *  @param      mediaID An integer that is the mediaID of the image on the server
  */
 ZSSEditor.markImageUploadDone = function(imageNodeIdentifier, image, mediaID) {
+
+    var progressId = this.getImageProgressIdentifier(imageNodeIdentifier);
+    var container = this.getImageContainerNodeWithIdentifier(imageNodeIdentifier)
+
+    this.log("Completing image: " + imageNodeIdentifier);
+    this.log("Removing progress: " + progressId);
+
+    // Remove the progress bar from the DOM.
+    $("#" + progressId).remove();
+
+    // Unwrap the image from the image container, leaving it wrapped inside a link
     var imageNode = this.getImageNodeWithIdentifier(imageNodeIdentifier);
-    if (imageNode.length > 0){
-        // remove identifier attributed from image
-        imageNode.removeAttr('data-wpid');
-        
-        // remove uploading style
+
+    if (imageNode.length > 0) {
+        imageNode.unwrap();
+        imageNode.wrap("<a href='" + image.src + "'></a>");
         imageNode.removeClass("uploading");
+        imageNode.removeAttr('data-wpid');
         imageNode.removeAttr("class");
-
-        // set remote source
         imageNode.attr('src', image.src);
-        // set attributes
         imageNode.attr({'width':image.width, 'height':image.height, 'class':'alignnone size-full'});
+
         if (mediaID >= 0) {
             imageNode.addClass('wp-image-' + mediaID);
         }
-
-        // Remove all extra formatting nodes for progress
-        if (imageNode.parent().attr("id") == this.getImageContainerIdentifier(imageNodeIdentifier)) {
-            // remove id from container to avoid to report a user removal
-            imageNode.parent().attr("id", "");
-            imageNode.parent().replaceWith(imageNode);
-        }
-        // Wrap link around image
-        var linkTag = '<a href="' + imageNode.attr("src") + '"></a>';
-        imageNode.wrap(linkTag);
     }
 
     var joinedArguments = ZSSEditor.getJoinedFocusedFieldIdAndCaretArguments();
@@ -2735,24 +2758,10 @@ ZSSField.prototype.wrapCaretInParagraphIfNecessary = function()
                                        || closerParentNode.nodeName == NodeName.BLOCKQUOTE);
 
     if (parentNodeShouldBeParagraph) {
-        var selection = window.getSelection();
-        
-        if (selection) {
-            var range = selection.getRangeAt(0);
-            
-            if (range.startContainer == range.endContainer) {
-                var paragraph = document.createElement("p");
-                var textNode = document.createTextNode("&#x200b;");
-                
-                paragraph.appendChild(textNode);
-                
-                range.insertNode(paragraph);
-                range.selectNode(textNode);
-                
-                selection.removeAllRanges();
-                selection.addRange(range);
-            }
-        }
+
+        var savedSelection = rangy.saveSelection();
+        $(closerParentNode).wrapInner("<p>");
+        rangy.restoreSelection(savedSelection);
     }
 };