From c51e4ed7e9d2d1772eeafc8d187a8b7a7ff25677 Mon Sep 17 00:00:00 2001
From: Tan Wang Leng <tanwangleng@outlook.com>
Date: Fri, 20 Jul 2018 09:58:13 +0800
Subject: [PATCH 1/2] Panel: Change header markdown rendering to non-inline

renderInline() is used when trying to render markdown syntax surrounded
by other normal text.

Some Markdown syntax are not supported inline. For example, one will not
expect a "header" to appear in the middle of other text, so Markdown
will not parse headers even if it is correctly written.

Change calls of md.renderInline() to md.render() for header rendering.
---
 src/Panel.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Panel.vue b/src/Panel.vue
index c57f0560d..09565078c 100644
--- a/src/Panel.vue
+++ b/src/Panel.vue
@@ -210,7 +210,7 @@
         return this.alt && md.render(this.alt) || this.renderedHeader;
       },
       renderedHeader () {
-        return md.renderInline(this.header);
+        return md.render(this.header);
       },
       hasSrc () {
         return this.src && this.src.length > 0;

From 43f969f2652d8f2f75c490160b629c31b887f5da Mon Sep 17 00:00:00 2001
From: Tan Wang Leng <tanwangleng@outlook.com>
Date: Fri, 20 Jul 2018 10:56:57 +0800
Subject: [PATCH 2/2] Panel: Fix broken seamless panel caret placement

When the panel is seamless, if the contents of the header is wrapped by
a paragraph HTML tag or header HTML tag, the header will be on the next
line after the caret, rather than be on the same line with the caret:

>
Header content

Therefore, we must manually insert the caret into the header content in
order for everything to stay in the same line, like this:

> Header content
---
 src/Panel.vue | 35 +++++++++++++++++++++++++++++++----
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/Panel.vue b/src/Panel.vue
index 09565078c..5e28ffd99 100644
--- a/src/Panel.vue
+++ b/src/Panel.vue
@@ -201,16 +201,43 @@
         return this.cardType === 'bg-light' || this.cardType === 'bg-white' || this.cardType === 'bg-warning';
       },
       headerContent () {
-        if (this.isSeamless) {
-            return this.caretHtml + ' ' + this.renderedHeader;
-        }
         return this.renderedHeader;
       },
       altContent () {
         return this.alt && md.render(this.alt) || this.renderedHeader;
       },
       renderedHeader () {
-        return md.render(this.header);
+        let htmlRenderedHeader = md.render(this.header).trim();
+
+        if (this.isSeamless) {
+          // insert the caret to the header content
+          let caretAdded = false;
+
+          // if the header content is wrapped by a <p> or any <h1>, <h2>, ...
+          // then it must be inserted inside these HTML tags, otherwise the
+          // header content will not be in the same line as caret
+          const tags = [
+            ['<p>', '</p>'],
+            ['<h1>', '</h1>'],
+            ['<h2>', '</h2>'],
+            ['<h3>', '</h3>'],
+            ['<h4>', '</h4>'],
+            ['<h5>', '</h5>'],
+            ['<h6>', '</h6>']];
+
+          tags.forEach(header => {
+            if (!caretAdded && htmlRenderedHeader.startsWith(header[0]))  {
+              htmlRenderedHeader = jQuery(htmlRenderedHeader).unwrap().prepend(this.caretHtml + ' ')
+                .wrap(header[0] + header[1]).parent().html();
+              caretAdded = true;
+            }
+          });
+
+          if (!caretAdded) {
+            htmlRenderedHeader = this.caretHtml + ' ' + htmlRenderedHeader;
+          }
+        }
+        return htmlRenderedHeader;
       },
       hasSrc () {
         return this.src && this.src.length > 0;