r4ai / remark-callout

A remark plugin to add obsidian style callouts to markdown
https://r4ai.github.io/remark-callout/
MIT License
4 stars 1 forks source link

callout title with icons needs another div #133

Closed eikowagenknecht closed 1 month ago

eikowagenknecht commented 1 month ago

Currently, when an icon is added, it is rendered like this:

<blockquote data-callout="quote">
    <div class="callout-title flex flex-row gap-2 items-center">
        <div class="callout-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-quote">
                <path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"/>
                <path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"/>
            </svg>
        </div>Callout with <code>code</code>, <strong>emphasis</strong> and a formula in the title: $\frac{\sqrt{k}}{A \cdot B}$</div>
    <div class="callout-content">
        <p>Callout content with <code>more code</code> and another formula: $\frac{\sqrt{k}}{A \cdot B}$</p>
    </div>
</blockquote>

Now "Callout with ", "code", ", ", "emphasis", "and a formula in the title: $\frac{\sqrt{k}}{A \cdot B}$" are all separate elements, so if I want to use a flexbox to align the icon in the same row as the title, it affects those as well.

Obsidian itself adds another div here (callout-title-inner), like this:

<div class="callout-title">
  <div class="callout-icon"><svg>...</svg></div>
  <div class="callout-title-inner">Callout with <code>code</code>, <strong>emphasis</strong> and a formula in the title: $\frac{\sqrt{k}}{A \cdot B}$</div>
</div>

which can neatly be layouted with flexbox.

r4ai commented 1 month ago

It might be a good idea to create a new options.titleInner where the tagName and properties can be set, similar to options.title, allowing a new div tag to be specified there. Additionally, if option.icon or options.foldIcon is specified, it would be convenient to set {tagName: "div", properties: {dataCalloutTitleInner: true}} as the default value for options.titleInner.

What do you think about adding this option?

I will be able to start working on this after next Tuesday. However, PRs are always welcome at any time.

Thank you for suggesting the new feature.