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);
+    });
+  });
+}