Desktop: Custom CSS: Add cm-listItem class to lines with list items, don't add region start/end markers for items that are always single-line (#11291)

packages/editor/CodeMirror/markdown/decoratorExtension.ts

@@ -84,6 +84,18 @@ const tableDelimiterDecoration = Decoration.line({
 	attributes: { class: 'cm-tableDelimiter' },
 });
 
+const orderedListDecoration = Decoration.line({
+	attributes: { class: 'cm-orderedList' },
+});
+
+const unorderedListDecoration = Decoration.line({
+	attributes: { class: 'cm-unorderedList' },
+});
+
+const listItemDecoration = Decoration.line({
+	attributes: { class: 'cm-listItem' },
+});
+
 const horizontalRuleDecoration = Decoration.mark({
 	attributes: { class: 'cm-hr' },
 });
@@ -97,6 +109,10 @@ const nodeNameToLineDecoration: Record<string, Decoration> = {
 	'CodeBlock': codeBlockDecoration,
 	'BlockMath': mathBlockDecoration,
 	'Blockquote': blockQuoteDecoration,
+	'OrderedList': orderedListDecoration,
+	'BulletList': unorderedListDecoration,
+
+	'ListItem': listItemDecoration,
 
 	'SetextHeading1': header1LineDecoration,
 	'ATXHeading1': header1LineDecoration,
@@ -122,6 +138,14 @@ const nodeNameToMarkDecoration: Record<string, Decoration> = {
 	'TaskMarker': taskMarkerDecoration,
 };
 
+const multilineNodes = {
+	'FencedCode': true,
+	'CodeBlock': true,
+	'BlockMath': true,
+	'Blockquote': true,
+	'OrderedList': true,
+	'BulletList': true,
+};
 
 type DecorationDescription = { pos: number; length: number; decoration: Decoration };
 
@@ -179,8 +203,8 @@ const computeDecorations = (view: EditorView) => {
 					addDecorationToRange(viewFrom, viewTo, decoration);
 				}
 
-				// Only block decorations will have differing first and last lines
-				if (blockDecorated) {
+				// Only certain block decorations will have differing first and last lines
+				if (blockDecorated && multilineNodes.hasOwnProperty(node.name)) {
 					// Allow different styles for the first, last lines in a block.
 					if (viewFrom === node.from) {
 						addDecorationToLines(viewFrom, viewFrom, regionStartDecoration);