feat: add `options.titleInner` to specify the HTML element that wraps the text of the callout title

r4ai commented 1 month ago

close #133

Add options.titleInner to specify the HTML element that wraps the text of the callout title.

This option is set by default as follows:

If an icon exists in the title due to options.icon or options.foldIcon, the text will be wrapped in an element with {tagName: "div", properties: {dataCalloutTitleInner: true}}.
If there is no icon, the text will be rendered as is without wrapping.

{
  titleInner: (callout, options) =>
    options.icon(callout) == null && options.foldIcon(callout) == null
      ? undefined
      : {
          tagName: "div",
          properties: {
            dataCalloutTitleInner: true,
          },
        },
  // other default options...
}

Following is an example output of callout with icon:

<div data-callout data-callout-type="warn">
    <div data-callout-title>
        <div data-callout-icon><svg class="lucide-circle-alert" 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">
                <circle cx="12" cy="12" r="10"></circle>
                <line x1="12" x2="12" y1="8" y2="12"></line>
                <line x1="12" x2="12.01" y1="16" y2="16"></line>
            </svg></div>
        <div data-callout-title-inner>title here</div>
    </div>
    <div data-callout-body>
        <p>body here</p>
    </div>
</div>