From 9359c1982b8fccd18f19a1f76416bb64d80e96a5 Mon Sep 17 00:00:00 2001
From: Ze Yu <angzeyu@gmail.com>
Date: Sun, 8 Mar 2020 19:06:09 +0800
Subject: [PATCH] Allow special tags to be self-closing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Unlike the html script and style special tags, plugin authors may want
injected special tags to be able to be self-closing as well.
This can help unify the syntax used in the plugin, which makes for
better author usability of the plugin.

Let’s allow injected special tags to be self-closing.
Let’s also do so for the script and style tags, which would be
expanded to their normal form after rendering.
---
 src/lib/markbind/src/patches/htmlparser2.js   | 23 +++++++++++++++++++
 .../_markbind/plugins/testSpecialTag.js       |  4 ++--
 .../expected/index.html                       | 13 +++++++++--
 .../test_site_special_tags/index.md           | 14 +++++++++++
 4 files changed, 50 insertions(+), 4 deletions(-)

diff --git a/src/lib/markbind/src/patches/htmlparser2.js b/src/lib/markbind/src/patches/htmlparser2.js
index 185af4728d..53ba30a04d 100644
--- a/src/lib/markbind/src/patches/htmlparser2.js
+++ b/src/lib/markbind/src/patches/htmlparser2.js
@@ -261,6 +261,29 @@ Tokenizer.prototype._stateBeforeSpecial = function(c) {
 	this._special = result + 1;
 };
 
+/**
+ * Patched self closing tag state handler that removes the special state
+ * if the special tag was self-closed.
+ */
+Tokenizer.prototype._stateInSelfClosingTag = function(c) {
+	if (c === ">") {
+		this._cbs.onselfclosingtag();
+		this._state = TEXT;
+		this._sectionStart = this._index + 1;
+		/*
+		 Allow all special tags to be self-closed.
+		 Script and style tags are also allowed to be self-closed,
+		 which breaks from the default html spec-compliant of behaviour of htmlparser2.
+		 We allow this as such tags would be expanded upon re-rendering the html anyway.
+		 ie. '<script ... />' would end up as '<script ...></script>'
+		 */
+		this._special = SPECIAL_NONE;
+	} else if (!whitespace(c)) {
+		this._state = BEFORE_ATTRIBUTE_NAME;
+		this._index--;
+	}
+};
+
 /**
  * Processes the _special flag and _nextSpecialTagMatchIndex state variable,
  * returning a flag indicating whether the current special tag has finished matching or not.
diff --git a/test/functional/test_site_special_tags/_markbind/plugins/testSpecialTag.js b/test/functional/test_site_special_tags/_markbind/plugins/testSpecialTag.js
index 2c219106df..0b08040538 100644
--- a/test/functional/test_site_special_tags/_markbind/plugins/testSpecialTag.js
+++ b/test/functional/test_site_special_tags/_markbind/plugins/testSpecialTag.js
@@ -28,7 +28,7 @@ function preRender(content) {
   without interference from other dependencies
 */
 function postRender(content) {
-  const $ = cheerio.load(content);
+  const $ = cheerio.load(content, { xmlMode: false });
   const escapedNunjucks = $('mustache');
   escapedNunjucks.each((index, element) => {
     const unwrappedText = $(element).text();
@@ -44,5 +44,5 @@ function postRender(content) {
 module.exports = {
   preRender,
   postRender,
-  getSpecialTags: () => ['testtag', 'mustache'],
+  getSpecialTags: () => ['testtag', 'testselfclosingtag', 'mustache'],
 };
diff --git a/test/functional/test_site_special_tags/expected/index.html b/test/functional/test_site_special_tags/expected/index.html
index 1085485b37..7acbeb661f 100644
--- a/test/functional/test_site_special_tags/expected/index.html
+++ b/test/functional/test_site_special_tags/expected/index.html
@@ -24,7 +24,7 @@
       <div id="content-wrapper">
         <h1 id="functional-test-for-htmlparser2-and-markdown-it-patches-for-special-tags">Functional test for htmlparser2 and markdown-it patches for special tags<a class="fa fa-anchor" href="#functional-test-for-htmlparser2-and-markdown-it-patches-for-special-tags"></a></h1>
         <h2 id="so-far-as-to-comply-with-the-commonmark-spec">So far as to comply with the commonmark spec<a class="fa fa-anchor" href="#so-far-as-to-comply-with-the-commonmark-spec"></a></h2>
-        <p>There should be no text between this and the next <code>&lt;hr&gt;</code> tag in the browser, since it is a <code>&lt;script&gt;</code> tag.<br> There should be an alert with the value of 2 as well.<br></p>
+        <p>There should be no text between this and the next <code>&lt;hr&gt;</code> tag in the browser, since it is a <code>&lt;script&gt;</code> tag.<br> There should be an alert with the value of 2 as well.</p>
         <script>
           let x = 1;
 
@@ -77,10 +77,19 @@ <h2 id="so-far-as-to-comply-with-the-commonmark-spec">So far as to comply with t
           <p>/* ... */
           </p>
         </abc>
+        <hr>
+        <p>There are two self closing special tags below, which should display nothing, but are present in the output. There is then one special tag with both and opening and closing tag with some text in it (<code>lorem ipsum...</code>). Note that script
+          and style tags are still not allowed to be self-closing, as per the html5 spec.</p>
+        <testselfclosingtag></testselfclosingtag>
+        <testselfclosingtag></testselfclosingtag>
+        <testselfclosingtag>
+
+Lorem ipsum lorem ipsum
+</testselfclosingtag>
         <hr>
         <p>This should pass the htmlparser2 patch but not the markdown-it patch as it violates commonmark.<br> All lines after the first <code>!success</code> wrapping text will be wrapped in a <code>&lt;p&gt;...&lt;/p&gt;</code> tag as it is parsed as a
           markdown paragraph.
-          <br></p>
+        </p>
         <div>
           <testtag>!success
 <p>let x = 2;</p>
diff --git a/test/functional/test_site_special_tags/index.md b/test/functional/test_site_special_tags/index.md
index 3dc7adf80e..2bbb3088b2 100644
--- a/test/functional/test_site_special_tags/index.md
+++ b/test/functional/test_site_special_tags/index.md
@@ -76,6 +76,20 @@ some text
 
 ---
 
+There are two self closing special tags below, which should display nothing, but are present in the output.
+There is then one special tag with both and opening and closing tag with some text in it (`lorem ipsum...`).
+Note that script and style tags are still not allowed to be self-closing, as per the html5 spec.
+
+<testselfclosingtag />
+<testselfclosingtag />
+
+<testselfclosingtag>
+
+Lorem ipsum lorem ipsum
+</testselfclosingtag>
+
+---
+
 This should pass the htmlparser2 patch but not the markdown-it patch as it violates commonmark.<br>
 All lines after the first `!success` wrapping text will be wrapped in a `<p>...</p>` tag as it is
 parsed as a markdown paragraph.