{ if (r) connect(drag(r)); }} style={style}>{text}
;
};
-// 3. Settings panel (rendered in right panel when selected)
-const MyComponentSettings: React.FC = () => {
- const { actions: { setProp }, props } = useNode((node) => ({
- props: node.data.props as MyComponentProps,
- }));
- return /* preset buttons, inputs, etc. */
;
-};
-
-// 4. Craft config (displayName, default props, rules, related settings)
+// 3. Craft config (displayName, default props, rules)
MyComponent.craft = {
displayName: 'My Component',
props: { text: 'Default text', style: {} },
rules: { canDrag: () => true, canMoveIn: () => false, canMoveOut: () => true },
- related: { settings: MyComponentSettings },
};
-// 5. HTML export (static method for serializing to HTML string)
+// 4. HTML export (static method for serializing to HTML string)
(MyComponent as any).toHtml = (props: MyComponentProps, childrenHtml: string) => {
return { html: `${childrenHtml}
` };
};
```
+Style editing for the new type is added separately as a `StylePanel` under `src/panels/right/styles/` (or reuses an existing generic one), and wired into `GuidedStyles.tsx`'s type dispatch -- components no longer carry their own settings UI.
+
### Component Resolver
All components must be registered in `src/components/resolver.ts`. This map is passed to `
-
- );
-};
-
/* ---------- Craft config ---------- */
ButtonLink.craft = {
@@ -211,9 +68,6 @@ ButtonLink.craft = {
canMoveIn: () => false,
canMoveOut: () => true,
},
- related: {
- settings: ButtonLinkSettings,
- },
};
/* ---------- HTML export ---------- */
@@ -224,9 +78,9 @@ ButtonLink.craft = {
textDecoration: 'none',
...props.style,
});
- const escapedText = (props.text || '').replace(//g, '>');
+ const escapedText = escapeHtml(props.text || '');
const targetAttr = props.target === '_blank' ? ' target="_blank" rel="noopener noreferrer"' : '';
return {
- html: `${escapedText}`,
+ html: `${escapedText}`,
};
};
diff --git a/craft/src/components/basic/Divider.toHtml.test.ts b/craft/src/components/basic/Divider.toHtml.test.ts
new file mode 100644
index 0000000..db186b5
--- /dev/null
+++ b/craft/src/components/basic/Divider.toHtml.test.ts
@@ -0,0 +1,34 @@
+import { describe, test, expect } from 'vitest';
+import { Divider } from './Divider';
+
+const toHtml = (Divider as any).toHtml;
+
+describe('Divider.toHtml normal rendering', () => {
+ test('renders thickness/color into the border-top style', () => {
+ const { html } = toHtml({ thickness: '2px', color: '#ff0000' }, '');
+ expect(html).toContain('border-top:2px solid #ff0000');
+ });
+});
+
+describe('Divider.toHtml XSS hardening (thickness/color into style=)', () => {
+ test('a thickness value with an attribute-breakout string cannot escape style=""', () => {
+ const malicious = '1px" onmouseover="alert(1)';
+ const { html } = toHtml({ thickness: malicious as any, color: '#000' }, '');
+ // The quote must not survive unescaped -- otherwise it closes style=""
+ // early and "onmouseover" becomes a live, attacker-controlled attribute.
+ expect(html).not.toMatch(/"\s+onmouseover="/);
+ expect(html).not.toMatch(/style="[^"]*"[^>]*onmouseover/);
+ });
+
+ test('a color value with a ';
+ const { html } = toHtml({ thickness: '1px', color: malicious as any }, '');
+ expect(html).not.toContain('');
+ });
+
+ test('a non-string thickness (object) does not raw-splice into style=""', () => {
+ const malicious = { toString: () => '1px" onmouseover="alert(1)' };
+ const { html } = toHtml({ thickness: malicious as any, color: '#000' }, '');
+ expect(html).not.toMatch(/"\s+onmouseover="/);
+ });
+});
diff --git a/craft/src/components/basic/Divider.tsx b/craft/src/components/basic/Divider.tsx
index aa349f5..707c07d 100644
--- a/craft/src/components/basic/Divider.tsx
+++ b/craft/src/components/basic/Divider.tsx
@@ -34,59 +34,6 @@ export const Divider: UserComponent
-
- setProp((p: ButtonLinkProps) => { p.text = e.target.value; })}
- style={{ width: '100%', padding: '4px 8px', background: '#27272a', color: '#e4e4e7', border: '1px solid #3f3f46', borderRadius: 4, fontSize: 12 }}
- />
-
-
-
-
- setProp((p: ButtonLinkProps) => { p.href = e.target.value; })}
- placeholder="https://..."
- style={{ width: '100%', padding: '4px 8px', background: '#27272a', color: '#e4e4e7', border: '1px solid #3f3f46', borderRadius: 4, fontSize: 12 }}
- />
-
-
-
-
-
-
-
- {(['_self', '_blank'] as const).map((t) => (
-
- ))}
-
-
-
-
-
-
- {colorPresets.map((preset) => (
-
-
-
-
-
-
- {radiusPresets.map((r) => (
-
- ))}
-
-
-
-
-
-
- {paddingPresets.map((p) => (
-
- ))}
-
-
-
- setProp((p: ButtonLinkProps) => { p.style = { ...p.style, fontSize: e.target.value }; })}
- style={{ width: '100%', padding: '4px 8px', background: '#27272a', color: '#e4e4e7', border: '1px solid #3f3f46', borderRadius: 4, fontSize: 11 }}
- />
-
-
-
- );
-};
-
/* ---------- Craft config ---------- */
Divider.craft = {
@@ -101,9 +48,6 @@ Divider.craft = {
canMoveIn: () => false,
canMoveOut: () => true,
},
- related: {
- settings: DividerSettings,
- },
};
/* ---------- HTML export ---------- */
diff --git a/craft/src/components/basic/Footer.editguard.test.tsx b/craft/src/components/basic/Footer.editguard.test.tsx
new file mode 100644
index 0000000..95a03ff
--- /dev/null
+++ b/craft/src/components/basic/Footer.editguard.test.tsx
@@ -0,0 +1,105 @@
+import { describe, test, expect, vi, beforeEach } from 'vitest';
+import React from 'react';
+import { createRoot, Root } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+
+/* Footer only needs useNode from @craftjs/core. Mock it following the
+ DOM-harness pattern in src/state/PageContext.slug.test.tsx (no
+ @testing-library/react in this repo) so we can drive `selected` across
+ re-renders and observe setProp calls without a real
-
-
-
-
- {colorPresets.map((c) => (
-
-
-
-
-
- {thicknessPresets.map((t) => (
-
- ))}
-
-
-
- );
-};
-
/* ---------- Craft config ---------- */
Footer.craft = {
@@ -135,9 +98,6 @@ Footer.craft = {
canMoveIn: () => false,
canMoveOut: () => true,
},
- related: {
- settings: FooterSettings,
- },
};
/* ---------- HTML export ---------- */
@@ -148,6 +108,6 @@ Footer.craft = {
textAlign: 'center',
...props.style,
});
- const escapedText = (props.text || '').replace(//g, '>');
+ const escapedText = escapeHtml(props.text || '');
return { html: `
-
- setProp((p: FooterProps) => { p.text = e.target.value; })}
- style={{ width: '100%', padding: '4px 8px', background: '#27272a', color: '#e4e4e7', border: '1px solid #3f3f46', borderRadius: 4, fontSize: 12 }}
- />
-
-
-
-
-
-
-
- {bgPresets.map((c) => (
-
-
-
-
-
- {colorPresets.map((c) => (
-
- Hello world
'); + }); +}); diff --git a/craft/src/components/basic/Heading.tsx b/craft/src/components/basic/Heading.tsx index 3131596..4f0accd 100644 --- a/craft/src/components/basic/Heading.tsx +++ b/craft/src/components/basic/Heading.tsx @@ -1,12 +1,20 @@ import React, { CSSProperties, useCallback, useRef, useEffect } from 'react'; import { useNode, UserComponent } from '@craftjs/core'; import { cssPropsToString } from '../../utils/style-helpers'; -import { SettingsTabs } from '../../ui/SettingsTabs'; -import { TypographyControl } from '../../ui/TypographyControl'; -import { AdvancedTab } from '../../ui/AdvancedTab'; +import { escapeHtml } from '../../utils/escape'; type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; +// `level` is settable via the AI `update_props` path and from deserialized +// saved state -- neither type-checked at runtime -- and is interpolated +// directly into the tag position (`React.createElement(level, ...)` / +// `<${tag}` in `toHtml`). A malicious value like `h2>
-
-
-
- {levels.map((l) => (
-
- ))}
-
-
-
- setProp((p: HeadingProps) => { p.text = e.target.value; })}
- style={{ width: '100%', padding: '6px 8px', background: '#27272a', color: '#e4e4e7', border: '1px solid #3f3f46', borderRadius: 4, fontSize: 13 }}
- />
-
-
- }
- style={
- hi
' }, ''); + expect(html).not.toContain(' in the exported HTML, so a malicious
+ // `style` prop (e.g. an attacker-controlled object with a breakout
+ // toString()) has nothing to splice into.
+ const malicious = { toString: () => 'color:red" onmouseover="alert(1)' } as any;
+ const { html } = toHtml({ code: '
hi
', style: malicious }, ''); + expect(html).not.toMatch(/onmouseover/); + expect(html).not.toMatch(/hi');
+ });
+});
diff --git a/craft/src/components/basic/HtmlBlock.tsx b/craft/src/components/basic/HtmlBlock.tsx
index b0fd034..4fa7f8a 100644
--- a/craft/src/components/basic/HtmlBlock.tsx
+++ b/craft/src/components/basic/HtmlBlock.tsx
@@ -49,76 +49,6 @@ export const HtmlBlock: UserComponent = ({ code = '', style = {}
});
};
-/* ---------- Settings panel ---------- */
-
-const HtmlBlockSettings: React.FC = () => {
- const { actions: { setProp }, props } = useNode((node) => ({
- props: node.data.props as HtmlBlockProps,
- }));
-
- return (
-
-
- This block renders raw HTML. Use with caution.
-
-
-
-
- `;
+ inputHtml = ``;
} else if (field.type === 'select') {
- const opts = (field.options || []).map((o) => ``).join('');
- inputHtml = ``;
+ const opts = (field.options || []).map((o) => ``).join('');
+ inputHtml = ``;
} else {
- inputHtml = ``;
+ inputHtml = ``;
}
return `
${labelHtml}${inputHtml}
`;
}).join('\n ');
@@ -436,11 +214,18 @@ ContactForm.craft = {
alignSelf: 'flex-start',
});
- const { marker, actionAttr, honeypot } = relayFormWiring(props.recipientEmail, props.thankYouUrl, props.formAction);
+ const { marker, actionAttr, honeypot } = relayFormWiring(props.recipientEmail, props.thankYouUrl, props.formAction, nodeId);
+
+ // The form-sender relay delivers success via a full-page 303 redirect
+ // (to thankYouUrl or a hosted thanks.php page) -- there is no in-page JS
+ // that reveals an inline success element today. Emit successMessage as a
+ // forward-compatible data attribute so a future AJAX/JS submission mode
+ // can read it, without implying a live mechanism that doesn't exist yet.
+ const successAttr = props.successMessage ? ` data-whp-success-message="${escapeAttr(props.successMessage)}"` : '';
return {
- html: `${marker}`,
};
};
diff --git a/craft/src/components/forms/FormButton.toHtml.test.ts b/craft/src/components/forms/FormButton.toHtml.test.ts
new file mode 100644
index 0000000..d8b879d
--- /dev/null
+++ b/craft/src/components/forms/FormButton.toHtml.test.ts
@@ -0,0 +1,25 @@
+import { describe, test, expect } from 'vitest';
+import { FormButton } from './FormButton';
+
+const toHtml = (FormButton as any).toHtml;
+
+describe('FormButton.toHtml', () => {
+ test('normal text renders as-is', () => {
+ const { html } = toHtml({ text: 'Send it' }, '');
+ expect(html).toContain('>Send it<');
+ expect(html).toContain('type="submit"');
+ });
+
+ test('type="submit" is a hardcoded literal, not prop-driven', () => {
+ const { html } = toHtml({ text: 'Submit' }, '');
+ expect(html).toMatch(/