🐞 Alignments don't work in live preview

Check for existing bug reports before submitting.

[X] I searched for existing Bug Reports and found no similar reports.

Expected Behavior

First off, love this plug it so much and am really glad it's exists! Also, apologies if this isn't a bug and just isn't possible with this plug in or something.

I would expect that if I apply a class or Id that I then style with css for the text to be aligned a specific way that it would show that alignment in editing/live preview mode.

For example:

# Header{.ma-center-blue}

[class^="ma-"][class*="center"] { text-align: center;}
[class^="ma-"][class*="center"] { color: blue;}

I'd expect the header to be blue and centered in both reading and editing/live preview mode.

Current behaviour

Currently, giving something a color works in both reading and editing/live preview mode, but text alignment does not. The alignment shows up in reading mode, but not editing/live preview. From my inspection of the css, the attributes are applying too nested within the elements that editing/live preview is using and while they aren't being overwritten, they aren't applying to the element that actually needs to be aligned in editing/live preview mode. I'm able to work around it, but it would be much easier if I could just {.align} things.

Reproduction

Create a note, apply a class via this plugin, style the class to be aligned to the center, view it in editing/live preview vs reading mode.

Which Operating Systems are you using?

[ ] Android
[ ] iPhone/iPad
[ ] Linux
[ ] macOS
[X] Windows

Obsidian Version Check

1.67

Plugin Version

1.1.2

Confirmation

[X] I have disabled all other plugins and the issue still persists.

Possible solution

I don't have a solution suggestion exactly, but I wanted to include how I'm working around this issue in case it's useful.

To work around the issue, I create my class with the alignment, then I have to add some additional css to select the parent element that the child element with the class is in so it will also affect editing/live preview , so for example:

/*----Markdown Attributes Center Text----*/  
[class^="ma-"][class*="center"] { text-align:center; }  

/*Headers*/  
.HyperMD-header:has([class^="ma-"][class*="center"]) {
    text-align:center;}

The second part however, needs to be done for every specific type of parent element as far as I've been able to figure out. If nothing else, perhaps you could add instruction about this issue with a list of all the relevant parent level css selectors for editing view in the documentation?

javalent / markdown-attributes