Tighten markdown list spacing

packages/app/src/utils/markdown-list.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { getMarkdownListMarker } from "./markdown-list";
+import { getMarkdownListMarker, getMarkdownListSpacing } from "./markdown-list";
 
 describe("getMarkdownListMarker", () => {
   it("returns a bullet marker for unordered list items", () => {
@@ -39,3 +39,49 @@ describe("getMarkdownListMarker", () => {
     });
   });
 });
+
+describe("getMarkdownListSpacing", () => {
+  it("keeps top-level list spacing as a section boundary", () => {
+    const paragraph = { type: "paragraph" };
+    const list = { type: "bullet_list" };
+    const body = { type: "body", children: [list, paragraph] };
+
+    expect(getMarkdownListSpacing(list, [body])).toEqual({
+      marginTop: 4,
+      marginBottom: 16,
+    });
+  });
+
+  it("does not add bottom spacing after a list at the end of a markdown block", () => {
+    const list = { type: "bullet_list" };
+    const body = { type: "body", children: [list] };
+
+    expect(getMarkdownListSpacing(list, [body])).toEqual({
+      marginTop: 4,
+      marginBottom: 0,
+    });
+  });
+
+  it("uses a smaller gap between adjacent top-level lists", () => {
+    const list = { type: "bullet_list" };
+    const body = { type: "body", children: [list, { type: "ordered_list" }] };
+
+    expect(getMarkdownListSpacing(list, [body])).toEqual({
+      marginTop: 4,
+      marginBottom: 8,
+    });
+  });
+
+  it("does not add section spacing after a nested list", () => {
+    expect(
+      getMarkdownListSpacing({ type: "bullet_list" }, [
+        { type: "list_item" },
+        { type: "bullet_list" },
+        { type: "body" },
+      ]),
+    ).toEqual({
+      marginTop: 4,
+      marginBottom: 0,
+    });
+  });
+});

packages/app/src/utils/markdown-list.ts

@@ -1,3 +1,5 @@
+import { SPACING } from "@/styles/theme";
+
 interface MarkdownNode {
   type?: string;
   index?: number;
@@ -10,6 +12,11 @@ interface MarkdownNode {
 
 const LIST_BULLET = "•";
 const DEFAULT_ORDERED_LIST_MARKUP = ".";
+const MARKDOWN_LIST_MARGIN_TOP = SPACING[1];
+const MARKDOWN_LIST_MARGIN_BOTTOM_TO_PROSE = SPACING[4];
+const MARKDOWN_LIST_MARGIN_BOTTOM_TO_LIST = SPACING[2];
+const MARKDOWN_NESTED_LIST_MARGIN_BOTTOM = 0;
+const MARKDOWN_TERMINAL_LIST_MARGIN_BOTTOM = 0;
 
 function toParentNodes(parent: unknown): MarkdownNode[] {
   if (Array.isArray(parent)) {
@@ -76,6 +83,41 @@ export function getMarkdownNextSiblingType(
   return undefined;
 }
 
+function isListType(type: string | undefined): boolean {
+  return type === "bullet_list" || type === "ordered_list";
+}
+
+function hasListItemAncestor(parent: unknown): boolean {
+  return toParentNodes(parent).some((ancestor) => ancestor?.type === "list_item");
+}
+
+export function getMarkdownListSpacing(
+  node: MarkdownNode,
+  parent: unknown,
+): { marginTop: number; marginBottom: number } {
+  if (hasListItemAncestor(parent)) {
+    return {
+      marginTop: MARKDOWN_LIST_MARGIN_TOP,
+      marginBottom: MARKDOWN_NESTED_LIST_MARGIN_BOTTOM,
+    };
+  }
+
+  const nextType = getMarkdownNextSiblingType(node, parent);
+  if (!nextType) {
+    return {
+      marginTop: MARKDOWN_LIST_MARGIN_TOP,
+      marginBottom: MARKDOWN_TERMINAL_LIST_MARGIN_BOTTOM,
+    };
+  }
+
+  return {
+    marginTop: MARKDOWN_LIST_MARGIN_TOP,
+    marginBottom: isListType(nextType)
+      ? MARKDOWN_LIST_MARGIN_BOTTOM_TO_LIST
+      : MARKDOWN_LIST_MARGIN_BOTTOM_TO_PROSE,
+  };
+}
+
 export function getMarkdownListMarker(
   node: MarkdownNode,
   parent: unknown,