Fix heading search highlight rendering

Author: ChristianChiarulli

app/src/features/editor/extensions/markdown-decorations/builders/headings.ts

@@ -19,11 +19,13 @@ const HEADING_LEVEL: Record<string, number> = {
 
 const headingMarkCache = new Map<string, Decoration>();
 
-function getHeadingMark(level: number): Decoration {
-  const key = `h${level}`;
+function getHeadingMark(level: number, inline = false): Decoration {
+  const key = `${inline ? "inline-" : ""}h${level}`;
   let deco = headingMarkCache.get(key);
   if (!deco) {
-    deco = Decoration.mark({ class: `cm-md-heading cm-md-h${level}` });
+    deco = Decoration.mark({
+      class: `cm-md-heading cm-md-h${level}${inline ? " cm-md-heading-inline" : ""}`,
+    });
     headingMarkCache.set(key, deco);
   }
   return deco;
@@ -47,6 +49,7 @@ function handleATXHeading(
   resolved: SyntaxNode,
   level: number,
   onCursor: boolean,
+  inlineHeading: boolean,
   out: DecorationEntry[],
 ): void {
   const marks = resolved.getChildren("HeaderMark");
@@ -76,7 +79,7 @@ function handleATXHeading(
   out.push({
     from: node.from,
     to: node.to,
-    decoration: getHeadingMark(level),
+    decoration: getHeadingMark(level, inlineHeading),
   });
 }
 
@@ -92,8 +95,8 @@ export function handleHeading(
 
   const resolved = node.node;
   const onCursor = overlapsAny(node.from, node.to, ctx.cursorLines);
-  const revealSyntax =
-    onCursor || overlapsAny(node.from, node.to, ctx.searchMatches);
+  const revealedBySearch = overlapsAny(node.from, node.to, ctx.searchMatches);
+  const revealSyntax = onCursor || revealedBySearch;
 
   if (!node.name.startsWith("ATX")) {
     return;
@@ -107,5 +110,5 @@ export function handleHeading(
     return;
   }
 
-  handleATXHeading(node, resolved, level, revealSyntax, out);
+  handleATXHeading(node, resolved, level, revealSyntax, revealedBySearch, out);
 }

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

@@ -46,6 +46,15 @@ const markdownDecorationsTheme = EditorView.baseTheme({
   ".cm-md-h6": {
     paddingBottom: "0rem",
   },
+  ".cm-md-heading-inline": {
+    display: "inline",
+    verticalAlign: "baseline",
+    width: "auto",
+  },
+  ".cm-md-heading-inline.cm-md-h1, .cm-md-heading-inline.cm-md-h2, .cm-md-heading-inline.cm-md-h3, .cm-md-heading-inline.cm-md-h4, .cm-md-heading-inline.cm-md-h5, .cm-md-heading-inline.cm-md-h6":
+    {
+      paddingBottom: "0",
+    },
   ".cm-md-strong": {
     fontWeight: "700",
   },

app/src/features/editor/extensions/search-rendering.test.ts

@@ -125,7 +125,20 @@ describe("CodeMirror search rendering", () => {
 
     expect(view.dom.querySelector(".cm-md-heading")).not.toBeNull();
     expect(view.dom.querySelector(".cm-md-h1")).not.toBeNull();
-    expect(view.dom.querySelector(".cm-searchMatch")).not.toBeNull();
+    expect(view.dom.querySelector(".cm-searchMatch")?.textContent).toBe("l");
+    expect(view.dom.textContent).toContain("# lorem ipsum");
+
+    view.destroy();
+  });
+
+  it("keeps heading prefix matches inline instead of wrapping the heading fragment", async () => {
+    const { view } = createView("# lorem ipsum", "#");
+
+    await flush();
+
+    expect(view.dom.querySelector(".cm-md-heading")).not.toBeNull();
+    expect(view.dom.querySelector(".cm-md-heading-inline")).not.toBeNull();
+    expect(view.dom.querySelector(".cm-searchMatch")?.textContent).toBe("#");
     expect(view.dom.textContent).toContain("# lorem ipsum");
 
     view.destroy();