From 2fc5d53d4ba45ed45c806a5ac0772458a4ef403e Mon Sep 17 00:00:00 2001
From: Maxime Biais <maxime.biais@gmail.com>
Date: Mon, 20 Jun 2016 15:45:26 +0200
Subject: [PATCH] Squashed 'libs/editor/' changes from b207f3f..5ee37c8

5ee37c8 Merge pull request #419 from wordpress-mobile/js-tests
3c6a922 s/functional/unit/
04b81e3 Updated README with Mocha test instructions
4d75715 Comment cleanup
ef276fc Merge branch 'develop' into js-tests
8f06353 Added mocha tests for HTML to visual conversion
d03ea19 Merge pull request #418 from wordpress-mobile/issue/415-media-delete-paragraphs
30a3c66 Exported some Visual -> HTML conversion methods to editor-utils-formatter for testability
a53706d Merge pull request #414 from wordpress-mobile/issue/411-edit-overlay-stuck
8f3f816 Added editor-utils-formatter.js file and exported HTML->Visual formatting methods from the ZSSEditor JS
aa4bb12 Don't add extraneous break tag after videos when converting from HTML
dcbdbf1 Fix paragraph wrapping around media items when loading from HTML
7948e95 Fix duplicate src tag for videos
6470a4e Don't delete the paragraph div when deleting a media item
d189b09 Merge pull request #410 from wordpress-mobile/issue/377-video-remove-button
e13f5fc Fixed edit containers not being cleared when switching to HTML mode
eff160c Fixed #408
0acaa82 Extend contenteditable=false to the entire edit container for videos
9774ef0 Merge pull request #404 from wordpress-mobile/issue/update-html-toolbar-icon
531f368 When adding edit containers for videos in ZSSEditor.applyVisualFormatting, track them for mutation
5f0444c Add edit containers to videos when applying visual formatting
9c89dfc Remove edit containers wrapping videos when stripping visual formatting
b91317f Fixed trackNodeForMutation usage when video upload completes
3c6f61f Added a null check to ZSSEditor.sendEnabledStyles
86923d2 Track video edit containers for mutation
1a07cbf Fixed paragraph issues when adding remote videos at the start of a post
0917a1b Add delete button overlay for videos added directly (without being uploaded)
d370041 Show delete button overlay for videos that have finished uploading
546d4c6 update with new HTML icons / using a solid background on highlighted version

git-subtree-dir: libs/editor
git-subtree-split: 5ee37c8c995994edeb87651efebce57b870ff3b7
---
 .gitignore                                    |   4 +
 README.md                                     |  12 +
 .../res/drawable/format_bar_button_html.xml   |  29 ++-
 .../format_bar_button_html_disabled.xml       |  31 +--
 .../format_bar_button_html_highlighted.xml    |  32 +--
 .../editor-common/assets/ZSSRichTextEditor.js | 219 +++++++-----------
 libs/editor-common/assets/android-editor.html |   1 +
 .../assets/editor-utils-formatter.js          | 147 ++++++++++++
 libs/editor-common/assets/editor.css          |   5 +-
 .../assets/test/test-formatter.js             | 122 ++++++++++
 10 files changed, 415 insertions(+), 187 deletions(-)
 create mode 100644 libs/editor-common/assets/editor-utils-formatter.js
 create mode 100644 libs/editor-common/assets/test/test-formatter.js

diff --git a/.gitignore b/.gitignore
index 1cbbb457376f..c73b540485b2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -50,3 +50,7 @@ WordPress/src/main/res/values/com_crashlytics_export_strings.xml
 
 # libs
 libs/utils
