mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-18 09:49:40 +02:00
Neuer Block-Type `formEmbed` im Website-Builder
(docs/plans/forms-module.md M8):
- @mana/website-blocks/src/formEmbed/:
- schema.ts: FormEmbedSchema mit token (32-char base64url) +
titleOverride + optional resolved-Block (formTitle, fields,
branching, settings.{submitButtonLabel, successMessage}).
FormFieldEmbedSchema duplicated leichtgewichtig statt cross-
package import — website-blocks bleibt self-contained.
- FormEmbed.svelte: edit/preview rendert Placeholder-Card mit
Token-Snippet und resolved-Status; public rendert die kompletten
11 Field-Types inkl. Live-Branching-aware-Render. Submitter-
Block (Name+Email optional). Submit POSTet an
/api/v1/forms/public/:token/submit. Lazy-Fallback fetcht
/api/v1/unlisted/public/:token wenn die publish-resolver-blob
fehlt. Bot-Honeypot bleibt M8-Polish.
- FormEmbedInspector.svelte: Token-Input mit base64url-Validierung
bei blur, optional titleOverride, resolved-Card mit
Field-Count + Logik-Regel-Count.
- BLOCK_SPECS + BLOCK_SCHEMAS + BLOCK_DEFAULTS um formEmbed
erweitert. schemas.test.ts erwartet jetzt 12 Block-Types.
- apps/mana/apps/web/src/lib/modules/website/forms-embeds.ts:
resolveFormEmbed scant formTable nach unlistedToken (linear scan
ist günstig bei <100 forms pro user, kein Index nötig), dekrypted,
validiert published-status, gibt resolved-Block zurück.
- publish.ts.resolveEmbedsInTree erweitert um formEmbed-Branch — ruft
resolveFormEmbed parallel zu resolveEmbed (moduleEmbed) im selben
Walk.
Trade-offs:
- Token statt formId: bei Token-Rotation (M4b) muss der User den Block
neu konfigurieren. Der formEmbed-Block-Resolver erkennt das + setzt
resolved.error; public-Renderer fällt auf lazy-fetch zurück.
- Plaintext stored: das resolved-Blob landet als plaintext im
public-snapshot, gleiches Trust-Modell wie moduleEmbed (öffentliche
Website per Definition).
Tests: website-blocks 50/50 grün (12 schema-block-types + per-type
defaults validation). svelte-check 0 errors. forms 26/26 unverändert.
Use-Case: Vereins-Sommerfest. User legt /forms/anmeldung an,
publisht, setzt unlisted, kopiert Token. Im Website-Builder fügt er
einen formEmbed-Block auf der Event-Seite ein, paste Token → bei
Publish wird der Form-Schema inlined → Besucher submitten direkt
auf der Vereins-Website.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
86 lines
2.8 KiB
TypeScript
86 lines
2.8 KiB
TypeScript
import type { BlockSpec } from './types';
|
|
import { heroBlockSpec } from './hero';
|
|
import { richTextBlockSpec } from './richText';
|
|
import { spacerBlockSpec } from './spacer';
|
|
import { imageBlockSpec } from './image';
|
|
import { ctaBlockSpec } from './cta';
|
|
import { faqBlockSpec } from './faq';
|
|
import { columnsBlockSpec } from './columns';
|
|
import { galleryBlockSpec } from './gallery';
|
|
import { formBlockSpec } from './form';
|
|
import { formEmbedBlockSpec } from './formEmbed';
|
|
import { moduleEmbedBlockSpec } from './moduleEmbed';
|
|
import { analyticsBlockSpec } from './analytics';
|
|
|
|
/**
|
|
* The block registry — single source of truth for every block type the
|
|
* website builder knows about. Editor insert palette, renderer, inspector,
|
|
* schema validation, and future AI tools all consume this map.
|
|
*
|
|
* Adding a new block = create a folder under `src/{type}/`, export a
|
|
* `BlockSpec` from its index, and list it here.
|
|
*/
|
|
export const BLOCK_SPECS: readonly BlockSpec<unknown>[] = [
|
|
heroBlockSpec,
|
|
richTextBlockSpec,
|
|
ctaBlockSpec,
|
|
imageBlockSpec,
|
|
galleryBlockSpec,
|
|
faqBlockSpec,
|
|
formBlockSpec,
|
|
formEmbedBlockSpec,
|
|
moduleEmbedBlockSpec,
|
|
analyticsBlockSpec,
|
|
columnsBlockSpec,
|
|
spacerBlockSpec,
|
|
] as unknown as readonly BlockSpec<unknown>[];
|
|
|
|
const BY_TYPE: Record<string, BlockSpec<unknown>> = (() => {
|
|
const map: Record<string, BlockSpec<unknown>> = {};
|
|
for (const spec of BLOCK_SPECS) {
|
|
if (map[spec.type]) {
|
|
throw new Error(`[website-blocks] duplicate block type "${spec.type}"`);
|
|
}
|
|
map[spec.type] = spec as BlockSpec<unknown>;
|
|
}
|
|
return map;
|
|
})();
|
|
|
|
export function getBlockSpec(type: string): BlockSpec<unknown> | undefined {
|
|
return BY_TYPE[type];
|
|
}
|
|
|
|
export function requireBlockSpec(type: string): BlockSpec<unknown> {
|
|
const spec = BY_TYPE[type];
|
|
if (!spec) throw new Error(`[website-blocks] unknown block type "${type}"`);
|
|
return spec;
|
|
}
|
|
|
|
export function getAllBlockSpecs(): readonly BlockSpec<unknown>[] {
|
|
return BLOCK_SPECS;
|
|
}
|
|
|
|
/**
|
|
* Validate props against a block type's schema. Returns the parsed props
|
|
* (with defaults applied) on success, or throws with the Zod error.
|
|
*/
|
|
export function validateBlockProps(type: string, props: unknown): unknown {
|
|
const spec = requireBlockSpec(type);
|
|
return spec.schema.parse(props);
|
|
}
|
|
|
|
/**
|
|
* Safe-validate: returns `{ success, data, error }` without throwing.
|
|
* Used at boundaries (submit endpoint, snapshot builder) where we want
|
|
* to collect all errors rather than fail on the first one.
|
|
*/
|
|
export function safeValidateBlockProps(
|
|
type: string,
|
|
props: unknown
|
|
): { success: true; data: unknown } | { success: false; error: unknown } {
|
|
const spec = getBlockSpec(type);
|
|
if (!spec) return { success: false, error: new Error(`Unknown block type "${type}"`) };
|
|
const parsed = spec.schema.safeParse(props);
|
|
if (parsed.success) return { success: true, data: parsed.data };
|
|
return { success: false, error: parsed.error };
|
|
}
|