feat(editor): inline image alignment — place several images side by side #284
Reference in New Issue
Block a user
Delete Branch "image-inline-row"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
What
A new "Inline (side by side)" alignment mode for images: a sixth value
inlineof the existing imagealignattribute. Consecutive inline images render asinline-blockcontainers, forming a row that wraps naturally on narrow viewports. Unlike the float modes (#145), text does not wrap around them.How
applyAlignment(editor-ext): reset-then-apply extended todisplay/vertical-align; the reset restores the constructor's inlinedisplay: flex, so non-inline modes carry byte-identical inline styles as before, and editor-ext stays independent of the client CSS class.align: inline.alignalready round-trips losslessly as a plain string viadata-align(verified in review).Out of scope
Verification
pnpm --filter @docmost/editor-ext test: 26 files / 247 tests passed (3 new applyAlignment specs: apply, reset-on-switch-away, floatLeft→inline).tsc --noEmiton client: 0 errors.Note: pushed via owner transport — the
claude_codeGitea account from AGENTS.md no longer exists (API: "user redirect does not exist"); commits are still authored by claude_code.Add a new value "inline" to the image align attribute (alongside left/center/right/floatLeft/floatRight). Inline images render as inline-block containers, so consecutive ones form a row that wraps naturally on narrow viewports; unlike the float modes, text does not wrap around them. - applyAlignment: reset-then-apply extended to display/vertical-align; the reset restores the constructor's inline display:flex so non-inline modes keep byte-identical styles and editor-ext stays independent of the client CSS class - image bubble menu: new "Inline (side by side)" button (IconLayoutColumns) with active state, mirroring the float buttons - i18n: key registered in en-US and ru-RU ("В ряд"), like the float labels - tests: 3 new applyAlignment specs (apply, reset on switch-away, float->inline) - no schema/MCP/markdown changes needed: align round-trips as data-alignРевью
20032be92— inline-выравнивание картинок (side by side). Полный 9-аспектный веер (отдельный субагент на каждый).Вердикт: PASS. Аккуратная фича; и — важно — корректно обходится БЕЗ правок схемных копий. Готово к мержу.
Что проверено
inline— новое ЗНАЧЕНИЕ существующего атрибутаalign, не новый mark/attr. Проверил: mcp И git-sync сериализуют align value-agnostic (data-align="${escapeAttr(attrs.align)}",parseHTML: getAttribute("data-align")— без enum/whitelist), поэтомуinlineround-trip'ится лосслесс через ОБЕ копии без единой правки.applyAlignment(NodeView-стайлинг) живёт только в editor-ext — это рендер, не схема, зеркалить не нужно. CHANGELOG-заявление о лосслесс round-trip какdata-align— верное.display:flex(дефолт конструктора ResizableNodeView) и чиститverticalAlign, затемinline→inline-block+verticalAlign:top+padding-gap. Для 5 существующих режимов (left/center/right/floatLeft/floatRight) стили байт-идентичны прежним (конструктор и так ставил flex); переключение inline↔другой не течёт (float/display/vertical-align чистятся). 3 новых non-vacuous теста (inline→стили+no-float; inline→center восстанавливает flex; floatLeft→inline чистит float).setImageAlignрасширен; i18n оба локаля; CHANGELOG) / coherence (клик→align:inline→inline-block, active-state, round-trip) — LGTM.Объективные проверки (в окружении ревью)
pnpm --filter @docmost/editor-ext test— 247 passed (вкл. 3 новых image.spec);tsc --noEmit -p .(клиент, после build editor-ext) — exit 0. eslint в окружении не поднялся → базис eslint = кодер + вычитка.Маркер
reviewed_head—20032be92.