markdown lists cant be colored by their indentation levels anymore with custom CSS rules, but instead only in first-line, middle-part, last-line

[woodpexer]

Operating system

Linux

Joplin version

3.1.24

Desktop version info

Joplin 3.1.24 (prod, linux)

Client ID: 71882a53c9644ebdb3ccb34da966a9e0
Sync Version: 3
Profile Version: 47
Keychain Supported: No

Revision: d581264

Backup: 1.4.2
Emoji: 1.0.4
Note Tabs: 1.4.0
Rich Markdown: 0.15.1
Search & Replace: 2.2.0

Current behaviour

with update to the CodeMirror 6-based editor, the editor could no longer reference css classes for markdown lists after version 3.0.15, leading to this issue.
Big thanks to @personalizedrefrigerator adding references to list-items with this #11291

previous behavior

Though, the issue I have with this is the changed behavior to previous behavior from version 3.0.15, where list-items where styled depending on their indentation levels.

• that allowed me to use Markdown taking notes in a hierarchical way. meaning I organize my notes in a tiered manner with multi level indentations
  • this allows me to zoom out for a higher-level overview or zoom in for detailed understanding.
  • For example
    • Each paragraph starts with a main statement.
    • to elaborate the main statement further with details, examples, etc i use bullet points which refer to the main statement
    • sub-bullets refer to their direct upper bullets, etc
  • this increases the usability for me very much.

current behavior

Current behavior starting from 3.1.22 is that markdown lists are only styled by first line, last line, and middle part in between first and last line.

I am not saying that this has no legitimate use case differentiating between first and last and in-between lines, but what I am missing is the ability to style my notes, in particular my markdown lists and its list-items, depending on their indentations, like before.

for reproduction: my test case for the new markdown editor

my markdown text in the new editor

normal text: the colors should be consistent, depending on the indentation level, 
and the colors should cycle through the 3 colors (something like: "current indentation level" % 3)
1. ordered list level 1 (should be: red)
	1. ordered list level 2 (should be: orange)
- a) unordered list level 1 (should be: red)
- b) unordered list level 1 (should be: red)
- c) unordered list level 1 (should be: red)
	- a) unordered list level 2 (should be: orange)
	- b) unordered list level 2 (should be: orange)
		1. ordered list level 3 (should be: green)
		2. ordered list level 3 (should be: green)
	- c) unordered list level 2 (should be: orange)
- d) unordered list level 1 (should be: red)
	- a) unordered list level 2 (should be: orange)
	- b) unordered list level 2 (should be: orange)
	- c) unordered list level 2 (should be: orange)
		- a) unordered list level 3 (should be: green)
		- b) unordered list level 3 (should be: green)
		- c) unordered list level 3 (should be: green)
			- a) unordered list level 4 (should be: red) <-- level 4 == level 1 colors
				- a) unordered list level 5 (should be: orange) <-- level 5 == level 2 colors
					- a) unordered list level 6 (should be: green) <-- level 6 == level 3 colors
			- b) unordered list level 4 (should be: red)
			- c) unordered list level 4 (should be: red)
		- d) unordered list level 3 (should be: green)
- e) unordered list level 1 (should be: red)

new editor custom css rules

/* first level ordered list */
.cm-orderedList.cm-regionFirstLine.cm-listItem.cm-line {
	color: red !important;
}
  
/* middle level ordered list */
.cm-orderedList.cm-listItem.cm-line {
    color: orange !important;
}

/* last level ordered list */
.cm-orderedList.cm-regionLastLine.cm-listItem.cm-line {
    color: green !important;
}


/* first level unordered list */
.cm-unorderedList.cm-regionFirstLine.cm-listItem.cm-line {
	color: red !important;
}
  
/* middle level unordered list */
.cm-unorderedList.cm-listItem.cm-line {
    color: orange !important;
}

/* last level unordered list */
.cm-unorderedList.cm-regionLastLine.cm-listItem.cm-line {
    color: green !important;
}

result with current behavior, where it is not possible to style list-items depending on their indentation levels

behavior to restore

adding code mirror class for lines with list items so that they can be referenced in custom CSS, re-enabling styling list-items depending on their indentation levels

Expected behaviour

the expected behavior is the same as the versions until 3.0.15 where list-items of a markdown list where styled according to their indentation levels, allowing my to not only structure my text in a hierarchical manner, but also style it like that supporting my note structure even more

for reproduction: my test case for the legacy editor

my markdown text in the legacy editor

normal text: the colors should be consistent, depending on the indentation level, 
and the colors should cycle through the 3 colors (something like: "current indentation level" % 3)
1. ordered list level 1 (should be: red)
	1. ordered list level 2 (should be: orange)
- a) unordered list level 1 (should be: red)
- b) unordered list level 1 (should be: red)
- c) unordered list level 1 (should be: red)
	- a) unordered list level 2 (should be: orange)
	- b) unordered list level 2 (should be: orange)
		1. ordered list level 3 (should be: green)
		2. ordered list level 3 (should be: green)
	- c) unordered list level 2 (should be: orange)
- d) unordered list level 1 (should be: red)
	- a) unordered list level 2 (should be: orange)
	- b) unordered list level 2 (should be: orange)
	- c) unordered list level 2 (should be: orange)
		- a) unordered list level 3 (should be: green)
		- b) unordered list level 3 (should be: green)
		- c) unordered list level 3 (should be: green)
			- a) unordered list level 4 (should be: red) <-- level 4 == level 1 colors
				- a) unordered list level 5 (should be: orange) <-- level 5 == level 2 colors
					- a) unordered list level 6 (should be: green) <-- level 6 == level 3 colors
			- b) unordered list level 4 (should be: red)
			- c) unordered list level 4 (should be: red)
		- d) unordered list level 3 (should be: green)
- e) unordered list level 1 (should be: red)

legacy custom css rules

/* Lists (Bullet/number/todo) */
.cm-variable-2 {
	color: red !important;
}
.cm-variable-3 {
    color: orange !important;
}
.cm-keyword {
    color: green !important;
}

result with legacy editor, with correct styling list-items depending on their indentation-levels

Logs

No response