Better method of targeting newlines in empty lines

app/utils/code-mirror-highlight-newlines.ts

@@ -1,11 +1,27 @@
-import { EditorView, type DecorationSet, type ViewUpdate } from '@codemirror/view';
-import { Decoration, ViewPlugin, WidgetType } from '@codemirror/view';
+import type { Line } from '@codemirror/state';
+import type { DecorationSet, ViewUpdate } from '@codemirror/view';
+import { Decoration, EditorView, ViewPlugin, WidgetType } from '@codemirror/view';
 
 class NewlineWidget extends WidgetType {
+  line: Line;
+  markerSymbol: string;
+
+  constructor({ line, markerSymbol = '↵' }: { line: Line; markerSymbol?: string }) {
+    super();
+    this.line = line;
+    this.markerSymbol = markerSymbol;
+  }
+
   toDOM() {
     const span = document.createElement('span');
+
+    span.textContent = this.markerSymbol;
+
     span.className = 'cm-newline';
-    span.textContent = '↵';
+
+    if (this.line.length === 0) {
+      span.className += ' cm-newline-empty';
+    }
 
     return span;
   }
@@ -16,8 +32,8 @@ const baseTheme = EditorView.baseTheme({
     color: 'currentColor',
     pointerEvents: 'none',
     opacity: '0.5',
-    '&:not(:only-of-type)': {
-      paddingLeft: '5px',
+    '&:not(.cm-newline-empty)': {
+      paddingLeft: '3px',
     },
   },
 });
@@ -39,9 +55,9 @@ function highlightNewlines() {
               const line = view.state.doc.lineAt(pos);
 
               if (line.length === 0) {
-                widgets.push(Decoration.widget({ widget: new NewlineWidget(), side: 1 }).range(pos));
+                widgets.push(Decoration.widget({ widget: new NewlineWidget({ line }), side: 1 }).range(pos));
               } else {
-                widgets.push(Decoration.widget({ widget: new NewlineWidget(), side: 1 }).range(line.to));
+                widgets.push(Decoration.widget({ widget: new NewlineWidget({ line }), side: 1 }).range(line.to));
               }
 
               pos = line.to + 1;