shadowdaoandClaude Opus 5.5
8ff0e01c45
Preview (and version-history Preview) renders the page in an <iframe sandbox srcdoc> without allow-same-origin, i.e. an opaque origin. Every site-builder asset response carries Cross-Origin-Resource-Policy: same-site (whp libs/SiteBuilderAssetServe.php), so each upload requested from that frame is cross-site and blocked (ERR_BLOCKED_BY_RESPONSE.NotSameSite, naturalWidth 0). The canvas was fine; Preview images were broken for everyone. CORP and the sandbox stay as they are. Before the HTML is handed to the sandboxed frame, the editor (panel origin, same-origin to the proxy) fetches this site's proxy assets and swaps each URL for a data: URL in the HTML text (utils/preview-assets.ts): img src/srcset, poster, video src, <link> icon, inline-style and <style> url(), "/& forms, both proxy URL forms. <a href>, <meta content>, other sites, other origins are left alone. Per-asset (8 MiB), total (40 MiB), count (200) and timeout (15 s) caps; any per-asset failure keeps the original URL. Save/Publish/export are untouched. blob: was measured and rejected: in Chromium and Firefox a blob: URL made by the editor window or by the Preview tab does not load inside the null-origin frame; data: does. Tests: vitest for the collector/rewriter; new real-browser suite test:browser:preview-assets (real HTTP stub with the backend's CORP header, Preview opened by a click through the real openers) reproduces the block with the old opener and passes with the new one in Chromium and Firefox, measures blob vs data, and checks the real backend publish holds only assets/<file>. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0185ukXgk6UunFCKyXqLe2Cq
WHP Site Builder v2
A visual drag-and-drop website builder for WHP, rebuilt from the ground up with Craft.js, React 18, and TypeScript. Replaces the legacy GrapesJS-based editor.
Quick Start
npm install
npm run dev
Opens at http://localhost:5173. The editor runs in standalone mode without WHP integration.
Build and Deploy
# Build production bundle
npm run build
# Deploy to WHP
cp dist/index.html /docker/whp/web/site-builder/editor.html
cp -r dist/js/ /docker/whp/web/site-builder/js/
cp -r dist/css/ /docker/whp/web/site-builder/css/
The PHP wrapper (index.php) injects WHP_CONFIG (user session, CSRF token, site ID) into the HTML before serving.
Architecture
- Craft.js - React-based visual editor framework (no iframe, direct DOM rendering)
- Inline styles - All user content uses React CSSProperties, no class-based CSS
- Component pattern - Each component is a self-contained file with: render logic, settings panel, Craft.js config, and HTML export method
- 3-panel layout - Left (blocks/pages/layers/assets), Center (canvas with device preview), Right (styles/settings/head)
- Dark theme - CSS custom properties, Inter font, blue accent
Components (22)
| Category | Components |
|---|---|
| Layout | Container, Section, ColumnLayout (1-6 cols), BackgroundSection, HeaderZone, FooterZone |
| Basic | Heading (H1-H6), TextBlock, ButtonLink, Navbar, Footer, Divider, Spacer |
| Media | ImageBlock (upload/browse/drag-drop), VideoBlock (YouTube/Vimeo/direct/background) |
| Sections | HeroSimple, FeaturesGrid, CTASection |
| Forms | FormContainer, InputField, TextareaField, FormButton |
Features
- Visual Editor - Drag-and-drop building, real-time preview, responsive device preview (Desktop/Tablet/Mobile)
- Site Design Tokens - 17 site-wide properties (colors, fonts, radii, nav style) with Basic/Advanced tabs
- Multi-Page - Unlimited pages with shared Header and Footer across all pages
- 16 Templates - Pre-built designs across 4 categories (Business, Creative, Personal, Community)
- Asset Management - Upload, browse, drag-drop, thumbnails, server-side storage via WHP API
- HTML Export - Full document export with Google Fonts and inline styles
- Auto-Save - Saves every 30 seconds when connected to WHP
- Context Menu - Right-click for duplicate, copy, paste, move, delete
- Keyboard Shortcuts - Undo, redo, delete
- Layers Panel - Component hierarchy tree view
- Undo/Redo - Full history support
Key Files
| File | Purpose |
|---|---|
src/main.tsx |
Entry point, reads WHP_CONFIG |
src/App.tsx |
Editor + providers (EditorConfig, SiteDesign, Pages) |
src/components/resolver.ts |
Component registry (20 components) for serialization |
src/editor/EditorShell.tsx |
3-panel layout + context menu + keyboard shortcuts |
src/editor/Canvas.tsx |
Craft.js Frame with device switching |
src/state/PageContext.tsx |
Multi-page state + header/footer |
src/state/SiteDesignContext.tsx |
17 site-wide design tokens |
src/templates/definitions.ts |
16 template definitions |
src/constants/presets.ts |
Color, font, spacing presets |
src/utils/html-export.ts |
Node-tree to HTML renderer |
See CLAUDE.md for full documentation. See FEATURES.md for a complete feature list.