shadowdaoandClaude Sonnet 5.5
dc415db2d3
Published pages/Preview ship a head reset (*{margin:0;padding:0}, img block,
a inherit, body line-height 1.6 / #1f2937 / 16px); the editor canvas had none,
so h1-h6/p margins, line-height and inherited size/colour differed.
- editor.css: one commented block scoping the reset to .canvas-device-frame,
every selector zero-specificity (:where) so inline styles / class rules win
exactly as when published; editor chrome untouched (snapshot identical).
- tokens.ts: canvas heading/link token rules made zero-specificity too.
- utils/css-reset.ts: single source for the reset declarations (html-export
imports it; test asserts byte-identity with the backend head and that the
editor.css block carries the same declarations).
- scripts/e2e-canvas-parity.mjs (npm run test:browser:canvas): real editor vs
published HTML in Firefox + Chromium, boxes within 1px + computed styles.
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
16 lines
975 B
TypeScript
16 lines
975 B
TypeScript
// Bundled (esbuild) by scripts/e2e-canvas-parity.mjs and run in Node: renders what a publish
|
|
// of the CURRENT stored state would emit, composed like TopBar's Preview
|
|
// (header + body + footer under the real document head). Used for specs whose
|
|
// checked-in published HTML is stale relative to the stored state.
|
|
import { exportBodyHtml, exportComposedPreviewHtml } from '../src/utils/html-export';
|
|
|
|
export function renderPublished(project: any, pageIdx: number): string {
|
|
const page = project.pages_craft_state[pageIdx];
|
|
const hdr = project.header_craft_state ? exportBodyHtml(project.header_craft_state, 'header').html : '';
|
|
const ftr = project.footer_craft_state ? exportBodyHtml(project.footer_craft_state, 'footer').html : '';
|
|
const body = exportBodyHtml(page.craftState).html;
|
|
return exportComposedPreviewHtml(page.craftState, hdr + body + ftr, {
|
|
title: page.name, includeFonts: true, headCode: project.design?.headCode, design: project.design,
|
|
});
|
|
}
|