fix(editor): keep heading controls outside text flow

Author: murongg

packages/app/src/components/CodeMirrorPaperSurface.test.tsx

@@ -286,6 +286,41 @@ describe("CodeMirrorPaperSurface", () => {
     expect(screen.getByRole("menuitem", { name: "Table" })).toBeInTheDocument();
   });
 
+  it("keeps block controls before the heading-level control while editing", () => {
+    const onEditorReady = vi.fn();
+    const { container } = render(
+      <CodeMirrorPaperSurface
+        autoFocus={false}
+        initialContent="## Synthetic heading"
+        onEditorReady={onEditorReady}
+        onMarkdownChange={() => {}}
+      />,
+    );
+    const view = onEditorReady.mock.calls[0]?.[0] as EditorView;
+
+    act(() => {
+      view.focus();
+      view.dispatch({
+        selection: EditorSelection.cursor(view.state.doc.length),
+      });
+    });
+
+    const line = container.querySelector<HTMLElement>(".cm-markra-h2");
+    const toolbar = line?.querySelector<HTMLElement>(
+      ":scope > .cm-markra-block-toolbar",
+    );
+    const levelControl = line?.querySelector<HTMLElement>(
+      ":scope > .markra-heading-level-control",
+    );
+
+    expect(toolbar).not.toBeNull();
+    expect(levelControl).not.toBeNull();
+    expect(
+      toolbar!.compareDocumentPosition(levelControl!) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBe(Node.DOCUMENT_POSITION_FOLLOWING);
+  });
+
   it("enables Markra extended Markdown previews without rewriting source", () => {
     const onEditorReady = vi.fn();
     const doc = [

packages/app/src/styles.css

@@ -2119,10 +2119,13 @@
   }
 
   .markdown-paper .markra-heading-level-control {
-    position: relative;
+    position: absolute;
+    left: -28px;
+    top: calc(50% + var(--markra-heading-toggle-center-offset));
+    z-index: 5;
     display: inline-grid;
-    margin-right: 0.5rem;
-    vertical-align: 0.18em;
+    margin: 0;
+    transform: translateY(-50%);
   }
 
   .markdown-paper .markra-heading-level-button {
@@ -2212,12 +2215,12 @@
     --markra-heading-toggle-center-offset: 0px;
   }
 
-  /* Heading fold and level controls already occupy the positions beside the
-     text. Anchor block tools in their own gutter slot so widget order cannot
-     make the controls overlap. */
+  /* These controls are all absolutely positioned. Keeping them out of the
+     line layout prevents a pointer-down from moving heading text before the
+     matching pointer-up, which browsers can misread as a drag selection. */
   .markdown-paper .markra-heading-toggle-heading > .cm-markra-block-toolbar {
     position: absolute !important;
-    left: -78px;
+    left: -104px;
     margin: 0 !important;
     top: calc(50% + var(--markra-heading-toggle-center-offset));
     transform: translateY(-50%);
@@ -2241,7 +2244,7 @@
   .markdown-paper .markra-heading-toggle-button {
     @apply absolute inline-flex size-5 cursor-pointer items-center justify-center rounded-sm border-0 bg-transparent p-0 outline-none transition-[opacity,color,background-color] duration-150 ease-out focus-visible:bg-(--bg-hover) focus-visible:outline-none;
     color: color-mix(in srgb, var(--editor-text-secondary) 62%, transparent);
-    left: -28px;
+    left: -54px;
     display: inline-flex !important;
     margin: 0 !important;
     padding: 0 !important;

packages/app/src/styles.test.ts

@@ -223,7 +223,7 @@ describe("editor stylesheet", () => {
 
     expect(headingToolbarRuleStart).toBeGreaterThanOrEqual(0);
     expect(headingToolbarRule).toContain("position: absolute !important");
-    expect(headingToolbarRule).toContain("left: -78px");
+    expect(headingToolbarRule).toContain("left: -104px");
     expect(headingToolbarRule).toContain("margin: 0 !important");
     expect(headingToolbarRule).toContain(
       "top: calc(50% + var(--markra-heading-toggle-center-offset))",
@@ -411,22 +411,35 @@ describe("editor stylesheet", () => {
     expect(styles).toContain("list-style-type: square;");
   });
 
-  it("shows a quiet inline level list control for the active rendered heading", () => {
+  it("keeps the active heading-level control out of the editable text layout", () => {
     const styles = readFileSync(`${process.cwd()}/src/styles.css`, "utf8");
     const labelStart = styles.indexOf(".markdown-paper .markra-heading-level-control {");
     const labelEnd = styles.indexOf(".markdown-paper .markra-heading-toggle-heading");
     const labelStyles = styles.slice(labelStart, labelEnd);
+    const foldButtonStart = styles.indexOf(
+      ".markdown-paper .markra-heading-toggle-button {",
+    );
+    const foldButtonEnd = styles.indexOf(
+      ".markdown-paper .markra-heading-toggle-heading:hover",
+      foldButtonStart,
+    );
+    const foldButtonStyles = styles.slice(foldButtonStart, foldButtonEnd);
 
     expect(labelStart).toBeGreaterThanOrEqual(0);
     expect(labelEnd).toBeGreaterThan(labelStart);
-    expect(labelStyles).toContain("position: relative");
+    expect(labelStyles).toContain("position: absolute");
     expect(labelStyles).toContain("display: inline-grid");
-    expect(labelStyles).toContain("margin-right");
+    expect(labelStyles).toContain("left: -28px");
+    expect(labelStyles).toContain("margin: 0");
+    expect(labelStyles).toContain(
+      "top: calc(50% + var(--markra-heading-toggle-center-offset))",
+    );
+    expect(labelStyles).toContain("transform: translateY(-50%)");
     expect(labelStyles).toContain(".markdown-paper .markra-heading-level-list");
     expect(labelStyles).toContain("[role=\"option\"]");
     expect(labelStyles).toContain(".markdown-paper .markra-heading-level-button::before");
-    expect(labelStyles).not.toContain("left:");
     expect(labelStyles).toContain("color: color-mix");
+    expect(foldButtonStyles).toContain("left: -54px");
   });
 
   it("keeps table add controls hidden until table hover or focus", () => {

packages/editor/src/codemirror/block-drag.ts

@@ -449,7 +449,10 @@ function blockDecorations(
       attributes: { "data-markra-block-from": String(block.from) },
     }).range(block.from),
     Decoration.widget({
-      side: -1,
+      // Block tools must be the outermost start-of-line widget. Heading-level
+      // controls also use side -1, and their negative gutter margin would
+      // otherwise pull the drag handle back over the H1-H6 button.
+      side: -2,
       widget: new BlockToolbarWidget(block.from, labels),
     }).range(block.from),
   ]);