Allow special tags to be self-closing

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

@@ -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.

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'],
 };

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>

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.