Fix empty task caret alignment

Author: ChristianChiarulli

app/src/features/editor/extensions/list-advanced-rendering.test.ts

@@ -208,4 +208,24 @@ describe("Advanced list rendering", () => {
 
     view.destroy();
   });
+
+  it("adds an invisible baseline placeholder for empty task lines only", async () => {
+    const { view } = createView(["- [ ] ", "- [ ] Task item"].join("\n"));
+
+    await flush();
+
+    const taskLines = [
+      ...view.dom.querySelectorAll<HTMLElement>(".cm-line.cm-md-task-list"),
+    ];
+    expect(taskLines).toHaveLength(2);
+    expect(
+      taskLines[0]?.querySelector(".cm-md-task-empty-placeholder"),
+    ).not.toBeNull();
+    expect(
+      taskLines[1]?.querySelector(".cm-md-task-empty-placeholder"),
+    ).toBeNull();
+    expect(taskLines[1]?.textContent).toBe("Task item");
+
+    view.destroy();
+  });
 });

app/src/features/editor/extensions/markdown-decorations/lists.ts

@@ -97,6 +97,24 @@ class TaskMarkerWidget extends WidgetType {
   }
 }
 
+class EmptyTaskPlaceholderWidget extends WidgetType {
+  override eq(other: WidgetType): boolean {
+    return other instanceof EmptyTaskPlaceholderWidget;
+  }
+
+  override ignoreEvent(): boolean {
+    return true;
+  }
+
+  override toDOM(): HTMLElement {
+    const placeholder = document.createElement("span");
+    placeholder.className = "cm-md-task-empty-placeholder";
+    placeholder.setAttribute("aria-hidden", "true");
+    placeholder.textContent = "\u200B";
+    return placeholder;
+  }
+}
+
 type ListMarkerNodeRef = Pick<SyntaxNodeRef, "from" | "to" | "type" | "node">;
 type DocLine = ReturnType<EditorState["doc"]["lineAt"]>;
 
@@ -1399,6 +1417,15 @@ function addMarkerDecorations(
       );
       atomicRanges.push(taskMarkerDecoration.range(taskStart, taskEnd + 1));
 
+      if (taskEnd + 1 >= line.to) {
+        decorationRanges.push(
+          Decoration.widget({
+            side: -1,
+            widget: new EmptyTaskPlaceholderWidget(),
+          }).range(line.to),
+        );
+      }
+
       if (checked && taskEnd + 1 < line.to) {
         decorationRanges.push(
           Decoration.mark({
@@ -1894,6 +1921,15 @@ const listTheme = EditorView.theme({
     justifyContent: "center",
     width: "var(--cm-md-list-marker-width)",
   },
+  ".cm-md-task-empty-placeholder": {
+    display: "inline",
+    font: "inherit",
+    lineHeight: "inherit",
+    opacity: "0",
+    pointerEvents: "none",
+    userSelect: "none",
+    verticalAlign: "baseline",
+  },
   ".cm-md-task-marker-box": {
     backgroundColor: "var(--background)",
     border: "1px solid var(--editor-checkbox-border)",