fix(site-builder): HtmlBlock render stops applying style so editor matches published output

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-08-08 18:35:12 -07:00
co-authored by Claude Opus 5
parent 6791345f77
commit a30e82accf
3 changed files with 68 additions and 2 deletions
+7 -2
View File
@@ -62,16 +62,21 @@ export function purifyHtml(input: string): string {
}
}
export const HtmlBlock: UserComponent<HtmlBlockProps> = ({ code = '', style = {} }) => {
export const HtmlBlock: UserComponent<HtmlBlockProps> = ({ code = '' }) => {
const { connectors: { connect, drag }, selected } = useNode((node) => ({ selected: node.events.selected }));
const clean = useMemo(() => purifyHtml(code), [code]);
const setRef = (ref: HTMLElement | null): void => { if (ref) connect(drag(ref)); };
// The `style` prop is deliberately NOT applied. `toHtml()` emits only the
// purified `code`, so anything styled here would show in the editor and
// vanish on the live page -- the exact bug this block was reported for.
// Wrapper styling belongs in the user's own markup (see the Edit HTML
// toolbar's colour control). `style` stays on the props interface so
// already-saved sites keep deserializing cleanly.
return React.createElement('div', {
ref: setRef,
style: {
minHeight: '40px',
outline: selected ? '2px solid #3b82f6' : 'none',
...style,
},
dangerouslySetInnerHTML: { __html: clean },
});