feat(editor): indent lists by the marker above

Tab always added two spaces, so a bullet under `1.` never nested.
Match Inkdrop: indent by the marker width, renumber, color marks.

Author: tomymaritano

apps/desktop/src/renderer/components/MarkdownEditor.tsx

@@ -53,6 +53,7 @@ import {
   wrapSelectionWithUrl,
   continueMarkupKeymap,
   editorLineKeymap,
+  listIndentKeymap,
 } from '@dripnex/commands';
 import {
   createWikilinkHighlighter,
@@ -77,6 +78,7 @@ import {
 } from '../utils/isMissingWikilink';
 import { notebookStyleProps } from '../utils/notebookStyle';
 import { createEditorTheme, markdownHighlighting, SCROLL_PAST_END_PADDING } from './editorTheme.js';
+import { listMarkHighlighter } from './editor/listMarkDecorations';
 import { fenceLanguageCompletions, slashCompletions } from './editor/slashCompletions';
 import { UrlPastePicker } from './editor/UrlPastePicker';
 import styles from './MarkdownEditor.module.css';
@@ -411,6 +413,7 @@ export const MarkdownEditor = forwardRef<MarkdownEditorHandle, MarkdownEditorPro
           ...searchKeymap,
           ...foldKeymap,
           ...historyKeymap,
+          listIndentKeymap,
           indentWithTab,
         ]),
 
@@ -425,6 +428,7 @@ export const MarkdownEditor = forwardRef<MarkdownEditorHandle, MarkdownEditorPro
 
         // Syntax highlighting
         syntaxHighlighting(markdownHighlighting),
+        listMarkHighlighter,
 
         // Wikilink [[note]] highlighting
         wikilinkHighlightCompartment.of(createWikilinkHighlighter(null)),

apps/desktop/src/renderer/components/editor/MarkdownPreview.module.css

@@ -264,6 +264,30 @@
   margin: 0.25em 0;
 }
 
+.markdown-preview li::marker {
+  color: var(--mde-preview-list-marker-color);
+}
+
+.markdown-preview li li::marker {
+  color: var(--mde-preview-list-marker-2-color);
+}
+
+.markdown-preview li li li::marker {
+  color: var(--mde-preview-list-marker-3-color);
+}
+
+.markdown-preview li li li li::marker {
+  color: var(--mde-preview-list-marker-color);
+}
+
+.markdown-preview li li li li li::marker {
+  color: var(--mde-preview-list-marker-2-color);
+}
+
+.markdown-preview li li li li li li::marker {
+  color: var(--mde-preview-list-marker-3-color);
+}
+
 /* Task lists (GFM) */
 .markdown-preview ul:global(.contains-task-list) {
   list-style: none;

apps/desktop/src/renderer/components/editor/__tests__/listMarkDecorations.test.ts

@@ -0,0 +1,39 @@
+import { describe, it, expect } from 'vitest';
+import { EditorState } from '@codemirror/state';
+import { markdown } from '@codemirror/lang-markdown';
+import { syntaxTree } from '@codemirror/language';
+import { listMarkLevelClass } from '../listMarkDecorations';
+
+describe('listMarkLevelClass', () => {
+  it('cycles every three nesting levels', () => {
+    expect(listMarkLevelClass(1)).toBe('md-list-mark');
+    expect(listMarkLevelClass(2)).toBe('md-list-mark md-list-mark-2');
+    expect(listMarkLevelClass(3)).toBe('md-list-mark md-list-mark-3');
+    expect(listMarkLevelClass(4)).toBe('md-list-mark');
+    expect(listMarkLevelClass(5)).toBe('md-list-mark md-list-mark-2');
+  });
+});
+
+describe('lezer markdown list marks', () => {
+  it('exposes ListMark nodes at each nesting level', () => {
+    const state = EditorState.create({
+      doc: '- a\n  - b\n    - c',
+      extensions: [markdown()],
+    });
+    const marks: { from: number; to: number; depth: number }[] = [];
+    syntaxTree(state).iterate({
+      enter(node) {
+        if (node.name !== 'ListMark') return;
+        let depth = 0;
+        let parent = node.node.parent;
+        while (parent) {
+          if (parent.name === 'ListItem') depth += 1;
+          parent = parent.parent;
+        }
+        marks.push({ from: node.from, to: node.to, depth });
+      },
+    });
+    expect(marks.map(m => m.depth)).toEqual([1, 2, 3]);
+    expect(state.doc.sliceString(marks[0]!.from, marks[0]!.to)).toMatch(/-/);
+  });
+});

apps/desktop/src/renderer/components/editor/listMarkDecorations.ts

@@ -0,0 +1,55 @@
+/**
+ * Color Markdown list markers by nesting depth.
+ *
+ * Level 1 uses `--md-list-mark-color`; levels 2 and 3 use the matching
+ * tokens; deeper levels cycle. Only the marker is colored.
+ */
+
+import { syntaxTree } from '@codemirror/language';
+import { RangeSetBuilder } from '@codemirror/state';
+import { Decoration, ViewPlugin, type EditorView, type ViewUpdate } from '@codemirror/view';
+
+export function listMarkLevelClass(depth: number): string {
+  const cycle = ((Math.max(1, depth) - 1) % 3) + 1;
+  if (cycle === 1) return 'md-list-mark';
+  return `md-list-mark md-list-mark-${cycle}`;
+}
+
+function listMarkDecorations(view: EditorView) {
+  const builder = new RangeSetBuilder<Decoration>();
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree(view.state).iterate({
+      from,
+      to,
+      enter(node) {
+        if (node.name !== 'ListMark') return;
+        let depth = 0;
+        let parent = node.node.parent;
+        while (parent) {
+          if (parent.name === 'ListItem') depth += 1;
+          parent = parent.parent;
+        }
+        if (depth < 1) depth = 1;
+        builder.add(node.from, node.to, Decoration.mark({ class: listMarkLevelClass(depth) }));
+      },
+    });
+  }
+  return builder.finish();
+}
+
+export const listMarkHighlighter = ViewPlugin.fromClass(
+  class {
+    decorations = Decoration.none;
+
+    constructor(view: EditorView) {
+      this.decorations = listMarkDecorations(view);
+    }
+
+    update(update: ViewUpdate) {
+      if (update.docChanged || update.viewportChanged) {
+        this.decorations = listMarkDecorations(update.view);
+      }
+    }
+  },
+  { decorations: value => value.decorations }
+);

