Обтекание картинки текстом (float image) — порт из Forkmost #145

New Issue

vvzvlad · 2026-06-23T19:20:14+03:00

vvzvlad commented

2026-06-23 19:20:14 +03:00

Что

Перенести из Forkmost фичу обтекания картинки текстом (float image): возможность выровнять изображение влево/вправо так, чтобы текст обтекал его сбоку, а не только блочное выравнивание left/center/right, как сейчас.

Источник

Forkmost PR #7 «float-image by fuscodev» (вмержен 22.06.2025): https://github.com/Vito0912/forkmost/pull/7
Это порт всё ещё открытого апстрим-PR в Docmost: PR #1132 «feat: float image» от fuscodev: https://github.com/docmost/docmost/pull/1132
Состав: коммит float image + follow-up 100% image width on small screen.

Где у нас

Весь код в packages/editor-ext/src/lib/image/image.ts (тот же файл, что и в Forkmost). Сейчас поддерживается только align = left/center/right через flex-justify, без реального float.

Что нужно сделать

Расширить тип команды setImageAlign, добавив значения floatLeft / floatRight:

setImageAlign: (align: "left" | "center" | "right" | "floatLeft" | "floatRight") => ReturnType;

В applyAlignment() добавить реальный float с обтеканием (reset + ветки floatLeft/floatRight):

container.style.float = "";            // reset
container.style.width = "";
container.style.padding = "";
if (align === "floatLeft")  { container.style.float = "left";  container.style.padding = "0 10px 0 0"; }
else if (align === "floatRight") { container.style.float = "right"; container.style.padding = "0 0 0 10px"; }
// left/right/center — прежнее flex-выравнивание

Убедиться, что renderHTML сохраняет выравнивание (Forkmost оборачивает картинку в <figure data-align=...> для подписи и сериализации) — проверить совместимость с нашей текущей разметкой.
Добавить кнопки floatLeft/floatRight во всплывающее меню картинки (image bubble menu) в apps/client.
На узких экранах схлопывать картинку до 100% ширины (follow-up-коммит из Forkmost).

Замечания

Проверить экспорт (Markdown/HTML) и сериализацию ProseMirror — что data-align=floatLeft/floatRight корректно round-trip'ится.
Проверить совместное редактирование (Yjs) и историю страниц.

## Что Перенести из Forkmost фичу обтекания картинки текстом (float image): возможность выровнять изображение влево/вправо так, чтобы текст обтекал его сбоку, а не только блочное выравнивание left/center/right, как сейчас. ## Источник - Forkmost PR #7 «float-image by fuscodev» (вмержен 22.06.2025): https://github.com/Vito0912/forkmost/pull/7 - Это порт всё ещё открытого апстрим-PR в Docmost: PR #1132 «feat: float image» от fuscodev: https://github.com/docmost/docmost/pull/1132 - Состав: коммит `float image` + follow-up `100% image width on small screen`. ## Где у нас Весь код в `packages/editor-ext/src/lib/image/image.ts` (тот же файл, что и в Forkmost). Сейчас поддерживается только `align` = left/center/right через flex-justify, без реального `float`. ## Что нужно сделать 1. Расширить тип команды `setImageAlign`, добавив значения `floatLeft` / `floatRight`: ```ts setImageAlign: (align: "left" | "center" | "right" | "floatLeft" | "floatRight") => ReturnType; ``` 2. В `applyAlignment()` добавить реальный float с обтеканием (reset + ветки floatLeft/floatRight): ```ts container.style.float = ""; // reset container.style.width = ""; container.style.padding = ""; if (align === "floatLeft") { container.style.float = "left"; container.style.padding = "0 10px 0 0"; } else if (align === "floatRight") { container.style.float = "right"; container.style.padding = "0 0 0 10px"; } // left/right/center — прежнее flex-выравнивание ``` 3. Убедиться, что `renderHTML` сохраняет выравнивание (Forkmost оборачивает картинку в `<figure data-align=...>` для подписи и сериализации) — проверить совместимость с нашей текущей разметкой. 4. Добавить кнопки floatLeft/floatRight во всплывающее меню картинки (image bubble menu) в `apps/client`. 5. На узких экранах схлопывать картинку до 100% ширины (follow-up-коммит из Forkmost). ## Замечания - Проверить экспорт (Markdown/HTML) и сериализацию ProseMirror — что `data-align=floatLeft/floatRight` корректно round-trip'ится. - Проверить совместное редактирование (Yjs) и историю страниц.

vvzvlad added the feature label 2026-06-23 19:20:14 +03:00

Ghost referenced this issue from a commit

2026-06-24 06:35:47 +03:00

feat(editor): float image with text wrap (#145, port from Forkmost)

Ghost referenced this issue

2026-06-24 06:36:05 +03:00

feat(editor): float image with text wrap (#145) #157

~~Ghost referenced this issue 2026-06-24 12:41:18 +03:00~~

feat(editor): float image with text wrap (#145) #157

Ghost referenced this issue from a commit

2026-06-24 12:49:47 +03:00

fix(editor): load the float responsive rule + test applyAlignment (#145 review)