Better way to align task items

src/hiddenSyntax/components/task.ts

@@ -43,26 +43,30 @@ export const taskCheckboxes = [
     '&.cm-md-syntaxHiddenMode .cm-md-syntaxHiddenTaskCheckboxFrame': {
       display: 'inline-block',
       position: 'relative',
-      height: '1lh',
       margin: '0',
       textIndent: '0',
-      verticalAlign: 'top',
+      verticalAlign: 'baseline',
     },
     '&.cm-md-syntaxHiddenMode .cm-md-syntaxHiddenTaskCheckboxMarker': {
       visibility: 'hidden',
     },
     '&.cm-md-syntaxHiddenMode .cm-md-syntaxHiddenTaskCheckboxControl': {
-      position: 'absolute',
-      insetBlockStart: '0',
+      position: 'relative',
       insetInlineStart: '-0.15em',
-      display: 'grid',
-      placeItems: 'center',
+      display: 'inline-block',
+      verticalAlign: 'baseline',
       width: '1em',
-      height: '1lh',
+      height: '0',
+      marginInlineEnd: '-1em',
     },
     '&.cm-md-syntaxHiddenMode .cm-md-syntaxHiddenTaskCheckbox': {
+      position: 'absolute',
+      font: 'inherit',
+      top: '-0.35em',
+      top_cap: '-0.5cap', // Style-mod strips the suffix, making this "top" too
+      left: '50%',
       margin: '0',
-      transform: 'translateY(-0.09em) scale(var(--cm-md-task-checkbox-scale, 1))',
+      transform: 'translate(-50%, -50%) scale(var(--cm-md-task-checkbox-scale, 1))',
     },
   }),
 ];
@@ -149,7 +153,7 @@ class TaskCheckboxWidget extends WidgetType {
     marker.className = 'cm-md-syntaxHiddenTaskCheckboxMarker';
     marker.textContent = this.listPrefix;
 
-    const control = frame.appendChild(document.createElement('span'));
+    const control = frame.insertBefore(document.createElement('span'), marker);
     control.className = 'cm-md-syntaxHiddenTaskCheckboxControl';
 
     const input = control.appendChild(document.createElement('input'));

tests/hiddenSyntax/block.test.ts

@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 import { mermaidMocks, hiddenTexts, editorText } from './support';
 import { describe, expect, test, vi } from 'vitest';
-import { codeFolding, foldable, foldEffect, unfoldEffect } from '@codemirror/language';
+import { codeFolding, foldable, foldEffect, forceParsing, syntaxTreeAvailable, unfoldEffect } from '@codemirror/language';
 import { Compartment } from '@codemirror/state';
 import type { EditorView } from '@codemirror/view';
 import { createHiddenSyntaxExtension, hiddenSyntaxExtension } from '../../src/hiddenSyntax';
@@ -245,9 +245,20 @@ describe('Inline images', () => {
     expect(window.editor.dom.textContent).toContain('![Alt](image.png)');
   });
 
-  test('keeps image source visible when inline images are disabled', () => {
+  test.each([false, true])('keeps image source visible when inline images are disabled (deferred parsing: %s)', deferredParsing => {
     const source = '![Alt](image.png) after';
+    let now = Date.now();
+
+    // Simulate exhausting CodeMirror's initial parse budget on a busy runner
+    const clock = deferredParsing ? vi.spyOn(Date, 'now').mockImplementation(() => now += 1000) : undefined;
     editor.setUp(source, createHiddenSyntaxExtension([]));
+    clock?.mockRestore();
+
+    if (deferredParsing) {
+      expect(syntaxTreeAvailable(window.editor.state)).toBe(false);
+    }
+
+    expect(forceParsing(window.editor, source.length, 5000)).toBe(true);
     window.editor.dispatch({ selection: { anchor: source.length } });
 
     expect(window.editor.dom.querySelector('.cm-md-syntaxHiddenImage')).toBeNull();

tests/hiddenSyntax/unorderedList.test.ts

@@ -304,7 +304,7 @@ describe('Unordered list syntax', () => {
     expect(window.editor.dom.querySelector('.cm-md-syntaxHiddenListBulletLayer')?.getAttribute('aria-hidden')).toBe('true');
   });
 
-  test('centers task checkboxes in a fixed control slot', () => {
+  test('centers task checkboxes against the text cap height with an em fallback', () => {
     const hangingIndent = EditorView.decorations.of(Decoration.set([
       Decoration.line({ attributes: { style: 'text-indent: -2em; margin-inline-start: 2em' } }).range(0),
     ]));
@@ -315,11 +315,23 @@ describe('Unordered list syntax', () => {
     const cssRules = [...document.styleSheets].flatMap(sheet => [...sheet.cssRules]);
     const frameRule = cssRules.find(rule => rule.cssText.includes('.cm-md-syntaxHiddenTaskCheckboxFrame')) as CSSStyleRule;
     const controlRule = cssRules.find(rule => rule.cssText.includes('.cm-md-syntaxHiddenTaskCheckboxControl')) as CSSStyleRule;
+    const inputRule = cssRules.find(rule => (rule as CSSStyleRule).selectorText?.endsWith(' .cm-md-syntaxHiddenTaskCheckbox')) as CSSStyleRule;
     expect(frameRule.style.getPropertyValue('text-indent')).toBe('0px');
-    expect(controlRule.style.getPropertyValue('display')).toBe('grid');
-    expect(controlRule.style.getPropertyValue('place-items')).toBe('center');
+    expect(frameRule.style.getPropertyValue('vertical-align')).toBe('baseline');
+    expect(controlRule.style.getPropertyValue('display')).toBe('inline-block');
+    expect(controlRule.style.getPropertyValue('height')).toBe('0px');
+    expect(controlRule.style.getPropertyValue('vertical-align')).toBe('baseline');
     expect(controlRule.style.getPropertyValue('width')).toBe('1em');
     expect(controlRule.style.getPropertyValue('inset-inline-start')).toBe('-0.15em');
+    expect(controlRule.style.getPropertyValue('margin-inline-end')).toBe('-1em');
+    expect(inputRule.style.getPropertyValue('font')).toBe('inherit');
+    expect(inputRule.style.getPropertyValue('top')).toBe('-0.35em');
+
+    const stylesheet = window.editor.state.facet(EditorView.styleModule).map(module => module.getRules()).join('\n');
+    expect(stylesheet).toMatch(/\.cm-md-syntaxHiddenTaskCheckbox\s*\{[^}]*top:\s*-0\.35em;\s*top:\s*-0\.5cap[;}]/);
+    expect(inputRule.style.getPropertyValue('transform')).toBe('translate(-50%, -50%) scale(var(--cm-md-task-checkbox-scale, 1))');
+    expect(window.editor.dom.querySelector('.cm-md-syntaxHiddenTaskCheckboxFrame')?.firstElementChild?.className)
+      .toBe('cm-md-syntaxHiddenTaskCheckboxControl');
   });
 
   test('plans bullets and tasks only for visible ranges', () => {