fix(words): restore Image in column Add-block menu + make Drawer inspector hide/slide

1. Image was missing from the per-column "Add block" menu — the inspector's
   `columnInsertableSpecs` filter excluded `image` outright. Removed the
   exclusion: the image spec's `create()` builds an empty-src placeholder and
   `insertIntoActiveColumn` auto-activates it, so the inspector's image panel
   immediately prompts for the URL / Upload — the canonical placeholder-on-
   insert flow (same one the gutter inserter and slash menu use). Verified:
   menu now lists "Imagen"; selecting it adds a placeholder image to the column
   and switches the inspector to the image panel (URL + Upload + alt + caption).

2. Drawer inspector mode "only shifted" instead of hiding/sliding. The panel is
   parked off the right edge via translateX(100%) when closed, but the frame's
   overflow was `visible`, so the closed panel just sat outside the right border
   (visible) and toggling merely slid it sideways. Added `overflow-x: clip` to
   `[data-words][data-inspector='drawer']` so the closed panel is genuinely
   hidden and the open one emerges from the edge. X-axis only: the block-gutter
   grip (left margin, inside the frame) and the vertically-overflowing bubble
   toolbar stay visible. Verified: closed panel clipped/hidden; open panel slides
   in inside the frame's right edge.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
active-uix
dev 4 months ago
parent 44fe111ca0
commit 6ce4a0e922

@ -91,16 +91,17 @@
// entries (`schema.insertable()` flattens heading → H1/H2/H3 and list → // entries (`schema.insertable()` flattens heading → H1/H2/H3 and list →
// bulleted/numbered/check, with hard-coded English labels). The column // bulleted/numbered/check, with hard-coded English labels). The column
// inserter only needs "add a heading" / "add a list" — the precise level // inserter only needs "add a heading" / "add a list" — the precise level
// / kind is then tuned in that block's own inspector panel. Excludes: // / kind is then tuned in that block's own inspector panel. Excludes only
// - `columns` — a column is a nested Stack; no columns-in-columns. // `columns` (a column is a nested Stack; no columns-in-columns). Image IS
// - `image` — its spec is `insertable: false` (needs a URL / upload // offered: its `create()` builds an empty-src placeholder, and inserting
// flow first), matching the slash menu's exclusion. // auto-activates it so the inspector's image panel immediately prompts for
// the URL / Upload — the canonical placeholder-on-insert flow (same one the
// gutter inserter and slash menu use).
// Labels come from `blockKindLabel(type)` → fully localized. // Labels come from `blockKindLabel(type)` → fully localized.
const columnInsertableSpecs = $derived( const columnInsertableSpecs = $derived(
defaultWordsSchema.all().filter( defaultWordsSchema.all().filter(
(spec) => (spec) =>
spec.type !== 'columns' && spec.type !== 'columns' &&
spec.type !== 'image' &&
// Must expose at least one menu entry whose `create()` builds // Must expose at least one menu entry whose `create()` builds
// the default instance of the kind. // the default instance of the kind.
(spec.menu?.length ?? 0) > 0 (spec.menu?.length ?? 0) > 0

@ -837,6 +837,16 @@ button[data-words-breadcrumb-crumb]:focus-visible {
} }
/* Drawer — slide-in panel from the right edge + a fixed toggle. */ /* Drawer — slide-in panel from the right edge + a fixed toggle. */
/* Clip the frame on the X axis so the closed panel — parked off the right
edge via translateX(100%) — is genuinely HIDDEN and the open panel appears
to emerge from the edge. Without this the frame's overflow stays visible,
so the closed panel just sits outside the right border (visible, "only
shifts"). `clip` on X only (not `overflow: hidden`): the block-gutter grip
lives in the left margin INSIDE the frame, and the bubble toolbar overflows
vertically — both must stay visible, so the Y axis is left untouched. */
[data-words][data-inspector='drawer'] {
overflow-x: clip;
}
[data-words-drawer-toggle] { [data-words-drawer-toggle] {
position: absolute; position: absolute;
inset-block-start: var(--space-3); inset-block-start: var(--space-3);

Loading…
Cancel
Save

Powered by TurnKey Linux.