feat(editor): center inline image rows by default via CSS :has() #295

2026-07-02T16:50:27+03:00

vvzvlad commented

2026-07-02 16:50:27 +03:00

Follow-up to #284: rows of inline images were pinned left while a single image defaults to centered.

A row has no DOM wrapper (each image is an independent block node), so its placement is controlled by the text-align of the nearest block ancestor. The new rules in media.css enable text-align: center only on containers that actually hold a direct inline-image child (:has), and reset every other child back to start so ordinary text is unaffected. Toolbar per-block alignment (inline style) still wins; browsers without :has() keep the previous start-pinned rows.

Also includes a docs sweep commit (CHANGELOG entries for recent features + README updates).

Verification: editor-ext tests 247/247; review pass APPROVE — audited all text-align rules (math block is wrapped in .react-renderer, so it keeps its own centering — verified in happy-dom); read-only/share view uses the same stylesheet.

Merged on the owner's explicit instruction.

Follow-up to #284: rows of inline images were pinned left while a single image defaults to centered. A row has no DOM wrapper (each image is an independent block node), so its placement is controlled by the `text-align` of the nearest block ancestor. The new rules in `media.css` enable `text-align: center` only on containers that actually hold a direct inline-image child (`:has`), and reset every other child back to `start` so ordinary text is unaffected. Toolbar per-block alignment (inline style) still wins; browsers without `:has()` keep the previous start-pinned rows. Also includes a docs sweep commit (CHANGELOG entries for recent features + README updates). Verification: editor-ext tests 247/247; review pass APPROVE — audited all `text-align` rules (math block is wrapped in `.react-renderer`, so it keeps its own centering — verified in happy-dom); read-only/share view uses the same stylesheet. Merged on the owner's explicit instruction.

vvzvlad added 2 commits 2026-07-02 16:50:28 +03:00

feat(editor): center inline image rows by default via CSS :has() 5664da57ad

Follow-up to #284: rows of inline-aligned images were pinned left while
a single image defaults to centered — inconsistent. A row has no DOM
wrapper (each image is an independent block node), so its placement is
controlled by the text-align of the nearest block ancestor.

- media.css: enable text-align:center only on containers that actually
  hold a direct inline-image child (:has), and reset every other child
  back to text-align:start so ordinary text is unaffected; explicit
  per-block toolbar alignment (inline style) still wins; browsers
  without :has() keep the previous start-pinned rows
- image.ts: comment in the inline branch now points to the media.css
  rule (cross-package discoverability), no code change

Reviewed: math/caption/table-header/footnote text-align rules audited;
React node views are wrapped in .react-renderer, so .mathBlock is not a
direct child and keeps its own centering (verified in happy-dom).

docs: update changelog and readme with new feature details c90caeb21a

Add recent feature entries to CHANGELOG, including inline image row centering, AI chat docking, comment hover tooltips, temporary‑note trash button, code‑block overlay controls, stress‑accent button, reading‑position restore, and slash‑menu layout fixes. Update README and Russian README to reflect these changes.

vvzvlad merged commit af481d401a into develop

2026-07-02 16:50:33 +03:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: vvzvlad/gitmost#295