fix(studio): designer canvas no longer freezes on drawer/modal form blocks (#1840)

xuyushun441-sys · os-zhuang · claude · web-flow · commit d4b260c7d98b · 2026-06-21T12:36:29.000+08:00
The page designer's live block preview (PageBlockCanvas → BlockLivePreview)
renders each block with the real runtime renderer behind a `pointer-events-none`
click-trap. For an `object-form` block whose `formType` is `drawer` (or `modal`),
the rendered DrawerForm/ModalForm mounts a Radix Sheet/Dialog through a portal at
&lt;body&gt; with `open` defaulting to true. The portalled overlay escapes the
click-trap, and Radix's modal mode sets `pointer-events:none` on &lt;body&gt; plus a
focus trap — so the entire designer becomes unresponsive ("the UI freezes") the
moment you pick "Drawer" for a form block.

Coerce overlay form types to an inline `simple` form before handing the schema to
SchemaRenderer (new `toCanvasSchema`), mirroring the existing ViewPreview
INLINE_FORM_TYPES guard. The canvas shows the form's field layout in place; the
saved metadata keeps its real formType.

Adds unit tests for the coercion (drawer/modal → simple, inline types untouched,
top-level + properties shapes, no input mutation, non-form blocks unchanged).

Co-authored-by: Jack Zhuang &lt;277994282+os-zhuang@users.noreply.github.com&gt;
Co-authored-by: Claude Opus 4.8 &lt;noreply@anthropic.com&gt;
diff --git a/packages/app-shell/src/views/metadata-admin/previews/PageBlockCanvas.test.tsx b/packages/app-shell/src/views/metadata-admin/previews/PageBlockCanvas.test.tsx
@@ -2,7 +2,7 @@
 
 import { describe, it, expect, afterEach } from 'vitest';
 import { render, screen, cleanup } from '@testing-library/react';
-import { PageBlockCanvas } from './PageBlockCanvas';
+import { PageBlockCanvas, toCanvasSchema } from './PageBlockCanvas';
 
 afterEach(cleanup);
 
@@ -20,3 +20,52 @@ describe('PageBlockCanvas — empty state', () => {
     expect(screen.queryByText(/configured in Properties/i)).not.toBeInTheDocument();
   });
 });
+
+
+/**
+ * Overlay form-type guard. A live `object-form` block with `formType: 'drawer'`
+ * (or `'modal'`) would mount a portalled, focus-trapping modal over the design
+ * canvas and lock the whole editor ("the UI freezes"). toCanvasSchema coerces
+ * those overlay types to an inline `simple` form so the canvas shows the field
+ * layout in place — mirroring ViewPreview. Regression guard for that freeze.
+ */
+describe('toCanvasSchema — overlay form coercion', () => {
+  it('coerces a drawer object-form to an inline simple form (no modal on the canvas)', () => {
+    const schema = toCanvasSchema({
+      type: 'object-form',
+      properties: { objectName: 'showcase_project', mode: 'create', formType: 'drawer' },
+    }) as any;
+    expect(schema.type).toBe('object-form');
+    expect(schema.properties.formType).toBe('simple');
+    expect(schema.properties.objectName).toBe('showcase_project'); // siblings preserved
+  });
+
+  it('coerces a modal form type too', () => {
+    const schema = toCanvasSchema({ type: 'object-form', properties: { formType: 'modal' } }) as any;
+    expect(schema.properties.formType).toBe('simple');
+  });
+
+  it('also neutralises a top-level (hoisted) overlay formType', () => {
+    const schema = toCanvasSchema({ type: 'object-form', formType: 'drawer' } as any) as any;
+    expect(schema.formType).toBe('simple');
+  });
+
+  it('leaves inline form types untouched', () => {
+    for (const ft of ['simple', 'tabbed', 'wizard', 'split']) {
+      const schema = toCanvasSchema({ type: 'object-form', properties: { formType: ft } }) as any;
+      expect(schema.properties.formType).toBe(ft);
+    }
+  });
+
+  it('does not mutate the input block', () => {
+    const block: any = { type: 'object-form', properties: { formType: 'drawer' } };
+    toCanvasSchema(block);
+    expect(block.properties.formType).toBe('drawer');
+  });
+
+  it('leaves non-form blocks unchanged', () => {
+    const schema = toCanvasSchema({ type: 'element:text', properties: { content: 'hi' } }) as any;
+    expect(schema.type).toBe('element:text');
+    expect(schema.properties.content).toBe('hi');
+  });
+});
diff --git a/packages/app-shell/src/views/metadata-admin/previews/PageBlockCanvas.tsx b/packages/app-shell/src/views/metadata-admin/previews/PageBlockCanvas.tsx
@@ -38,16 +38,45 @@ import { parsePath, hopsToPath, getByPath, setByPath } from '../inspectors/PageB
 import { SchemaRenderer } from '@object-ui/react';
 import { PreviewErrorBoundary } from './PreviewShell';
 
+/** Overlay form types (`drawer` / `modal`) render their body through a portal
+ *  as a modal Sheet/Dialog. On the canvas that portal escapes the
+ *  `pointer-events-none` click-trap below and — because Radix sets
+ *  `pointer-events:none` on <body> and traps focus while open — locks the whole
+ *  designer, which reads as "frozen". We coerce them to an inline `simple` form
+ *  so the field layout shows in place, mirroring ViewPreview. The saved metadata
+ *  keeps its real formType. */
+const OVERLAY_FORM_TYPES = new Set(['drawer', 'modal']);
+
+/** Build the schema handed to SchemaRenderer, neutralising overlay form types so
+ *  a live form block never mounts a modal over the design canvas. SchemaRenderer
+ *  needs a `type` discriminator; the block always carries one. */
+export function toCanvasSchema(block: Block): Record<string, unknown> {
+  const schema: Record<string, unknown> = {
+    ...(block as Record<string, unknown>),
+    type: String(block?.type ?? ''),
+  };
+  // formType lives under `properties` (canonical) but may also be hoisted to the
+  // top level; neutralise whichever carries an overlay type.
+  const props = schema.properties && typeof schema.properties === 'object'
+    ? (schema.properties as Record<string, unknown>)
+    : undefined;
+  const formType = (props?.formType ?? schema.formType) as unknown;
+  if (typeof formType === 'string' && OVERLAY_FORM_TYPES.has(formType)) {
+    if (props) schema.properties = { ...props, formType: 'simple' };
+    if ('formType' in schema) schema.formType = 'simple';
+  }
+  return schema;
+}
+
 /** Render a single block via the real runtime renderer, behind a click-trap,
- *  so the design canvas mirrors the live preview. SchemaRenderer needs a
- *  `type` discriminator; the block always carries one. Capped height keeps a
+ *  so the design canvas mirrors the live preview. Capped height keeps a
  *  tall widget (e.g. a data table) from dominating the canvas. */
 function BlockLivePreview({ block, maxHeightClass = 'max-h-72' }: { block: Block; maxHeightClass?: string }) {
   const typeStr = String(block?.type ?? '');
   return (
     <div className={cn('pointer-events-none select-none overflow-hidden p-3', maxHeightClass)}>
       <PreviewErrorBoundary fallbackHint={`"${typeStr}" can't render with its current configuration — check its Properties.`}>
-        <SchemaRenderer schema={{ ...(block as Record<string, unknown>), type: typeStr } as never} />
+        <SchemaRenderer schema={toCanvasSchema(block) as never} />
       </PreviewErrorBoundary>
     </div>
   );
