From a6337a77d56c93efc6ff5ddf70980e3da131d35b Mon Sep 17 00:00:00 2001
From: Labayna Neil Brian Narido <neilbrian.nl@gmail.com>
Date: Sat, 21 Mar 2020 19:22:34 +0800
Subject: [PATCH] Code blocks: Implement inline markdown support for heading

Remove console log and rename var

Update docs

increase line-heigh for headings with inline md

remove line

remove br

update tests

change css structure

update tests

update tests and css class name

Add tests

Address comments

Update docs/userGuide/syntax/code.mbdf

Co-Authored-By: Daryl Tan <3646725+openorclose@users.noreply.github.com>
---
 asset/css/markbind.css                        |  4 ++++
 docs/userGuide/syntax/code.mbdf               | 19 +++++++++++++++++++
 src/lib/markbind/src/lib/markdown-it/index.js |  4 +++-
 .../expected/markbind/css/markbind.css        |  4 ++++
 .../test_site/expected/testCodeBlocks.html    | 14 ++++++++++++++
 test/functional/test_site/testCodeBlocks.md   | 16 ++++++++++++++++
 .../expected/markbind/css/markbind.css        |  4 ++++
 .../expected/markbind/css/markbind.css        |  4 ++++
 .../expected/markbind/css/markbind.css        |  4 ++++
 .../expected/markbind/css/markbind.css        |  4 ++++
 .../expected/markbind/css/markbind.css        |  4 ++++
 .../expected/markbind/css/markbind.css        |  4 ++++
 12 files changed, 84 insertions(+), 1 deletion(-)

diff --git a/asset/css/markbind.css b/asset/css/markbind.css
index bcf1cd275a..9334f9d900 100644
--- a/asset/css/markbind.css
+++ b/asset/css/markbind.css
@@ -46,6 +46,10 @@ pre > code.hljs[heading] {
     text-align: right;
 }
 
