shadowdaoandClaude Sonnet 5.5
dbf3dda3e4
HeroSimple emitted 'background' together with backgroundImage/Size/Position that were undefined. React assigns '' for those on first render and Chromium and Firefox then wipe the shorthand's gradient (background-image: none), so the canvas hero rendered white. Build the style with only the relevant keys (shared by render and toHtml); exported HTML is byte-identical. Adds a real-browser (Chromium+Firefox) regression test: npm run test:browser:bg, and toHtml byte-identity assertions. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
25 lines
1.3 KiB
TypeScript
25 lines
1.3 KiB
TypeScript
// Bundled by scripts/e2e-background.mjs and mounted in real Chromium.
|
|
import React from 'react';
|
|
import { createRoot } from 'react-dom/client';
|
|
import { Editor, Frame } from '@craftjs/core';
|
|
import { HeroSimple } from '../src/components/sections/HeroSimple';
|
|
import { BackgroundSection } from '../src/components/layout/BackgroundSection';
|
|
import { CTASection } from '../src/components/sections/CTASection';
|
|
import { CallToAction } from '../src/components/sections/CallToAction';
|
|
import { Container } from '../src/components/layout/Container';
|
|
|
|
const resolver = { HeroSimple, BackgroundSection, CTASection, CallToAction, Container };
|
|
|
|
(window as any).mountNode = (id: string, type: string, props: Record<string, unknown>) => {
|
|
const data = JSON.stringify({
|
|
ROOT: { type: { resolvedName: 'Container' }, isCanvas: true, props: {}, displayName: 'Container', custom: {}, hidden: false, nodes: ['n'], linkedNodes: {} },
|
|
n: { type: { resolvedName: type }, isCanvas: false, props, displayName: type, custom: {}, parent: 'ROOT', hidden: false, nodes: [], linkedNodes: {} },
|
|
});
|
|
const el = document.createElement('div');
|
|
el.id = id;
|
|
document.body.appendChild(el);
|
|
createRoot(el).render(
|
|
<Editor resolver={resolver} enabled={false}><Frame data={data} /></Editor>,
|
|
);
|
|
};
|