CSS Changes Not Applied to Edit View

Custom CSS & Theme Design
5

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.