fix(builder): emit Container cssId/cssClass with live panel controls (D1a)

Container.craft.props collected cssId/cssClass since before Phase E1 but
nothing rendered or exported them. Add live "CSS ID" / "CSS Class" text
inputs to ContainerStylePanel (guarded on nodeProps.cssId/cssClass
!== undefined) and emit id=/class= in both the editor render and toHtml.
cssId takes precedence over the existing anchorId prop when both are set
(only one id attribute can be emitted); anchorId is used as a fallback.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-07-12 13:46:23 -07:00
co-authored by Claude Opus 4.8
parent cf56f2a388
commit 36ce256760
3 changed files with 86 additions and 4 deletions
@@ -0,0 +1,35 @@
import { describe, test, expect } from 'vitest';
import { Container } from './Container';
const toHtml = (Container as any).toHtml;
describe('Container.toHtml cssId/cssClass', () => {
test('emits id and class when both set', () => {
const { html } = toHtml({ cssId: 'my-id', cssClass: 'my-class' }, 'child');
expect(html).toContain('id="my-id"');
expect(html).toContain('class="my-class"');
});
test('emits neither id nor class when empty/unset', () => {
const { html } = toHtml({}, 'child');
expect(html).not.toContain(' id="');
expect(html).not.toContain(' class="');
});
test('escapes cssId/cssClass values', () => {
const { html } = toHtml({ cssId: 'x" onerror="alert(1)', cssClass: 'y" onerror="alert(1)' }, 'child');
expect(html).not.toContain('onerror="alert(1)"');
});
test('cssId takes precedence over anchorId when both set (no duplicate id attrs)', () => {
const { html } = toHtml({ cssId: 'explicit-id', anchorId: 'anchor-id' }, 'child');
const idMatches = html.match(/ id="/g) || [];
expect(idMatches.length).toBe(1);
expect(html).toContain('id="explicit-id"');
});
test('falls back to anchorId when cssId is not set', () => {
const { html } = toHtml({ anchorId: 'anchor-id' }, 'child');
expect(html).toContain('id="anchor-id"');
});
});