+.inline-markdown-heading {
+    line-height: 1.5;
+}
+
 .code-block-content {
     clear: both;
     display: block;
diff --git a/docs/userGuide/syntax/code.mbdf b/docs/userGuide/syntax/code.mbdf
index cfb76b9c83..d30752f700 100644
--- a/docs/userGuide/syntax/code.mbdf
+++ b/docs/userGuide/syntax/code.mbdf
@@ -149,6 +149,25 @@ To add a heading, add the attribute `heading` with the heading text as the value
 </span>
 </include>
 
+Headings support inline Markdown, except for `Inline Code` and %%Dim%% text styles.
+
+<include src="outputBox.md" boilerplate >
+<span id="code">
+
+```` {.no-line-numbers}
+```{heading="**Bold**, _Italic_, ___Bold and Italic___, ~~Strike through~~, ****Super Bold****, ++Underline++, ==Highlight==, :+1: :exclamation: :x: :construction:<br>We support page breaks"}
+<foo></foo>
+```
+````
+</span>
+<span id="output">
+
+```{heading="**Bold**, _Italic_, ___Bold and Italic___, ~~Strike through~~, ****Super Bold****, ++Underline++, ==Highlight==, :+1: :exclamation: :x: :construction:<br>We support page breaks"}
+<foo></foo>
+```
+</span>
+</include>
+
 ##### Using multiple features
 You can also use multiple features together, as shown below.
 
diff --git a/src/lib/markbind/src/lib/markdown-it/index.js b/src/lib/markbind/src/lib/markdown-it/index.js
index 3f057dee21..a22717f39c 100644
--- a/src/lib/markbind/src/lib/markdown-it/index.js
+++ b/src/lib/markbind/src/lib/markdown-it/index.js
@@ -136,8 +136,10 @@ markdownIt.renderer.rules.fence = (tokens, idx, options, env, slf) => {
   const heading = token.attrGet('heading');
   const codeBlockContent = `<pre><code ${slf.renderAttrs(token)}>${str}</code></pre>`;
   if (heading) {
+    const renderedHeading = markdownIt.renderInline(heading);
+    const headingStyle = (renderedHeading === heading) ? 'code-block-heading' : 'code-block-heading inline-markdown-heading';
     return '<div class="code-block">'
-      + `<div class="code-block-heading"><span>${heading}</span></div>`
+      + `<div class="${headingStyle}"><span>${renderedHeading}</span></div>`
       + `<div class="code-block-content">${codeBlockContent}</div>`
       + '</div>';
   }
diff --git a/test/functional/test_site/expected/markbind/css/markbind.css b/test/functional/test_site/expected/markbind/css/markbind.css
index bcf1cd275a..9334f9d900 100644
--- a/test/functional/test_site/expected/markbind/css/markbind.css
+++ b/test/functional/test_site/expected/markbind/css/markbind.css
@@ -46,6 +46,10 @@ pre > code.hljs[heading] {
     text-align: right;
 }
 
+.inline-markdown-heading {
+    line-height: 1.5;
+}
+
 .code-block-content {
     clear: both;
     display: block;
diff --git a/test/functional/test_site/expected/testCodeBlocks.html b/test/functional/test_site/expected/testCodeBlocks.html
index 46a7829fc7..56feb259b8 100644
--- a/test/functional/test_site/expected/testCodeBlocks.html
+++ b/test/functional/test_site/expected/testCodeBlocks.html
@@ -38,6 +38,20 @@
         <pre><code class="hljs markdown"><span class="highlighted">1  highlighted</span><span>2</span><span class="highlighted">3  highlighted</span><span>4</span><span class="highlighted">5  highlighted</span><span class="highlighted">6  highlighted</span><span class="highlighted">7  highlighted</span><span class="highlighted">8  highlighted</span><span>9</span><span>10</span></code></pre>
         <p><strong>highlight-lines attr with start-from attr cause corresponding lines to have 'highlighted' class based on 'start-from'</strong></p>
         <pre><code style="counter-reset: line 10;" class="hljs markdown"><span class="highlighted">11  highlighted</span><span>12</span><span class="highlighted">13  highlighted</span><span>14</span><span class="highlighted">15  highlighted</span><span class="highlighted">16  highlighted</span><span class="highlighted">17  highlighted</span><span class="highlighted">18  highlighted</span><span>19</span><span>20</span></code></pre>
+        <p><strong>Code block heading</strong></p>
+        <div class="code-block">
+          <div class="code-block-heading"><span>A heading</span></div>
+          <div class="code-block-content">
+            <pre><code heading="A heading" class="hljs"><span>&lt;foo&gt;</span><span>    &lt;bar&gt;</span><span>&lt;/foo&gt;</span></code></pre>
+          </div>
+        </div>
+        <p><strong>Code block heading with inline markdown</strong></p>
+        <div class="code-block">
+          <div class="code-block-heading inline-markdown-heading"><span><strong>Bold</strong>, <em>Italic</em>, <em><strong>Bold and Italic</strong></em>, <s>Strike through</s>, <strong><strong>Super Bold</strong></strong>, <ins>Underline</ins>, <mark>Highlight</mark>, 👍 ❗️ ❌ 🚧<br>We support page breaks</span></div>
+          <div class="code-block-content">
+            <pre><code heading="**Bold**, _Italic_, ___Bold and Italic___, ~~Strike through~~, ****Super Bold****, ++Underline++, ==Highlight==, :+1: :exclamation: :x: :construction:&lt;br&gt;We support page breaks" class="hljs"><span>&lt;foo&gt;</span><span>    &lt;bar&gt;</span><span>&lt;/foo&gt;</span></code></pre>
+          </div>
+        </div>
       </div>
     </div>
     <footer>
diff --git a/test/functional/test_site/testCodeBlocks.md b/test/functional/test_site/testCodeBlocks.md
index 7f254e0384..1381fd62df 100644
--- a/test/functional/test_site/testCodeBlocks.md
+++ b/test/functional/test_site/testCodeBlocks.md
@@ -62,3 +62,19 @@ function fourEmptyLinesBelow() {
 19
 20
 ```
+
+**Code block heading**
+
+```{heading="A heading"}
+<foo>
+    <bar>
+</foo>
+```
+
+**Code block heading with inline markdown**
+
+```{heading="**Bold**, _Italic_, ___Bold and Italic___, ~~Strike through~~, ****Super Bold****, ++Underline++, ==Highlight==, :+1: :exclamation: :x: :construction:<br>We support page breaks"}
+<foo>
+    <bar>
+</foo>
+```
diff --git a/test/functional/test_site_algolia_plugin/expected/markbind/css/markbind.css b/test/functional/test_site_algolia_plugin/expected/markbind/css/markbind.css
index bcf1cd275a..9334f9d900 100644
--- a/test/functional/test_site_algolia_plugin/expected/markbind/css/markbind.css
+++ b/test/functional/test_site_algolia_plugin/expected/markbind/css/markbind.css
@@ -46,6 +46,10 @@ pre > code.hljs[heading] {
     text-align: right;
 }
 
+.inline-markdown-heading {
+    line-height: 1.5;
+}
+
 .code-block-content {
     clear: both;
     display: block;
diff --git a/test/functional/test_site_convert/expected/markbind/css/markbind.css b/test/functional/test_site_convert/expected/markbind/css/markbind.css
index bcf1cd275a..9334f9d900 100644
--- a/test/functional/test_site_convert/expected/markbind/css/markbind.css
+++ b/test/functional/test_site_convert/expected/markbind/css/markbind.css
@@ -46,6 +46,10 @@ pre > code.hljs[heading] {
     text-align: right;
 }
 
+.inline-markdown-heading {
+    line-height: 1.5;
+}
+
 .code-block-content {
     clear: both;
     display: block;
diff --git a/test/functional/test_site_expressive_layout/expected/markbind/css/markbind.css b/test/functional/test_site_expressive_layout/expected/markbind/css/markbind.css
index bcf1cd275a..9334f9d900 100644
--- a/test/functional/test_site_expressive_layout/expected/markbind/css/markbind.css
+++ b/test/functional/test_site_expressive_layout/expected/markbind/css/markbind.css
@@ -46,6 +46,10 @@ pre > code.hljs[heading] {
     text-align: right;
 }
 
+.inline-markdown-heading {
+    line-height: 1.5;
+}
+
 .code-block-content {
     clear: both;
     display: block;
diff --git a/test/functional/test_site_special_tags/expected/markbind/css/markbind.css b/test/functional/test_site_special_tags/expected/markbind/css/markbind.css
index bcf1cd275a..9334f9d900 100644
--- a/test/functional/test_site_special_tags/expected/markbind/css/markbind.css
+++ b/test/functional/test_site_special_tags/expected/markbind/css/markbind.css
@@ -46,6 +46,10 @@ pre > code.hljs[heading] {
     text-align: right;
 }
 
+.inline-markdown-heading {
+    line-height: 1.5;
+}
+
 .code-block-content {
     clear: both;
     display: block;
diff --git a/test/functional/test_site_templates/test_default/expected/markbind/css/markbind.css b/test/functional/test_site_templates/test_default/expected/markbind/css/markbind.css
index bcf1cd275a..9334f9d900 100644
--- a/test/functional/test_site_templates/test_default/expected/markbind/css/markbind.css
+++ b/test/functional/test_site_templates/test_default/expected/markbind/css/markbind.css
@@ -46,6 +46,10 @@ pre > code.hljs[heading] {
     text-align: right;
 }
 
+.inline-markdown-heading {
+    line-height: 1.5;
+}
+
 .code-block-content {
     clear: both;
     display: block;
diff --git a/test/functional/test_site_templates/test_minimal/expected/markbind/css/markbind.css b/test/functional/test_site_templates/test_minimal/expected/markbind/css/markbind.css
index bcf1cd275a..9334f9d900 100644
--- a/test/functional/test_site_templates/test_minimal/expected/markbind/css/markbind.css
+++ b/test/functional/test_site_templates/test_minimal/expected/markbind/css/markbind.css
@@ -46,6 +46,10 @@ pre > code.hljs[heading] {
     text-align: right;
 }
 
+.inline-markdown-heading {
+    line-height: 1.5;
+}
+
 .code-block-content {
     clear: both;
     display: block;