Conflicts with plugins that modify code blocks

[davidolrik]

The obsidian-banner-wrapper div encloses the yaml frontmatter code block, which makes plugins that enhances code blocks break the layout of the note.

An example of a plugin that breaks is Obsidian Code Block Enhancer

I suggest moving the frontmatter up a level, just after the banner wrapper.

[noatpad]

Unfortunately, I don't know if this is possible because of how Obsidian's API works. Basically, the way it works is that when the postprocessor detects when the frontmatter is edited (this.registerMarkdownPostProcessor()), I'm given the frontmatter block to work with (and I add the banner there as a child). But within that postprocessor, the parent element is unavailable to me as it doesn't immediately exist (and this is where we ideally wanna place the banner).

I could be missing something here, but I haven't found a way to place the banner as a sibling of the frontmatter block instead of a child

[davidolrik]

Could you add it as a sibling?

[noatpad]

That's the goal really, but doing it directly with how Obsidian does it yields only a blank space at the top. I found one way that might work, but I still need to test that out

[noatpad]

Yeah, after a bit of messing around, I can't quite get it to work properly. Trying to add the banner as a sibling in any way won't work since Obsidian seems to remove it every time. Going a level higher (which is similar to this plugin's original implementation in 1.0.0) does work in a sense, but the reason I moved away from it is because it involved a lot of manual checks and listeners, & it's bound to have hacky issues down the road.

For the time being, I think plugins that affect the frontmatter block styling would have to be wary about clashing this plugin's styling, and in particular cases, it could be incompatible until there's a way to properly make the banner a sibling to the frontmatter instead of a child of it.

You can kinda mitigate this with the Code Enhancer plugin by hiding the frontmatter and applying a CSS snippet to fix the positioning:

.code-block-wrap.obsidian-banner-wrapper {
	position: initial;
}

But that's basically disabling the Code Enhancer functionality for the frontmatter specifically, which might not be desirable.