feat: optional callout-style rendering for embedded notes

[ZDAVanO]

An alternative rendering mode for sync embeds, allowing them to be displayed as native Obsidian callouts with sticky headers.

Key Changes:

• New Feature: Added a renderAsCallout setting (toggle in UI) to wrap sync embeds in a callout-styled container.

• Rendering Logic: Updated to use Obsidian's MarkdownRenderer. This ensures native look and feel, including dynamic titles and placeholders.

• UX Improvements: Sticky Headers: The callout title (link to file) stays visible while scrolling.

  • Clean UI: Inline titles and alias headers are automatically hidden in callout mode to avoid redundancy.

  • Better Alignment: Added CSS for .sync-embed to handle metadata spacing and stable scrollbars.

Implementation Details:

• Adjusted placeholder replacement logic to work seamlessly with callout containers.

• Added extensive styling for a polished look that integrates well with various themes.

---

Demonstration

[uthvah]

I absolutely love the visual direction here, sticky headers and clickable titles are exactly what this plugin needs for a polished dashboard feel.

However, I'm hesitant to merge the MarkdownRenderer implementation. Wrapping a live CodeMirror instance inside a foldable Markdown callout makes the DOM rendering much heavier.

Instead of wrapping the embed in a generated Markdown callout, what if we just update the CSS and JS of our existing .sync-embed-alias-header to behave exactly like this? We can make our current alias header position: sticky, give it a background, and change the text to be a clickable link to the source file.

This gives us the exact same beautiful UX, but keeps the DOM tree flat and avoids any potential CodeMirror folding glitches.

What do you think about pivoting the PR to upgrade our existing headers rather than using the callout renderer?

[ZDAVanO]

I absolutely love the visual direction here, sticky headers and clickable titles are exactly what this plugin needs for a polished dashboard feel.

However, I'm hesitant to merge the MarkdownRenderer implementation. Wrapping a live CodeMirror instance inside a foldable Markdown callout makes the DOM rendering much heavier.

Instead of wrapping the embed in a generated Markdown callout, what if we just update the CSS and JS of our existing .sync-embed-alias-header to behave exactly like this? We can make our current alias header position: sticky, give it a background, and change the text to be a clickable link to the source file.

This gives us the exact same beautiful UX, but keeps the DOM tree flat and avoids any potential CodeMirror folding glitches.

What do you think about pivoting the PR to upgrade our existing headers rather than using the callout renderer?

I have already pivoted the implementation to exactly what you suggested. Instead of using the callout renderer, I'm now just upgrading our existing headers.
Also added support for curly-brace options, so users can now use ![[Note|Alias{collapse:true}]] to start in a collapsed state, or ![[Note|Alias{callout:true}]] to force this style for specific embeds.

(Removed additional styles that do not affect the appearance of sticky headers)