From 6ce4a0e922df3bec57c5c7a5b971525ca5d4cd3e Mon Sep 17 00:00:00 2001 From: dev Date: Tue, 2 Jun 2026 16:36:30 +0200 Subject: [PATCH] fix(words): restore Image in column Add-block menu + make Drawer inspector hide/slide MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- src/uix/eidos/components/words/words-inspector.svelte | 11 ++++++----- src/uix/eidos/components/words/words.css | 10 ++++++++++ 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/src/uix/eidos/components/words/words-inspector.svelte b/src/uix/eidos/components/words/words-inspector.svelte index 055fa9a1f..846f69571 100644 --- a/src/uix/eidos/components/words/words-inspector.svelte +++ b/src/uix/eidos/components/words/words-inspector.svelte @@ -91,16 +91,17 @@ // entries (`schema.insertable()` flattens heading → H1/H2/H3 and list → // bulleted/numbered/check, with hard-coded English labels). The column // inserter only needs "add a heading" / "add a list" — the precise level - // / kind is then tuned in that block's own inspector panel. Excludes: - // - `columns` — a column is a nested Stack; no columns-in-columns. - // - `image` — its spec is `insertable: false` (needs a URL / upload - // flow first), matching the slash menu's exclusion. + // / kind is then tuned in that block's own inspector panel. Excludes only + // `columns` (a column is a nested Stack; no columns-in-columns). Image IS + // offered: its `create()` builds an empty-src placeholder, and inserting + // 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. const columnInsertableSpecs = $derived( defaultWordsSchema.all().filter( (spec) => spec.type !== 'columns' && - spec.type !== 'image' && // Must expose at least one menu entry whose `create()` builds // the default instance of the kind. (spec.menu?.length ?? 0) > 0 diff --git a/src/uix/eidos/components/words/words.css b/src/uix/eidos/components/words/words.css index 07ce9e095..3944a28fc 100644 --- a/src/uix/eidos/components/words/words.css +++ b/src/uix/eidos/components/words/words.css @@ -837,6 +837,16 @@ button[data-words-breadcrumb-crumb]:focus-visible { } /* 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] { position: absolute; inset-block-start: var(--space-3);