CSS Changes Not Applied to Edit View

[cicheck]

What I’m trying to do

I want to change both edit view and preview view to:

• Remove spaces between paragraphs
• Add indication at the beginning of paragraphs

In short I want to change appearance of my obsidian to book-like view.

Desired look:

Actual look:

Things I have tried

I ended up with CSS snippet:

.markdown-preview-view p, .markdown-source-view cm-s-obsidian span.cm-paragraph>
    margin-block-start: 0;
    margin-block-end: 0;
}

/* Add an indentation to the beginning of each paragraph */
.markdown-preview-view p, .markdown-source-view cm-s-obsidian span.cm-paragraph>
    text-indent: 2em;
}

However it works only for preview mode.
I will be thankful for any tips on how to apply similar changes in edit view.

[cicheck]

I noticed that I copied cut snippet, here is full version

.markdown-preview-view p, .markdown-source-view cm-s-obsidian span.cm-paragraph p {
    margin-block-start: 0;
    margin-block-end: 0;
}

/* Add an indentation to the beginning of each paragraph */
.markdown-preview-view p, .markdown-source-view cm-s-obsidian span.cm-paragraph p {
    text-indent: 2em;
}

I also tested other CSS classes visible via developer console and tbh I don’t understand why any changes I made vere not reflected in edit view.

[cicheck]

I was able to resolve this issue via below snippet:

/* Give indent to line which follows empty line */
.longform-leaf .cm-content .cm-line:empty + .cm-line,  /* This handles <div class="cm-line"></div> */
.longform-leaf .cm-content .cm-line:has(br) + .cm-line {  /* This handles <div class="cm-line"><br></div> */
    text-indent: 2em;
}


/* Indent the first line in edit mode */
.longform-leaf .cm-content .cm-line:first-child {
    text-indent: 2em;
}


/* Hide lines with just a <br> */
.longform-leaf .cm-content .cm-line:empty,  /* in case there are truly empty divs */
.cm-content .cm-line:not(:last-child) > br:first-child:last-child {
    display: none;
}

/* Show lines with a <br> that follow another line with a <br> */
.longform-leaf .cm-content .cm-line:not(:last-child) > br:first-child:last-child + .cm-line > br:first-child:last-child {
    display: block;
}

Since, as I have learned in edit view, there are no paragraphs (i.e.

tags), I have done some workarounds by CSS selectors. This snippet:

1. Always indents first line.
2. Indents text after paragraph.
3. (Bonus point outside initial question) hides first enter click (removes first line containing only <br> tag)

Since I wanted to restrict these changes to longform plugin I added it’s class to CSS selector.

P.S. For anyone who happens to find this post with a similar issue - I sincerely recommend checking HTML via console (ctrl + shift + I on Linux) and checking the CSS classes of interesting objects as described here.