+
+# Node-based JS Tests
+node_modules
+npm-debug.log*
\ No newline at end of file
diff --git a/README.md b/README.md
index 35c05f08a273..eccadbbfbfbe 100644
--- a/README.md
+++ b/README.md
@@ -34,6 +34,18 @@ Integration testing is done with the [Android testing framework](http://develope
 
 Add new unit tests to `src/test/java/` and integration tests to `stc/androidTest/java/`.
 
+### JavaScript Tests ###
+
+This project also has unit tests for the JS part of the editor using [Mocha](https://mochajs.org/).
+
+To be able to run the tests, [npm](https://www.npmjs.com/) and Mocha (`npm install -g mocha`) are required.
+
+With npm and Mocha installed, from within `libs/editor-common/assets/test`, run:
+
+    npm install chai
+
+It should now be possible to run the tests using `mocha` inside `libs/editor-common/assets`.
+
 ## LICENSE ##
 
 WordPress-Editor-Android is an Open Source project covered by the [GNU General Public License version 2](LICENSE.md).
diff --git a/WordPressEditor/src/main/res/drawable/format_bar_button_html.xml b/WordPressEditor/src/main/res/drawable/format_bar_button_html.xml
index a17d37c9eb1b..96b241307005 100755
--- a/WordPressEditor/src/main/res/drawable/format_bar_button_html.xml
+++ b/WordPressEditor/src/main/res/drawable/format_bar_button_html.xml
@@ -1,21 +1,18 @@
-<?xml version="1.0" encoding="utf-8"?>
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="44dp"
-    android:height="44dp"
-    android:viewportWidth="44"
-    android:viewportHeight="44">
-
+        android:width="44dp"
+        android:height="44dp"
+        android:viewportWidth="44.0"
+        android:viewportHeight="44.0">
     <path
-        android:fillColor="#87A6BC"
-        android:pathData="M16.294,25h-1.288v-2.738h-1.907V25h-1.292v-6.398h1.292v2.588h1.907v-2.588h1.288V25z" />
+        android:pathData="M13.93,26H12.79v-4.16H9.17V26H8.04v-9h1.13v3.87h3.62V17h1.14V26z"
+        android:fillColor="#A6BCCC"/>
     <path
-        android:fillColor="#87A6BC"
-        android:pathData="M21.348,19.678h-1.582V25h-1.297v-5.322h-1.555v-1.077h4.434V19.678z" />
+        android:pathData="M20.97,17.97H18.6V26h-1.13v-8.03h-2.36V17h5.86V17.97z"
+        android:fillColor="#A6BCCC"/>
     <path
-        android:fillColor="#87A6BC"
-        android:pathData="M23.777,18.602l1.209,4.627l1.204-4.627h1.688V25h-1.296v-1.731l0.118-2.667L25.422,25h-0.879
-l-1.279-4.399l0.119,2.667V25H22.09v-6.398H23.777z" />
+        android:pathData="M23.75,17l2.35,7.34L28.45,17h1.46v9h-1.13v-3.51l0.1,-3.51L26.53,26h-0.87l-2.34,-6.99l0.1,3.49V26h-1.13v-9H23.75z"
+        android:fillColor="#A6BCCC"/>
     <path
-        android:fillColor="#87A6BC"
-        android:pathData="M30.207,23.928h2.268V25h-3.561v-6.398h1.293V23.928z" />
-</vector>
\ No newline at end of file
+        android:pathData="M33,25.03h3.53V26h-4.67v-9h1.14V25.03z"
+        android:fillColor="#A6BCCC"/>
+</vector>
diff --git a/WordPressEditor/src/main/res/drawable/format_bar_button_html_disabled.xml b/WordPressEditor/src/main/res/drawable/format_bar_button_html_disabled.xml
index b82938df0878..6e5b8074e234 100755
--- a/WordPressEditor/src/main/res/drawable/format_bar_button_html_disabled.xml
+++ b/WordPressEditor/src/main/res/drawable/format_bar_button_html_disabled.xml
@@ -1,15 +1,18 @@
-<?xml version="1.0" encoding="utf-8"?>
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="44dp"
-    android:height="44dp"
-    android:viewportWidth="44"
-    android:viewportHeight="44">
-
-    <path
-        android:fillColor="#E8EEF2"
-        android:pathData="M15.006,21.19h-1.907v-2.588h-1.292V25h1.292v-2.738h1.907V25h1.288v-6.398h-1.288V21.19z
-M16.914,19.678h1.555V25h1.297v-5.322h1.582v-1.077h-4.434V19.678z
-M24.986,23.229l-1.209-4.627H22.09V25h1.293v-1.731
-l-0.119-2.667L24.543,25h0.879l1.278-4.399l-0.118,2.667V25h1.296v-6.398H26.19L24.986,23.229z
-M30.207,23.928v-5.326h-1.293V25 h3.561v-1.072H30.207z" />
-</vector>
\ No newline at end of file
+        android:width="44dp"
+        android:height="44dp"
+        android:viewportWidth="44.0"
+        android:viewportHeight="44.0">
+    <path
+        android:pathData="M13.93,26H12.79v-4.16H9.17V26H8.04v-9h1.13v3.87h3.62V17h1.14V26z"
+        android:fillColor="#E8EEF2"/>
+    <path
+        android:pathData="M20.97,17.97H18.6V26h-1.13v-8.03h-2.36V17h5.86V17.97z"
+        android:fillColor="#E8EEF2"/>
+    <path
+        android:pathData="M23.75,17l2.35,7.34L28.45,17h1.46v9h-1.13v-3.51l0.1,-3.51L26.53,26h-0.87l-2.34,-6.99l0.1,3.49V26h-1.13v-9H23.75z"
+        android:fillColor="#E8EEF2"/>
+    <path
+        android:pathData="M33,25.03h3.53V26h-4.67v-9h1.14V25.03z"
+        android:fillColor="#E8EEF2"/>
+</vector>
diff --git a/WordPressEditor/src/main/res/drawable/format_bar_button_html_highlighted.xml b/WordPressEditor/src/main/res/drawable/format_bar_button_html_highlighted.xml
index 1497cf2b596f..331d9a8f98ab 100755
--- a/WordPressEditor/src/main/res/drawable/format_bar_button_html_highlighted.xml
+++ b/WordPressEditor/src/main/res/drawable/format_bar_button_html_highlighted.xml
@@ -1,15 +1,19 @@
-<?xml version="1.0" encoding="utf-8"?>
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="44dp"
-    android:height="44dp"
-    android:viewportWidth="44"
-    android:viewportHeight="44">
-
-    <path
-        android:fillColor="#0084BC"
-        android:pathData="M15.006,21.19h-1.907v-2.588h-1.292V25h1.292v-2.738h1.907V25h1.288v-6.398h-1.288V21.19z
-M16.914,19.678h1.555V25h1.297v-5.322h1.582v-1.077h-4.434V19.678z
-M24.986,23.229l-1.209-4.627H22.09V25h1.293v-1.731
-l-0.119-2.667L24.543,25h0.879l1.278-4.399l-0.118,2.667V25h1.296v-6.398H26.19L24.986,23.229z
-M30.207,23.928v-5.326h-1.293V25 h3.561v-1.072H30.207z" />
-</vector>
\ No newline at end of file
+        android:width="44dp"
+        android:height="44dp"
+        android:viewportWidth="44.0"
+        android:viewportHeight="44.0">
+    <path android:fillColor="#E1EBF1" android:pathData="M0,0h44v44h-44z"/>
+    <path
+        android:pathData="M13.93,26H12.79v-4.16H9.17V26H8.04v-9h1.13v3.87h3.62V17h1.14V26z"
+        android:fillColor="#A6BCCC"/>
+    <path
+        android:pathData="M20.97,17.97H18.6V26h-1.13v-8.03h-2.36V17h5.86V17.97z"
+        android:fillColor="#A6BCCC"/>
+    <path
+        android:pathData="M23.75,17l2.35,7.34L28.45,17h1.46v9h-1.13v-3.51l0.1,-3.51L26.53,26h-0.87l-2.34,-6.99l0.1,3.49V26h-1.13v-9H23.75z"
+        android:fillColor="#A6BCCC"/>
+    <path
+        android:pathData="M33,25.03h3.53V26h-4.67v-9h1.14V25.03z"
+        android:fillColor="#A6BCCC"/>
+</vector>
diff --git a/libs/editor-common/assets/ZSSRichTextEditor.js b/libs/editor-common/assets/ZSSRichTextEditor.js
index de5370727d44..d6a412fd6a72 100755
--- a/libs/editor-common/assets/ZSSRichTextEditor.js
+++ b/libs/editor-common/assets/ZSSRichTextEditor.js
@@ -67,10 +67,6 @@ ZSSEditor.lastTappedNode = null;
 // The default paragraph separator
 ZSSEditor.defaultParagraphSeparator = 'div';
 
-// Video format tags supported by the [video] shortcode: https://codex.wordpress.org/Video_Shortcode
-// mp4, m4v and webm prioritized since they're supported by the stock player as of Android API 23
-ZSSEditor.videoShortcodeFormats = ["mp4", "m4v", "webm", "ogv", "wmv", "flv"];
-
 // We use a MutationObserver to catch user deletions of uploading or failed media
 // This is only officially supported on API>18; when the WebView doesn't recognize the MutationObserver,
 // we fall back to the deprecated DOMNodeRemoved event
@@ -1536,7 +1532,8 @@ ZSSEditor.removeAllFailedMediaUploads = function() {
  *
  */
 ZSSEditor.insertVideo = function(videoURL, posterURL, videopressID) {
-    var html = '<video webkit-playsinline src="' + videoURL + '" onclick="" controls="controls" preload="metadata"';
+    var videoId = Date.now();
+    var html = '<video id=' + videoId + ' webkit-playsinline src="' + videoURL + '" onclick="" controls="controls" preload="metadata"';
 
     if (posterURL != '') {
         html += ' poster="' + posterURL + '"';
@@ -1548,7 +1545,20 @@ ZSSEditor.insertVideo = function(videoURL, posterURL, videopressID) {
 
     html += '></video>';
 
-    this.insertHTMLWrappedInParagraphTags(html);
+    this.insertHTMLWrappedInParagraphTags('&#x200b;' + html);
+
+    // Wrap video in edit-container node for a permanent delete button overlay
+    var videoNode = $('video[id=' + videoId + ']')[0];
+    var selectionNode = this.applyEditContainer(videoNode);
+    videoNode.removeAttribute('id');
+
+    // Remove the zero-width space node (it's not needed now that the paragraph-wrapped video is in place)
+    var zeroWidthNode = selectionNode.previousSibling;
+    if (zeroWidthNode != null && zeroWidthNode.nodeType == 3) {
+        zeroWidthNode.parentNode.removeChild(zeroWidthNode);
+    }
+
+    ZSSEditor.trackNodeForMutation($(selectionNode));
 
     this.sendEnabledStyles();
     this.callback("callback-action-finished");
@@ -1658,6 +1668,10 @@ ZSSEditor.replaceLocalVideoWithRemoteVideo = function(videoNodeIdentifier, remot
         containerNode.replaceWith(videoNode);
     }
 
+    var selectionNode = this.applyEditContainer(videoNode);
+
+    ZSSEditor.trackNodeForMutation($(selectionNode));
+
     var joinedArguments = ZSSEditor.getJoinedFocusedFieldIdAndCaretArguments();
     ZSSEditor.callback("callback-input", joinedArguments);
     // We invoke the sendVideoReplacedCallback with a delay to avoid for
@@ -1784,6 +1798,19 @@ ZSSEditor.removeVideo = function(videoNodeIdentifier) {
     }
 };
 
+/**
+ *  @brief      Wrap the video in an edit-container with a delete button overlay.
+ */
+ZSSEditor.applyEditContainer = function(videoNode) {
+    var containerHtml = '<span class="edit-container" contenteditable="false"><span class="delete-overlay"></span></span>';
+    videoNode.insertAdjacentHTML('beforebegin', containerHtml);
+
+    var selectionNode = videoNode.previousSibling;
+    selectionNode.appendChild(videoNode);
+
+    return selectionNode;
+}
+
 ZSSEditor.replaceVideoPressVideosForShortcode = function ( html) {
     // call methods to restore any transformed content from its visual presentation to its source code.
     var regex = /<video[^>]*data-wpvideopress="([\s\S]+?)"[^>]*>*<\/video>/g;
@@ -1799,6 +1826,13 @@ ZSSEditor.replaceVideosForShortcode = function ( html) {
     return str;
 }
 
+ZSSEditor.removeVideoContainers = function(html) {
+    var containerRegex = /<span class="edit-container" contenteditable="false">(?:<span class="delete-overlay"[^<>]*><\/span>)?(\[[^<>]*)<\/span>/g;
+    var str = html.replace(containerRegex, ZSSEditor.removeVideoContainerCallback);
+
+    return str;
+}
+
 ZSSEditor.removeVideoPressVisualFormattingCallback = function( match, content ) {
     return "[wpvideo " + content + "]";
 }
@@ -1818,8 +1852,8 @@ ZSSEditor.removeVideoVisualFormattingCallback = function( match, content ) {
     }
 
     // If filetype attributes exist, the src attribute wasn't there originally and we should remove it
-    for (var i = 0; i < ZSSEditor.videoShortcodeFormats.length; i++) {
-        var format = ZSSEditor.videoShortcodeFormats[i];
+    for (var i = 0; i < Formatter.videoShortcodeFormats.length; i++) {
+        var format = Formatter.videoShortcodeFormats[i];
         if (videoElement.hasAttribute(format)) {
             videoElement.removeAttribute("src");
             break;
@@ -1831,55 +1865,8 @@ ZSSEditor.removeVideoVisualFormattingCallback = function( match, content ) {
     return shortcode;
 }
 
-ZSSEditor.applyVideoPressFormattingCallback = function( match ) {
-    if (match.attrs.numeric.length == 0) {
-        return match.content;
-    }
-    var videopressID = match.attrs.numeric[0];
-    var posterSVG = '"svg/wpposter.svg"';
-    // The empty 'onclick' is important. It prevents the cursor jumping to the end
-    // of the content body when `-webkit-user-select: none` is set and the video is tapped.
-    var out = '<video data-wpvideopress="' + videopressID + '" webkit-playsinline src="" preload="metadata" poster='
-           + posterSVG +' onclick="" onerror="ZSSEditor.sendVideoPressInfoRequest(\'' + videopressID +'\');"></video>';
-
-    out = out + '<br>';
-    return out;
-}
-
-ZSSEditor.applyVideoFormattingCallback = function( match ) {
-    // Find the tag containing the video source
-    var srcTag = "";
-
-    if (match.attrs.named['src']) {
-        srcTag = "src";
-    } else {
-        for (var i = 0; i < ZSSEditor.videoShortcodeFormats.length; i++) {
-            var format = ZSSEditor.videoShortcodeFormats[i];
-            if (match.attrs.named[format]) {
-                srcTag = format;
-                break;
-            }
-        }
-    }
-
-    if (srcTag.length == 0) {
-        return match.content;
-    }
-
-    var out = '<video webkit-playsinline src="' + match.attrs.named[srcTag] + '"';
-
-    // Preserve all existing tags
-    for (var item in match.attrs.named) {
-        out += ' ' + item + '="' + match.attrs.named[item] + '"';
-    }
-
-    if (!match.attrs.named['preload']) {
-        out += ' preload="metadata"';
-    }
-
-    out += ' onclick="" controls="controls"></video><br>';
-
-    return out;
+ZSSEditor.removeVideoContainerCallback = function( match, content ) {
+    return content;
 }
 
 /**
@@ -1898,11 +1885,11 @@ ZSSEditor.setVideoPressLinks = function(videopressID, videoURL, posterURL ) {
         return;
     }
 
+    // It's safest to drop the onError now, to avoid endless calls if the video can't be loaded
+    // Even if sendVideoPressInfoRequest failed, it's still possible to request a reload by tapping the video
+    videoNode.attr('onError', '');
+
     if (videoURL.length == 0) {
-        // If no URL is being passed, the host activity probably doesn't have a record of this videopressID
-        // Drop the error event since it can cause an infinite loop in this case
-        // The user is still able to manually retry by tapping the video element
-        videoNode.attr('onError', '');
         return;
     }
 
@@ -1984,11 +1971,6 @@ ZSSEditor.applyImageSelectionFormatting = function( imageNode ) {
 }
 
 ZSSEditor.removeImageSelectionFormatting = function( imageNode ) {
-    if (!$('#zss_field_content')[0].contains(imageNode)) {
-        // The image node has already been removed from the document
-        return;
-    }
-
     var node = ZSSEditor.findImageCaptionNode( imageNode );
     if ( !node.parentNode || node.parentNode.className.indexOf( "edit-container" ) == -1 ) {
         return;
@@ -1996,9 +1978,12 @@ ZSSEditor.removeImageSelectionFormatting = function( imageNode ) {
 
     var parentNode = node.parentNode;
     var container = parentNode.parentNode;
-    container.insertBefore( node, parentNode );
-    // Use {node}.{parent}.removeChild() instead of {node}.remove(), since Android API<19 doesn't support Node.remove()
-    container.removeChild(parentNode);
+
+    if (container != null) {
+        container.insertBefore( node, parentNode );
+        // Use {node}.{parent}.removeChild() instead of {node}.remove(), since Android API<19 doesn't support Node.remove()
+        container.removeChild(parentNode);
+    }
 }
 
 ZSSEditor.removeImageSelectionFormattingFromHTML = function( html ) {
@@ -2158,7 +2143,7 @@ ZSSEditor.createImageFromMeta = function( props ) {
             content: html + ' ' + props.caption
         });
 
-        html = ZSSEditor.applyVisualFormatting( html );
+        html = Formatter.applyVisualFormatting( html );
     }
 
     return html;
@@ -2316,36 +2301,6 @@ ZSSEditor.captionMetaForImage = function( imageNode ) {
     return meta;
 }
 
-/**
- *  @brief      Adds visual formatting to a caption shortcodes.
- *
- *  @param      html   The markup containing caption shortcodes to process.
- *
- *  @return     The html with caption shortcodes replaced with editor specific markup.
- *  See shortcode.js::next or details
- */
-ZSSEditor.applyCaptionFormatting = function( match ) {
-    var attrs = match.attrs.named;
-    // The empty 'onclick' is important. It prevents the cursor jumping to the end
-    // of the content body when `-webkit-user-select: none` is set and the caption is tapped.
-    var out = '<label class="wp-temp" data-wp-temp="caption" contenteditable="false" onclick="">';
-    out += '<span class="wp-caption"';
-
-    if ( attrs.width ) {
-        out += ' style="width:' + attrs.width + 'px; max-width:100% !important;"';
-    }
-    $.each( attrs, function( key, value ) {
-        out += " data-caption-" + key + '="' + value + '"';
-    } );
-
-    out += '>';
-    out += match.content;
-    out += '</span>';
-    out += '</label>';
-
-    return out;
-}
-
 /**
  *  @brief      Removes custom visual formatting for caption shortcodes.
  *
@@ -2456,24 +2411,6 @@ ZSSEditor.replacePlaceholderGallery = function( placeholderId, imageIds, type, c
 
 // MARK: - Commands
 
-/**
- *  @brief      Applies editor specific visual formatting.
- *
- *  @param      html   The markup to format
- *
- *  @return     Returns the string with the visual formatting applied.
- */
-ZSSEditor.applyVisualFormatting  = function( html ) {
-    var str = wp.shortcode.replace( 'caption', html, ZSSEditor.applyCaptionFormatting );
-    str = wp.shortcode.replace( 'wpvideo', str, ZSSEditor.applyVideoPressFormattingCallback );
-    str = wp.shortcode.replace( 'video', str, ZSSEditor.applyVideoFormattingCallback );
-
-    // More tag
-    str = str.replace(/<!--more(.*?)-->/igm, "<hr class=\"more-tag\" wp-more-data=\"$1\">")
-    str = str.replace(/<!--nextpage-->/igm, "<hr class=\"nextpage-tag\">")
-    return str;
-}
-
 /**
  *  @brief      Removes editor specific visual formatting
  *
@@ -2488,6 +2425,7 @@ ZSSEditor.removeVisualFormatting = function( html ) {
     str = ZSSEditor.removeCaptionFormatting( str );
     str = ZSSEditor.replaceVideoPressVideosForShortcode( str );
     str = ZSSEditor.replaceVideosForShortcode( str );
+    str = ZSSEditor.removeVideoContainers( str );
 
     // More tag
     str = str.replace(/<hr class="more-tag" wp-more-data="(.*?)">/igm, "<!--more$1-->")
@@ -2514,19 +2452,21 @@ ZSSEditor.sendEnabledStyles = function(e) {
         // Find all relevant parent tags
         var parentTags = ZSSEditor.parentTags();
 
-        for (var i = 0; i < parentTags.length; i++) {
-            var currentNode = parentTags[i];
+        if (parentTags != null) {
+            for (var i = 0; i < parentTags.length; i++) {
+                var currentNode = parentTags[i];
 
-            if (currentNode.nodeName.toLowerCase() == 'a') {
-                ZSSEditor.currentEditingLink = currentNode;
+                if (currentNode.nodeName.toLowerCase() == 'a') {
+                    ZSSEditor.currentEditingLink = currentNode;
 
-                var title = encodeURIComponent(currentNode.text);
-                var href = encodeURIComponent(currentNode.href);
+                    var title = encodeURIComponent(currentNode.text);
+                    var href = encodeURIComponent(currentNode.href);
 
-                items.push('link-title:' + title);
-                items.push('link:' + href);
-            } else if (currentNode.nodeName == NodeName.BLOCKQUOTE) {
-                items.push('blockquote');
+                    items.push('link-title:' + title);
+                    items.push('link:' + href);
+                } else if (currentNode.nodeName == NodeName.BLOCKQUOTE) {
+                    items.push('blockquote');
+                }
             }
         }
 
@@ -3383,11 +3323,8 @@ ZSSField.prototype.handleTapEvent = function(e) {
             var parentEditContainer = targetNode.parentElement;
             var parentDiv = parentEditContainer.parentElement;
 
-            if (parentDiv && parentDiv.nodeName == NodeName.DIV && parentDiv.parentElement.nodeName != NodeName.BODY) {
-                // Remove the parent div with all its contents, unless it's the contenteditable div itself rather than
-                // a paragraph
-                parentDiv.parentElement.removeChild(parentDiv);
-            } else if (parentEditContainer.classList.contains('edit-container')) {
+            // If the delete button was tapped, removing the media item and its container from the document
+            if (parentEditContainer.classList.contains('edit-container')) {
                 parentEditContainer.parentElement.removeChild(parentEditContainer);
             } else {
                 parentEditContainer.removeChild(targetNode);
@@ -3717,9 +3654,9 @@ ZSSField.prototype.isEmpty = function() {
 ZSSField.prototype.getHTML = function() {
     var html = this.wrappedObject.html();
     if (ZSSEditor.defaultParagraphSeparator == 'div') {
-        html = html.replace(/(<div(?=[>\s]))/igm, '<p').replace(/<\/div>/igm, '</p>');
+        html = Formatter.convertDivToP(html);
     }
-    html = wp.saveText(html);
+    html = Formatter.visualToHtml(html);
     html = ZSSEditor.removeVisualFormatting( html );
     return html;
 };
@@ -3758,15 +3695,19 @@ ZSSField.prototype.setPlainText = function(text) {
 
 ZSSField.prototype.setHTML = function(html) {
     ZSSEditor.currentEditingImage = null;
-    var mutatedHTML = wp.loadText(html);
-    mutatedHTML = ZSSEditor.applyVisualFormatting(mutatedHTML);
+    var mutatedHTML = Formatter.htmlToVisual(html);
 
     if (ZSSEditor.defaultParagraphSeparator == 'div') {
-        // Replace the paragraph tags we get from wpload with divs
-        mutatedHTML = mutatedHTML.replace(/(<p(?=[>\s]))/igm, '<div').replace(/<\/p>/igm, '</div>');
+        mutatedHTML = Formatter.convertPToDiv(mutatedHTML);
     }
 
     this.wrappedObject.html(mutatedHTML);
+
+    // Track video container nodes for mutation
+    var videoNodes = $('span.edit-container > video');
+    for (var i = 0; i < videoNodes.length; i++) {
+        ZSSEditor.trackNodeForMutation($(videoNodes[i].parentNode));
+    }
 };
 
 // MARK: - Placeholder
diff --git a/libs/editor-common/assets/android-editor.html b/libs/editor-common/assets/android-editor.html
index 0c4928be5fad..91674c0fe142 100755
--- a/libs/editor-common/assets/android-editor.html
+++ b/libs/editor-common/assets/android-editor.html
@@ -14,6 +14,7 @@
     <script src="shortcode.js"></script>
     <script src="jquery.mobile-events.min.js"></script>
     <script src="editor-utils.js"></script>
+    <script src="editor-utils-formatter.js"></script>
     <script src="ZSSRichTextEditor.js"></script>
     <script src="wpload.js"></script>
     <script src="wpsave.js"></script>
diff --git a/libs/editor-common/assets/editor-utils-formatter.js b/libs/editor-common/assets/editor-utils-formatter.js
new file mode 100644
index 000000000000..dc4f67764c57
--- /dev/null
+++ b/libs/editor-common/assets/editor-utils-formatter.js
@@ -0,0 +1,147 @@
+function Formatter () {}
+
+// Video format tags supported by the [video] shortcode: https://codex.wordpress.org/Video_Shortcode
+// mp4, m4v and webm prioritized since they're supported by the stock player as of Android API 23
+Formatter.videoShortcodeFormats = ["mp4", "m4v", "webm", "ogv", "wmv", "flv"];
+
+Formatter.htmlToVisual = function(html) {
+    var mutatedHTML = wp.loadText(html);
+    return Formatter.applyVisualFormatting(mutatedHTML);
+}
+
+Formatter.convertPToDiv = function(html) {
+    // Replace the paragraph tags we get from wpload with divs
+    var mutatedHTML = html.replace(/(<p(?=[>\s]))/igm, '<div').replace(/<\/p>/igm, '</div>');
+
+    // Replace break tags around media items with paragraphs
+    // The break tags appear when text and media are separated by only a line break rather than a paragraph break,
+    // which can happen when inserting media inline and switching to HTML mode and back, or by deleting line breaks
+    // in HTML mode
+    mutatedHTML = mutatedHTML.replace(/<br \/>(?=\s*(<a href|<img|<video|<span class="edit-container"))/igm,
+            '</div><div>');
+    mutatedHTML = mutatedHTML.replace(/(<img [^<>]*>|<\/a>|<\/video>|<\/span>)<br \/>/igm,
+            function replaceBrWithDivs(match) { return match.substr(0, match.length - 6) + '</div><div>'; });
+
+    return mutatedHTML;
+}
+
+Formatter.visualToHtml = function(html) {
+    return wp.saveText(html);
+    return Formatter.removeVisualFormatting(mutatedHTML);
+}
+
+Formatter.convertDivToP = function(html) {
+    return html.replace(/(<div(?=[>\s]))/igm, '<p').replace(/<\/div>/igm, '</p>');
+}
+
+/**
+ *  @brief      Applies editor specific visual formatting.
+ *
+ *  @param      html   The markup to format
+ *
+ *  @return     Returns the string with the visual formatting applied.
+ */
+Formatter.applyVisualFormatting  = function(html) {
+    var str = wp.shortcode.replace('caption', html, Formatter.applyCaptionFormatting);
+    str = wp.shortcode.replace('wpvideo', str, Formatter.applyVideoPressFormattingCallback);
+    str = wp.shortcode.replace('video', str, Formatter.applyVideoFormattingCallback);
+
+    // More tag
+    str = str.replace(/<!--more(.*?)-->/igm, "<hr class=\"more-tag\" wp-more-data=\"$1\">")
+    str = str.replace(/<!--nextpage-->/igm, "<hr class=\"nextpage-tag\">")
+    return str;
+}
+
+/**
+ *  @brief      Adds visual formatting to a caption shortcodes.
+ *
+ *  @param      html   The markup containing caption shortcodes to process.
+ *
+ *  @return     The html with caption shortcodes replaced with editor specific markup.
+ *  See shortcode.js::next or details
+ */
+Formatter.applyCaptionFormatting = function(match) {
+    var attrs = match.attrs.named;
+    // The empty 'onclick' is important. It prevents the cursor jumping to the end
+    // of the content body when `-webkit-user-select: none` is set and the caption is tapped.
+    var out = '<label class="wp-temp" data-wp-temp="caption" contenteditable="false" onclick="">';
+    out += '<span class="wp-caption"';
+
+    if (attrs.width) {
+        out += ' style="width:' + attrs.width + 'px; max-width:100% !important;"';
+    }
+    $.each(attrs, function(key, value) {
+        out += " data-caption-" + key + '="' + value + '"';
+    });
+
+    out += '>';
+    out += match.content;
+    out += '</span>';
+    out += '</label>';
+
+    return out;
+}
+
+Formatter.applyVideoPressFormattingCallback = function(match) {
+    if (match.attrs.numeric.length == 0) {
+        return match.content;
+    }
+    var videopressID = match.attrs.numeric[0];
+    var posterSVG = '"svg/wpposter.svg"';
+    // The empty 'onclick' is important. It prevents the cursor jumping to the end
+    // of the content body when `-webkit-user-select: none` is set and the video is tapped.
+    var out = '<video data-wpvideopress="' + videopressID + '" webkit-playsinline src="" preload="metadata" poster='
+           + posterSVG +' onclick="" onerror="ZSSEditor.sendVideoPressInfoRequest(\'' + videopressID +'\');"></video>';
+
+    // Wrap video in edit-container node for a permanent delete button overlay
+    var containerStart = '<span class="edit-container" contenteditable="false"><span class="delete-overlay"></span>';
+    out = containerStart + out + '</span>';
+
+    return out;
+}
+
+Formatter.applyVideoFormattingCallback = function(match) {
+    // Find the tag containing the video source
+    var srcTag = "";
+
+    if (match.attrs.named['src']) {
+        srcTag = "src";
+    } else {
+        for (var i = 0; i < Formatter.videoShortcodeFormats.length; i++) {
+            var format = Formatter.videoShortcodeFormats[i];
+            if (match.attrs.named[format]) {
+                srcTag = format;
+                break;
+            }
+        }
+    }
+
+    if (srcTag.length == 0) {
+        return match.content;
+    }
+
+    var out = '<video webkit-playsinline src="' + match.attrs.named[srcTag] + '"';
+
+    // Preserve all existing tags
+    for (var item in match.attrs.named) {
+        if (item != srcTag) {
+            out += ' ' + item + '="' + match.attrs.named[item] + '"';
+        }
+    }
+
+    if (!match.attrs.named['preload']) {
+        out += ' preload="metadata"';
+    }
+
+    out += ' onclick="" controls="controls"></video>';
+
+    // Wrap video in edit-container node for a permanent delete button overlay
+    var containerStart = '<span class="edit-container" contenteditable="false"><span class="delete-overlay"></span>';
+    out = containerStart + out + '</span>';
+
+    return out;
+}
+
+if (typeof module !== 'undefined' && module.exports != null) {
+    exports.Formatter = Formatter;
+}
\ No newline at end of file
diff --git a/libs/editor-common/assets/editor.css b/libs/editor-common/assets/editor.css
index 29c9c266d550..4e7fa07ba336 100644
--- a/libs/editor-common/assets/editor.css
+++ b/libs/editor-common/assets/editor.css
@@ -279,11 +279,8 @@ span.video_container.failed.smallFail::after {
     padding:1px;
 }
 
-
 .edit-container video {
-    -webkit-filter: blur(4px) grayscale(0.3);
-    margin:-1px; /*tiny margin to keep crisp edges when blurring the image*/
-    padding:1px;
+
 }
 
 /* default. use when images are > 100px w/h */
diff --git a/libs/editor-common/assets/test/test-formatter.js b/libs/editor-common/assets/test/test-formatter.js
new file mode 100644
index 000000000000..3bdc8a35f5f9
--- /dev/null
+++ b/libs/editor-common/assets/test/test-formatter.js
@@ -0,0 +1,122 @@
+var assert = require('chai').assert;
+var underscore = require('../underscore-min.js');
+
+// Set up globals needed by shortcode, wpload, and wpsave
+global.window = {};
+global._ = underscore;
+global.wp = {};
+
+// wp-admin libraries
+var shortcode = require("../shortcode.js");
+var wpload = require("../wpload.js");
+var wpsave = require("../wpsave.js");
+
+var formatterlib = require("../editor-utils-formatter.js");
+var formatter = formatterlib.Formatter;
+
+// Media strings
+
+// Image strings
+var imageSrc = 'content://com.android.providers.media.documents/document/image%3A12951';
+var plainImageHtml = '<img src="' + imageSrc + '" alt="" class="wp-image-123 size-full" width="172" height="244">';
+var imageWrappedInLinkHtml = '<a href="' + imageSrc + '">' + plainImageHtml + '</a>';
+
+// Video strings
+var videoSrc = 'content://com.android.providers.media.documents/document/video%3A12966';
+var videoShortcode = '[video src="' + videoSrc + '" poster=""][/video]';
+var videoHtml = '<span class="edit-container" contenteditable="false"><span class="delete-overlay"></span>' +
+    '<video webkit-playsinline src="' + videoSrc + '" poster="" preload="metadata" onclick="" controls="controls">' +
+    '</video></span>';
+
+// VideoPress video strings
+var vpVideoShortcode = '[wpvideo ABCD1234]';
+var vpVideoHtml = '<span class="edit-container" contenteditable="false"><span class="delete-overlay"></span>' +
+    '<video data-wpvideopress="ABCD1234" webkit-playsinline src="" preload="metadata" poster="svg/wpposter.svg" ' +
+    'onclick="" onerror="ZSSEditor.sendVideoPressInfoRequest(\'ABCD1234\');"></video></span>';
+
+describe('HTML to Visual formatter should correctly convert', function () {
+  it('single-line HTML', function () {
+    assert.equal('<p>Some text</p>\n', formatter.htmlToVisual('Some text'));
+  });
+
+  it('multi-paragraph HTML', function () {
+    assert.equal('<p>Some text</p>\n<p>More text</p>\n', formatter.htmlToVisual('Some text\n\nMore text'));
+  });
+
+  testMediaParagraphWrapping('image wrapped in link', plainImageHtml, plainImageHtml);
+  testMediaParagraphWrapping('image not wrapped in link', imageWrappedInLinkHtml, imageWrappedInLinkHtml);
+  testMediaParagraphWrapping('non-VideoPress video', videoShortcode, videoHtml);
+  testMediaParagraphWrapping('VideoPress video', vpVideoShortcode, vpVideoHtml);
+});
+
+function testMediaParagraphWrapping(mediaType, htmlModeMediaHtml, visualModeMediaHtml) {
+  describe(mediaType, function () {
+    it('alone in post', function () {
+      var visualFormattingApplied = formatter.htmlToVisual(htmlModeMediaHtml);
+      assert.equal('<p>' + visualModeMediaHtml + '</p>\n', visualFormattingApplied);
+
+      var convertedToDivs = formatter.convertPToDiv(visualFormattingApplied).replace(/\n/g, '');
+      assert.equal('<div>' + visualModeMediaHtml + '</div>', convertedToDivs);
+    });
+
+    it('with paragraphs above and below', function () {
+      var imageBetweenParagraphs = 'Line 1\n\n' + htmlModeMediaHtml + '\n\nLine 2';
+
+      var visualFormattingApplied = formatter.htmlToVisual(imageBetweenParagraphs);
+      assert.equal('<p>Line 1</p>\n<p>' + visualModeMediaHtml + '</p>\n<p>Line 2</p>\n', visualFormattingApplied);
+
+      var convertedToDivs = formatter.convertPToDiv(visualFormattingApplied).replace(/\n/g, '');
+      assert.equal('<div>Line 1</div><div>' + visualModeMediaHtml + '</div><div>Line 2</div>', convertedToDivs);
+    });
+
+    it('with line breaks above and below', function () {
+      var imageBetweenLineBreaks = 'Line 1\n' + htmlModeMediaHtml + '\nLine 2';
+
+      var visualFormattingApplied = formatter.htmlToVisual(imageBetweenLineBreaks);
+      assert.equal('<p>Line 1<br />\n' + visualModeMediaHtml + '<br />\nLine 2</p>\n', visualFormattingApplied);
+
+      var convertedToDivs = formatter.convertPToDiv(visualFormattingApplied).replace(/\n/g, '');
+      assert.equal('<div>Line 1</div><div>' + visualModeMediaHtml + '</div><div>Line 2</div>', convertedToDivs);
+    });
+
+    it('start of post, with paragraph underneath', function () {
+      var imageFollowedByParagraph = htmlModeMediaHtml + '\n\nLine 2';
+
+      var visualFormattingApplied = formatter.htmlToVisual(imageFollowedByParagraph);
+      assert.equal('<p>' + visualModeMediaHtml + '</p>\n<p>Line 2</p>\n', visualFormattingApplied);
+
+      var convertedToDivs = formatter.convertPToDiv(visualFormattingApplied).replace(/\n/g, '');
+      assert.equal('<div>' + visualModeMediaHtml + '</div><div>Line 2</div>', convertedToDivs);
+    });
+
+    it('start of post, with line break underneath', function () {
+      var imageFollowedByLineBreak = htmlModeMediaHtml + '\nLine 2';
+
+      var visualFormattingApplied = formatter.htmlToVisual(imageFollowedByLineBreak);
+      assert.equal('<p>' + visualModeMediaHtml + '<br \/>\nLine 2</p>\n', visualFormattingApplied);
+
+      var convertedToDivs = formatter.convertPToDiv(visualFormattingApplied).replace(/\n/g, '');
+      assert.equal('<div>' + visualModeMediaHtml + '</div><div>Line 2</div>', convertedToDivs);
+    });
+
+    it('end of post, with paragraph above', function () {
+      var imageUnderParagraph = 'Line 1\n\n' + htmlModeMediaHtml;
+
+      var visualFormattingApplied = formatter.htmlToVisual(imageUnderParagraph);
+      assert.equal('<p>Line 1</p>\n<p>' + visualModeMediaHtml + '</p>\n', visualFormattingApplied);
+
+      var convertedToDivs = formatter.convertPToDiv(visualFormattingApplied).replace(/\n/g, '');
+      assert.equal('<div>Line 1</div><div>' + visualModeMediaHtml + '</div>', convertedToDivs);
+    });
+
+    it('end of post, with line break above', function () {
+      var imageUnderLineBreak = 'Line 1\n' + htmlModeMediaHtml;
+
+      var visualFormattingApplied = formatter.htmlToVisual(imageUnderLineBreak);
+      assert.equal('<p>Line 1<br \/>\n' + visualModeMediaHtml + '</p>\n', visualFormattingApplied);
+
+      var convertedToDivs = formatter.convertPToDiv(visualFormattingApplied).replace(/\n/g, '');
+      assert.equal('<div>Line 1</div><div>' + visualModeMediaHtml + '</div>', convertedToDivs);
+    });
+  });
+}