Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
  shadowdaoandClaude Opus 4.8
|
0419291259 |
@@ -80,56 +80,3 @@ describe('ColumnLayout.toHtml XSS hardening (gap into <style>)', () => {
|
||||
expect(html).toMatch(/calc\(50% - 24px\)/);
|
||||
});
|
||||
});
|
||||
|
||||
describe('ColumnLayout.toHtml vertical alignment (align-items on the flex row)', () => {
|
||||
test('style.alignItems flows into the emitted style attribute (aligns uneven columns)', () => {
|
||||
const { html } = toHtml({ columns: 2, split: '50-50', gap: '16px', style: { alignItems: 'center' } }, '<div>A</div><div>B</div>');
|
||||
expect(html).toContain('align-items:center');
|
||||
});
|
||||
});
|
||||
|
||||
describe('ColumnLayout.toHtml box-model styles (margin/padding/border/shadow/opacity)', () => {
|
||||
test('margin/padding/border/box-shadow/opacity all flow into the emitted style attribute', () => {
|
||||
const { html } = toHtml(
|
||||
{
|
||||
columns: 2,
|
||||
split: '50-50',
|
||||
gap: '16px',
|
||||
style: {
|
||||
marginTop: '10px', marginRight: '10px', marginBottom: '10px', marginLeft: '10px',
|
||||
paddingTop: '5px',
|
||||
border: '2px solid #ff0000',
|
||||
boxShadow: '0 4px 8px rgba(0,0,0,0.12)',
|
||||
opacity: '0.8',
|
||||
},
|
||||
},
|
||||
'<div>A</div><div>B</div>',
|
||||
);
|
||||
expect(html).toContain('margin-top:10px');
|
||||
expect(html).toContain('padding-top:5px');
|
||||
expect(html).toContain('border:2px solid #ff0000');
|
||||
expect(html).toContain('box-shadow:0 4px 8px rgba(0,0,0,0.12)');
|
||||
expect(html).toContain('opacity:0.8');
|
||||
});
|
||||
});
|
||||
|
||||
describe('ColumnLayout.craft.props exposes the vertical-alignment/box-model/animation/visibility rollout', () => {
|
||||
test('animation, animationDelay, hideOnDesktop/Tablet/Mobile are present with blank/false defaults', () => {
|
||||
const props = (ColumnLayout as any).craft.props;
|
||||
expect(props.animation).toBe('');
|
||||
expect(props.animationDelay).toBe('0');
|
||||
expect(props.hideOnDesktop).toBe(false);
|
||||
expect(props.hideOnTablet).toBe(false);
|
||||
expect(props.hideOnMobile).toBe(false);
|
||||
});
|
||||
|
||||
test('style carries blank/default alignItems and box-model keys', () => {
|
||||
const style = (ColumnLayout as any).craft.props.style;
|
||||
expect(style).toHaveProperty('alignItems');
|
||||
expect(style).toHaveProperty('marginTop');
|
||||
expect(style).toHaveProperty('paddingTop');
|
||||
expect(style.border).toBe('none');
|
||||
expect(style.boxShadow).toBe('none');
|
||||
expect(style.opacity).toBe('1');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -20,11 +20,6 @@ interface ColumnLayoutProps {
|
||||
style?: CSSProperties;
|
||||
children?: React.ReactNode;
|
||||
anchorId?: string;
|
||||
hideOnDesktop?: boolean;
|
||||
hideOnTablet?: boolean;
|
||||
hideOnMobile?: boolean;
|
||||
animation?: string;
|
||||
animationDelay?: string;
|
||||
}
|
||||
|
||||
const splitToWidths: Record<string, string[]> = {
|
||||
@@ -107,20 +102,8 @@ ColumnLayout.craft = {
|
||||
columns: 2,
|
||||
split: '50-50',
|
||||
gap: '16px',
|
||||
style: {
|
||||
alignItems: '',
|
||||
marginTop: '', marginRight: '', marginBottom: '', marginLeft: '',
|
||||
paddingTop: '', paddingRight: '', paddingBottom: '', paddingLeft: '',
|
||||
border: 'none',
|
||||
boxShadow: 'none',
|
||||
opacity: '1',
|
||||
},
|
||||
style: {},
|
||||
anchorId: '',
|
||||
animation: '',
|
||||
animationDelay: '0',
|
||||
hideOnDesktop: false,
|
||||
hideOnTablet: false,
|
||||
hideOnMobile: false,
|
||||
},
|
||||
rules: {
|
||||
canDrag: () => true,
|
||||
|
||||
@@ -63,88 +63,3 @@ describe('Container.toHtml tag allowlist (adversarial re-review, same class as C
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
describe('Container.toHtml vertical alignment (justify-content + min-height)', () => {
|
||||
// Regression lock: Container/Section must NOT unconditionally become a
|
||||
// flex container. Flex-blockifies in-flow children, forcing components
|
||||
// that deliberately render display:inline-block (ButtonLink, Icon) to
|
||||
// stack vertically instead of sitting side-by-side -- a real visual
|
||||
// regression for existing published pages that never touch vertical
|
||||
// alignment.
|
||||
test('does NOT become a flex container when no vertical alignment is set (plain block flow preserved)', () => {
|
||||
const { html } = toHtml({}, 'child');
|
||||
expect(html).not.toContain('display:flex');
|
||||
expect(html).not.toContain('flex-direction');
|
||||
});
|
||||
|
||||
test('does NOT become a flex container from min-height alone (min-height must not itself trigger flex)', () => {
|
||||
const { html } = toHtml({ style: { minHeight: '400px' } }, 'child');
|
||||
expect(html).not.toContain('display:flex');
|
||||
expect(html).not.toContain('flex-direction');
|
||||
expect(html).toContain('min-height:400px');
|
||||
});
|
||||
|
||||
test('becomes a column flex container when style.justifyContent is set (feature still works)', () => {
|
||||
const { html } = toHtml({ style: { justifyContent: 'center' } }, 'child');
|
||||
expect(html).toContain('display:flex');
|
||||
expect(html).toContain('flex-direction:column');
|
||||
expect(html).toContain('justify-content:center');
|
||||
});
|
||||
|
||||
test('style.minHeight flows into the emitted style attribute', () => {
|
||||
const { html } = toHtml({ style: { minHeight: '400px' } }, 'child');
|
||||
expect(html).toContain('min-height:400px');
|
||||
});
|
||||
|
||||
test('justify-content and min-height still flow through in boxed (contentWidth) mode', () => {
|
||||
const { html } = toHtml({ contentWidth: 'boxed', style: { justifyContent: 'flex-end', minHeight: '500px' } }, 'child');
|
||||
expect(html).toContain('display:flex');
|
||||
expect(html).toContain('flex-direction:column');
|
||||
expect(html).toContain('justify-content:flex-end');
|
||||
expect(html).toContain('min-height:500px');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Container.toHtml box-model styles (margin/padding/border/shadow/opacity)', () => {
|
||||
test('margin/padding/border/box-shadow/opacity all flow into the emitted style attribute', () => {
|
||||
const { html } = toHtml(
|
||||
{
|
||||
style: {
|
||||
marginTop: '10px', marginRight: '10px', marginBottom: '10px', marginLeft: '10px',
|
||||
paddingTop: '5px',
|
||||
border: '2px solid #ff0000',
|
||||
boxShadow: '0 4px 8px rgba(0,0,0,0.12)',
|
||||
opacity: '0.8',
|
||||
},
|
||||
},
|
||||
'child',
|
||||
);
|
||||
expect(html).toContain('margin-top:10px');
|
||||
expect(html).toContain('padding-top:5px');
|
||||
expect(html).toContain('border:2px solid #ff0000');
|
||||
expect(html).toContain('box-shadow:0 4px 8px rgba(0,0,0,0.12)');
|
||||
expect(html).toContain('opacity:0.8');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Container.craft.props exposes the vertical-alignment/box-model/animation/visibility rollout', () => {
|
||||
test('animation, animationDelay, hideOnDesktop/Tablet/Mobile are present with blank/false defaults', () => {
|
||||
const props = (Container as any).craft.props;
|
||||
expect(props.animation).toBe('');
|
||||
expect(props.animationDelay).toBe('0');
|
||||
expect(props.hideOnDesktop).toBe(false);
|
||||
expect(props.hideOnTablet).toBe(false);
|
||||
expect(props.hideOnMobile).toBe(false);
|
||||
});
|
||||
|
||||
test('style carries blank/default vertical-alignment and box-model keys', () => {
|
||||
const style = (Container as any).craft.props.style;
|
||||
expect(style).toHaveProperty('justifyContent');
|
||||
expect(style).toHaveProperty('minHeight');
|
||||
expect(style).toHaveProperty('marginTop');
|
||||
expect(style).toHaveProperty('paddingTop');
|
||||
expect(style.border).toBe('none');
|
||||
expect(style.boxShadow).toBe('none');
|
||||
expect(style.opacity).toBe('1');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -43,20 +43,6 @@ const flexAlignFromTextAlign = (textAlign: CSSProperties['textAlign']): CSSPrope
|
||||
return {};
|
||||
};
|
||||
|
||||
// Container only becomes display:flex/flex-direction:column at its root
|
||||
// (both in the editor render below and in toHtml) when the user has
|
||||
// actually set `style.justifyContent` (the Vertical Alignment control,
|
||||
// paired with `style.minHeight`) -- i.e. the flex conversion is gated on
|
||||
// vertical-align actually being in use, not unconditional. In-flow children
|
||||
// of a flex container get CSS-blockified, which would force components that
|
||||
// deliberately render `display:inline-block` (ButtonLink, Icon) to stack
|
||||
// vertically instead of sitting side-by-side -- a real visual regression for
|
||||
// any container/section that never touches vertical alignment, not a no-op.
|
||||
// So plain block flow (no `display`/`flex-direction` at all) is preserved
|
||||
// unless vertical-align is set. `flexAlignFromTextAlign` above still
|
||||
// supplies its own conditional flex conversion (cross-axis alignItems from
|
||||
// `textAlign`) independently -- unrelated to this gate.
|
||||
|
||||
export const Container: UserComponent<ContainerProps> = ({
|
||||
style = {},
|
||||
tag = 'div',
|
||||
@@ -72,12 +58,10 @@ export const Container: UserComponent<ContainerProps> = ({
|
||||
const safeTag = sanitizeContainerTag(tag);
|
||||
const needsBoxedWrapper = contentWidth === 'boxed';
|
||||
const flexStyles = flexAlignFromTextAlign(style.textAlign);
|
||||
const hasVerticalAlign = !!style.justifyContent;
|
||||
|
||||
const outerStyle: CSSProperties = {
|
||||
minHeight: '40px',
|
||||
...style,
|
||||
...(hasVerticalAlign ? { display: 'flex', flexDirection: 'column' } : {}),
|
||||
...(fullWidth ? { width: '100vw', marginLeft: 'calc(-50vw + 50%)' } : {}),
|
||||
...(needsBoxedWrapper ? {} : flexStyles),
|
||||
};
|
||||
@@ -109,27 +93,13 @@ export const Container: UserComponent<ContainerProps> = ({
|
||||
Container.craft = {
|
||||
displayName: 'Container',
|
||||
props: {
|
||||
style: {
|
||||
padding: '20px',
|
||||
minHeight: '100px',
|
||||
justifyContent: '',
|
||||
marginTop: '', marginRight: '', marginBottom: '', marginLeft: '',
|
||||
paddingTop: '', paddingRight: '', paddingBottom: '', paddingLeft: '',
|
||||
border: 'none',
|
||||
boxShadow: 'none',
|
||||
opacity: '1',
|
||||
},
|
||||
style: { padding: '20px', minHeight: '100px' },
|
||||
tag: 'div',
|
||||
fullWidth: false,
|
||||
contentWidth: 'full',
|
||||
anchorId: '',
|
||||
cssId: '',
|
||||
cssClass: '',
|
||||
animation: '',
|
||||
animationDelay: '0',
|
||||
hideOnDesktop: false,
|
||||
hideOnTablet: false,
|
||||
hideOnMobile: false,
|
||||
},
|
||||
rules: {
|
||||
canDrag: () => true,
|
||||
@@ -144,11 +114,9 @@ Container.craft = {
|
||||
const tag = sanitizeContainerTag(props.tag);
|
||||
const isBoxed = props.contentWidth === 'boxed';
|
||||
const flexStyles = flexAlignFromTextAlign(props.style?.textAlign);
|
||||
const hasVerticalAlign = !!props.style?.justifyContent;
|
||||
|
||||
const outerCss: CSSProperties = {
|
||||
...props.style,
|
||||
...(hasVerticalAlign ? { display: 'flex', flexDirection: 'column' } : {}),
|
||||
...(isBoxed ? {} : flexStyles),
|
||||
};
|
||||
|
||||
|
||||
@@ -73,78 +73,3 @@ describe('Section.toHtml shape divider color/height XSS hardening', () => {
|
||||
expect(html).not.toContain('<svg');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Section.toHtml vertical alignment (justify-content + min-height)', () => {
|
||||
// Regression lock: same rationale as Container -- see Container.toHtml.test.ts.
|
||||
// Section must not unconditionally become a flex container, or it
|
||||
// blockifies inline-block children (ButtonLink, Icon) that are meant to
|
||||
// sit side-by-side in existing published sections.
|
||||
test('does NOT become a flex container when no vertical alignment is set (plain block flow preserved)', () => {
|
||||
const { html } = toHtml({}, 'child');
|
||||
expect(html).not.toContain('display:flex');
|
||||
expect(html).not.toContain('flex-direction');
|
||||
});
|
||||
|
||||
test('does NOT become a flex container from min-height alone (min-height must not itself trigger flex)', () => {
|
||||
const { html } = toHtml({ style: { minHeight: '600px' } }, 'child');
|
||||
expect(html).not.toContain('display:flex');
|
||||
expect(html).not.toContain('flex-direction');
|
||||
expect(html).toContain('min-height:600px');
|
||||
});
|
||||
|
||||
test('becomes a column flex container when style.justifyContent is set (feature still works)', () => {
|
||||
const { html } = toHtml({ style: { justifyContent: 'center' } }, 'child');
|
||||
expect(html).toContain('display:flex');
|
||||
expect(html).toContain('flex-direction:column');
|
||||
expect(html).toContain('justify-content:center');
|
||||
});
|
||||
|
||||
test('style.minHeight flows into the emitted style attribute', () => {
|
||||
const { html } = toHtml({ style: { minHeight: '600px' } }, 'child');
|
||||
expect(html).toContain('min-height:600px');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Section.toHtml box-model styles (margin/padding/border/shadow/opacity)', () => {
|
||||
test('margin/padding/border/box-shadow/opacity all flow into the emitted style attribute', () => {
|
||||
const { html } = toHtml(
|
||||
{
|
||||
style: {
|
||||
marginTop: '10px', marginRight: '10px', marginBottom: '10px', marginLeft: '10px',
|
||||
paddingTop: '5px',
|
||||
border: '2px solid #ff0000',
|
||||
boxShadow: '0 4px 8px rgba(0,0,0,0.12)',
|
||||
opacity: '0.8',
|
||||
},
|
||||
},
|
||||
'child',
|
||||
);
|
||||
expect(html).toContain('margin-top:10px');
|
||||
expect(html).toContain('padding-top:5px');
|
||||
expect(html).toContain('border:2px solid #ff0000');
|
||||
expect(html).toContain('box-shadow:0 4px 8px rgba(0,0,0,0.12)');
|
||||
expect(html).toContain('opacity:0.8');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Section.craft.props exposes the vertical-alignment/box-model/animation/visibility rollout', () => {
|
||||
test('animation, animationDelay, hideOnDesktop/Tablet/Mobile are present with blank/false defaults', () => {
|
||||
const props = (Section as any).craft.props;
|
||||
expect(props.animation).toBe('');
|
||||
expect(props.animationDelay).toBe('0');
|
||||
expect(props.hideOnDesktop).toBe(false);
|
||||
expect(props.hideOnTablet).toBe(false);
|
||||
expect(props.hideOnMobile).toBe(false);
|
||||
});
|
||||
|
||||
test('style carries blank/default vertical-alignment and box-model keys', () => {
|
||||
const style = (Section as any).craft.props.style;
|
||||
expect(style).toHaveProperty('justifyContent');
|
||||
expect(style).toHaveProperty('minHeight');
|
||||
expect(style).toHaveProperty('marginTop');
|
||||
expect(style).toHaveProperty('paddingTop');
|
||||
expect(style.border).toBe('none');
|
||||
expect(style.boxShadow).toBe('none');
|
||||
expect(style.opacity).toBe('1');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -27,11 +27,6 @@ interface SectionProps {
|
||||
bottomDividerColor?: string;
|
||||
bottomDividerHeight?: string;
|
||||
anchorId?: string;
|
||||
hideOnDesktop?: boolean;
|
||||
hideOnTablet?: boolean;
|
||||
hideOnMobile?: boolean;
|
||||
animation?: string;
|
||||
animationDelay?: string;
|
||||
}
|
||||
|
||||
/* ---------- Divider renderer ---------- */
|
||||
@@ -103,13 +98,6 @@ export const Section: UserComponent<SectionProps> = ({
|
||||
|
||||
const hasTopDivider = topDivider && topDivider !== 'none';
|
||||
const hasBottomDivider = bottomDivider && bottomDivider !== 'none';
|
||||
// Section's root only becomes a column flex container when the user has
|
||||
// actually set `style.justifyContent` (Vertical Alignment control, paired
|
||||
// with `style.minHeight`) -- see the matching note in Container.tsx for
|
||||
// why an unconditional conversion is a real regression (blockifies
|
||||
// deliberately inline-block children like ButtonLink/Icon) rather than a
|
||||
// no-op, so plain block flow is preserved unless vertical-align is set.
|
||||
const hasVerticalAlign = !!style.justifyContent;
|
||||
|
||||
return (
|
||||
<section
|
||||
@@ -119,7 +107,6 @@ export const Section: UserComponent<SectionProps> = ({
|
||||
width: '100%',
|
||||
position: (hasTopDivider || hasBottomDivider) ? 'relative' : undefined,
|
||||
...style,
|
||||
...(hasVerticalAlign ? { display: 'flex', flexDirection: 'column' } : {}),
|
||||
}}
|
||||
>
|
||||
{hasTopDivider && (
|
||||
@@ -156,17 +143,7 @@ export const Section: UserComponent<SectionProps> = ({
|
||||
Section.craft = {
|
||||
displayName: 'Section',
|
||||
props: {
|
||||
style: {
|
||||
padding: '40px 0',
|
||||
backgroundColor: '#ffffff',
|
||||
minHeight: '',
|
||||
justifyContent: '',
|
||||
marginTop: '', marginRight: '', marginBottom: '', marginLeft: '',
|
||||
paddingTop: '', paddingRight: '', paddingBottom: '', paddingLeft: '',
|
||||
border: 'none',
|
||||
boxShadow: 'none',
|
||||
opacity: '1',
|
||||
},
|
||||
style: { padding: '40px 0', backgroundColor: '#ffffff' },
|
||||
innerMaxWidth: '1200px',
|
||||
topDivider: 'none',
|
||||
topDividerColor: '#ffffff',
|
||||
@@ -175,11 +152,6 @@ Section.craft = {
|
||||
bottomDividerColor: '#ffffff',
|
||||
bottomDividerHeight: '50px',
|
||||
anchorId: '',
|
||||
animation: '',
|
||||
animationDelay: '0',
|
||||
hideOnDesktop: false,
|
||||
hideOnTablet: false,
|
||||
hideOnMobile: false,
|
||||
},
|
||||
rules: {
|
||||
canDrag: () => true,
|
||||
@@ -227,13 +199,11 @@ function buildDividerHtml(
|
||||
(Section as any).toHtml = (props: SectionProps, childrenHtml: string) => {
|
||||
const hasTopDivider = props.topDivider && props.topDivider !== 'none';
|
||||
const hasBottomDivider = props.bottomDivider && props.bottomDivider !== 'none';
|
||||
const hasVerticalAlign = !!props.style?.justifyContent;
|
||||
|
||||
const outerStyle = cssPropsToString({
|
||||
width: '100%',
|
||||
position: (hasTopDivider || hasBottomDivider) ? 'relative' : undefined,
|
||||
...props.style,
|
||||
...(hasVerticalAlign ? { display: 'flex', flexDirection: 'column' } : {}),
|
||||
});
|
||||
const innerStyle = cssPropsToString({
|
||||
maxWidth: props.innerMaxWidth || '1200px',
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { describe, test, expect } from 'vitest';
|
||||
import { ImageBlock } from './ImageBlock';
|
||||
import { ImageBlock, pxAttr } from './ImageBlock';
|
||||
|
||||
const toHtml = (ImageBlock as any).toHtml;
|
||||
|
||||
@@ -32,3 +32,95 @@ describe('ImageBlock.toHtml src/alt XSS hardening', () => {
|
||||
expect(html).toContain('alt="A photo"');
|
||||
});
|
||||
});
|
||||
|
||||
describe('ImageBlock.toHtml perf attributes (always emitted)', () => {
|
||||
test('loading="lazy" and decoding="async" are always present', () => {
|
||||
const { html } = toHtml({ src: 'https://example.com/photo.jpg' }, '');
|
||||
expect(html).toContain('loading="lazy"');
|
||||
expect(html).toContain('decoding="async"');
|
||||
});
|
||||
|
||||
test('width/height attributes are emitted when the style has plain px values', () => {
|
||||
const { html } = toHtml({ src: 'https://example.com/photo.jpg', style: { width: '400px', height: '300px' } }, '');
|
||||
expect(html).toContain('width="400"');
|
||||
expect(html).toContain('height="300"');
|
||||
});
|
||||
|
||||
test('width/height attributes are omitted when the style value is not a plain px length', () => {
|
||||
const { html } = toHtml({ src: 'https://example.com/photo.jpg', style: { width: '50%', height: 'auto' } }, '');
|
||||
expect(html).not.toMatch(/\swidth="/);
|
||||
expect(html).not.toMatch(/\sheight="/);
|
||||
});
|
||||
});
|
||||
|
||||
describe('pxAttr', () => {
|
||||
test('extracts the numeric portion of a plain px length', () => {
|
||||
expect(pxAttr('400px')).toBe('400');
|
||||
expect(pxAttr('12.5px')).toBe('12.5');
|
||||
});
|
||||
|
||||
test('returns undefined for non-px units, non-string, or unset values', () => {
|
||||
expect(pxAttr('50%')).toBeUndefined();
|
||||
expect(pxAttr('auto')).toBeUndefined();
|
||||
expect(pxAttr(undefined)).toBeUndefined();
|
||||
expect(pxAttr(400)).toBeUndefined();
|
||||
});
|
||||
});
|
||||
|
||||
describe('ImageBlock.toHtml CSS framing crop (aspect-ratio + object-fit + object-position)', () => {
|
||||
test('style.aspectRatio, objectFit, objectPosition all flow into the emitted style attribute', () => {
|
||||
const { html } = toHtml(
|
||||
{ src: 'https://example.com/photo.jpg', style: { aspectRatio: '16 / 9', objectFit: 'cover', objectPosition: 'center top' } },
|
||||
''
|
||||
);
|
||||
expect(html).toContain('aspect-ratio:16 / 9');
|
||||
expect(html).toContain('object-fit:cover');
|
||||
expect(html).toContain('object-position:center top');
|
||||
});
|
||||
});
|
||||
|
||||
describe('ImageBlock.toHtml box-model styles (margin/padding/border/shadow/opacity)', () => {
|
||||
test('margin/padding/border/box-shadow/opacity all flow into the emitted style attribute', () => {
|
||||
const { html } = toHtml(
|
||||
{
|
||||
src: 'https://example.com/photo.jpg',
|
||||
style: {
|
||||
marginTop: '10px', marginRight: '10px', marginBottom: '10px', marginLeft: '10px',
|
||||
paddingTop: '5px',
|
||||
border: '2px solid #ff0000',
|
||||
boxShadow: '0 4px 8px rgba(0,0,0,0.12)',
|
||||
opacity: '0.8',
|
||||
},
|
||||
},
|
||||
''
|
||||
);
|
||||
expect(html).toContain('margin-top:10px');
|
||||
expect(html).toContain('padding-top:5px');
|
||||
expect(html).toContain('border:2px solid #ff0000');
|
||||
expect(html).toContain('box-shadow:0 4px 8px rgba(0,0,0,0.12)');
|
||||
expect(html).toContain('opacity:0.8');
|
||||
});
|
||||
});
|
||||
|
||||
describe('ImageBlock.craft.props exposes the box-model/animation/visibility rollout', () => {
|
||||
test('animation, animationDelay, hideOnDesktop/Tablet/Mobile are present with blank/false defaults', () => {
|
||||
const props = (ImageBlock as any).craft.props;
|
||||
expect(props.animation).toBe('');
|
||||
expect(props.animationDelay).toBe('0');
|
||||
expect(props.hideOnDesktop).toBe(false);
|
||||
expect(props.hideOnTablet).toBe(false);
|
||||
expect(props.hideOnMobile).toBe(false);
|
||||
});
|
||||
|
||||
test('style carries blank/default box-model and crop keys', () => {
|
||||
const style = (ImageBlock as any).craft.props.style;
|
||||
expect(style).toHaveProperty('aspectRatio');
|
||||
expect(style).toHaveProperty('objectFit');
|
||||
expect(style).toHaveProperty('objectPosition');
|
||||
expect(style).toHaveProperty('marginTop');
|
||||
expect(style).toHaveProperty('paddingTop');
|
||||
expect(style.border).toBe('none');
|
||||
expect(style.boxShadow).toBe('none');
|
||||
expect(style.opacity).toBe('1');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -9,6 +9,23 @@ interface ImageBlockProps {
|
||||
src?: string;
|
||||
alt?: string;
|
||||
style?: CSSProperties;
|
||||
animation?: string;
|
||||
animationDelay?: string;
|
||||
hideOnDesktop?: boolean;
|
||||
hideOnTablet?: boolean;
|
||||
hideOnMobile?: boolean;
|
||||
}
|
||||
|
||||
/** Extracts the numeric portion of a plain "<n>px" CSS length string, for
|
||||
* emitting real `width`/`height` HTML attributes on the exported `<img>`
|
||||
* (helps the browser reserve layout space before the image loads --
|
||||
* avoiding CLS -- something a CSS-only width/height can't do on its own).
|
||||
* Returns undefined for any other unit ('%', 'auto', '', etc.) so the
|
||||
* attribute is simply omitted when the pixel size isn't known. */
|
||||
export function pxAttr(v: unknown): string | undefined {
|
||||
if (typeof v !== 'string') return undefined;
|
||||
const m = v.trim().match(/^(\d+(?:\.\d+)?)px$/);
|
||||
return m ? m[1] : undefined;
|
||||
}
|
||||
|
||||
// Helper: upload a file to the WHP API and return the proxy URL
|
||||
@@ -83,7 +100,27 @@ export const ImageBlock: UserComponent<ImageBlockProps> = ({
|
||||
|
||||
ImageBlock.craft = {
|
||||
displayName: 'Image',
|
||||
props: { src: PLACEHOLDER_SRC, alt: '', style: { width: '100%', height: 'auto' } },
|
||||
props: {
|
||||
src: PLACEHOLDER_SRC,
|
||||
alt: '',
|
||||
style: {
|
||||
width: '100%',
|
||||
height: 'auto',
|
||||
aspectRatio: '',
|
||||
objectFit: '' as CSSProperties['objectFit'],
|
||||
objectPosition: '',
|
||||
marginTop: '', marginRight: '', marginBottom: '', marginLeft: '',
|
||||
paddingTop: '', paddingRight: '', paddingBottom: '', paddingLeft: '',
|
||||
border: 'none',
|
||||
boxShadow: 'none',
|
||||
opacity: '1',
|
||||
},
|
||||
animation: '',
|
||||
animationDelay: '0',
|
||||
hideOnDesktop: false,
|
||||
hideOnTablet: false,
|
||||
hideOnMobile: false,
|
||||
},
|
||||
rules: { canDrag: () => true, canMoveIn: () => false, canMoveOut: () => true },
|
||||
};
|
||||
|
||||
@@ -95,5 +132,8 @@ ImageBlock.craft = {
|
||||
}
|
||||
const s = cssPropsToString({ display: 'block', maxWidth: '100%', ...props.style });
|
||||
const alt = props.alt ? ` alt="${escapeAttr(props.alt)}"` : ' alt=""';
|
||||
return { html: `<img src="${escapeAttr(safeImageUrl(src))}"${alt}${s ? ` style="${s}"` : ''} />` };
|
||||
const widthAttr = pxAttr((props.style as any)?.width);
|
||||
const heightAttr = pxAttr((props.style as any)?.height);
|
||||
const dims = `${widthAttr ? ` width="${widthAttr}"` : ''}${heightAttr ? ` height="${heightAttr}"` : ''}`;
|
||||
return { html: `<img src="${escapeAttr(safeImageUrl(src))}"${alt}${dims} loading="lazy" decoding="async"${s ? ` style="${s}"` : ''} />` };
|
||||
};
|
||||
|
||||
@@ -28,6 +28,49 @@ describe('MapEmbed.toHtml iframe src ampersand encoding (F-export review Minor)'
|
||||
});
|
||||
});
|
||||
|
||||
describe('MapEmbed.toHtml box-model styles (margin/padding/border/shadow/opacity)', () => {
|
||||
test('margin/padding/border/box-shadow/opacity all flow into the wrapper style attribute', () => {
|
||||
const { html } = toHtml(
|
||||
{
|
||||
address: 'New York, NY',
|
||||
style: {
|
||||
marginTop: '16px',
|
||||
paddingRight: '4px',
|
||||
border: '1px solid #cccccc',
|
||||
boxShadow: '0 4px 8px rgba(0,0,0,0.12)',
|
||||
opacity: '0.95',
|
||||
},
|
||||
},
|
||||
''
|
||||
);
|
||||
expect(html).toContain('margin-top:16px');
|
||||
expect(html).toContain('padding-right:4px');
|
||||
expect(html).toContain('border:1px solid #cccccc');
|
||||
expect(html).toContain('box-shadow:0 4px 8px rgba(0,0,0,0.12)');
|
||||
expect(html).toContain('opacity:0.95');
|
||||
});
|
||||
});
|
||||
|
||||
describe('MapEmbed.craft.props exposes the animation/visibility rollout', () => {
|
||||
test('animation, animationDelay, hideOnDesktop/Tablet/Mobile are present with blank/false defaults', () => {
|
||||
const props = (MapEmbed as any).craft.props;
|
||||
expect(props.animation).toBe('');
|
||||
expect(props.animationDelay).toBe('0');
|
||||
expect(props.hideOnDesktop).toBe(false);
|
||||
expect(props.hideOnTablet).toBe(false);
|
||||
expect(props.hideOnMobile).toBe(false);
|
||||
});
|
||||
|
||||
test('style carries blank/default box-model keys', () => {
|
||||
const style = (MapEmbed as any).craft.props.style;
|
||||
expect(style).toHaveProperty('marginTop');
|
||||
expect(style).toHaveProperty('paddingTop');
|
||||
expect(style.border).toBe('none');
|
||||
expect(style.boxShadow).toBe('none');
|
||||
expect(style.opacity).toBe('1');
|
||||
});
|
||||
});
|
||||
|
||||
describe('MapEmbed.toHtml address/zoom/height XSS hardening', () => {
|
||||
test('a malicious address cannot break out of the src or title attribute', () => {
|
||||
const malicious = 'X" onerror="alert(1)';
|
||||
|
||||
@@ -8,6 +8,11 @@ interface MapEmbedProps {
|
||||
zoom?: number;
|
||||
height?: string;
|
||||
style?: CSSProperties;
|
||||
animation?: string;
|
||||
animationDelay?: string;
|
||||
hideOnDesktop?: boolean;
|
||||
hideOnTablet?: boolean;
|
||||
hideOnMobile?: boolean;
|
||||
}
|
||||
|
||||
function buildMapUrl(address: string, zoom: number): string {
|
||||
@@ -70,7 +75,18 @@ MapEmbed.craft = {
|
||||
address: 'New York, NY',
|
||||
zoom: 14,
|
||||
height: '400px',
|
||||
style: {},
|
||||
style: {
|
||||
marginTop: '', marginRight: '', marginBottom: '', marginLeft: '',
|
||||
paddingTop: '', paddingRight: '', paddingBottom: '', paddingLeft: '',
|
||||
border: 'none',
|
||||
boxShadow: 'none',
|
||||
opacity: '1',
|
||||
},
|
||||
animation: '',
|
||||
animationDelay: '0',
|
||||
hideOnDesktop: false,
|
||||
hideOnTablet: false,
|
||||
hideOnMobile: false,
|
||||
},
|
||||
rules: {
|
||||
canDrag: () => true,
|
||||
|
||||
@@ -118,3 +118,75 @@ describe('VideoBlock.toHtml iframe src ampersand encoding (F-export review Minor
|
||||
expect(srcMatch![1]).not.toMatch(/&(?!amp;)/);
|
||||
});
|
||||
});
|
||||
|
||||
describe('VideoBlock.toHtml size + aspect ratio (frame honors style props, not a hardcoded 16:9)', () => {
|
||||
test('direct file: style.width flows to the wrapper, style.aspectRatio flows to the <video>', () => {
|
||||
const { html } = toHtml({ videoUrl: 'https://example.com/clip.mp4', style: { width: '50%', aspectRatio: '4 / 3' } }, '');
|
||||
expect(html).toMatch(/<div style="[^"]*width:50%[^"]*"/);
|
||||
expect(html).toMatch(/<video[^>]*style="[^"]*aspect-ratio:4 \/ 3[^"]*"/);
|
||||
});
|
||||
|
||||
test('direct file: no aspectRatio set -- no aspect-ratio declaration is forced onto the <video>', () => {
|
||||
const { html } = toHtml({ videoUrl: 'https://example.com/clip.mp4' }, '');
|
||||
const videoTag = html.match(/<video[^>]*>/)![0];
|
||||
expect(videoTag).not.toContain('aspect-ratio');
|
||||
});
|
||||
|
||||
test('YouTube/Vimeo: style.aspectRatio overrides the 16:9 default on the iframe container', () => {
|
||||
const { html } = toHtml({ videoUrl: 'https://vimeo.com/123456789', style: { aspectRatio: '1 / 1' } }, '');
|
||||
expect(html).toMatch(/<div[^>]*style="[^"]*aspect-ratio:1 \/ 1[^"]*"[^>]*><iframe/);
|
||||
});
|
||||
|
||||
test('YouTube/Vimeo: defaults to 16 / 9 when no aspectRatio style is set', () => {
|
||||
const { html } = toHtml({ videoUrl: 'https://vimeo.com/123456789' }, '');
|
||||
expect(html).toMatch(/<div[^>]*style="[^"]*aspect-ratio:16 \/ 9[^"]*"[^>]*><iframe/);
|
||||
});
|
||||
});
|
||||
|
||||
describe('VideoBlock.toHtml poster + preload (file type)', () => {
|
||||
test('poster attribute is emitted (escaped) and preload="metadata" is always present on a direct file', () => {
|
||||
const { html } = toHtml({ videoUrl: 'https://example.com/clip.mp4', poster: 'https://example.com/poster.jpg' }, '');
|
||||
expect(html).toContain('poster="https://example.com/poster.jpg"');
|
||||
expect(html).toContain('preload="metadata"');
|
||||
});
|
||||
|
||||
test('no poster prop -- no poster attribute is emitted, but preload="metadata" still is', () => {
|
||||
const { html } = toHtml({ videoUrl: 'https://example.com/clip.mp4' }, '');
|
||||
expect(html).not.toContain('poster=');
|
||||
expect(html).toContain('preload="metadata"');
|
||||
});
|
||||
|
||||
test('a malicious poster (javascript: scheme) is blocked by safeImageUrl', () => {
|
||||
const { html } = toHtml({ videoUrl: 'https://example.com/clip.mp4', poster: 'javascript:alert(1)' }, '');
|
||||
expect(html).not.toContain('javascript:');
|
||||
});
|
||||
|
||||
test('a poster value cannot break out of the poster attribute', () => {
|
||||
const malicious = 'https://example.com/x.jpg" onerror="alert(1)';
|
||||
const { html } = toHtml({ videoUrl: 'https://example.com/clip.mp4', poster: malicious }, '');
|
||||
expect(html).not.toContain('onerror="alert(1)"');
|
||||
});
|
||||
});
|
||||
|
||||
describe('VideoBlock.craft.props exposes the box-model/animation/visibility rollout', () => {
|
||||
test('poster, animation, animationDelay, hideOnDesktop/Tablet/Mobile are present with blank/false defaults', () => {
|
||||
const props = (VideoBlock as any).craft.props;
|
||||
expect(props.poster).toBe('');
|
||||
expect(props.animation).toBe('');
|
||||
expect(props.animationDelay).toBe('0');
|
||||
expect(props.hideOnDesktop).toBe(false);
|
||||
expect(props.hideOnTablet).toBe(false);
|
||||
expect(props.hideOnMobile).toBe(false);
|
||||
});
|
||||
|
||||
test('style carries blank/default box-model + size/aspect keys', () => {
|
||||
const style = (VideoBlock as any).craft.props.style;
|
||||
expect(style).toHaveProperty('width');
|
||||
expect(style).toHaveProperty('aspectRatio');
|
||||
expect(style).toHaveProperty('marginTop');
|
||||
expect(style).toHaveProperty('paddingTop');
|
||||
expect(style.border).toBe('none');
|
||||
expect(style.boxShadow).toBe('none');
|
||||
expect(style.opacity).toBe('1');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -2,7 +2,7 @@ import React, { CSSProperties } from 'react';
|
||||
import { useNode, Element, UserComponent } from '@craftjs/core';
|
||||
import { Container } from '../layout/Container';
|
||||
import { cssPropsToString } from '../../utils/style-helpers';
|
||||
import { escapeAttr, safeUrl } from '../../utils/escape';
|
||||
import { escapeAttr, safeUrl, safeImageUrl } from '../../utils/escape';
|
||||
|
||||
/* ---------- Types ---------- */
|
||||
|
||||
@@ -12,6 +12,7 @@ interface VideoBlockProps {
|
||||
videoUrl?: string;
|
||||
videoType?: VideoType;
|
||||
embedUrl?: string;
|
||||
poster?: string;
|
||||
autoplay?: boolean;
|
||||
muted?: boolean;
|
||||
loop?: boolean;
|
||||
@@ -22,6 +23,11 @@ interface VideoBlockProps {
|
||||
innerMaxWidth?: string;
|
||||
style?: CSSProperties;
|
||||
children?: React.ReactNode;
|
||||
animation?: string;
|
||||
animationDelay?: string;
|
||||
hideOnDesktop?: boolean;
|
||||
hideOnTablet?: boolean;
|
||||
hideOnMobile?: boolean;
|
||||
}
|
||||
|
||||
/* ---------- URL detection ---------- */
|
||||
@@ -120,6 +126,7 @@ export const VideoBlock: UserComponent<VideoBlockProps> = ({
|
||||
videoUrl = '',
|
||||
videoType: _videoTypeProp,
|
||||
embedUrl: _embedUrlProp,
|
||||
poster = '',
|
||||
autoplay = false,
|
||||
muted = true,
|
||||
loop = false,
|
||||
@@ -259,8 +266,7 @@ export const VideoBlock: UserComponent<VideoBlockProps> = ({
|
||||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
paddingBottom: '56.25%',
|
||||
height: 0,
|
||||
aspectRatio: (style as any)?.aspectRatio || '16 / 9',
|
||||
overflow: 'hidden',
|
||||
borderRadius: (style as any)?.borderRadius || undefined,
|
||||
}}
|
||||
@@ -269,8 +275,7 @@ export const VideoBlock: UserComponent<VideoBlockProps> = ({
|
||||
src={buildEmbedParams(embedUrl, { autoplay, muted, loop, controls })}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
inset: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
border: 'none',
|
||||
@@ -284,14 +289,18 @@ export const VideoBlock: UserComponent<VideoBlockProps> = ({
|
||||
{type === 'file' && (
|
||||
<video
|
||||
src={embedUrl}
|
||||
poster={poster || undefined}
|
||||
autoPlay={autoplay}
|
||||
muted={muted}
|
||||
loop={loop}
|
||||
controls={controls}
|
||||
preload="metadata"
|
||||
playsInline
|
||||
style={{
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
aspectRatio: (style as any)?.aspectRatio || undefined,
|
||||
objectFit: 'cover',
|
||||
borderRadius: (style as any)?.borderRadius || undefined,
|
||||
}}
|
||||
/>
|
||||
@@ -310,6 +319,7 @@ VideoBlock.craft = {
|
||||
videoUrl: '',
|
||||
videoType: 'none',
|
||||
embedUrl: '',
|
||||
poster: '',
|
||||
autoplay: false,
|
||||
muted: true,
|
||||
loop: false,
|
||||
@@ -318,7 +328,20 @@ VideoBlock.craft = {
|
||||
overlayColor: '#000000',
|
||||
overlayOpacity: 50,
|
||||
innerMaxWidth: '1200px',
|
||||
style: {},
|
||||
style: {
|
||||
width: '',
|
||||
aspectRatio: '',
|
||||
marginTop: '', marginRight: '', marginBottom: '', marginLeft: '',
|
||||
paddingTop: '', paddingRight: '', paddingBottom: '', paddingLeft: '',
|
||||
border: 'none',
|
||||
boxShadow: 'none',
|
||||
opacity: '1',
|
||||
},
|
||||
animation: '',
|
||||
animationDelay: '0',
|
||||
hideOnDesktop: false,
|
||||
hideOnTablet: false,
|
||||
hideOnMobile: false,
|
||||
},
|
||||
rules: {
|
||||
canDrag: () => true,
|
||||
@@ -334,6 +357,7 @@ VideoBlock.craft = {
|
||||
(VideoBlock as any).toHtml = (props: VideoBlockProps, childrenHtml: string) => {
|
||||
const {
|
||||
videoUrl = '',
|
||||
poster = '',
|
||||
autoplay = false,
|
||||
muted = true,
|
||||
loop: doLoop = false,
|
||||
@@ -422,15 +446,13 @@ VideoBlock.craft = {
|
||||
const iframeSrc = buildEmbedParams(embedUrl, { autoplay, muted, loop: doLoop, controls });
|
||||
const containerStyle = cssPropsToString({
|
||||
position: 'relative',
|
||||
paddingBottom: '56.25%',
|
||||
height: '0',
|
||||
aspectRatio: (style as any)?.aspectRatio || '16 / 9',
|
||||
overflow: 'hidden',
|
||||
borderRadius: (style as any)?.borderRadius || undefined,
|
||||
});
|
||||
const iframeStyle = cssPropsToString({
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
left: '0',
|
||||
inset: '0',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
border: 'none',
|
||||
@@ -447,13 +469,16 @@ VideoBlock.craft = {
|
||||
if (doLoop) vidAttrs.push('loop');
|
||||
if (controls) vidAttrs.push('controls');
|
||||
vidAttrs.push('playsinline');
|
||||
const posterAttr = poster ? ` poster="${escapeAttr(safeImageUrl(poster))}"` : '';
|
||||
const vidStyle = cssPropsToString({
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
aspectRatio: (style as any)?.aspectRatio || undefined,
|
||||
objectFit: 'cover',
|
||||
borderRadius: (style as any)?.borderRadius || undefined,
|
||||
});
|
||||
|
||||
return {
|
||||
html: `<div${wrapperStyle ? ` style="${wrapperStyle}"` : ''}><video src="${escapeAttr(safeUrl(embedUrl))}" ${vidAttrs.join(' ')}${vidStyle ? ` style="${vidStyle}"` : ''}></video></div>`,
|
||||
html: `<div${wrapperStyle ? ` style="${wrapperStyle}"` : ''}><video src="${escapeAttr(safeUrl(embedUrl))}"${posterAttr} preload="metadata" ${vidAttrs.join(' ')}${vidStyle ? ` style="${vidStyle}"` : ''}></video></div>`,
|
||||
};
|
||||
};
|
||||
|
||||
@@ -139,3 +139,46 @@ describe('ContentSlider.toHtml interval is NOT runtime-type-checked -- must be c
|
||||
expect(html).toMatch(/setInterval\(function\(\)\{show\(current\+1\);\},3000\);/);
|
||||
});
|
||||
});
|
||||
|
||||
describe('ContentSlider.toHtml box-model styles (margin/padding/border/shadow/opacity)', () => {
|
||||
test('margin/padding/border/box-shadow/opacity all flow into the section style attribute', () => {
|
||||
const { html } = toHtml(
|
||||
{
|
||||
slides,
|
||||
style: {
|
||||
marginBottom: '24px',
|
||||
paddingTop: '8px',
|
||||
border: '3px dashed #00ff00',
|
||||
boxShadow: '0 10px 24px rgba(0,0,0,0.18)',
|
||||
opacity: '0.75',
|
||||
},
|
||||
},
|
||||
''
|
||||
);
|
||||
expect(html).toContain('margin-bottom:24px');
|
||||
expect(html).toContain('padding-top:8px');
|
||||
expect(html).toContain('border:3px dashed #00ff00');
|
||||
expect(html).toContain('box-shadow:0 10px 24px rgba(0,0,0,0.18)');
|
||||
expect(html).toContain('opacity:0.75');
|
||||
});
|
||||
});
|
||||
|
||||
describe('ContentSlider.craft.props exposes the animation/visibility rollout', () => {
|
||||
test('animation, animationDelay, hideOnDesktop/Tablet/Mobile are present with blank/false defaults', () => {
|
||||
const props = (ContentSlider as any).craft.props;
|
||||
expect(props.animation).toBe('');
|
||||
expect(props.animationDelay).toBe('0');
|
||||
expect(props.hideOnDesktop).toBe(false);
|
||||
expect(props.hideOnTablet).toBe(false);
|
||||
expect(props.hideOnMobile).toBe(false);
|
||||
});
|
||||
|
||||
test('style carries blank/default box-model keys', () => {
|
||||
const style = (ContentSlider as any).craft.props.style;
|
||||
expect(style).toHaveProperty('marginTop');
|
||||
expect(style).toHaveProperty('paddingTop');
|
||||
expect(style.border).toBe('none');
|
||||
expect(style.boxShadow).toBe('none');
|
||||
expect(style.opacity).toBe('1');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -21,6 +21,11 @@ interface ContentSliderProps {
|
||||
showArrows?: boolean;
|
||||
height?: string;
|
||||
style?: CSSProperties;
|
||||
animation?: string;
|
||||
animationDelay?: string;
|
||||
hideOnDesktop?: boolean;
|
||||
hideOnTablet?: boolean;
|
||||
hideOnMobile?: boolean;
|
||||
}
|
||||
|
||||
const defaultSlides: Slide[] = [
|
||||
@@ -227,7 +232,18 @@ ContentSlider.craft = {
|
||||
showDots: true,
|
||||
showArrows: true,
|
||||
height: '400px',
|
||||
style: {},
|
||||
style: {
|
||||
marginTop: '', marginRight: '', marginBottom: '', marginLeft: '',
|
||||
paddingTop: '', paddingRight: '', paddingBottom: '', paddingLeft: '',
|
||||
border: 'none',
|
||||
boxShadow: 'none',
|
||||
opacity: '1',
|
||||
},
|
||||
animation: '',
|
||||
animationDelay: '0',
|
||||
hideOnDesktop: false,
|
||||
hideOnTablet: false,
|
||||
hideOnMobile: false,
|
||||
},
|
||||
rules: {
|
||||
canDrag: () => true,
|
||||
|
||||
@@ -3,6 +3,73 @@ import { Gallery } from './Gallery';
|
||||
|
||||
const toHtml = (Gallery as any).toHtml;
|
||||
|
||||
describe('Gallery.toHtml columns + lightbox controls (previously unexposed props)', () => {
|
||||
test('columns drives the grid-template-columns repeat count', () => {
|
||||
const { html } = toHtml({ images: [{ src: '/a.jpg', alt: 'a' }], columns: 5 }, '');
|
||||
expect(html).toContain('grid-template-columns:repeat(5,1fr)');
|
||||
});
|
||||
|
||||
test('lightbox=true adds the delegated-listener overlay markup (columns unaffected)', () => {
|
||||
const { html } = toHtml({ images: [{ src: '/a.jpg', alt: 'a' }], columns: 4, lightbox: true }, '');
|
||||
expect(html).toContain('grid-template-columns:repeat(4,1fr)');
|
||||
expect(html).toContain('role="dialog"');
|
||||
});
|
||||
|
||||
test('a non-numeric columns value falls back safely (Number() coercion, not NaN in the template)', () => {
|
||||
const { html } = toHtml({ images: [{ src: '/a.jpg' }], columns: 'not-a-number' as any }, '');
|
||||
expect(html).toContain('grid-template-columns:repeat(3,1fr)');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Gallery.toHtml box-model styles (margin/padding/border/shadow/opacity)', () => {
|
||||
test('margin/padding/border/box-shadow/opacity all flow into the section style attribute', () => {
|
||||
const { html } = toHtml(
|
||||
{
|
||||
images: [{ src: '/a.jpg', alt: 'a' }],
|
||||
style: {
|
||||
marginTop: '20px',
|
||||
paddingLeft: '12px',
|
||||
border: '1px solid #333333',
|
||||
boxShadow: '0 1px 2px rgba(0,0,0,0.08)',
|
||||
opacity: '0.9',
|
||||
},
|
||||
},
|
||||
''
|
||||
);
|
||||
expect(html).toContain('margin-top:20px');
|
||||
expect(html).toContain('padding-left:12px');
|
||||
expect(html).toContain('border:1px solid #333333');
|
||||
expect(html).toContain('box-shadow:0 1px 2px rgba(0,0,0,0.08)');
|
||||
expect(html).toContain('opacity:0.9');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Gallery.craft.props exposes columns/lightbox + the animation/visibility rollout', () => {
|
||||
test('columns and lightbox have their existing defaults', () => {
|
||||
const props = (Gallery as any).craft.props;
|
||||
expect(props.columns).toBe(3);
|
||||
expect(props.lightbox).toBe(false);
|
||||
});
|
||||
|
||||
test('animation, animationDelay, hideOnDesktop/Tablet/Mobile are present with blank/false defaults', () => {
|
||||
const props = (Gallery as any).craft.props;
|
||||
expect(props.animation).toBe('');
|
||||
expect(props.animationDelay).toBe('0');
|
||||
expect(props.hideOnDesktop).toBe(false);
|
||||
expect(props.hideOnTablet).toBe(false);
|
||||
expect(props.hideOnMobile).toBe(false);
|
||||
});
|
||||
|
||||
test('style carries blank/default box-model keys', () => {
|
||||
const style = (Gallery as any).craft.props.style;
|
||||
expect(style).toHaveProperty('marginTop');
|
||||
expect(style).toHaveProperty('paddingTop');
|
||||
expect(style.border).toBe('none');
|
||||
expect(style.boxShadow).toBe('none');
|
||||
expect(style.opacity).toBe('1');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Gallery.toHtml lightbox uses a delegated listener, not per-item onclick (A4.3)', () => {
|
||||
test('no per-item inline onclick with interpolated src', () => {
|
||||
const { html } = toHtml({ images: [{ src: '/a.jpg', alt: 'a' }], lightbox: true }, '');
|
||||
|
||||
@@ -15,6 +15,11 @@ interface GalleryProps {
|
||||
gap?: string;
|
||||
style?: CSSProperties;
|
||||
lightbox?: boolean;
|
||||
animation?: string;
|
||||
animationDelay?: string;
|
||||
hideOnDesktop?: boolean;
|
||||
hideOnTablet?: boolean;
|
||||
hideOnMobile?: boolean;
|
||||
}
|
||||
|
||||
const placeholderSvg = (index: number) => {
|
||||
@@ -112,8 +117,20 @@ Gallery.craft = {
|
||||
images: defaultImages,
|
||||
columns: 3,
|
||||
gap: '16px',
|
||||
style: { backgroundColor: '#ffffff' },
|
||||
style: {
|
||||
backgroundColor: '#ffffff',
|
||||
marginTop: '', marginRight: '', marginBottom: '', marginLeft: '',
|
||||
paddingTop: '', paddingRight: '', paddingBottom: '', paddingLeft: '',
|
||||
border: 'none',
|
||||
boxShadow: 'none',
|
||||
opacity: '1',
|
||||
},
|
||||
lightbox: false,
|
||||
animation: '',
|
||||
animationDelay: '0',
|
||||
hideOnDesktop: false,
|
||||
hideOnTablet: false,
|
||||
hideOnMobile: false,
|
||||
},
|
||||
rules: {
|
||||
canDrag: () => true,
|
||||
|
||||
@@ -10,40 +10,18 @@ import {
|
||||
ColorSwatchGrid,
|
||||
GradientSwatchGrid,
|
||||
PresetButtonGrid,
|
||||
NumericUnitInput,
|
||||
labelStyle,
|
||||
inputStyle,
|
||||
sectionGap,
|
||||
useNodeProp,
|
||||
} from './shared';
|
||||
import { BoxModelSection, BorderEffectsSection, AnimVisSection } from './containerBoxModel';
|
||||
|
||||
// Vertical Alignment options shown to the user identically regardless of
|
||||
// which CSS property they end up mapped to (align-items for the Columns
|
||||
// flex ROW vs. justify-content for Container/Section's flex COLUMN root --
|
||||
// see the per-type branch below).
|
||||
const VERTICAL_ALIGN_OPTIONS: { label: string; value: string }[] = [
|
||||
{ label: 'Top', value: 'flex-start' },
|
||||
{ label: 'Center', value: 'center' },
|
||||
{ label: 'Bottom', value: 'flex-end' },
|
||||
{ label: 'Stretch', value: 'stretch' },
|
||||
];
|
||||
|
||||
/* ---------- CONTAINER / SECTION / COLUMNS ---------- */
|
||||
/* ---------- CONTAINER / SECTION ---------- */
|
||||
export const ContainerStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps }) => {
|
||||
const style: CSSProperties = nodeProps.style || {};
|
||||
|
||||
const { setProp, setPropStyle } = useNodeProp(selectedId);
|
||||
|
||||
// ColumnLayout only ever carries `columns`/`split` props -- Container and
|
||||
// Section never set them -- so checking either alone distinguishes the
|
||||
// flex-ROW case (align its columns via align-items, aligning uneven
|
||||
// column heights) from the flex-COLUMN case (Container/Section, which
|
||||
// vertically center/position their OWN content via justify-content,
|
||||
// paired with a Min Height control so centering is meaningful).
|
||||
const isColumns = nodeProps.columns !== undefined || nodeProps.split !== undefined;
|
||||
const vAlignKey = isColumns ? 'alignItems' : 'justifyContent';
|
||||
|
||||
return (
|
||||
<>
|
||||
{nodeProps.cssId !== undefined && (
|
||||
@@ -116,30 +94,6 @@ export const ContainerStylePanel: React.FC<StylePanelProps> = ({ selectedId, nod
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="guided-section">
|
||||
<SectionLabel>Vertical Alignment</SectionLabel>
|
||||
<PresetButtonGrid
|
||||
presets={VERTICAL_ALIGN_OPTIONS}
|
||||
activeValue={style[vAlignKey] as string}
|
||||
onSelect={(v) => setPropStyle(vAlignKey, v)}
|
||||
/>
|
||||
</div>
|
||||
{!isColumns && (
|
||||
<div className="guided-section">
|
||||
<SectionLabel>Min Height</SectionLabel>
|
||||
<NumericUnitInput
|
||||
value={(style.minHeight as string) || ''}
|
||||
onChange={(v) => setPropStyle('minHeight', v)}
|
||||
units={['px', 'vh', '%']}
|
||||
placeholder="auto"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Box model + border/effects + animation/visibility rollout */}
|
||||
<BoxModelSection style={style} setPropStyle={setPropStyle} />
|
||||
<BorderEffectsSection style={style} setPropStyle={setPropStyle} />
|
||||
<AnimVisSection nodeProps={nodeProps} setProp={setProp} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -2,30 +2,28 @@ import React, { CSSProperties } from 'react';
|
||||
import { useEditor } from '@craftjs/core';
|
||||
import {
|
||||
IMAGE_RADIUS_PRESETS,
|
||||
OBJECT_FIT,
|
||||
} from '../../../constants/presets';
|
||||
import {
|
||||
StylePanelProps,
|
||||
SectionLabel,
|
||||
PresetButtonGrid,
|
||||
TextInputField,
|
||||
SizeControl,
|
||||
AspectRatioControl,
|
||||
FocalPointGrid,
|
||||
useNodeProp,
|
||||
} from './shared';
|
||||
import { AssetPicker } from '../../../ui/AssetPicker';
|
||||
import { PLACEHOLDER_SRC } from '../../../components/media/ImageBlock';
|
||||
import { BoxModelSection, BorderEffectsSection, AnimVisSection } from './mediaBoxModel';
|
||||
|
||||
/* ---------- IMAGE (with upload/browse/drop) ---------- */
|
||||
export const ImageStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps }) => {
|
||||
const { actions } = useEditor();
|
||||
const style: CSSProperties = nodeProps.style || {};
|
||||
|
||||
const { setPropStyle } = useNodeProp(selectedId);
|
||||
|
||||
const maxWidthPresets = [
|
||||
{ label: '25%', value: '25%' },
|
||||
{ label: '50%', value: '50%' },
|
||||
{ label: '75%', value: '75%' },
|
||||
{ label: '100%', value: '100%' },
|
||||
];
|
||||
const { setProp, setPropStyle } = useNodeProp(selectedId);
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -49,6 +47,39 @@ export const ImageStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodePro
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Size -- Width absorbs the historical maxWidth presets (25/50/75/100%
|
||||
are a subset of SizeControl's default preset row), Height is new. */}
|
||||
<SizeControl
|
||||
label="Width"
|
||||
value={(style.maxWidth as string) || ''}
|
||||
onChange={(v) => setPropStyle('maxWidth', v)}
|
||||
/>
|
||||
<SizeControl
|
||||
label="Height"
|
||||
value={(style.height as string) || ''}
|
||||
onChange={(v) => setPropStyle('height', v)}
|
||||
/>
|
||||
|
||||
{/* Crop & Framing -- aspect-ratio + object-fit + object-position on the
|
||||
<img> itself is a CSS framing crop (no server-side image processing
|
||||
needed). */}
|
||||
<AspectRatioControl
|
||||
value={(style.aspectRatio as string) || ''}
|
||||
onChange={(v) => setPropStyle('aspectRatio', v)}
|
||||
/>
|
||||
<div className="guided-section">
|
||||
<SectionLabel>Object Fit</SectionLabel>
|
||||
<PresetButtonGrid
|
||||
presets={OBJECT_FIT}
|
||||
activeValue={(style.objectFit as string) || ''}
|
||||
onSelect={(v) => setPropStyle('objectFit', v)}
|
||||
/>
|
||||
</div>
|
||||
<FocalPointGrid
|
||||
value={(style.objectPosition as string) || ''}
|
||||
onChange={(v) => setPropStyle('objectPosition', v)}
|
||||
/>
|
||||
|
||||
{/* Border Radius */}
|
||||
<div className="guided-section">
|
||||
<SectionLabel>Border Radius</SectionLabel>
|
||||
@@ -59,15 +90,10 @@ export const ImageStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodePro
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Max Width */}
|
||||
<div className="guided-section">
|
||||
<SectionLabel>Max Width</SectionLabel>
|
||||
<PresetButtonGrid
|
||||
presets={maxWidthPresets}
|
||||
activeValue={style.maxWidth as string}
|
||||
onSelect={(v) => setPropStyle('maxWidth', v)}
|
||||
/>
|
||||
</div>
|
||||
{/* Box model + animation/visibility rollout */}
|
||||
<BoxModelSection style={style} setPropStyle={setPropStyle} />
|
||||
<BorderEffectsSection style={style} setPropStyle={setPropStyle} />
|
||||
<AnimVisSection nodeProps={nodeProps} setProp={setProp} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -2,7 +2,6 @@ import React from 'react';
|
||||
import { useEditor } from '@craftjs/core';
|
||||
import {
|
||||
BG_COLORS,
|
||||
SPACING_PRESETS,
|
||||
RADIUS_PRESETS,
|
||||
} from '../../../constants/presets';
|
||||
import {
|
||||
@@ -13,6 +12,8 @@ import {
|
||||
CollapsibleSection,
|
||||
ColorPickerField,
|
||||
ArrayPropEditor,
|
||||
SizeControl,
|
||||
AspectRatioControl,
|
||||
labelStyle,
|
||||
inputStyle,
|
||||
smallInputStyle,
|
||||
@@ -20,6 +21,14 @@ import {
|
||||
useNodeProp,
|
||||
} from './shared';
|
||||
import { AssetPicker } from '../../../ui/AssetPicker';
|
||||
import { BoxModelSection, BorderEffectsSection, AnimVisSection } from './mediaBoxModel';
|
||||
|
||||
const GALLERY_COLUMN_PRESETS = [
|
||||
{ label: '2', value: '2' },
|
||||
{ label: '3', value: '3' },
|
||||
{ label: '4', value: '4' },
|
||||
{ label: '5', value: '5' },
|
||||
];
|
||||
|
||||
/* ---------- MEDIA (Video / Gallery / Map / Slider) ---------- */
|
||||
export const MediaStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps }) => {
|
||||
@@ -30,11 +39,48 @@ export const MediaStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodePro
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Video URL */}
|
||||
{/* Video source -- upload/browse/paste-URL (paste-URL still handles
|
||||
YouTube/Vimeo; upload/browse handle files via detectVideoType's
|
||||
serve_asset resolution). */}
|
||||
{nodeProps.videoUrl !== undefined && (
|
||||
<div style={sectionGap}>
|
||||
<label style={labelStyle}>Video URL</label>
|
||||
<input type="text" value={nodeProps.videoUrl || ''} onChange={(e) => setProp('videoUrl', e.target.value)} placeholder="YouTube, Vimeo, or .mp4 URL" style={inputStyle} />
|
||||
<div className="guided-section">
|
||||
<SectionLabel>Video Source</SectionLabel>
|
||||
<AssetPicker
|
||||
mediaType="video"
|
||||
value={nodeProps.videoUrl || ''}
|
||||
onChange={(url) => setProp('videoUrl', url)}
|
||||
variant="full"
|
||||
placeholder="Or paste a YouTube/Vimeo/.mp4 URL..."
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Video size -- width + aspect ratio for the video frame. */}
|
||||
{nodeProps.videoUrl !== undefined && (
|
||||
<>
|
||||
<SizeControl
|
||||
label="Width"
|
||||
value={(style.width as string) || ''}
|
||||
onChange={(v) => setPropStyle('width', v)}
|
||||
/>
|
||||
<AspectRatioControl
|
||||
value={(style.aspectRatio as string) || ''}
|
||||
onChange={(v) => setPropStyle('aspectRatio', v)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Poster image (optional, file-type videos only in practice but
|
||||
harmless to offer whenever the component has a poster prop). */}
|
||||
{nodeProps.poster !== undefined && (
|
||||
<div className="guided-section">
|
||||
<SectionLabel>Poster Image (optional)</SectionLabel>
|
||||
<AssetPicker
|
||||
mediaType="image"
|
||||
value={nodeProps.poster || ''}
|
||||
onChange={(url) => setProp('poster', url)}
|
||||
variant="full"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -80,6 +126,26 @@ export const MediaStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodePro
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Gallery layout -- columns + lightbox (existing-but-previously-unexposed props). */}
|
||||
{nodeProps.images !== undefined && Array.isArray(nodeProps.images) && (
|
||||
<>
|
||||
<div className="guided-section">
|
||||
<SectionLabel>Columns</SectionLabel>
|
||||
<PresetButtonGrid
|
||||
presets={GALLERY_COLUMN_PRESETS}
|
||||
activeValue={String(nodeProps.columns ?? 3)}
|
||||
onSelect={(v) => setProp('columns', Number(v))}
|
||||
/>
|
||||
</div>
|
||||
<div style={sectionGap}>
|
||||
<label style={{ ...labelStyle, display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer' }}>
|
||||
<input type="checkbox" checked={!!nodeProps.lightbox} onChange={(e) => setProp('lightbox', e.target.checked)} />
|
||||
Enable Lightbox
|
||||
</label>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Gallery items */}
|
||||
{nodeProps.images !== undefined && Array.isArray(nodeProps.images) && (
|
||||
<CollapsibleSection title="Images">
|
||||
@@ -178,21 +244,23 @@ export const MediaStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodePro
|
||||
</CollapsibleSection>
|
||||
)}
|
||||
|
||||
{/* Background & padding */}
|
||||
{/* Background & radius */}
|
||||
<CollapsibleSection title="Style" defaultOpen={false}>
|
||||
<div className="guided-section">
|
||||
<SectionLabel>Background</SectionLabel>
|
||||
<ColorSwatchGrid colors={BG_COLORS} activeValue={style.backgroundColor} onSelect={(v: string) => setPropStyle('backgroundColor', v)} />
|
||||
</div>
|
||||
<div className="guided-section">
|
||||
<SectionLabel>Padding</SectionLabel>
|
||||
<PresetButtonGrid presets={SPACING_PRESETS} activeValue={style.padding as string} onSelect={(v) => setPropStyle('padding', v)} />
|
||||
</div>
|
||||
<div className="guided-section">
|
||||
<SectionLabel>Border Radius</SectionLabel>
|
||||
<PresetButtonGrid presets={RADIUS_PRESETS} activeValue={style.borderRadius as string} onSelect={(v) => setPropStyle('borderRadius', v)} />
|
||||
</div>
|
||||
</CollapsibleSection>
|
||||
|
||||
{/* Box model + animation/visibility rollout (Video/Gallery/Map/Slider
|
||||
all carry these props now, so it's safe to render unconditionally). */}
|
||||
<BoxModelSection style={style} setPropStyle={setPropStyle} />
|
||||
<BorderEffectsSection style={style} setPropStyle={setPropStyle} />
|
||||
<AnimVisSection nodeProps={nodeProps} setProp={setProp} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,149 @@
|
||||
import { describe, test, expect, vi, beforeEach, afterEach } from 'vitest';
|
||||
import React from 'react';
|
||||
import { createRoot, Root } from 'react-dom/client';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
|
||||
/* Same DOM-harness pattern as MediaStylePanel.slides.test.tsx -- mock
|
||||
@craftjs/core's useEditor so setProp calls can be observed without
|
||||
mounting a real <Editor> tree, and mock utils/assets so AssetPicker
|
||||
doesn't hit the network. */
|
||||
const setPropSpy = vi.fn((_id: string, updater: (p: any) => void) => {
|
||||
updater(lastProps);
|
||||
});
|
||||
let lastProps: any;
|
||||
|
||||
vi.mock('@craftjs/core', () => ({
|
||||
useEditor: () => ({ actions: { setProp: setPropSpy } }),
|
||||
}));
|
||||
|
||||
vi.mock('../../../utils/assets', () => ({
|
||||
uploadAsset: vi.fn(),
|
||||
listAssets: vi.fn(),
|
||||
}));
|
||||
|
||||
import { MediaStylePanel } from './MediaStylePanel';
|
||||
|
||||
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);
|
||||
});
|
||||
}
|
||||
|
||||
function unmount() {
|
||||
act(() => { root.unmount(); });
|
||||
container.remove();
|
||||
}
|
||||
|
||||
function q<T extends Element = Element>(testId: string): T | null {
|
||||
return container.querySelector(`[data-testid="${testId}"]`);
|
||||
}
|
||||
|
||||
function qAll<T extends Element = Element>(testId: string): T[] {
|
||||
return Array.from(container.querySelectorAll(`[data-testid="${testId}"]`));
|
||||
}
|
||||
|
||||
function setValue(input: HTMLInputElement, value: string) {
|
||||
const setter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')!.set!;
|
||||
setter.call(input, value);
|
||||
input.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
setPropSpy.mockClear();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
if (container) unmount();
|
||||
});
|
||||
|
||||
describe('MediaStylePanel Video source uses AssetPicker (upload/browse/paste-URL), not a plain text input', () => {
|
||||
test('renders a full-variant AssetPicker (not the old plain input) for videoUrl', () => {
|
||||
lastProps = { videoUrl: '', poster: '', style: {} };
|
||||
render(<MediaStylePanel selectedId="vid-1" nodeProps={lastProps} />);
|
||||
expect(q('asset-picker-full')).not.toBeNull();
|
||||
});
|
||||
|
||||
test('applying a pasted URL via the AssetPicker writes videoUrl (not some other key)', () => {
|
||||
lastProps = { videoUrl: '', poster: '', style: {} };
|
||||
render(<MediaStylePanel selectedId="vid-1" nodeProps={lastProps} />);
|
||||
|
||||
// The Video Source AssetPicker is the first url-input on the page (the
|
||||
// Poster picker is a second, separate AssetPicker instance below it).
|
||||
const urlInput = qAll<HTMLInputElement>('asset-picker-url-input')[0];
|
||||
expect(urlInput).toBeTruthy();
|
||||
setValue(urlInput, 'https://example.com/clip.mp4');
|
||||
|
||||
const applyBtn = qAll<HTMLButtonElement>('asset-picker-apply')[0];
|
||||
act(() => {
|
||||
applyBtn.dispatchEvent(new MouseEvent('click', { bubbles: true }));
|
||||
});
|
||||
|
||||
expect(setPropSpy).toHaveBeenCalled();
|
||||
expect(lastProps.videoUrl).toBe('https://example.com/clip.mp4');
|
||||
});
|
||||
|
||||
test('a video-shaped selection also renders a Poster AssetPicker (image) that writes `poster`', () => {
|
||||
lastProps = { videoUrl: 'https://example.com/clip.mp4', poster: '', style: {} };
|
||||
render(<MediaStylePanel selectedId="vid-1" nodeProps={lastProps} />);
|
||||
|
||||
const pickers = qAll('asset-picker-full');
|
||||
expect(pickers.length).toBe(2); // Video Source + Poster Image
|
||||
|
||||
const urlInputs = qAll<HTMLInputElement>('asset-picker-url-input');
|
||||
const posterInput = urlInputs[1];
|
||||
setValue(posterInput, 'https://example.com/poster.jpg');
|
||||
const applyBtns = qAll<HTMLButtonElement>('asset-picker-apply');
|
||||
act(() => {
|
||||
applyBtns[1].dispatchEvent(new MouseEvent('click', { bubbles: true }));
|
||||
});
|
||||
|
||||
expect(lastProps.poster).toBe('https://example.com/poster.jpg');
|
||||
});
|
||||
});
|
||||
|
||||
describe('MediaStylePanel Video size controls (Width + Aspect Ratio) are gated on videoUrl', () => {
|
||||
test('a video-shaped selection renders SizeControl + AspectRatioControl', () => {
|
||||
lastProps = { videoUrl: '', poster: '', style: {} };
|
||||
render(<MediaStylePanel selectedId="vid-1" nodeProps={lastProps} />);
|
||||
expect(q('size-control')).not.toBeNull();
|
||||
expect(q('aspect-ratio-control')).not.toBeNull();
|
||||
});
|
||||
|
||||
test('a Map-shaped selection (no videoUrl) does NOT render the video size controls', () => {
|
||||
lastProps = { address: 'New York, NY', zoom: 14, height: '400px', style: {} };
|
||||
render(<MediaStylePanel selectedId="map-1" nodeProps={lastProps} />);
|
||||
expect(q('size-control')).toBeNull();
|
||||
expect(q('aspect-ratio-control')).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
function openCollapsibleByTitle(title: string) {
|
||||
const btn = Array.from(container.querySelectorAll('button')).find((b) => b.textContent?.includes(title));
|
||||
expect(btn).toBeTruthy();
|
||||
act(() => {
|
||||
btn!.dispatchEvent(new MouseEvent('click', { bubbles: true }));
|
||||
});
|
||||
}
|
||||
|
||||
describe('MediaStylePanel box-model + animation/visibility rollout renders for every media type', () => {
|
||||
test('a Map-shaped selection still gets Spacing / Border & Effects / Animation & Visibility sections (collapsed by default, open on click)', () => {
|
||||
lastProps = { address: 'New York, NY', zoom: 14, height: '400px', style: {}, animation: '', hideOnDesktop: false };
|
||||
render(<MediaStylePanel selectedId="map-1" nodeProps={lastProps} />);
|
||||
|
||||
openCollapsibleByTitle('Spacing');
|
||||
expect(q('spacing-control')).not.toBeNull();
|
||||
|
||||
openCollapsibleByTitle('Border & Effects');
|
||||
expect(q('border-control')).not.toBeNull();
|
||||
|
||||
openCollapsibleByTitle('Animation & Visibility');
|
||||
expect(q('animation-control')).not.toBeNull();
|
||||
expect(q('visibility-control')).not.toBeNull();
|
||||
});
|
||||
});
|
||||
+5
-7
@@ -17,13 +17,11 @@ import {
|
||||
|
||||
/* ==========================================================================
|
||||
Shared box-model / border+effects / animation+visibility sections for the
|
||||
CONTAINERS package's single shared panel (ContainerStylePanel, used for
|
||||
Container / Section / Columns). Kept local to this package (not in
|
||||
shared.tsx, which is foundation/import-only) since it's just DRY-ing the
|
||||
identical JSX block across those 3 components rather than a genuinely
|
||||
cross-package reusable control. Mirrors the equivalent helper in the
|
||||
media package (mediaBoxModel.tsx) -- same shape, independently duplicated
|
||||
per-package by design (packages are developed and merged in parallel).
|
||||
MEDIA package's panels (ImageStylePanel + MediaStylePanel). Kept local to
|
||||
this package (not in shared.tsx, which is foundation/import-only) since
|
||||
it's just DRY-ing the identical JSX block across ImageBlock/VideoBlock/
|
||||
Gallery/ContentSlider/MapEmbed rather than a genuinely cross-package
|
||||
reusable control.
|
||||
========================================================================== */
|
||||
|
||||
function capitalize(s: string): string {
|
||||
Reference in New Issue
Block a user