Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
  shadowdaoandClaude Opus 4.8
|
5b19ae97af |
@@ -20,14 +20,3 @@ describe('Footer.toHtml text escaping (attacker-controlled `text` prop)', () =>
|
||||
expect(html).toContain('© 2026 MySite. All rights reserved.');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Footer (F4: box-model + animation + visibility props on craft.props)', () => {
|
||||
test('craft.props includes animation/visibility defaults so the panel controls always render', () => {
|
||||
const craftProps = (Footer as any).craft.props;
|
||||
expect(craftProps).toHaveProperty('animation', 'none');
|
||||
expect(craftProps).toHaveProperty('animationDelay', '0');
|
||||
expect(craftProps).toHaveProperty('hideOnDesktop', false);
|
||||
expect(craftProps).toHaveProperty('hideOnTablet', false);
|
||||
expect(craftProps).toHaveProperty('hideOnMobile', false);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -6,11 +6,6 @@ import { escapeHtml } from '../../utils/escape';
|
||||
interface FooterProps {
|
||||
text?: string;
|
||||
style?: CSSProperties;
|
||||
hideOnDesktop?: boolean;
|
||||
hideOnTablet?: boolean;
|
||||
hideOnMobile?: boolean;
|
||||
animation?: string;
|
||||
animationDelay?: string;
|
||||
}
|
||||
|
||||
export const Footer: UserComponent<FooterProps> = ({
|
||||
@@ -97,11 +92,6 @@ Footer.craft = {
|
||||
fontSize: '14px',
|
||||
padding: '24px 20px',
|
||||
},
|
||||
hideOnDesktop: false,
|
||||
hideOnTablet: false,
|
||||
hideOnMobile: false,
|
||||
animation: 'none',
|
||||
animationDelay: '0',
|
||||
},
|
||||
rules: {
|
||||
canDrag: () => true,
|
||||
|
||||
@@ -43,29 +43,6 @@ describe('Logo.toHtml image src/alt sanitization (type="image")', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('Logo.toHtml download attribute (F3: link-to-file toggle)', () => {
|
||||
test('download:true emits the download attribute', () => {
|
||||
const { html } = toHtml({ href: '/resume.pdf', download: true, text: 'Resume' }, '');
|
||||
expect(html).toMatch(/<a href="\/resume\.pdf" download/);
|
||||
});
|
||||
|
||||
test('no download prop -> no download attribute emitted', () => {
|
||||
const { html } = toHtml({ href: '/', text: 'MySite' }, '');
|
||||
expect(html).not.toContain('download');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Logo (F4: box-model + animation + visibility props on craft.props)', () => {
|
||||
test('craft.props includes animation/visibility defaults so the panel controls always render', () => {
|
||||
const craftProps = (Logo as any).craft.props;
|
||||
expect(craftProps).toHaveProperty('animation', 'none');
|
||||
expect(craftProps).toHaveProperty('animationDelay', '0');
|
||||
expect(craftProps).toHaveProperty('hideOnDesktop', false);
|
||||
expect(craftProps).toHaveProperty('hideOnTablet', false);
|
||||
expect(craftProps).toHaveProperty('hideOnMobile', false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Logo.toHtml text-logo styling sanitization', () => {
|
||||
test('a quote-breakout color does not escape the span style attribute', () => {
|
||||
const malicious = 'red" onmouseover="alert(1)';
|
||||
|
||||
@@ -12,18 +12,11 @@ interface LogoProps {
|
||||
imageSrc?: string;
|
||||
imageWidth?: string;
|
||||
href?: string;
|
||||
/** Adds the `download` attribute to the exported anchor (F3: link to a file). */
|
||||
download?: boolean;
|
||||
fontFamily?: string;
|
||||
fontSize?: string;
|
||||
fontWeight?: string;
|
||||
color?: string;
|
||||
style?: CSSProperties;
|
||||
hideOnDesktop?: boolean;
|
||||
hideOnTablet?: boolean;
|
||||
hideOnMobile?: boolean;
|
||||
animation?: string;
|
||||
animationDelay?: string;
|
||||
}
|
||||
|
||||
/* ---------- Component ---------- */
|
||||
@@ -34,7 +27,6 @@ export const Logo: UserComponent<LogoProps> = ({
|
||||
imageSrc = '',
|
||||
imageWidth = '120px',
|
||||
href = '/',
|
||||
download = false,
|
||||
fontFamily = 'Inter, sans-serif',
|
||||
fontSize = '20px',
|
||||
fontWeight = '700',
|
||||
@@ -52,7 +44,6 @@ export const Logo: UserComponent<LogoProps> = ({
|
||||
<a
|
||||
ref={(ref: HTMLElement | null): void => { if (ref) connect(drag(ref)); }}
|
||||
href={href}
|
||||
download={download || undefined}
|
||||
onClick={(e) => e.preventDefault()}
|
||||
style={{
|
||||
textDecoration: 'none',
|
||||
@@ -96,13 +87,7 @@ Logo.craft = {
|
||||
fontSize: '20px',
|
||||
fontWeight: '700',
|
||||
color: undefined,
|
||||
download: false,
|
||||
style: {},
|
||||
hideOnDesktop: false,
|
||||
hideOnTablet: false,
|
||||
hideOnMobile: false,
|
||||
animation: 'none',
|
||||
animationDelay: '0',
|
||||
} as LogoProps,
|
||||
rules: {
|
||||
canDrag: () => true,
|
||||
@@ -137,9 +122,8 @@ Logo.craft = {
|
||||
flexShrink: '0',
|
||||
...props.style,
|
||||
});
|
||||
const downloadAttr = props.download ? ' download' : '';
|
||||
|
||||
return {
|
||||
html: `<a href="${escapeAttr(safeUrl(href))}"${downloadAttr}${aStyle ? ` style="${aStyle}"` : ''}>${innerHtml}</a>`,
|
||||
html: `<a href="${escapeAttr(safeUrl(href))}"${aStyle ? ` style="${aStyle}"` : ''}>${innerHtml}</a>`,
|
||||
};
|
||||
};
|
||||
|
||||
@@ -31,29 +31,6 @@ describe('Menu.toHtml deterministic + unique scope ids (thread node id, no Math.
|
||||
});
|
||||
});
|
||||
|
||||
describe('Menu.toHtml download attribute (F3: link-to-file toggle)', () => {
|
||||
test('a link with download:true emits the download attribute', () => {
|
||||
const { html } = toHtml({ links: [{ text: 'Brochure', href: '/brochure.pdf', download: true }] }, '', 'node-dl1');
|
||||
expect(html).toMatch(/<a href="\/brochure\.pdf"[^>]* download[^>]*>Brochure<\/a>/);
|
||||
});
|
||||
|
||||
test('a link without download does not emit the attribute', () => {
|
||||
const { html } = toHtml({ links: [{ text: 'Home', href: '/' }] }, '', 'node-dl2');
|
||||
expect(html).not.toContain(' download');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Menu (F4: box-model + animation + visibility props on craft.props)', () => {
|
||||
test('craft.props includes animation/visibility defaults so the panel controls always render', () => {
|
||||
const craftProps = (Menu as any).craft.props;
|
||||
expect(craftProps).toHaveProperty('animation', 'none');
|
||||
expect(craftProps).toHaveProperty('animationDelay', '0');
|
||||
expect(craftProps).toHaveProperty('hideOnDesktop', false);
|
||||
expect(craftProps).toHaveProperty('hideOnTablet', false);
|
||||
expect(craftProps).toHaveProperty('hideOnMobile', false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Menu.toHtml XSS hardening (linkHoverColor into <style>)', () => {
|
||||
test('a linkHoverColor value containing </style><script> is neutralized', () => {
|
||||
const malicious = '#fff}</style><script>alert(1)</script><style>{';
|
||||
|
||||
@@ -10,8 +10,6 @@ interface MenuLink {
|
||||
href: string;
|
||||
isExternal?: boolean;
|
||||
isCta?: boolean;
|
||||
/** Adds the `download` attribute to the exported anchor (F3: links to files). */
|
||||
download?: boolean;
|
||||
}
|
||||
|
||||
interface MenuProps {
|
||||
@@ -25,11 +23,6 @@ interface MenuProps {
|
||||
orientation?: 'horizontal' | 'vertical';
|
||||
fontSize?: string;
|
||||
style?: CSSProperties;
|
||||
hideOnDesktop?: boolean;
|
||||
hideOnTablet?: boolean;
|
||||
hideOnMobile?: boolean;
|
||||
animation?: string;
|
||||
animationDelay?: string;
|
||||
}
|
||||
|
||||
/* ---------- Defaults ---------- */
|
||||
@@ -82,7 +75,6 @@ export const Menu: UserComponent<MenuProps> = ({
|
||||
href={link.href}
|
||||
target={link.isExternal ? '_blank' : undefined}
|
||||
rel={link.isExternal ? 'noopener noreferrer' : undefined}
|
||||
download={link.download || undefined}
|
||||
onClick={(e) => e.preventDefault()}
|
||||
onMouseEnter={() => setHoveredLink(i)}
|
||||
onMouseLeave={() => setHoveredLink(null)}
|
||||
@@ -122,11 +114,6 @@ Menu.craft = {
|
||||
orientation: 'horizontal',
|
||||
fontSize: '14px',
|
||||
style: {},
|
||||
hideOnDesktop: false,
|
||||
hideOnTablet: false,
|
||||
hideOnMobile: false,
|
||||
animation: 'none',
|
||||
animationDelay: '0',
|
||||
} as MenuProps,
|
||||
rules: {
|
||||
canDrag: () => true,
|
||||
@@ -175,7 +162,6 @@ Menu.craft = {
|
||||
|
||||
const linksHtml = links.map((link) => {
|
||||
const target = link.isExternal ? ' target="_blank" rel="noopener noreferrer"' : '';
|
||||
const downloadAttr = link.download ? ' download' : '';
|
||||
const cls = link.isCta ? `${scope}-cta` : `${scope}-link`;
|
||||
const linkStyle = cssPropsToString({
|
||||
textDecoration: 'none',
|
||||
@@ -187,7 +173,7 @@ Menu.craft = {
|
||||
borderRadius: link.isCta ? '6px' : '0',
|
||||
transition: 'color 0.15s, background-color 0.15s',
|
||||
});
|
||||
return `<a href="${escapeAttr(safeUrl(link.href || '#'))}" class="${cls}"${target}${downloadAttr}${linkStyle ? ` style="${linkStyle}"` : ''}>${escapeHtml(link.text)}</a>`;
|
||||
return `<a href="${escapeAttr(safeUrl(link.href || '#'))}" class="${cls}"${target}${linkStyle ? ` style="${linkStyle}"` : ''}>${escapeHtml(link.text)}</a>`;
|
||||
}).join('\n ');
|
||||
|
||||
const hoverCss = `<style>
|
||||
|
||||
@@ -83,29 +83,6 @@ describe('Navbar.toHtml node-scoped ids/hover styles (M-1: two navbars must not
|
||||
});
|
||||
});
|
||||
|
||||
describe('Navbar.toHtml download attribute (F3: link-to-file toggle)', () => {
|
||||
test('a link with download:true emits the download attribute', () => {
|
||||
const { html } = toHtml({ links: [{ text: 'Brochure', href: '/brochure.pdf', download: true }] }, '', 'node-dl1');
|
||||
expect(html).toMatch(/<a href="\/brochure\.pdf"[^>]* download[^>]*>Brochure<\/a>/);
|
||||
});
|
||||
|
||||
test('a link without download does not emit the attribute', () => {
|
||||
const { html } = toHtml({ links: [{ text: 'Home', href: '/' }] }, '', 'node-dl2');
|
||||
expect(html).not.toContain(' download');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Navbar (F4: box-model + animation + visibility props on craft.props)', () => {
|
||||
test('craft.props includes animation/visibility defaults so the panel controls always render', () => {
|
||||
const craftProps = (Navbar as any).craft.props;
|
||||
expect(craftProps).toHaveProperty('animation', 'none');
|
||||
expect(craftProps).toHaveProperty('animationDelay', '0');
|
||||
expect(craftProps).toHaveProperty('hideOnDesktop', false);
|
||||
expect(craftProps).toHaveProperty('hideOnTablet', false);
|
||||
expect(craftProps).toHaveProperty('hideOnMobile', false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Navbar.toHtml XSS hardening (hoverColor/backgroundColor/ctaColor into <style>)', () => {
|
||||
test('a hoverColor value containing </style><script> is neutralized in the hover <style> block', () => {
|
||||
const malicious = '#fff}</style><script>alert(1)</script><style>{';
|
||||
|
||||
@@ -11,8 +11,6 @@ interface NavLink {
|
||||
href: string;
|
||||
isExternal?: boolean;
|
||||
isCta?: boolean;
|
||||
/** Adds the `download` attribute to the exported anchor (F3: links to files). */
|
||||
download?: boolean;
|
||||
}
|
||||
|
||||
interface NavbarProps {
|
||||
@@ -35,11 +33,6 @@ interface NavbarProps {
|
||||
isSticky?: boolean;
|
||||
showMobileMenu?: boolean;
|
||||
style?: CSSProperties;
|
||||
hideOnDesktop?: boolean;
|
||||
hideOnTablet?: boolean;
|
||||
hideOnMobile?: boolean;
|
||||
animation?: string;
|
||||
animationDelay?: string;
|
||||
}
|
||||
|
||||
/* ---------- Defaults ---------- */
|
||||
@@ -156,7 +149,6 @@ export const Navbar: UserComponent<NavbarProps> = ({
|
||||
href={link.href}
|
||||
target={link.isExternal ? '_blank' : undefined}
|
||||
rel={link.isExternal ? 'noopener noreferrer' : undefined}
|
||||
download={link.download || undefined}
|
||||
onClick={(e) => e.preventDefault()}
|
||||
onMouseEnter={() => setHoveredLink(i)}
|
||||
onMouseLeave={() => setHoveredLink(null)}
|
||||
@@ -208,11 +200,6 @@ Navbar.craft = {
|
||||
style: {
|
||||
borderBottom: '1px solid #e4e4e7',
|
||||
},
|
||||
hideOnDesktop: false,
|
||||
hideOnTablet: false,
|
||||
hideOnMobile: false,
|
||||
animation: 'none',
|
||||
animationDelay: '0',
|
||||
} as NavbarProps,
|
||||
rules: {
|
||||
canDrag: () => true,
|
||||
@@ -321,7 +308,6 @@ Navbar.craft = {
|
||||
// Add CSS class to each link for hover
|
||||
const linksHtmlWithClass = links.map((link) => {
|
||||
const target = link.isExternal ? ' target="_blank" rel="noopener noreferrer"' : '';
|
||||
const downloadAttr = link.download ? ' download' : '';
|
||||
const cls = link.isCta ? 'navbar-cta' : 'navbar-link';
|
||||
const linkStyle = cssPropsToString({
|
||||
textDecoration: 'none',
|
||||
@@ -333,7 +319,7 @@ Navbar.craft = {
|
||||
borderRadius: link.isCta ? '6px' : '0',
|
||||
transition: 'color 0.15s, background-color 0.15s',
|
||||
});
|
||||
return `<a href="${escapeAttr(safeUrl(link.href || "#"))}" class="${cls}"${target}${downloadAttr}${linkStyle ? ` style="${linkStyle}"` : ''}>${escapeHtml(link.text)}</a>`;
|
||||
return `<a href="${escapeAttr(safeUrl(link.href || "#"))}" class="${cls}"${target}${linkStyle ? ` style="${linkStyle}"` : ''}>${escapeHtml(link.text)}</a>`;
|
||||
}).join('\n ');
|
||||
|
||||
return {
|
||||
|
||||
@@ -30,3 +30,46 @@ describe('SearchBar.toHtml XSS hardening (placeholder/buttonText/showButton)', (
|
||||
expect(html).toMatch(/border-radius:(8px 0 0 8px|8px)/);
|
||||
});
|
||||
});
|
||||
|
||||
// F2: SearchBar was purely decorative -- no action/method/input name, so
|
||||
// submitting did nothing. It now emits a real GET form.
|
||||
describe('SearchBar.toHtml is a functional GET search form (not decorative)', () => {
|
||||
test('defaults to a GET form action="/" with the query input named "q"', () => {
|
||||
const { html } = toHtml({}, '');
|
||||
expect(html).toMatch(/<form role="search" action="\/" method="GET"/);
|
||||
expect(html).toContain('<input type="search" name="q"');
|
||||
});
|
||||
|
||||
test('a configured action (real search-results page) is used verbatim', () => {
|
||||
const { html } = toHtml({ action: '/search' }, '');
|
||||
expect(html).toContain('action="/search"');
|
||||
});
|
||||
|
||||
test('a javascript: action is blocked via safeUrl and falls back to "/"', () => {
|
||||
const { html } = toHtml({ action: 'javascript:alert(1)' }, '');
|
||||
expect(html).toContain('action="/"');
|
||||
expect(html).not.toContain('javascript:');
|
||||
});
|
||||
|
||||
test('an empty/whitespace action falls back to "/"', () => {
|
||||
const { html } = toHtml({ action: ' ' }, '');
|
||||
expect(html).toContain('action="/"');
|
||||
});
|
||||
});
|
||||
|
||||
describe('SearchBar.toHtml box-model style passthrough', () => {
|
||||
test('margin/border/box-shadow/opacity flow through via the style prop', () => {
|
||||
const { html } = toHtml({ style: { marginBottom: '14px', border: '1px solid #aaa', boxShadow: '0 1px 4px rgba(0,0,0,.1)', opacity: '0.9' } }, '');
|
||||
expect(html).toContain('margin-bottom:14px');
|
||||
expect(html).toContain('border:1px solid #aaa');
|
||||
expect(html).toContain('opacity:0.9');
|
||||
});
|
||||
});
|
||||
|
||||
describe('SearchBar.craft.props includes animation/visibility defaults', () => {
|
||||
test('has blank/false defaults', () => {
|
||||
expect(SearchBar.craft!.props).toMatchObject({
|
||||
animation: '', animationDelay: '', hideOnDesktop: false, hideOnTablet: false, hideOnMobile: false,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,19 +1,29 @@
|
||||
import React, { CSSProperties } from 'react';
|
||||
import { useNode, UserComponent } from '@craftjs/core';
|
||||
import { cssPropsToString } from '../../utils/style-helpers';
|
||||
import { escapeHtml, escapeAttr } from '../../utils/escape';
|
||||
import { escapeHtml, escapeAttr, safeUrl } from '../../utils/escape';
|
||||
|
||||
interface SearchBarProps {
|
||||
placeholder?: string;
|
||||
buttonText?: string;
|
||||
showButton?: boolean;
|
||||
/** Where the search GET request is submitted -- a real search-results page
|
||||
* if the site has one, or '/' (site root) by default. The query is sent
|
||||
* as `?q=...`, the conventional param name search-results pages look for. */
|
||||
action?: string;
|
||||
style?: CSSProperties;
|
||||
animation?: string;
|
||||
animationDelay?: string;
|
||||
hideOnDesktop?: boolean;
|
||||
hideOnTablet?: boolean;
|
||||
hideOnMobile?: boolean;
|
||||
}
|
||||
|
||||
export const SearchBar: UserComponent<SearchBarProps> = ({
|
||||
placeholder = 'Search...',
|
||||
buttonText = 'Search',
|
||||
showButton = true,
|
||||
action = '/',
|
||||
style = {},
|
||||
}) => {
|
||||
const {
|
||||
@@ -27,6 +37,8 @@ export const SearchBar: UserComponent<SearchBarProps> = ({
|
||||
<form
|
||||
ref={(ref: HTMLFormElement | null): void => { if (ref) connect(drag(ref)); }}
|
||||
role="search"
|
||||
action={action}
|
||||
method="GET"
|
||||
onSubmit={(e) => e.preventDefault()}
|
||||
style={{
|
||||
display: 'flex',
|
||||
@@ -51,6 +63,7 @@ export const SearchBar: UserComponent<SearchBarProps> = ({
|
||||
/>
|
||||
<input
|
||||
type="search"
|
||||
name="q"
|
||||
placeholder={placeholder}
|
||||
style={{
|
||||
width: '100%',
|
||||
@@ -101,7 +114,13 @@ SearchBar.craft = {
|
||||
placeholder: 'Search...',
|
||||
buttonText: 'Search',
|
||||
showButton: true,
|
||||
action: '/',
|
||||
style: {},
|
||||
animation: '',
|
||||
animationDelay: '',
|
||||
hideOnDesktop: false,
|
||||
hideOnTablet: false,
|
||||
hideOnMobile: false,
|
||||
},
|
||||
rules: {
|
||||
canDrag: () => true,
|
||||
@@ -117,6 +136,7 @@ SearchBar.craft = {
|
||||
placeholder = 'Search...',
|
||||
buttonText = 'Search',
|
||||
showButton = true,
|
||||
action = '/',
|
||||
style = {},
|
||||
} = props;
|
||||
|
||||
@@ -133,11 +153,19 @@ SearchBar.craft = {
|
||||
? `<button type="submit" style="padding:12px 20px;font-size:15px;font-weight:600;font-family:Inter,sans-serif;color:#ffffff;background-color:#3b82f6;border:none;border-radius:0 8px 8px 0;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:6px"><i class="fa fa-search" style="font-size:13px" aria-hidden="true"></i>${escapeHtml(buttonText)}</button>`
|
||||
: '';
|
||||
|
||||
// F2: previously a purely decorative <form> -- no action/method/input
|
||||
// name at all, so submitting did nothing. A real GET to `action` with the
|
||||
// query in the conventional `q` param makes this a functioning search
|
||||
// form on publish (routes to a real search-results page if the site has
|
||||
// one, or reloads '/' with ?q=... by default). `safeUrl` blocks
|
||||
// javascript:/vbscript:/data:text/html breakout via the action attribute.
|
||||
const actionAttr = escapeAttr(safeUrl(action) || '/');
|
||||
|
||||
return {
|
||||
html: `<form role="search"${formStyle ? ` style="${formStyle}"` : ''}>
|
||||
html: `<form role="search" action="${actionAttr}" method="GET"${formStyle ? ` style="${formStyle}"` : ''}>
|
||||
<div style="position:relative;flex:1">
|
||||
<i class="fa fa-search" style="position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#9ca3af;font-size:14px;pointer-events:none" aria-hidden="true"></i>
|
||||
<input type="search" placeholder="${escapeAttr(placeholder)}" style="${inputStyleStr}" />
|
||||
<input type="search" name="q" placeholder="${escapeAttr(placeholder)}" style="${inputStyleStr}" />
|
||||
</div>
|
||||
${btnHtml}
|
||||
</form>`,
|
||||
|
||||
@@ -126,3 +126,73 @@ describe('ContactForm.toHtml field type attribute sanitization', () => {
|
||||
expect(html).toContain('type="email"');
|
||||
});
|
||||
});
|
||||
|
||||
// F1: the field editor (FormStylePanel) can now create fields of every type
|
||||
// in sanitizeInputType's allowlist, plus textarea/select. Verify each
|
||||
// renders with the right control, label/for association, and required flag.
|
||||
describe('ContactForm.toHtml renders every configured field type/label/required', () => {
|
||||
const cases: { type: string; tag: string }[] = [
|
||||
{ type: 'text', tag: 'input' },
|
||||
{ type: 'email', tag: 'input' },
|
||||
{ type: 'tel', tag: 'input' },
|
||||
{ type: 'number', tag: 'input' },
|
||||
{ type: 'password', tag: 'input' },
|
||||
{ type: 'url', tag: 'input' },
|
||||
{ type: 'search', tag: 'input' },
|
||||
{ type: 'date', tag: 'input' },
|
||||
{ type: 'checkbox', tag: 'input' },
|
||||
{ type: 'radio', tag: 'input' },
|
||||
];
|
||||
|
||||
test.each(cases)('type=$type renders a sanitized <$tag type="$type"> with label + for/id wiring', ({ type, tag }) => {
|
||||
const fields = [{ type: type as any, label: `Field ${type}`, name: `f_${type}`, placeholder: '', required: true }];
|
||||
const { html } = toHtml({ fields }, '');
|
||||
expect(html).toContain(`<${tag}`);
|
||||
expect(html).toContain(`type="${type}"`);
|
||||
expect(html).toContain(`Field ${type}`);
|
||||
// required renders the input attribute AND the visual asterisk
|
||||
expect(html).toMatch(/ required/);
|
||||
expect(html).toContain('*</span>');
|
||||
const labelFor = html.match(/<label for="([^"]+)"/)![1];
|
||||
expect(html).toContain(`id="${labelFor}"`);
|
||||
});
|
||||
|
||||
test('type=textarea renders a <textarea>, not an <input>', () => {
|
||||
const fields = [{ type: 'textarea' as const, label: 'Message', name: 'message', placeholder: '', required: false }];
|
||||
const { html } = toHtml({ fields }, '');
|
||||
expect(html).toMatch(/<textarea[^>]*name="message"/);
|
||||
expect(html).not.toMatch(/<input[^>]*name="message"/);
|
||||
});
|
||||
|
||||
test('type=select renders a <select> with escaped <option> values from field.options', () => {
|
||||
const fields = [{ type: 'select' as const, label: 'Plan', name: 'plan', placeholder: 'Choose one', required: false, options: ['Basic', 'Pro', '"><script>alert(1)</script>'] }];
|
||||
const { html } = toHtml({ fields }, '');
|
||||
expect(html).toMatch(/<select[^>]*name="plan"/);
|
||||
expect(html).toContain('<option value="Basic">Basic</option>');
|
||||
expect(html).toContain('<option value="Pro">Pro</option>');
|
||||
expect(html).not.toContain('<script>alert(1)</script>');
|
||||
});
|
||||
|
||||
test('a non-required field omits both the required attribute and the asterisk', () => {
|
||||
const fields = [{ type: 'text' as const, label: 'Nickname', name: 'nickname', placeholder: '', required: false }];
|
||||
const { html } = toHtml({ fields }, '');
|
||||
expect(html).not.toMatch(/ required/);
|
||||
expect(html).not.toContain('*</span>');
|
||||
});
|
||||
});
|
||||
|
||||
// Box-model / animation / visibility rollout (common enh-batch pattern):
|
||||
// these are top-level props consumed generically by the export's
|
||||
// buildDataAttrs() -- this just confirms the defaults are present on
|
||||
// craft.props so the panel controls render and the props survive save/load.
|
||||
describe('ContactForm.craft.props includes animation/visibility defaults', () => {
|
||||
test('has blank/false defaults for animation, animationDelay, hideOnDesktop/Tablet/Mobile', () => {
|
||||
expect(ContactForm.craft!.props).toMatchObject({
|
||||
animation: '',
|
||||
animationDelay: '',
|
||||
hideOnDesktop: false,
|
||||
hideOnTablet: false,
|
||||
hideOnMobile: false,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -4,8 +4,17 @@ import { cssPropsToString } from '../../utils/style-helpers';
|
||||
import { relayFormWiring } from '../../utils/form-relay-wiring';
|
||||
import { escapeHtml, escapeAttr, slugId, cssValue, sanitizeInputType } from '../../utils/escape';
|
||||
|
||||
// The allowlist enforced at export time lives in `sanitizeInputType`
|
||||
// (utils/escape.ts) -- this union is a superset (it also covers 'textarea'
|
||||
// and 'select', which take their own render branches instead of an
|
||||
// `<input type>`), kept in sync by hand since TS unions can't import a
|
||||
// runtime array.
|
||||
export type ContactFormFieldType =
|
||||
| 'text' | 'email' | 'tel' | 'number' | 'password' | 'url' | 'search' | 'date'
|
||||
| 'checkbox' | 'radio' | 'textarea' | 'select';
|
||||
|
||||
interface ContactFormField {
|
||||
type: 'text' | 'email' | 'tel' | 'textarea' | 'select';
|
||||
type: ContactFormFieldType;
|
||||
label: string;
|
||||
name: string;
|
||||
placeholder: string;
|
||||
@@ -25,6 +34,11 @@ interface ContactFormProps {
|
||||
inputBorder?: string;
|
||||
recipientEmail?: string;
|
||||
thankYouUrl?: string;
|
||||
animation?: string;
|
||||
animationDelay?: string;
|
||||
hideOnDesktop?: boolean;
|
||||
hideOnTablet?: boolean;
|
||||
hideOnMobile?: boolean;
|
||||
}
|
||||
|
||||
const defaultFields: ContactFormField[] = [
|
||||
@@ -157,6 +171,11 @@ ContactForm.craft = {
|
||||
inputBorder: '#d1d5db',
|
||||
recipientEmail: '',
|
||||
thankYouUrl: '',
|
||||
animation: '',
|
||||
animationDelay: '',
|
||||
hideOnDesktop: false,
|
||||
hideOnTablet: false,
|
||||
hideOnMobile: false,
|
||||
},
|
||||
rules: {
|
||||
canDrag: () => true,
|
||||
|
||||
@@ -22,4 +22,19 @@ describe('FormButton.toHtml', () => {
|
||||
expect(html).toContain('&');
|
||||
expect(html).toContain('"quoted"');
|
||||
});
|
||||
|
||||
test('box-model style (margin/border/box-shadow/opacity) flows through via the style prop', () => {
|
||||
const { html } = toHtml({ text: 'Submit', style: { marginTop: '12px', border: '2px solid #000', boxShadow: '0 2px 4px rgba(0,0,0,.2)', opacity: '0.8' } }, '');
|
||||
expect(html).toContain('margin-top:12px');
|
||||
expect(html).toContain('border:2px solid #000');
|
||||
expect(html).toContain('opacity:0.8');
|
||||
});
|
||||
});
|
||||
|
||||
describe('FormButton.craft.props includes animation/visibility defaults', () => {
|
||||
test('has blank/false defaults', () => {
|
||||
expect(FormButton.craft!.props).toMatchObject({
|
||||
animation: '', animationDelay: '', hideOnDesktop: false, hideOnTablet: false, hideOnMobile: false,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -6,6 +6,11 @@ import { escapeHtml } from '../../utils/escape';
|
||||
interface FormButtonProps {
|
||||
text?: string;
|
||||
style?: CSSProperties;
|
||||
animation?: string;
|
||||
animationDelay?: string;
|
||||
hideOnDesktop?: boolean;
|
||||
hideOnTablet?: boolean;
|
||||
hideOnMobile?: boolean;
|
||||
}
|
||||
|
||||
export const FormButton: UserComponent<FormButtonProps> = ({
|
||||
@@ -58,6 +63,11 @@ FormButton.craft = {
|
||||
fontSize: '16px',
|
||||
border: 'none',
|
||||
},
|
||||
animation: '',
|
||||
animationDelay: '',
|
||||
hideOnDesktop: false,
|
||||
hideOnTablet: false,
|
||||
hideOnMobile: false,
|
||||
},
|
||||
rules: {
|
||||
canDrag: () => true,
|
||||
|
||||
@@ -52,3 +52,20 @@ describe('FormContainer.toHtml method attribute sanitization', () => {
|
||||
expect(html).toContain('method="GET"');
|
||||
});
|
||||
});
|
||||
|
||||
describe('FormContainer.toHtml box-model style passthrough', () => {
|
||||
test('margin/border/box-shadow/opacity flow through via the style prop', () => {
|
||||
const { html } = toHtml({ action: '/legacy', style: { marginTop: '20px', border: '3px dashed #ccc', boxShadow: '0 4px 8px rgba(0,0,0,.2)', opacity: '0.95' } }, '');
|
||||
expect(html).toContain('margin-top:20px');
|
||||
expect(html).toContain('border:3px dashed #ccc');
|
||||
expect(html).toContain('opacity:0.95');
|
||||
});
|
||||
});
|
||||
|
||||
describe('FormContainer.craft.props includes animation/visibility defaults', () => {
|
||||
test('has blank/false defaults', () => {
|
||||
expect(FormContainer.craft!.props).toMatchObject({
|
||||
animation: '', animationDelay: '', hideOnDesktop: false, hideOnTablet: false, hideOnMobile: false,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -12,6 +12,11 @@ interface FormContainerProps {
|
||||
thankYouUrl?: string;
|
||||
style?: CSSProperties;
|
||||
children?: React.ReactNode;
|
||||
animation?: string;
|
||||
animationDelay?: string;
|
||||
hideOnDesktop?: boolean;
|
||||
hideOnTablet?: boolean;
|
||||
hideOnMobile?: boolean;
|
||||
}
|
||||
|
||||
export const FormContainer: UserComponent<FormContainerProps> = ({
|
||||
@@ -59,6 +64,11 @@ FormContainer.craft = {
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #e4e4e7',
|
||||
},
|
||||
animation: '',
|
||||
animationDelay: '',
|
||||
hideOnDesktop: false,
|
||||
hideOnTablet: false,
|
||||
hideOnMobile: false,
|
||||
},
|
||||
rules: {
|
||||
canDrag: () => true,
|
||||
|
||||
@@ -72,3 +72,20 @@ describe('InputField.toHtml type attribute sanitization', () => {
|
||||
expect(html).toContain('type="number"');
|
||||
});
|
||||
});
|
||||
|
||||
describe('InputField.toHtml box-model style passthrough', () => {
|
||||
test('margin/border/box-shadow/opacity flow through via the style prop', () => {
|
||||
const { html } = toHtml({ label: 'Name', name: 'name', style: { marginBottom: '8px', border: '1px solid #333', boxShadow: '0 1px 2px rgba(0,0,0,.1)', opacity: '0.9' } }, '');
|
||||
expect(html).toContain('margin-bottom:8px');
|
||||
expect(html).toContain('border:1px solid #333');
|
||||
expect(html).toContain('opacity:0.9');
|
||||
});
|
||||
});
|
||||
|
||||
describe('InputField.craft.props includes animation/visibility defaults', () => {
|
||||
test('has blank/false defaults', () => {
|
||||
expect(InputField.craft!.props).toMatchObject({
|
||||
animation: '', animationDelay: '', hideOnDesktop: false, hideOnTablet: false, hideOnMobile: false,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -10,6 +10,11 @@ interface InputFieldProps {
|
||||
placeholder?: string;
|
||||
required?: boolean;
|
||||
style?: CSSProperties;
|
||||
animation?: string;
|
||||
animationDelay?: string;
|
||||
hideOnDesktop?: boolean;
|
||||
hideOnTablet?: boolean;
|
||||
hideOnMobile?: boolean;
|
||||
}
|
||||
|
||||
export const InputField: UserComponent<InputFieldProps> = ({
|
||||
@@ -77,6 +82,11 @@ InputField.craft = {
|
||||
placeholder: 'Enter your name',
|
||||
required: false,
|
||||
style: {},
|
||||
animation: '',
|
||||
animationDelay: '',
|
||||
hideOnDesktop: false,
|
||||
hideOnTablet: false,
|
||||
hideOnMobile: false,
|
||||
},
|
||||
rules: {
|
||||
canDrag: () => true,
|
||||
|
||||
@@ -6,7 +6,7 @@ const toHtml = (SubscribeForm as any).toHtml;
|
||||
describe('SubscribeForm.toHtml hardcoded attributes stay hardcoded (no raw prop breakout)', () => {
|
||||
test('form method is always POST regardless of any injected props', () => {
|
||||
const { html } = toHtml({ heading: 'Join us', method: 'GET"><script>alert(1)</script>' } as any, '');
|
||||
expect(html).toContain('<form method="POST"');
|
||||
expect(html).toMatch(/<form action="[^"]*" method="POST"/);
|
||||
expect(html).not.toContain('<script');
|
||||
});
|
||||
|
||||
@@ -37,3 +37,45 @@ describe('SubscribeForm.toHtml hardcoded attributes stay hardcoded (no raw prop
|
||||
expect(html).toContain('>Go<');
|
||||
});
|
||||
});
|
||||
|
||||
// F1: SubscribeForm previously emitted `<form method="POST">` with no action
|
||||
// at all -- a published subscribe form silently did nothing on submit.
|
||||
// Wired through the same relay contract as ContactForm/FormContainer
|
||||
// (utils/form-relay-wiring.ts) so setting a recipient makes it functional.
|
||||
describe('SubscribeForm.toHtml is functional (not a dead POST)', () => {
|
||||
test('without a recipient: still has a real (non-empty) action -- "#" fallback, not a bare method="POST"', () => {
|
||||
const { html } = toHtml({}, '');
|
||||
expect(html).toMatch(/<form action="#" method="POST"/);
|
||||
});
|
||||
|
||||
test('with recipientEmail: emits the relay marker, placeholder action, and honeypot -- a working submission path', () => {
|
||||
const { html } = toHtml({ recipientEmail: 'news@example.com', thankYouUrl: '/thanks' }, '', 'node-sub1');
|
||||
expect(html).toMatch(/<!--WHP-FORM id="F_[0-9a-z]+" recipient="news@example.com" thankyou="\/thanks"-->/);
|
||||
expect(html).toMatch(/action="__WHP_FORM_ACTION__F_[0-9a-z]+__"/);
|
||||
expect(html).toContain('name="_gotcha"');
|
||||
const mid = html.match(/id="(F_[0-9a-z]+)"/)![1];
|
||||
expect(html).toContain(`__WHP_FORM_ACTION__${mid}__`);
|
||||
});
|
||||
|
||||
test('the email input keeps its name="email" so the relay receives it', () => {
|
||||
const { html } = toHtml({ recipientEmail: 'news@example.com' }, '', 'node-sub2');
|
||||
expect(html).toContain('name="email"');
|
||||
});
|
||||
});
|
||||
|
||||
describe('SubscribeForm.toHtml box-model style passthrough', () => {
|
||||
test('margin/border/box-shadow/opacity flow through via the style prop', () => {
|
||||
const { html } = toHtml({ style: { marginTop: '16px', border: '1px solid #ddd', boxShadow: '0 2px 6px rgba(0,0,0,.15)', opacity: '0.85' } }, '');
|
||||
expect(html).toContain('margin-top:16px');
|
||||
expect(html).toContain('border:1px solid #ddd');
|
||||
expect(html).toContain('opacity:0.85');
|
||||
});
|
||||
});
|
||||
|
||||
describe('SubscribeForm.craft.props includes animation/visibility defaults', () => {
|
||||
test('has blank/false defaults', () => {
|
||||
expect(SubscribeForm.craft!.props).toMatchObject({
|
||||
animation: '', animationDelay: '', hideOnDesktop: false, hideOnTablet: false, hideOnMobile: false,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { CSSProperties } from 'react';
|
||||
import { useNode, UserComponent } from '@craftjs/core';
|
||||
import { cssPropsToString } from '../../utils/style-helpers';
|
||||
import { relayFormWiring } from '../../utils/form-relay-wiring';
|
||||
import { escapeHtml, escapeAttr } from '../../utils/escape';
|
||||
|
||||
interface SubscribeFormProps {
|
||||
@@ -10,6 +11,17 @@ interface SubscribeFormProps {
|
||||
buttonColor?: string;
|
||||
layout?: 'inline' | 'stacked';
|
||||
style?: CSSProperties;
|
||||
/** "Send submissions to" address -- same relay contract as ContactForm/
|
||||
* FormContainer (see utils/form-relay-wiring.ts). Blank = no relay; the
|
||||
* published form then has no working action at all, which is the bug
|
||||
* this prop exists to fix. */
|
||||
recipientEmail?: string;
|
||||
thankYouUrl?: string;
|
||||
animation?: string;
|
||||
animationDelay?: string;
|
||||
hideOnDesktop?: boolean;
|
||||
hideOnTablet?: boolean;
|
||||
hideOnMobile?: boolean;
|
||||
}
|
||||
|
||||
export const SubscribeForm: UserComponent<SubscribeFormProps> = ({
|
||||
@@ -110,6 +122,13 @@ SubscribeForm.craft = {
|
||||
buttonColor: '#3b82f6',
|
||||
layout: 'inline',
|
||||
style: { backgroundColor: '#f8fafc' },
|
||||
recipientEmail: '',
|
||||
thankYouUrl: '',
|
||||
animation: '',
|
||||
animationDelay: '',
|
||||
hideOnDesktop: false,
|
||||
hideOnTablet: false,
|
||||
hideOnMobile: false,
|
||||
},
|
||||
rules: {
|
||||
canDrag: () => true,
|
||||
@@ -120,7 +139,7 @@ SubscribeForm.craft = {
|
||||
|
||||
/* ---------- HTML export ---------- */
|
||||
|
||||
(SubscribeForm as any).toHtml = (props: SubscribeFormProps, _childrenHtml: string) => {
|
||||
(SubscribeForm as any).toHtml = (props: SubscribeFormProps, _childrenHtml: string, nodeId?: string) => {
|
||||
const {
|
||||
heading = 'Subscribe to our newsletter',
|
||||
placeholder = 'Enter your email',
|
||||
@@ -166,11 +185,21 @@ SubscribeForm.craft = {
|
||||
whiteSpace: 'nowrap',
|
||||
});
|
||||
|
||||
// Same relay contract as ContactForm/FormContainer: a recipientEmail wires
|
||||
// the form through the WHP form-sender relay (marker + placeholder action
|
||||
// + honeypot, provisioned/rewritten at publish time). Previously this form
|
||||
// always emitted `<form method="POST">` with NO action at all -- a
|
||||
// published subscribe form silently did nothing on submit. Falling back to
|
||||
// `formAction`-less relay wiring (fallbackAction undefined -> '#') keeps
|
||||
// the old no-recipient case visually identical (action="#") while making
|
||||
// the relay path actually functional once an admin sets an email.
|
||||
const { marker, actionAttr, honeypot } = relayFormWiring(props.recipientEmail, props.thankYouUrl, undefined, nodeId);
|
||||
|
||||
return {
|
||||
html: `<div${wrapperStyle ? ` style="${wrapperStyle}"` : ''}>
|
||||
html: `${marker}<div${wrapperStyle ? ` style="${wrapperStyle}"` : ''}>
|
||||
${headingHtml}
|
||||
<form method="POST"${formStyle ? ` style="${formStyle}"` : ''}>
|
||||
<input type="email" name="email" placeholder="${escapeAttr(placeholder)}" required style="${inputStyleStr}" />
|
||||
<form action="${actionAttr}" method="POST"${formStyle ? ` style="${formStyle}"` : ''}>
|
||||
${honeypot ? ` ${honeypot}\n` : ''} <input type="email" name="email" placeholder="${escapeAttr(placeholder)}" required style="${inputStyleStr}" />
|
||||
<button type="submit"${btnStyle ? ` style="${btnStyle}"` : ''}>${escapeHtml(buttonText)}</button>
|
||||
</form>
|
||||
</div>`,
|
||||
|
||||
@@ -63,3 +63,20 @@ describe('TextareaField.toHtml rows attribute sanitization', () => {
|
||||
expect(html).toContain('rows="8"');
|
||||
});
|
||||
});
|
||||
|
||||
describe('TextareaField.toHtml box-model style passthrough', () => {
|
||||
test('margin/border/box-shadow/opacity flow through via the style prop', () => {
|
||||
const { html } = toHtml({ label: 'Message', name: 'message', style: { marginTop: '10px', border: '1px solid #555', boxShadow: '0 1px 3px rgba(0,0,0,.15)', opacity: '0.7' } }, '');
|
||||
expect(html).toContain('margin-top:10px');
|
||||
expect(html).toContain('border:1px solid #555');
|
||||
expect(html).toContain('opacity:0.7');
|
||||
});
|
||||
});
|
||||
|
||||
describe('TextareaField.craft.props includes animation/visibility defaults', () => {
|
||||
test('has blank/false defaults', () => {
|
||||
expect(TextareaField.craft!.props).toMatchObject({
|
||||
animation: '', animationDelay: '', hideOnDesktop: false, hideOnTablet: false, hideOnMobile: false,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -10,6 +10,11 @@ interface TextareaFieldProps {
|
||||
rows?: number;
|
||||
required?: boolean;
|
||||
style?: CSSProperties;
|
||||
animation?: string;
|
||||
animationDelay?: string;
|
||||
hideOnDesktop?: boolean;
|
||||
hideOnTablet?: boolean;
|
||||
hideOnMobile?: boolean;
|
||||
}
|
||||
|
||||
export const TextareaField: UserComponent<TextareaFieldProps> = ({
|
||||
@@ -79,6 +84,11 @@ TextareaField.craft = {
|
||||
rows: 4,
|
||||
required: false,
|
||||
style: {},
|
||||
animation: '',
|
||||
animationDelay: '',
|
||||
hideOnDesktop: false,
|
||||
hideOnTablet: false,
|
||||
hideOnMobile: false,
|
||||
},
|
||||
rules: {
|
||||
canDrag: () => true,
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
import React from 'react';
|
||||
import { useEditor } from '@craftjs/core';
|
||||
import {
|
||||
BG_COLORS,
|
||||
SPACING_PRESETS,
|
||||
RADIUS_PRESETS,
|
||||
SHADOW_PRESETS,
|
||||
} from '../../../constants/presets';
|
||||
import {
|
||||
StylePanelProps,
|
||||
@@ -10,21 +12,152 @@ import {
|
||||
ColorSwatchGrid,
|
||||
PresetButtonGrid,
|
||||
CollapsibleSection,
|
||||
ArrayPropEditor,
|
||||
SpacingControl,
|
||||
BorderControl,
|
||||
BorderValue,
|
||||
AnimationControl,
|
||||
VisibilityControl,
|
||||
buildBorderShorthand,
|
||||
labelStyle,
|
||||
inputStyle,
|
||||
smallInputStyle,
|
||||
btnActiveStyle,
|
||||
sectionGap,
|
||||
useNodeProp,
|
||||
} from './shared';
|
||||
|
||||
/* The full sanitizeInputType (utils/escape.ts) allowlist, plus the two
|
||||
fake "types" (textarea/select) that take their own ContactForm render
|
||||
branch instead of an <input type>. Kept as a local list (rather than
|
||||
importing the runtime array from utils/escape.ts) since this is
|
||||
presentation-only -- the actual security boundary is enforced in
|
||||
ContactForm.toHtml via sanitizeInputType, not here. */
|
||||
const CONTACT_FIELD_TYPES = [
|
||||
'text', 'email', 'tel', 'number', 'password', 'url', 'search', 'date',
|
||||
'checkbox', 'radio', 'textarea', 'select',
|
||||
];
|
||||
|
||||
const moveBtnStyle: React.CSSProperties = {
|
||||
flex: 1, padding: '3px 6px', fontSize: 10, background: '#27272a', color: '#a1a1aa',
|
||||
border: '1px solid #3f3f46', borderRadius: 4, cursor: 'pointer',
|
||||
};
|
||||
|
||||
function parseBorderValue(v: unknown): BorderValue {
|
||||
const s = typeof v === 'string' ? v.trim() : '';
|
||||
if (!s || s === 'none') return { width: '', style: 'none', color: '' };
|
||||
const m = s.match(/^(\S+)\s+(\S+)\s+(.+)$/);
|
||||
if (!m) return { width: '', style: 'none', color: '' };
|
||||
return { width: m[1], style: m[2], color: m[3] };
|
||||
}
|
||||
|
||||
const SPACING_SIDE_KEYS: { side: 'top' | 'right' | 'bottom' | 'left'; suffix: 'Top' | 'Right' | 'Bottom' | 'Left' }[] = [
|
||||
{ side: 'top', suffix: 'Top' },
|
||||
{ side: 'right', suffix: 'Right' },
|
||||
{ side: 'bottom', suffix: 'Bottom' },
|
||||
{ side: 'left', suffix: 'Left' },
|
||||
];
|
||||
|
||||
/* ---------- FORM ---------- */
|
||||
export const FormStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps }) => {
|
||||
const { actions } = useEditor();
|
||||
const { setProp, setPropStyle } = useNodeProp(selectedId);
|
||||
|
||||
const style = nodeProps.style || {};
|
||||
|
||||
const updateField = (index: number, patch: Record<string, any>) => {
|
||||
actions.setProp(selectedId, (props: any) => {
|
||||
const updated = [...(props.fields || [])];
|
||||
updated[index] = { ...updated[index], ...patch };
|
||||
props.fields = updated;
|
||||
});
|
||||
};
|
||||
|
||||
const moveField = (index: number, direction: -1 | 1) => {
|
||||
actions.setProp(selectedId, (props: any) => {
|
||||
const updated = [...(props.fields || [])];
|
||||
const newIndex = index + direction;
|
||||
if (newIndex < 0 || newIndex >= updated.length) return;
|
||||
[updated[index], updated[newIndex]] = [updated[newIndex], updated[index]];
|
||||
props.fields = updated;
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* ContactForm field editor: add/remove/reorder fields, set each
|
||||
field's label, name, type (full allowlist + textarea/select),
|
||||
options (select only), and required flag. */}
|
||||
{nodeProps.fields !== undefined && Array.isArray(nodeProps.fields) && (
|
||||
<CollapsibleSection title="Fields">
|
||||
<ArrayPropEditor
|
||||
selectedId={selectedId}
|
||||
propKey="fields"
|
||||
items={nodeProps.fields}
|
||||
renderItem={(item: any, index: number) => (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
||||
<input
|
||||
type="text"
|
||||
value={item.label || ''}
|
||||
onChange={(e) => updateField(index, { label: e.target.value })}
|
||||
placeholder="Label"
|
||||
style={smallInputStyle}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={item.name || ''}
|
||||
onChange={(e) => updateField(index, { name: e.target.value })}
|
||||
placeholder="Field name (e.g. email)"
|
||||
style={smallInputStyle}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={item.placeholder || ''}
|
||||
onChange={(e) => updateField(index, { placeholder: e.target.value })}
|
||||
placeholder="Placeholder"
|
||||
style={smallInputStyle}
|
||||
/>
|
||||
<select
|
||||
value={item.type || 'text'}
|
||||
onChange={(e) => updateField(index, { type: e.target.value })}
|
||||
style={{ ...smallInputStyle, cursor: 'pointer' }}
|
||||
>
|
||||
{CONTACT_FIELD_TYPES.map((t) => <option key={t} value={t}>{t}</option>)}
|
||||
</select>
|
||||
{item.type === 'select' && (
|
||||
<input
|
||||
type="text"
|
||||
value={(item.options || []).join(', ')}
|
||||
onChange={(e) => updateField(index, {
|
||||
options: e.target.value.split(',').map((s: string) => s.trim()).filter(Boolean),
|
||||
})}
|
||||
placeholder="Options (comma-separated)"
|
||||
style={smallInputStyle}
|
||||
/>
|
||||
)}
|
||||
<label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, color: '#e4e4e7', cursor: 'pointer' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={!!item.required}
|
||||
onChange={(e) => updateField(index, { required: e.target.checked })}
|
||||
/>
|
||||
Required
|
||||
</label>
|
||||
<div style={{ display: 'flex', gap: 4 }}>
|
||||
<button disabled={index === 0} onClick={() => moveField(index, -1)} style={{ ...moveBtnStyle, opacity: index === 0 ? 0.4 : 1 }} title="Move up">
|
||||
<i className="fa fa-arrow-up" />
|
||||
</button>
|
||||
<button disabled={index === nodeProps.fields.length - 1} onClick={() => moveField(index, 1)} style={{ ...moveBtnStyle, opacity: index === nodeProps.fields.length - 1 ? 0.4 : 1 }} title="Move down">
|
||||
<i className="fa fa-arrow-down" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
emptyItem={{ type: 'text', label: 'New Field', name: 'field', placeholder: '', required: false }}
|
||||
/>
|
||||
</CollapsibleSection>
|
||||
)}
|
||||
|
||||
{/* Contact-form relay: where submissions are emailed. Present on ContactForm
|
||||
and FormContainer (both have recipientEmail/thankYouUrl props). */}
|
||||
{nodeProps.recipientEmail !== undefined && (
|
||||
@@ -43,13 +176,35 @@ export const FormStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProp
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Form action/method */}
|
||||
{nodeProps.action !== undefined && (
|
||||
{/* Form action/method (FormContainer). SearchBar also has an `action`
|
||||
prop but is distinguished via its unique `showButton` prop -- see
|
||||
the dedicated Search block below -- so it doesn't get this label. */}
|
||||
{nodeProps.action !== undefined && nodeProps.showButton === undefined && (
|
||||
<div style={sectionGap}>
|
||||
<label style={labelStyle}>Form Action URL</label>
|
||||
<input type="text" value={nodeProps.action || ''} onChange={(e) => setProp('action', e.target.value)} placeholder="https://..." style={inputStyle} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* SearchBar: where the GET search request is submitted. */}
|
||||
{nodeProps.showButton !== undefined && nodeProps.action !== undefined && (
|
||||
<div style={sectionGap}>
|
||||
<label style={labelStyle}>Search Results Page</label>
|
||||
<input type="text" value={nodeProps.action || ''} onChange={(e) => setProp('action', e.target.value)} placeholder="/ (site root) or /search" style={inputStyle} />
|
||||
<p style={{ fontSize: 10, color: '#71717a', margin: '4px 0 0' }}>
|
||||
Submits a GET request with the query as ?q=... to this URL.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{nodeProps.showButton !== undefined && (
|
||||
<div style={sectionGap}>
|
||||
<label style={{ ...labelStyle, display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer' }}>
|
||||
<input type="checkbox" checked={nodeProps.showButton !== false} onChange={(e) => setProp('showButton', e.target.checked)} />
|
||||
Show Search Button
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{nodeProps.method !== undefined && (
|
||||
<div style={sectionGap}>
|
||||
<label style={labelStyle}>Method</label>
|
||||
@@ -142,6 +297,64 @@ export const FormStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProp
|
||||
<PresetButtonGrid presets={RADIUS_PRESETS} activeValue={style.borderRadius as string} onSelect={(v) => setPropStyle('borderRadius', v)} />
|
||||
</div>
|
||||
</CollapsibleSection>
|
||||
|
||||
{/* Box model: margin/padding (per-side), border, shadow, opacity --
|
||||
common enh-batch rollout, applies to the whole form family since
|
||||
they all spread `style` onto their root element. */}
|
||||
<CollapsibleSection title="Spacing, Border & Effects" defaultOpen={false}>
|
||||
<SpacingControl
|
||||
label="Margin"
|
||||
value={{ top: style.marginTop, right: style.marginRight, bottom: style.marginBottom, left: style.marginLeft }}
|
||||
onChange={(side, v) => setPropStyle(`margin${SPACING_SIDE_KEYS.find((s) => s.side === side)!.suffix}`, v)}
|
||||
/>
|
||||
<SpacingControl
|
||||
label="Padding (per side)"
|
||||
value={{ top: style.paddingTop, right: style.paddingRight, bottom: style.paddingBottom, left: style.paddingLeft }}
|
||||
onChange={(side, v) => setPropStyle(`padding${SPACING_SIDE_KEYS.find((s) => s.side === side)!.suffix}`, v)}
|
||||
/>
|
||||
<BorderControl
|
||||
value={parseBorderValue(style.border)}
|
||||
onChange={(v) => setPropStyle('border', buildBorderShorthand(v))}
|
||||
/>
|
||||
<div className="guided-section">
|
||||
<SectionLabel>Box Shadow</SectionLabel>
|
||||
<PresetButtonGrid presets={SHADOW_PRESETS} activeValue={style.boxShadow as string} onSelect={(v) => setPropStyle('boxShadow', v)} />
|
||||
</div>
|
||||
<div className="guided-section">
|
||||
<SectionLabel>Opacity</SectionLabel>
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={100}
|
||||
value={style.opacity !== undefined && style.opacity !== '' ? Math.round(Number(style.opacity) * 100) : 100}
|
||||
onChange={(e) => setPropStyle('opacity', String(Number(e.target.value) / 100))}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</div>
|
||||
</CollapsibleSection>
|
||||
|
||||
{/* Animation & Visibility -- gated on the blank/false defaults added to
|
||||
each owned component's craft.props (ContactForm, FormContainer,
|
||||
InputField, TextareaField, FormButton, SubscribeForm, SearchBar).
|
||||
No toHtml change needed: the export's buildDataAttrs() already
|
||||
emits data-animation/data-hide-* from these exact prop names for
|
||||
every node. */}
|
||||
{nodeProps.animation !== undefined && (
|
||||
<CollapsibleSection title="Animation & Visibility" defaultOpen={false}>
|
||||
<AnimationControl
|
||||
value={{ animation: nodeProps.animation, animationDelay: nodeProps.animationDelay }}
|
||||
onChange={(v) => { setProp('animation', v.animation); setProp('animationDelay', v.animationDelay); }}
|
||||
/>
|
||||
<VisibilityControl
|
||||
value={{ hideOnDesktop: nodeProps.hideOnDesktop, hideOnTablet: nodeProps.hideOnTablet, hideOnMobile: nodeProps.hideOnMobile }}
|
||||
onChange={(v) => {
|
||||
setProp('hideOnDesktop', v.hideOnDesktop);
|
||||
setProp('hideOnTablet', v.hideOnTablet);
|
||||
setProp('hideOnMobile', v.hideOnMobile);
|
||||
}}
|
||||
/>
|
||||
</CollapsibleSection>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,282 +0,0 @@
|
||||
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';
|
||||
|
||||
/* NavStylePanel (via useNodeProp/LinkPicker in this file) needs useEditor
|
||||
from @craftjs/core and usePages from PageContext. Mock both following the
|
||||
DOM-harness pattern used across this repo's other *StylePanel tests (no
|
||||
@testing-library/react here) -- PageContext itself is Wave-2's territory,
|
||||
this package only READS pages via usePages(), so mocking it is the
|
||||
correct boundary for these tests. */
|
||||
const setPropSpy = vi.fn((_id: string, updater: (p: any) => void) => {
|
||||
updater(lastProps);
|
||||
});
|
||||
let lastProps: any;
|
||||
|
||||
vi.mock('@craftjs/core', () => ({
|
||||
useEditor: () => ({ actions: { setProp: setPropSpy } }),
|
||||
}));
|
||||
|
||||
let mockPages: { id: string; name: string; slug: string; craftState: string | null }[] = [];
|
||||
vi.mock('../../../state/PageContext', () => ({
|
||||
usePages: () => ({ pages: mockPages }),
|
||||
}));
|
||||
|
||||
vi.mock('../../../ui/AssetPicker', () => ({
|
||||
AssetPicker: () => null,
|
||||
}));
|
||||
|
||||
import { NavStylePanel, LinkPicker, pageHref } from './NavStylePanel';
|
||||
|
||||
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 rerender(ui: React.ReactElement) {
|
||||
act(() => { root.render(ui); });
|
||||
}
|
||||
|
||||
function unmount() {
|
||||
act(() => { root.unmount(); });
|
||||
container.remove();
|
||||
}
|
||||
|
||||
function setValue(el: HTMLInputElement | HTMLSelectElement, value: string) {
|
||||
const proto = el instanceof HTMLSelectElement ? window.HTMLSelectElement.prototype : window.HTMLInputElement.prototype;
|
||||
const setter = Object.getOwnPropertyDescriptor(proto, 'value')!.set!;
|
||||
act(() => {
|
||||
setter.call(el, value);
|
||||
el.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
el.dispatchEvent(new Event('change', { bubbles: true }));
|
||||
});
|
||||
}
|
||||
|
||||
function click(el: Element | null) {
|
||||
act(() => { (el as HTMLElement).dispatchEvent(new MouseEvent('click', { bubbles: true })); });
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
setPropSpy.mockClear();
|
||||
mockPages = [
|
||||
{ id: 'home', name: 'Home', slug: 'index', craftState: null },
|
||||
{ id: 'about', name: 'About', slug: 'about', craftState: null },
|
||||
];
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
if (container) unmount();
|
||||
});
|
||||
|
||||
describe('pageHref (landing page is always "/")', () => {
|
||||
test('index 0 (landing page) -> "/"', () => {
|
||||
expect(pageHref(mockPages[0], 0)).toBe('/');
|
||||
});
|
||||
|
||||
test('any other page -> "/{slug}"', () => {
|
||||
expect(pageHref(mockPages[1], 1)).toBe('/about');
|
||||
});
|
||||
});
|
||||
|
||||
describe('LinkPicker (F1: link-to-page picker + manual URL/anchor/tel/mailto)', () => {
|
||||
test('a value matching a page href starts in "Page" mode and lists every page', () => {
|
||||
render(<LinkPicker value="/about" onChange={vi.fn()} />);
|
||||
const [modeSelect] = Array.from(container.querySelectorAll('select')) as HTMLSelectElement[];
|
||||
expect(modeSelect.value).toBe('page');
|
||||
const optionText = Array.from(container.querySelectorAll('option')).map((o) => o.textContent);
|
||||
expect(optionText).toContain('Home');
|
||||
expect(optionText).toContain('About');
|
||||
});
|
||||
|
||||
test('picking a different page from the page dropdown emits that page\'s href', () => {
|
||||
const onChange = vi.fn();
|
||||
render(<LinkPicker value="/about" onChange={onChange} />);
|
||||
const [, pageSelect] = Array.from(container.querySelectorAll('select')) as HTMLSelectElement[];
|
||||
setValue(pageSelect, '/');
|
||||
expect(onChange).toHaveBeenCalledWith('/');
|
||||
});
|
||||
|
||||
test('a "#section" value starts in Anchor mode', () => {
|
||||
render(<LinkPicker value="#pricing" onChange={vi.fn()} />);
|
||||
const [modeSelect] = Array.from(container.querySelectorAll('select')) as HTMLSelectElement[];
|
||||
expect(modeSelect.value).toBe('anchor');
|
||||
const input = container.querySelector('input[type="text"]') as HTMLInputElement;
|
||||
expect(input.value).toBe('#pricing');
|
||||
});
|
||||
|
||||
test('switching mode to Anchor seeds a bare "#"', () => {
|
||||
const onChange = vi.fn();
|
||||
render(<LinkPicker value="/about" onChange={onChange} />);
|
||||
const [modeSelect] = Array.from(container.querySelectorAll('select')) as HTMLSelectElement[];
|
||||
setValue(modeSelect, 'anchor');
|
||||
expect(onChange).toHaveBeenCalledWith('#');
|
||||
});
|
||||
|
||||
test('mailto: helper strips the scheme for editing and re-adds it on change', () => {
|
||||
const onChange = vi.fn();
|
||||
render(<LinkPicker value="mailto:foo@example.com" onChange={onChange} />);
|
||||
const input = container.querySelector('input[type="text"]') as HTMLInputElement;
|
||||
expect(input.value).toBe('foo@example.com');
|
||||
setValue(input, 'bar@example.com');
|
||||
expect(onChange).toHaveBeenCalledWith('mailto:bar@example.com');
|
||||
});
|
||||
|
||||
test('tel: helper strips the scheme for editing and re-adds it on change', () => {
|
||||
const onChange = vi.fn();
|
||||
render(<LinkPicker value="tel:5551234567" onChange={onChange} />);
|
||||
const input = container.querySelector('input[type="text"]') as HTMLInputElement;
|
||||
expect(input.value).toBe('5551234567');
|
||||
setValue(input, '5559876543');
|
||||
expect(onChange).toHaveBeenCalledWith('tel:5559876543');
|
||||
});
|
||||
|
||||
test('a plain https:// URL falls back to Custom URL mode', () => {
|
||||
render(<LinkPicker value="https://example.com" onChange={vi.fn()} />);
|
||||
const [modeSelect] = Array.from(container.querySelectorAll('select')) as HTMLSelectElement[];
|
||||
expect(modeSelect.value).toBe('url');
|
||||
});
|
||||
});
|
||||
|
||||
describe('NavStylePanel Links section: href set via LinkPicker (F1 wired into the panel)', () => {
|
||||
test('choosing a page for a Navbar link writes that page\'s href onto the link', () => {
|
||||
lastProps = {
|
||||
links: [{ text: 'Home', href: '/old-home' }],
|
||||
};
|
||||
render(<NavStylePanel selectedId="node1" nodeProps={lastProps} />);
|
||||
|
||||
const selects = Array.from(container.querySelectorAll('select')) as HTMLSelectElement[];
|
||||
// First select for the one link item is its LinkPicker mode select (the
|
||||
// href starts as a Custom URL, so it opens on "url" mode); switch it to
|
||||
// "page" then pick the About page from the resulting page dropdown.
|
||||
const modeSelect = selects[0];
|
||||
setValue(modeSelect, 'page');
|
||||
expect(setPropSpy).toHaveBeenCalled();
|
||||
expect(lastProps.links[0].href).toBe('/'); // defaults to the first page
|
||||
|
||||
// The mock setProp mutates `lastProps` in place rather than triggering a
|
||||
// real Craft.js state update, so force a re-render (passing the same,
|
||||
// now-mutated, object) to get the LinkPicker to reflect its new "page"
|
||||
// mode and render the page <select>.
|
||||
rerender(<NavStylePanel selectedId="node1" nodeProps={lastProps} />);
|
||||
|
||||
const pageSelect = Array.from(container.querySelectorAll('select'))[1] as HTMLSelectElement;
|
||||
setValue(pageSelect, '/about');
|
||||
expect(lastProps.links[0].href).toBe('/about');
|
||||
});
|
||||
|
||||
test('toggling the Download checkbox for a link sets download:true', () => {
|
||||
lastProps = { links: [{ text: 'Brochure', href: '/brochure.pdf' }] };
|
||||
render(<NavStylePanel selectedId="node1" nodeProps={lastProps} />);
|
||||
const checkbox = container.querySelector('input[type="checkbox"]') as HTMLInputElement;
|
||||
act(() => { checkbox.click(); });
|
||||
expect(lastProps.links[0].download).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('NavStylePanel: "Sync links with Pages" (F2, regression vs legacy builder)', () => {
|
||||
test('populates links from the mocked pages list and preserves the CTA link', () => {
|
||||
lastProps = {
|
||||
links: [
|
||||
{ text: 'Old Home', href: '/old' },
|
||||
{ text: 'Old About', href: '/old-about' },
|
||||
{ text: 'Get Started', href: '#signup', isCta: true },
|
||||
],
|
||||
};
|
||||
render(<NavStylePanel selectedId="node1" nodeProps={lastProps} />);
|
||||
|
||||
const syncBtn = Array.from(container.querySelectorAll('button'))
|
||||
.find((b) => b.textContent?.includes('Sync links with Pages'))!;
|
||||
expect(syncBtn).toBeTruthy();
|
||||
click(syncBtn);
|
||||
|
||||
expect(lastProps.links).toEqual([
|
||||
{ text: 'Home', href: '/' },
|
||||
{ text: 'About', href: '/about' },
|
||||
{ text: 'Get Started', href: '#signup', isCta: true },
|
||||
]);
|
||||
});
|
||||
|
||||
test('with no CTA link, sync just replaces links 1:1 with the pages list', () => {
|
||||
lastProps = { links: [{ text: 'Stale', href: '/stale' }] };
|
||||
render(<NavStylePanel selectedId="node1" nodeProps={lastProps} />);
|
||||
|
||||
const syncBtn = Array.from(container.querySelectorAll('button'))
|
||||
.find((b) => b.textContent?.includes('Sync links with Pages'))!;
|
||||
click(syncBtn);
|
||||
|
||||
expect(lastProps.links).toEqual([
|
||||
{ text: 'Home', href: '/' },
|
||||
{ text: 'About', href: '/about' },
|
||||
]);
|
||||
});
|
||||
|
||||
test('the Links section (and its Sync button) is not shown for Footer (no `links` prop)', () => {
|
||||
lastProps = { text: '© 2026' };
|
||||
render(<NavStylePanel selectedId="node1" nodeProps={lastProps} />);
|
||||
const syncBtn = Array.from(container.querySelectorAll('button'))
|
||||
.find((b) => b.textContent?.includes('Sync links with Pages'));
|
||||
expect(syncBtn).toBeUndefined();
|
||||
});
|
||||
});
|
||||
|
||||
/** The Spacing/Border & Effects/Animation/Visibility CollapsibleSections all
|
||||
* default closed (defaultOpen={false}, matching the pre-existing "Spacing"
|
||||
* section's convention) -- open one by clicking its header button before
|
||||
* asserting on / interacting with its contents. */
|
||||
function openSection(title: string) {
|
||||
const header = Array.from(container.querySelectorAll('button'))
|
||||
.find((b) => b.textContent?.includes(title))!;
|
||||
click(header);
|
||||
}
|
||||
|
||||
describe('NavStylePanel: box-model + animation + visibility controls always present', () => {
|
||||
test('Spacing (Margin/Padding), Border & Effects, Animation, and Visibility sections render for a Navbar', () => {
|
||||
lastProps = {
|
||||
backgroundColor: '#ffffff',
|
||||
style: {},
|
||||
animation: 'none',
|
||||
animationDelay: '0',
|
||||
hideOnDesktop: false,
|
||||
hideOnTablet: false,
|
||||
hideOnMobile: false,
|
||||
};
|
||||
render(<NavStylePanel selectedId="node1" nodeProps={lastProps} />);
|
||||
openSection('Spacing');
|
||||
openSection('Border & Effects');
|
||||
openSection('Animation');
|
||||
openSection('Visibility');
|
||||
expect(container.querySelector('[data-testid="spacing-control"]')).toBeTruthy();
|
||||
expect(container.querySelector('[data-testid="border-control"]')).toBeTruthy();
|
||||
expect(container.querySelector('[data-testid="animation-control"]')).toBeTruthy();
|
||||
expect(container.querySelector('[data-testid="visibility-control"]')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('checking "Hide on Mobile" writes hideOnMobile:true via setProp', () => {
|
||||
lastProps = { hideOnDesktop: false, hideOnTablet: false, hideOnMobile: false };
|
||||
render(<NavStylePanel selectedId="node1" nodeProps={lastProps} />);
|
||||
openSection('Visibility');
|
||||
const checkbox = container.querySelector('[data-testid="visibility-hideOnMobile"]') as HTMLInputElement;
|
||||
act(() => {
|
||||
checkbox.click();
|
||||
});
|
||||
expect(lastProps.hideOnMobile).toBe(true);
|
||||
});
|
||||
|
||||
test('picking an entrance animation writes animation via setProp', () => {
|
||||
lastProps = { animation: 'none', animationDelay: '0' };
|
||||
render(<NavStylePanel selectedId="node1" nodeProps={lastProps} />);
|
||||
openSection('Animation');
|
||||
const fadeInBtn = Array.from(container.querySelectorAll('[data-testid="animation-control"] button'))
|
||||
.find((b) => b.textContent === 'Fade In')!;
|
||||
click(fadeInBtn);
|
||||
expect(lastProps.animation).toBe('fade-in');
|
||||
});
|
||||
});
|
||||
@@ -2,7 +2,6 @@ import React, { useCallback } from 'react';
|
||||
import { useEditor } from '@craftjs/core';
|
||||
import {
|
||||
SPACING_PRESETS,
|
||||
SHADOW_PRESETS,
|
||||
} from '../../../constants/presets';
|
||||
import {
|
||||
StylePanelProps,
|
||||
@@ -17,145 +16,13 @@ import {
|
||||
smallInputStyle,
|
||||
sectionGap,
|
||||
useNodeProp,
|
||||
SpacingControl,
|
||||
BorderControl,
|
||||
BorderValue,
|
||||
buildBorderShorthand,
|
||||
AnimationControl,
|
||||
VisibilityControl,
|
||||
} from './shared';
|
||||
import { AssetPicker } from '../../../ui/AssetPicker';
|
||||
import { usePages } from '../../../state/PageContext';
|
||||
import { PageData } from '../../../types';
|
||||
|
||||
/* ---------- Link-to-page helpers (F1/F2: link picker + Sync with Pages) ----------
|
||||
Mirrors the export convention used elsewhere: the first page is always the
|
||||
landing page and publishes to '/', every other page publishes to '/{slug}'.
|
||||
See PageContext.tsx's uniqueSlug/slugify and the landing-page-lock comment
|
||||
in renamePage() for why index 0 is special-cased this way. */
|
||||
export function pageHref(page: PageData, index: number): string {
|
||||
return index === 0 ? '/' : `/${page.slug}`;
|
||||
}
|
||||
|
||||
type LinkMode = 'page' | 'url' | 'anchor' | 'tel' | 'mailto';
|
||||
|
||||
function detectLinkMode(value: string, pageHrefs: string[]): LinkMode {
|
||||
const v = value || '';
|
||||
if (pageHrefs.includes(v)) return 'page';
|
||||
if (v.startsWith('#')) return 'anchor';
|
||||
if (v.startsWith('tel:')) return 'tel';
|
||||
if (v.startsWith('mailto:')) return 'mailto';
|
||||
return 'url';
|
||||
}
|
||||
|
||||
/* ---------- LinkPicker ----------
|
||||
Reused for every link-href field in this panel (standalone Logo's href,
|
||||
Navbar's logoUrl, and each Navbar/Menu link item's href): a dropdown of
|
||||
the site's PAGES (read-only via usePages() -- PageContext itself is
|
||||
Wave-2's territory) plus manual URL / #anchor / tel: / mailto: entry.
|
||||
safeUrl (in toHtml) already allows tel:/mailto: schemes, so no export-side
|
||||
change is needed for those. */
|
||||
interface LinkPickerProps {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
}
|
||||
export const LinkPicker: React.FC<LinkPickerProps> = ({ value, onChange }) => {
|
||||
const { pages } = usePages();
|
||||
const pageOptions = pages.map((p, i) => ({ id: p.id, name: p.name, href: pageHref(p, i) }));
|
||||
const mode = detectLinkMode(value || '', pageOptions.map((p) => p.href));
|
||||
|
||||
const switchMode = (next: LinkMode) => {
|
||||
if (next === mode) return;
|
||||
if (next === 'page') onChange(pageOptions[0]?.href || '/');
|
||||
else if (next === 'anchor') onChange('#');
|
||||
else if (next === 'tel') onChange('tel:');
|
||||
else if (next === 'mailto') onChange('mailto:');
|
||||
else onChange('');
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={sectionGap} data-testid="link-picker">
|
||||
<label style={labelStyle}>Link</label>
|
||||
<select
|
||||
value={mode}
|
||||
onChange={(e) => switchMode(e.target.value as LinkMode)}
|
||||
style={{ ...inputStyle, marginBottom: 4, cursor: 'pointer' }}
|
||||
>
|
||||
<option value="page">Page</option>
|
||||
<option value="url">Custom URL</option>
|
||||
<option value="anchor">Anchor (#section)</option>
|
||||
<option value="tel">Phone (tel:)</option>
|
||||
<option value="mailto">Email (mailto:)</option>
|
||||
</select>
|
||||
{mode === 'page' && (
|
||||
pageOptions.length > 0 ? (
|
||||
<select value={value} onChange={(e) => onChange(e.target.value)} style={inputStyle}>
|
||||
{pageOptions.map((p) => (
|
||||
<option key={p.id} value={p.href}>{p.name}</option>
|
||||
))}
|
||||
</select>
|
||||
) : (
|
||||
<div style={{ fontSize: 11, color: '#71717a' }}>No pages yet</div>
|
||||
)
|
||||
)}
|
||||
{mode === 'anchor' && (
|
||||
<input
|
||||
type="text"
|
||||
value={value || ''}
|
||||
onChange={(e) => onChange(e.target.value.startsWith('#') ? e.target.value : `#${e.target.value}`)}
|
||||
placeholder="#section-id"
|
||||
style={inputStyle}
|
||||
/>
|
||||
)}
|
||||
{mode === 'tel' && (
|
||||
<input
|
||||
type="text"
|
||||
value={(value || '').replace(/^tel:/, '')}
|
||||
onChange={(e) => onChange(`tel:${e.target.value}`)}
|
||||
placeholder="+15551234567"
|
||||
style={inputStyle}
|
||||
/>
|
||||
)}
|
||||
{mode === 'mailto' && (
|
||||
<input
|
||||
type="text"
|
||||
value={(value || '').replace(/^mailto:/, '')}
|
||||
onChange={(e) => onChange(`mailto:${e.target.value}`)}
|
||||
placeholder="name@example.com"
|
||||
style={inputStyle}
|
||||
/>
|
||||
)}
|
||||
{mode === 'url' && (
|
||||
<input
|
||||
type="text"
|
||||
value={value || ''}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder="https://example.com or /page"
|
||||
style={inputStyle}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/* Parses a `border` shorthand ("2px solid #hex" / "none") back into the
|
||||
{ width, style, color } shape BorderControl edits. */
|
||||
function parseBorderShorthand(v: string | undefined): BorderValue {
|
||||
if (!v || v === 'none') return { width: '', style: 'none', color: '#000000' };
|
||||
const m = v.trim().match(/^(\S+)\s+(\S+)\s+(.+)$/);
|
||||
if (!m) return { width: '', style: 'none', color: '#000000' };
|
||||
return { width: m[1], style: m[2], color: m[3] };
|
||||
}
|
||||
|
||||
function capitalize(s: string): string {
|
||||
return s.charAt(0).toUpperCase() + s.slice(1);
|
||||
}
|
||||
|
||||
/* ---------- NAV / MENU / LOGO / FOOTER ---------- */
|
||||
/* ---------- NAV / MENU / LOGO ---------- */
|
||||
export const NavStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps }) => {
|
||||
const { actions } = useEditor();
|
||||
const { setProp, setPropStyle } = useNodeProp(selectedId);
|
||||
const { pages } = usePages();
|
||||
|
||||
const links: any[] = nodeProps.links || [];
|
||||
|
||||
@@ -181,20 +48,6 @@ export const NavStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps
|
||||
});
|
||||
}, [actions, selectedId]);
|
||||
|
||||
/* F2: (re)populate the links array from the current pages list --
|
||||
label = page name, href = '/' for the landing page else '/{slug}'.
|
||||
Any existing CTA link (isCta: true) is preserved (appended after the
|
||||
freshly-generated page links) rather than being wiped, matching the
|
||||
legacy GrapesJS builder's "Sync with Pages" behavior. */
|
||||
const syncWithPages = useCallback(() => {
|
||||
actions.setProp(selectedId, (props: any) => {
|
||||
const existing: any[] = props.links || [];
|
||||
const ctaLinks = existing.filter((l) => l.isCta);
|
||||
const pageLinks = pages.map((p, i) => ({ text: p.name, href: pageHref(p, i) }));
|
||||
props.links = [...pageLinks, ...ctaLinks];
|
||||
});
|
||||
}, [actions, selectedId, pages]);
|
||||
|
||||
/* Detect standalone Logo vs Navbar/Menu */
|
||||
const isStandaloneLogo = nodeProps.type !== undefined && (nodeProps.type === 'text' || nodeProps.type === 'image') && nodeProps.logoText === undefined;
|
||||
|
||||
@@ -213,15 +66,6 @@ export const NavStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps
|
||||
);
|
||||
const GAP_PRESETS = ['8px', '16px', '24px', '32px', '40px'].map((g) => ({ label: g, value: g }));
|
||||
|
||||
/* Box-model / animation / visibility values, read off `style` (margin,
|
||||
padding, border, boxShadow, opacity) or top-level props (animation,
|
||||
hideOn*). This panel is only ever mounted for the 4 owned components
|
||||
(Navbar/Menu/Logo/Footer), which all now carry these props (see each
|
||||
component's .craft.props), so -- unlike the Links/Colors sections above,
|
||||
which are shared across a genuinely disparate prop schema -- these
|
||||
sections render unconditionally rather than gating on presence. */
|
||||
const style = nodeProps.style || {};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Standalone Logo component settings */}
|
||||
@@ -280,11 +124,10 @@ export const NavStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<LinkPicker value={nodeProps.href || '/'} onChange={(v) => setProp('href', v)} />
|
||||
<label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, color: '#e4e4e7', cursor: 'pointer', marginTop: -8, marginBottom: 12 }}>
|
||||
<input type="checkbox" checked={!!nodeProps.download} onChange={(e) => setProp('download', e.target.checked)} />
|
||||
Download (link points at a file)
|
||||
</label>
|
||||
<div style={sectionGap}>
|
||||
<label style={labelStyle}>Link URL</label>
|
||||
<input type="text" value={nodeProps.href || '/'} onChange={(e) => setProp('href', e.target.value)} placeholder="/" style={inputStyle} />
|
||||
</div>
|
||||
</CollapsibleSection>
|
||||
)}
|
||||
|
||||
@@ -302,22 +145,17 @@ export const NavStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps
|
||||
</div>
|
||||
)}
|
||||
{nodeProps.logoUrl !== undefined && (
|
||||
<LinkPicker value={nodeProps.logoUrl || '/'} onChange={(v) => setProp('logoUrl', v)} />
|
||||
<div style={sectionGap}>
|
||||
<label style={labelStyle}>Logo Link URL</label>
|
||||
<input type="text" value={nodeProps.logoUrl || ''} onChange={(e) => setProp('logoUrl', e.target.value)} placeholder="/" style={inputStyle} />
|
||||
</div>
|
||||
)}
|
||||
</CollapsibleSection>
|
||||
)}
|
||||
|
||||
{/* Links (not shown for standalone Logo, or for components -- like
|
||||
Footer -- that don't carry a `links` array at all). */}
|
||||
{!isStandaloneLogo && nodeProps.links !== undefined && (
|
||||
{/* Links (not shown for standalone Logo) */}
|
||||
{!isStandaloneLogo && (
|
||||
<CollapsibleSection title="Links">
|
||||
<button
|
||||
onClick={syncWithPages}
|
||||
title="Replace these links with one per page (preserves any CTA link)"
|
||||
style={{ marginBottom: 8, width: '100%', padding: '6px', fontSize: 11, background: 'rgba(59,130,246,0.12)', color: '#93c5fd', border: '1px solid rgba(59,130,246,0.4)', borderRadius: 4, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}
|
||||
>
|
||||
<i className="fa fa-refresh" /> Sync links with Pages
|
||||
</button>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||
{links.map((link, i) => (
|
||||
<div key={i} style={{ background: '#1e1e22', borderRadius: 6, padding: 6, display: 'flex', flexDirection: 'column', gap: 3 }}>
|
||||
@@ -327,11 +165,7 @@ export const NavStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps
|
||||
<i className="fa fa-times" />
|
||||
</button>
|
||||
</div>
|
||||
<LinkPicker value={link.href || ''} onChange={(v) => updateLink(i, 'href', v)} />
|
||||
<label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 10, color: '#a1a1aa', cursor: 'pointer', marginTop: -6 }}>
|
||||
<input type="checkbox" checked={!!link.download} onChange={(e) => updateLink(i, 'download', e.target.checked)} />
|
||||
Download (points at a file)
|
||||
</label>
|
||||
<input type="text" value={link.href || ''} onChange={(e) => updateLink(i, 'href', e.target.value)} placeholder="URL" style={{ ...smallInputStyle, color: '#71717a' }} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -400,61 +234,12 @@ export const NavStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps
|
||||
</CollapsibleSection>
|
||||
)}
|
||||
|
||||
{/* Box model: margin + padding (per-side, via style.*). The old
|
||||
single "Padding" preset row is folded into the Padding SpacingControl
|
||||
below (still writes to style.padding when linked, matching the
|
||||
previous behavior exactly). */}
|
||||
{/* Style overrides */}
|
||||
<CollapsibleSection title="Spacing" defaultOpen={false}>
|
||||
<SpacingControl
|
||||
label="Margin"
|
||||
value={{ top: style.marginTop, right: style.marginRight, bottom: style.marginBottom, left: style.marginLeft }}
|
||||
onChange={(side, v) => setPropStyle(`margin${capitalize(side)}`, v)}
|
||||
/>
|
||||
<SpacingControl
|
||||
label="Padding"
|
||||
value={{ top: style.paddingTop, right: style.paddingRight, bottom: style.paddingBottom, left: style.paddingLeft }}
|
||||
onChange={(side, v) => setPropStyle(`padding${capitalize(side)}`, v)}
|
||||
presets={SPACING_PRESETS}
|
||||
/>
|
||||
</CollapsibleSection>
|
||||
|
||||
{/* Border & Effects: border, box-shadow, opacity */}
|
||||
<CollapsibleSection title="Border & Effects" defaultOpen={false}>
|
||||
<BorderControl
|
||||
value={parseBorderShorthand(style.border)}
|
||||
onChange={(v) => setPropStyle('border', buildBorderShorthand(v))}
|
||||
/>
|
||||
<div className="guided-section">
|
||||
<SectionLabel>Box Shadow</SectionLabel>
|
||||
<PresetButtonGrid presets={SHADOW_PRESETS} activeValue={style.boxShadow || 'none'} onSelect={(v) => setPropStyle('boxShadow', v)} />
|
||||
<SectionLabel>Padding</SectionLabel>
|
||||
<PresetButtonGrid presets={SPACING_PRESETS} activeValue={(nodeProps.style || {}).padding as string} onSelect={(v) => setPropStyle('padding', v)} />
|
||||
</div>
|
||||
<div style={sectionGap}>
|
||||
<label style={labelStyle}>Opacity</label>
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={100}
|
||||
value={style.opacity !== undefined ? Math.round(parseFloat(style.opacity) * 100) : 100}
|
||||
onChange={(e) => setPropStyle('opacity', String(Number(e.target.value) / 100))}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</div>
|
||||
</CollapsibleSection>
|
||||
|
||||
{/* Entrance animation */}
|
||||
<CollapsibleSection title="Animation" defaultOpen={false}>
|
||||
<AnimationControl
|
||||
value={{ animation: nodeProps.animation, animationDelay: nodeProps.animationDelay }}
|
||||
onChange={(v) => actions.setProp(selectedId, (p: any) => { p.animation = v.animation; p.animationDelay = v.animationDelay; })}
|
||||
/>
|
||||
</CollapsibleSection>
|
||||
|
||||
{/* Responsive visibility */}
|
||||
<CollapsibleSection title="Visibility" defaultOpen={false}>
|
||||
<VisibilityControl
|
||||
value={{ hideOnDesktop: nodeProps.hideOnDesktop, hideOnTablet: nodeProps.hideOnTablet, hideOnMobile: nodeProps.hideOnMobile }}
|
||||
onChange={(v) => actions.setProp(selectedId, (p: any) => { p.hideOnDesktop = v.hideOnDesktop; p.hideOnTablet = v.hideOnTablet; p.hideOnMobile = v.hideOnMobile; })}
|
||||
/>
|
||||
</CollapsibleSection>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user