Panel: Change header markdown rendering to non-inline

[yamgent]

What is the purpose of this pull request? (put "X" next to an item, remove the rest)

• [X] Bug fix

What is the rationale for this request?
Sometimes, panel uses Markdown headings. However, due to changes in #74, the Markdown rendering technique used is inline, and inline text normally do not use headings, so they are not parsed, and as a result they are broken.

What changes did you make? (Give an overview)

• Switch the rendering from inline to non-inline.
• Fix the seamless panel bug, which was the reason why it was changed to inline in the first place.

Provide some example code that this change will affect:

<panel header="# Some headings">
</panel>

Before	After

Is there anything you'd like reviewers to focus on?
NA

Testing instructions:

1. Build bootstrap, copy vue-strap.min.js to MarkBind repository.
2. Run markbind serve docs and ensure that no panels are broken in Component Reference.
3. Also try the following index.md:

<panel type="seamless" header="Normal">
</panel>

<panel type="seamless" header="# Heading 1">
</panel>

<panel type="seamless" header="## Heading 2">
</panel>

<panel type="seamless" header="### Heading 3">
</panel>

<panel type="seamless" header="#### Heading 4">
</panel>

<panel type="seamless" header="##### Heading 5">
</panel>

<panel type="seamless" header="###### Heading 6">
</panel>

<panel header="Normal panel">
</panel>

<panel header="# Normal panel 2">
</panel>

<panel type="seamless">
  <p slot="header" class="card-title">
    <i><strong>
      <span style="color:#FF0000;">R  </span>
      <span style="color:#FF7F00;">A  </span>
      <span style="color:#FFFF00;">I  </span>
      <span style="color:#00FF00;">N  </span>
      <span style="color:#0000FF;">B  </span>
      <span style="color:#4B0082;">O  </span>
      <span style="color:#9400D3;">W  </span>
      Custom slot
    </strong></i>
  </p>
</panel>

[yamgent]

Update:

• Ready for review.

[Chng-Zhi-Xuan]

Algorithm for inserting the chevron HTML within wrapped headerContent

Edit1: changed isHeaderTag regex

function isHeaderTag(s) {
  if (/\B(<h[1-6]{1}>)\B/g.test(s)) {
    return 4;
  }
  return 0;
}

const chevron = '<span class="something"></span>' + ' ';
const mdRenderedText = '<h1>hello <h1>hello</h1> <mark>dude</mark></h1>';
const tagRegex = /<[a-z1-6]*>/g;

const splitArray = mdRenderedText.replace(tagRegex, '$& ').split(' ');
const lastIndex = isHeaderTag(splitArray[0]);

let result = '';

if (lastIndex !== 0) {
  result = mdRenderedText.slice(0, lastIndex) + chevron + mdRenderedText.slice(lastIndex);
} else {
  result = chevron + mdRenderedText;
}

console.log(result);

[yamgent]

Update:

• Fixed caret placement for seamless.
• Updated original post to include another test case (see step 3 of "Testing Instructions").

[Chng-Zhi-Xuan]

Nice 👍, caret remains inline and is able to toggle correctly.

However, I found a style problem:

The default Bootstrap line-height of 1.2 for headers is too low and causes highlighted text to block text above it.

Recommend to override CSS for div.card-title > h1 to h6 { ... }

[damithc]

The default Bootstrap line-height of 1.2 for headers is too low and causes highlighted text to block text above it.

Can we reduce the height of highlighting?

[yamgent]

Can we reduce the height of highlighting?

We can try that, in fact that will be the best solution.

However, the highlighting issue is already present even before the presence of the seamless bug, so it should be solved in a separate PR, not here.

Will be merging this PR today before the release, because this is a critical PR, seamless panel header rendering will break otherwise.

[damithc]

However, the highlighting issue is already present even before the presence of the seamless bug, so it should be solved in a separate PR, not here.

Will be merging this PR today before the release, because this is a critical PR, seamless panel header rendering will break otherwise.

Sounds good.