apps/desktop/src/renderer/components/editorTheme.ts

@@ -69,6 +69,15 @@ export function createEditorTheme(fontSize: number, fontFamily: string, lineHeig
     '.cm-line': {
       padding: '0 4px',
     },
+    '.md-list-mark': {
+      color: 'var(--md-list-mark-color, var(--cm-list))',
+    },
+    '.md-list-mark-2': {
+      color: 'var(--md-list-mark-2-color)',
+    },
+    '.md-list-mark-3': {
+      color: 'var(--md-list-mark-3-color)',
+    },
     '.cm-nes-ghost': {
       opacity: '0.45',
       pointerEvents: 'none',
@@ -145,8 +154,7 @@ export const markdownHighlighting = HighlightStyle.define([
   { tag: tags.link, color: 'var(--cm-link)', textDecoration: 'underline' },
   { tag: tags.url, color: 'var(--cm-link)' },
 
-  // Lists
-  { tag: tags.list, color: 'var(--cm-list)' },
+  // Lists — marker color comes from listMarkDecorations (.md-list-mark*)
 
   // Quotes
   {

apps/desktop/src/renderer/ui/tokens/tokens.css

@@ -121,6 +121,15 @@
   --chrome-header-padding: 8px 10px;
   --chrome-traffic-inset: 72px;
 
+  /* ── Editor list marks (Inkdrop --md-list-mark-*) ─────────────────────────── */
+  --cm-list: var(--accent);
+  --md-list-mark-color: var(--accent);
+  --md-list-mark-2-color: #60a5fa;
+  --md-list-mark-3-color: #c4b5fd;
+  --mde-preview-list-marker-color: var(--text-primary);
+  --mde-preview-list-marker-2-color: var(--text-primary);
+  --mde-preview-list-marker-3-color: var(--text-primary);
+
   /* ── Radii ────────────────────────────────────────────────────────────────── */
   --radius-sm: 4px;
   --radius-md: 6px;
@@ -209,6 +218,14 @@
   --status-completed: #16a34a;
   --status-dropped: #e11d48;
 
+  --cm-list: var(--accent);
+  --md-list-mark-color: var(--accent);
+  --md-list-mark-2-color: #2563eb;
+  --md-list-mark-3-color: #7c3aed;
+  --mde-preview-list-marker-color: var(--text-primary);
+  --mde-preview-list-marker-2-color: var(--text-primary);
+  --mde-preview-list-marker-3-color: var(--text-primary);
+
   --glass-bg: rgba(247, 246, 243, 0.88);
   --glass-bg-fallback: rgba(247, 246, 243, 0.96);
   --glass-bg-menu: rgba(255, 255, 255, 0.94);

packages/commands/src/index.ts

@@ -45,6 +45,16 @@ export {
   editorLineKeymap,
 } from './markdown/lineCommands.js';
 
+export {
+  parseListLine,
+  formatListLine,
+  indentList,
+  indentListItem,
+  dedentListItem,
+  listIndentKeymap,
+} from './markdown/listIndent.js';
+export type { ParsedListLine, ListKind } from './markdown/listIndent.js';
+
 export {
   SLASH_ITEMS,
   FENCE_LANGUAGES,