Merge pull request #696 from wordpress-mobile/issue/695-fix-video-tag-through-plugin

Fix video tag shortcode & start/end tags through plugin

Author: daniloercoli

wordpress-shortcodes/src/main/java/org/wordpress/aztec/plugins/shortcodes/VideoShortcodePlugin.kt

@@ -3,6 +3,7 @@ package org.wordpress.aztec.plugins.shortcodes
 import org.wordpress.aztec.plugins.shortcodes.extensions.ATTRIBUTE_VIDEOPRESS_HIDDEN_ID
 import org.wordpress.aztec.plugins.shortcodes.extensions.ATTRIBUTE_VIDEOPRESS_HIDDEN_SRC
 import org.wordpress.aztec.plugins.html2visual.IHtmlPreprocessor
+import org.wordpress.aztec.plugins.shortcodes.utils.GutenbergUtils
 import org.wordpress.aztec.plugins.visual2html.IHtmlPostprocessor
 
 class VideoShortcodePlugin : IHtmlPreprocessor, IHtmlPostprocessor {
@@ -11,15 +12,23 @@ class VideoShortcodePlugin : IHtmlPreprocessor, IHtmlPostprocessor {
     private val TAG_VIDEOPRESS_SHORTCODE = "wpvideo"
 
     override fun beforeHtmlProcessed(source: String): String {
+        if (GutenbergUtils.contentContainsGutenbergBlocks(source)) return source
         var newSource = source.replace(Regex("(?<!\\[)\\[$TAG([^\\]]*)\\](?!\\])"), "<$TAG$1 />")
         newSource = newSource.replace(Regex("(?<!\\[)\\[$TAG_VIDEOPRESS_SHORTCODE([^\\]]*)\\](?!\\])"), { it -> fromVideoPressShortCodeToHTML(it) })
         return newSource
     }
 
     override fun onHtmlProcessed(source: String): String {
+        if (GutenbergUtils.contentContainsGutenbergBlocks(source)) {
+            // From https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
+            // > Tag omission	None, both the starting and ending tag are mandatory.
+            return StringBuilder(source)
+                    .replace(Regex("(<$TAG[^>]*?)(\\s*/>)"), "\$1></$TAG>")
+        }
+
         return StringBuilder(source)
                 .replace(Regex("<$TAG([^>]*(?<! )) */>"), { it -> fromHTMLToShortcode(it) })
-                .replace(Regex("<$TAG([^>]*(?<! )) */>"), { it -> fromHTMLToShortcode(it) })
+                .replace(Regex("<$TAG([^>]*(?<! )) *></$TAG>"), { it -> fromHTMLToShortcode(it) })
     }
 
     /**

wordpress-shortcodes/src/test/java/org/wordpress/aztec/plugins/shortcodes/AudioShortcodeTest.kt

@@ -14,7 +14,7 @@ import org.wordpress.aztec.AztecText
 import org.wordpress.aztec.plugins.shortcodes.TestUtils.safeEmpty
 
 /**
- * Tests for the caption shortcode plugin
+ * Tests for the audio shortcode plugin
  */
 @RunWith(RobolectricTestRunner::class)
 @Config(constants = BuildConfig::class, sdk = intArrayOf(25))

wordpress-shortcodes/src/test/java/org/wordpress/aztec/plugins/shortcodes/VideoShortcodeTest.kt

@@ -0,0 +1,71 @@
+@file:Suppress("DEPRECATION")
+
+package org.wordpress.aztec.plugins.shortcodes
+
+import android.app.Activity
+import org.junit.Assert
+import org.junit.Before
+import org.junit.Test
+import org.junit.runner.RunWith
+import org.robolectric.Robolectric
+import org.robolectric.RobolectricTestRunner
+import org.robolectric.annotation.Config
+import org.wordpress.aztec.AztecText
+import org.wordpress.aztec.plugins.shortcodes.TestUtils.safeEmpty
+
+/**
+ * Tests for the video shortcode plugin
+ */
+@RunWith(RobolectricTestRunner::class)
+@Config(constants = BuildConfig::class, sdk = intArrayOf(25))
+class VideoShortcodeTest {
+    lateinit var editText: AztecText
+
+    private val htmlGutenbergVideoBlock =
+            "<!-- wp:video {\"id\":25} --><figure class=\"wp-block-video\"><video controls src=\"https://somedomain.com/wp-content/uploads/2017/05/VID-20170508-WA0011-1.mp4\"></video></figure><!-- /wp:video -->"
+
+    private val htmlNormalVideoTag =
+            "<figure class=\"wp-block-video\"><video controls src=\"https://somedomain.com/wp-content/uploads/2017/05/VID-20170508-WA0011-1.mp4\"></video></figure>"
+
+    /**
+     * Initialize variables.
+     */
+    @Before
+    fun init() {
+        val activity = Robolectric.buildActivity(Activity::class.java).create().visible().get()
+
+        editText = AztecText(activity)
+        editText.setCalypsoMode(false)
+
+        activity.setContentView(editText)
+
+        editText.plugins.add(VideoShortcodePlugin())
+    }
+
+    @Test
+    @Throws(Exception::class)
+    fun testGutenbergVideoBlockDoesntConvertToShortcode() {
+        Assert.assertTrue(safeEmpty(editText))
+
+        editText.fromHtml(htmlGutenbergVideoBlock)
+
+        // expected result: the <video> tag does not get converted to shortcode when it's found within a Gutenberg block
+        // Note: the slight difference of <video controls> being converted to <video controls="controls"> should be equivalent
+        val htmlWithoutShortcode = "<!-- wp:video {\"id\":25} --><figure class=\"wp-block-video\"><video controls=\"controls\" src=\"https://somedomain.com/wp-content/uploads/2017/05/VID-20170508-WA0011-1.mp4\"></video></figure><!-- /wp:video -->"
+
+        Assert.assertEquals(htmlWithoutShortcode, editText.toPlainHtml())
+    }
+
+    @Test
+    @Throws(Exception::class)
+    fun testVideoTagConvertsToShortcode() {
+        Assert.assertTrue(safeEmpty(editText))
+
+        editText.fromHtml(htmlNormalVideoTag)
+
+        // expected result: the <video> tag gets converted to shortcode when it's found in free HTML
+        val htmlWithShortcode = "<figure class=\"wp-block-video\">[video controls=\"controls\" src=\"https://somedomain.com/wp-content/uploads/2017/05/VID-20170508-WA0011-1.mp4\"]</figure>"
+
+        Assert.assertEquals(htmlWithShortcode, editText.toPlainHtml())
+    }
+}