Bug: WidgetEditor loses state on reload — raw DB rows returned without mapping

[dogghouseinteractive]

`

Summary

The GET /_emdash/api/widget-areas endpoint returns raw SQLite rows for widgets without transforming them for the client. This causes the WidgetEditor component to lose all widget state (content, menu selection, component assignment) on every page load, even though the data is saved correctly in the database.

Affected version

EmDash v0.1.1 (@emdash-cms/admin v0.1.1)

Steps to reproduce

1. Navigate to /_emdash/admin/widgets
2. Expand a content-type widget, enter some rich text, and click Save — toast confirms "Widget updated"
3. Expand a menu-type widget, select a menu, and click Save — toast confirms "Widget updated"
4. Refresh the page
5. Expand the same widgets — content is empty, menu selection is gone

Root cause

The widget areas list endpoint (src/astro/routes/api/widget-areas/index.ts) returns raw rows from _emdash_widgets:

const widgets = await db

.selectFrom("_emdash_widgets")

.selectAll()

.where("area_id", "=", area.id)

.orderBy("sort_order", "asc")

.execute();

return { ...area, widgets, widgetCount: widgets.length };

This has two problems:

1. content is a JSON string, not a parsed array

The content column stores JSON.stringify(portableTextBlocks). Without parsing, the client receives a string like "[{"_type":"block",...}]". In WidgetEditor:

const [content, setContent] = React.useState(

Array.isArray(widget.content) ? widget.content : []

);

Array.isArray returns false for a string, so content always initializes to [].

2. Column names are snake_case, but WidgetEditor reads camelCase

DB column	WidgetEditor reads	Result
menu_name	widget.menuName	undefined
component_id	widget.componentId	undefined
component_props	widget.componentProps	undefined

Since the camelCase keys don't exist on the raw row object, they all fall back to their defaults ("" or {}).

Why saving works

The PUT handler (src/astro/routes/api/widget-areas/[name]/widgets/[id].ts) correctly maps camelCase input to snake_case columns:

if (body.menuName !== undefined) updates.menu_name = body.menuName || null;

if (body.componentId !== undefined) updates.component_id = body.componentId || null;

So data is written correctly — it's only the read path that's broken.

Comparison with sections (which work correctly)

The sections API has a rowToSection() helper (src/sections/index.ts) that:

• JSON.parses the content and keywords columns
• Maps snake_case columns to camelCase properties (preview_media_id → previewUrl, etc.)

Widgets lack an equivalent mapper.

Suggested fix

Add a rowToWidget() helper analogous to rowToSection(), and use it in the widget areas list and single-widget GET endpoints:

function rowToWidget(row: WidgetRow): Widget {

let content: unknown[] = [];

if (row.content) {

try {

const parsed = JSON.parse(row.content);

if (Array.isArray(parsed)) content = parsed;

} catch {}

}

let componentProps: Record<string, unknown> = {};

if (row.component_props) {

try {

componentProps = JSON.parse(row.component_props);

} catch {}

}

return {

id: row.id,

areaId: row.area_id,

type: row.type,

title: row.title,

content,

menuName: row.menu_name,

componentId: row.component_id,

componentProps,

sortOrder: row.sort_order,

createdAt: row.created_at,

updatedAt: row.updated_at,

};

}

`