Unexpected behaviours of heading indexing in panels

[ang-zeyu]

Tell us about your environment

• MarkBind Version: 2.8.0

What did you do? Please include the actual source code causing the issue.

Is the current behaviour of header indexing in panels intended?

When there is no header specified, and there is a slot="header" specified with some level of markdown heading inside, there are two cases:

• expanded is specified : the heading is indexed, as expected, but there are now two identical ids in the dom (one for the cardContainer, the other from the slot. ( not that its really an issue ) ( point 1 )
• expanded is not specified: the slot heading is not indexed ( This leads to point 2 below ), and there are still two identical ids.

On the other hand, if a header is specified for the panel, then the code to search for another header in the headerWrapper will not execute ( second branch in mounted() ).

mounted() in PanelBase.js

...
} else if (this.$refs.headerWrapper.innerHTML) {
 const header = jQuery(this.$refs.headerWrapper.innerHTML).wrap('<div</div>').parent().find(':header');
 if (header.length > 0) {
 this.$refs.cardContainer.setAttribute('id', header[0].id);
 }
}

• If said header is not a md header ( ### ... ), then the code will not execute ( with no implications, as far as I can see ) ( point 1 )
• The behaviour for the slot header is similar to above, barring the duplicate id ( since the second branch in mounted() is no longer executed ).
  • if unexpanded, the heading will not be indexed
  • if expanded is specified, and the header="..." is a valid md header, then the slot header, along with the overwritten header are indexed. ( point 3 )

What did you expect to happen?

1. It seems that the second branch is unnecessary, and it would only result in a duplicate id currently. ( I might be missing something )

Sample code producing the issue ( no header attribute, so the second branch is executed ):

<panel type="info">
 <div slot="header">
 
 # some header
 </div>
 .........
</panel>

Result (duplicate ids) (removing the second branch in mounted() only removes the id from the cardContainer, which dosen't break the anchor since there is still one in the heading.

2. The slot heading is not indexed when expanded is not specified.

Result from the same code for point 1: ( adding expanded resolves it )

3. The overwritten header is indexed along with the slot header. Should the hidden header="..." be indexed in this case?

Sample code producing the issue: ( only the slot header is displayed since it takes priority, but both are indexed as seen in the second screenshot )

<panel type="info" header="# another header" expanded>
 <div slot="header">
 
 # some header
 </div>
 .........
</panel>

[yamgent]

Thanks for looking into this.

1. It seems that the second branch is unnecessary, and it would only result in a duplicate id currently. ( I might be missing something )

Generally, we use IDs for two different purposes:

1. Anchor jumping (for both scenario: (1) When the page first loads, but URL already has an anchor, and (2) when jumping within the same page).
2. Search indexing.

The reason why we had these complex duplicated IDs is to ensure that both of those behaviours mentioned above does not break. Correct me if I am wrong, but not putting the ID in the container span might result in the anchor jump jumping to a "wrong location" (i.e. it appears to cut off). In order to ensure that the jumping is consistent regardless of whether a custom header is used, we opt to put it in the container span.

The ID generated for the heading is done by markdown-it, which is generated live when the visitor visits the website, hence the duplicated IDs. If you want to clean it up, feel free to do so, but do make sure that the ID is always correctly generated regardless of how the header is being written.

1. The slot heading is not indexed when expanded is not specified.

This is an undesirable behaviour and should be fixed.

1. The overwritten header is indexed along with the slot header. Should the hidden header="..." be indexed in this case?

The "hidden" header should not be indexed to avoid confusion.

[ang-zeyu]

not putting the ID in the container span might result in the anchor jump jumping to a "wrong location" (i.e. it appears to cut off). In order to ensure that the jumping is consistent regardless of whether a custom header is used, we opt to put it in the container span.

Indeed, didn't realise ids no longer work with anchors when they have display: none. Thanks!

[ang-zeyu]

I noticed the header attribute is given priority over the slot header when the panel is minimized to inline form.

e.g.

<panel header="abc" minimized>
<div slot="header>
def
</div>
</panel>

Is this intentional as well?

Relavant code:

altContent() {
 return (this.alt && md.render(this.alt)) || md.render(this.header);
},

<template v-if="altContent">
 <div v-html="altContent"></div>
</template>
<template v-else>
 <slot name="header">
 <div v-html="altContent"></div>
 </slot>
</template>

[yamgent]

Is this intentional as well?

We didn't include a design for allowing customized appearances for minimized panels, so yes it is intentional.