shadowdao
5b19ae97af
- FormStylePanel: ContactForm field editor (add/remove/reorder via ArrayPropEditor + manual move up/down) covering label/name/placeholder/ type (full sanitizeInputType allowlist + textarea/select)/required/ options. - SubscribeForm.toHtml: was a dead `<form method="POST">` with no action at all -- wired through the same relayFormWiring contract as ContactForm/ FormContainer so a recipientEmail makes it actually submit (marker + placeholder action + honeypot), falling back to action="#" otherwise. - SearchBar: was purely decorative (no action/method/input name) -- now a real GET form (configurable target, default "/") with input name="q", safeUrl-guarded against javascript:/vbscript: breakout. - Box-model (margin/padding per-side, border, shadow, opacity), entrance animation, and hide-on-device controls added to FormStylePanel and rolled out (blank/false craft.props defaults) across ContactForm, FormContainer, InputField, TextareaField, FormButton, SubscribeForm, SearchBar. No toHtml changes needed for animation/visibility -- html-export.ts's buildDataAttrs() already emits data-animation/ data-hide-* generically from these prop names. - Extended toHtml tests for all 7 components: field-type rendering (incl. textarea/select), type-attribute XSS sanitization, relay/GET functional wiring, box-model style passthrough, craft.props defaults. npx vitest run: 689/689 passed. npm run build: green. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
94 lines
2.5 KiB
TypeScript
94 lines
2.5 KiB
TypeScript
import React, { CSSProperties } from 'react';
|
|
import { useNode, Element, UserComponent } from '@craftjs/core';
|
|
import { Container } from '../layout/Container';
|
|
import { cssPropsToString } from '../../utils/style-helpers';
|
|
import { relayFormWiring } from '../../utils/form-relay-wiring';
|
|
import { sanitizeFormMethod } from '../../utils/escape';
|
|
|
|
interface FormContainerProps {
|
|
action?: string;
|
|
method?: 'GET' | 'POST';
|
|
recipientEmail?: string;
|
|
thankYouUrl?: string;
|
|
style?: CSSProperties;
|
|
children?: React.ReactNode;
|
|
animation?: string;
|
|
animationDelay?: string;
|
|
hideOnDesktop?: boolean;
|
|
hideOnTablet?: boolean;
|
|
hideOnMobile?: boolean;
|
|
}
|
|
|
|
export const FormContainer: UserComponent<FormContainerProps> = ({
|
|
action = '#',
|
|
method = 'POST',
|
|
style = {},
|
|
}) => {
|
|
const { connectors: { connect, drag } } = useNode();
|
|
|
|
return (
|
|
<form
|
|
ref={(ref: HTMLFormElement | null): void => { if (ref) connect(drag(ref)); }}
|
|
action={action}
|
|
method={method}
|
|
onSubmit={(e) => e.preventDefault()}
|
|
style={{
|
|
padding: '24px',
|
|
minHeight: '80px',
|
|
...style,
|
|
}}
|
|
>
|
|
<Element
|
|
id="form-inner"
|
|
is={Container}
|
|
canvas
|
|
style={{ display: 'flex', flexDirection: 'column', gap: '16px', padding: '0' }}
|
|
tag="div"
|
|
/>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
/* ---------- Craft config ---------- */
|
|
|
|
FormContainer.craft = {
|
|
displayName: 'Form',
|
|
props: {
|
|
action: '#',
|
|
method: 'POST',
|
|
recipientEmail: '',
|
|
thankYouUrl: '',
|
|
style: {
|
|
padding: '24px',
|
|
backgroundColor: '#ffffff',
|
|
borderRadius: '8px',
|
|
border: '1px solid #e4e4e7',
|
|
},
|
|
animation: '',
|
|
animationDelay: '',
|
|
hideOnDesktop: false,
|
|
hideOnTablet: false,
|
|
hideOnMobile: false,
|
|
},
|
|
rules: {
|
|
canDrag: () => true,
|
|
canMoveIn: () => false,
|
|
canMoveOut: () => true,
|
|
},
|
|
};
|
|
|
|
/* ---------- HTML export ---------- */
|
|
|
|
(FormContainer as any).toHtml = (props: FormContainerProps, childrenHtml: string, nodeId?: string) => {
|
|
const styleStr = cssPropsToString({
|
|
padding: '24px',
|
|
...props.style,
|
|
});
|
|
const { useRelay, marker, actionAttr, honeypot } = relayFormWiring(props.recipientEmail, props.thankYouUrl, props.action, nodeId);
|
|
const method = useRelay ? 'POST' : sanitizeFormMethod(props.method); // relay requires POST
|
|
const body = honeypot + childrenHtml; // honeypot as first child
|
|
return {
|
|
html: `${marker}<form action="${actionAttr}" method="${method}"${styleStr ? ` style="${styleStr}"` : ''}>${body}</form>`,
|
|
};
|
|
};
|