fix(plugins) Properly render inline blocks as HTML span

Signed-off-by: Jerome Simeon <[email protected]>

Author: jeromesimeon

packages/markdown-it-template/lib/index.js

@@ -47,6 +47,10 @@ const variable_inline = function (tokens, idx /*, options, env */) {
   return `<span class="variable" ${attrs}>${name}</span>`;
 };
 
+const else_inline = function (tokens, idx /*, options, env */) {
+  return `</span><span class="else">`;
+};
+
 const formula_inline = function (tokens, idx /*, options, env */) {
   const token = tokens[idx];
   return `<span class="formula">${token.content}</span>`;
@@ -62,6 +66,7 @@ function template_plugin(md) {
     md.renderer.rules['inline_block_with_close'] = template_inline_render('with');
     md.renderer.rules['inline_block_join_open'] = template_inline_render('join');
     md.renderer.rules['inline_block_join_close'] = template_inline_render('join');
+    md.renderer.rules['inline_block_else'] = else_inline;
     md.renderer.rules['variable'] = variable_inline;
     md.renderer.rules['formula'] = formula_inline;
 

packages/markdown-it-template/lib/template_inline.js

@@ -53,7 +53,7 @@ function template_inline(state, silent) {
         if (block !== 'if' && block !== 'optional' && block !== 'with' && block !== 'join') {
             return false;
         }
-        token         = state.push('inline_block_' + block + '_open', 'div', 1);
+        token         = state.push('inline_block_' + block + '_open', 'span', 1);
         token.content = match[0];
         token.attrs = attrs;
 
@@ -71,7 +71,7 @@ function template_inline(state, silent) {
             return false;
         }
 
-        token         = state.push('inline_block_' + block + '_close', 'div', -1);
+        token         = state.push('inline_block_' + block + '_close', 'span', -1);
         token.content = match[1];
         state.pos += match[0].length;
 

packages/markdown-it-template/test/data/all.html

@@ -1,6 +1,6 @@
 <h1>Title</h1>
-<p>Paragraph with a <span class="variable" name="seller">seller</span> and more text and<div name="forceMajeure" class="if_inline">, this is conditional,</div> with some <strong>marker</strong> <span class="formula"> 1+1 = 3 </span>. <div name="foo" separator=";" class="join_inline"><span class="variable" name="element">element</span></div></p>
-<p>Paragraph with a <span class="variable" name="seller">seller</span> and more text and<div name="forceMajeure" class="if_inline">, this is conditional,<else> and this is too,</div> with some <strong>marker</strong> <span class="formula"> 1+1 = 3 </span>. <div name="foo" class="join_inline"><span class="variable" name="element">element</span></div></p>
+<p>Paragraph with a <span class="variable" name="seller">seller</span> and more text and<span name="forceMajeure" class="if_inline">, this is conditional,</span> with some <strong>marker</strong> <span class="formula"> 1+1 = 3 </span>. <span name="foo" separator=";" class="join_inline"><span class="variable" name="element">element</span></span></p>
+<p>Paragraph with a <span class="variable" name="seller">seller</span> and more text and<span name="forceMajeure" class="if_inline">, this is conditional,</span><span class="else"> and this is too,</span> with some <strong>marker</strong> <span class="formula"> 1+1 = 3 </span>. <span name="foo" class="join_inline"><span class="variable" name="element">element</span></span></p>
 <p><span class="variable" name="buyer" format="FOO">buyer</span></p>
 <div name="payment" src="ap://[email protected]#b4c966c2081303d017d3dde359bd8039ceb4a5dbacb6e6e09618e33a00d3f566" class="clause_block">
 <p>BLABLABLABLA</p>
@@ -16,12 +16,11 @@ <h1>Title</h1>
 <li>three</li>
 </ul>
 </div>
-<p>There is also a new <div name="name" class="optional_inline"> inline which can contain <this></div>.</p>
-<p>There is also a new <div name="name" class="optional_inline"> inline which can contain <this><else>something else</div>.</p>
+<p>There is also a new <span name="name" class="optional_inline"> inline which can contain <this></span>.</p>
+<p>There is also a new <span name="name" class="optional_inline"> inline which can contain <this></span><span class="else">something else</span>.</p>
 <p>This is a <a href="mylink">link with a <span class="variable" name="variable">variable</span> in it</a>.</p>
 <p>This is a <a href="mylink">link with a <this> in it</a>.</p>
-<p>This is a <a href="mylink">link with an <else> in it</a>.</p>
-<p>This is a <a href="mylink">link with an <div name="name" class="if_inline"> in it</div></a>.</p>
-<p>This is a <a href="mylink">link with an <div name="name" class="optional_inline"> in it</div></a>.</p>
-<p>This is a <a href="mylink">link with a <div name="name" class="join_inline"> in it</div></a>.</p>
+<p>This is a <a href="mylink">link with an <span name="name" class="if_inline"> in it</span></a>.</p>
+<p>This is a <a href="mylink">link with an <span name="name" class="optional_inline"> in it</span></a>.</p>
+<p>This is a <a href="mylink">link with a <span name="name" class="join_inline"> in it</span></a>.</p>
 <p>This is a <a href="mylink">link with a <span class="formula"> formula </span> in it</a>.</p>

packages/markdown-it-template/test/data/all.json

@@ -32,8 +32,6 @@ This is a [link with a {{variable}} in it](mylink).
 
 This is a [link with a {{this}} in it](mylink).
 
-This is a [link with an {{else}} in it](mylink).
-
 This is a [link with an {{#if name}} in it{{/if}}](mylink).
 
 This is a [link with an {{#optional name}} in it{{/optional}}](mylink).

packages/markdown-it-template/test/data/all.tem.md

@@ -1,5 +1,5 @@
 <h1>Title</h1>
-<p>Paragraph with a {seller}} and more text and<div name="forceMajeure" class="if_inline">, this is optional,</div> with some <strong>marker</strong> {{% % 1+1 = 3 %}}.</p>
+<p>Paragraph with a {seller}} and more text and<span name="forceMajeure" class="if_inline">, this is optional,</span> with some <strong>marker</strong> {{% % 1+1 = 3 %}}.</p>
 <p><span class="variable" name="buyer" format="FOO">buyer</span></p>
 <p>{#clause payment}}
 BLABLABLABLA</p>