diff --git a/craft/src/components/basic/HtmlBlock.render.test.tsx b/craft/src/components/basic/HtmlBlock.render.test.tsx new file mode 100644 index 0000000..36f776c --- /dev/null +++ b/craft/src/components/basic/HtmlBlock.render.test.tsx @@ -0,0 +1,51 @@ +import { describe, test, expect, vi } from 'vitest'; +import React from 'react'; +import { createRoot, Root } from 'react-dom/client'; +import { act } from 'react-dom/test-utils'; + +vi.mock('@craftjs/core', () => ({ + useNode: (collect?: (node: any) => any) => { + const node = { events: { selected: false } }; + return { + connectors: { connect: (el: any) => el, drag: (el: any) => el }, + actions: { setProp: vi.fn() }, + ...(collect ? collect(node) : {}), + }; + }, +})); + +import { HtmlBlock } from './HtmlBlock'; + +let container: HTMLDivElement; +let root: Root; + +function render(ui: React.ReactElement) { + container = document.createElement('div'); + document.body.appendChild(container); + act(() => { + root = createRoot(container); + root.render(ui); + }); +} + +describe('HtmlBlock render ignores the style prop (matches toHtml)', () => { + test('a stored backgroundColor/color/padding is NOT applied to the wrapper', () => { + render( + React.createElement(HtmlBlock as any, { + code: '
hello
', + style: { backgroundColor: 'rgb(255, 0, 0)', color: 'rgb(0, 0, 255)', padding: '40px' }, + }), + ); + const wrapper = container.firstElementChild as HTMLElement; + expect(wrapper.style.backgroundColor).toBe(''); + expect(wrapper.style.color).toBe(''); + expect(wrapper.style.padding).toBe(''); + }); + + test('the editor affordances survive: minHeight is kept, content still renders', () => { + render(React.createElement(HtmlBlock as any, { code: 'hello
', style: {} })); + const wrapper = container.firstElementChild as HTMLElement; + expect(wrapper.style.minHeight).toBe('40px'); + expect(wrapper.innerHTML).toContain('hello'); + }); +}); diff --git a/craft/src/components/basic/HtmlBlock.toHtml.test.ts b/craft/src/components/basic/HtmlBlock.toHtml.test.ts index 35e939e..dafc090 100644 --- a/craft/src/components/basic/HtmlBlock.toHtml.test.ts +++ b/craft/src/components/basic/HtmlBlock.toHtml.test.ts @@ -23,3 +23,13 @@ describe('HtmlBlock.toHtml sanitizes raw code (A4.1)', () => { expect(html).toBe('hi
'); }); }); + +test('toHtml never emits the style prop (the other half of the render/export contract)', () => { + const out = (HtmlBlock as any).toHtml( + { code: 'hi
', style: { backgroundColor: '#ff0000', padding: '40px' } }, + '', + ); + expect(out.html).toBe('hi
'); + expect(out.html).not.toContain('background'); + expect(out.html).not.toContain('40px'); +}); diff --git a/craft/src/components/basic/HtmlBlock.tsx b/craft/src/components/basic/HtmlBlock.tsx index 0f41cc4..367d7f2 100644 --- a/craft/src/components/basic/HtmlBlock.tsx +++ b/craft/src/components/basic/HtmlBlock.tsx @@ -62,16 +62,21 @@ export function purifyHtml(input: string): string { } } -export const HtmlBlock: UserComponent