diff --git a/apps/client/public/locales/en-US/translation.json b/apps/client/public/locales/en-US/translation.json index a4dd886b..652b4382 100644 --- a/apps/client/public/locales/en-US/translation.json +++ b/apps/client/public/locales/en-US/translation.json @@ -1287,5 +1287,7 @@ "Analytics / tracker": "Analytics / tracker", "Injected verbatim into the of PUBLIC SHARE pages only (same-origin). For analytics snippets (Google Analytics, Yandex.Metrika, etc.). Admin only.": "Injected verbatim into the of PUBLIC SHARE pages only (same-origin). For analytics snippets (Google Analytics, Yandex.Metrika, etc.). Admin only.", "Go to login page": "Go to login page", - "Move to space": "Move to space" + "Move to space": "Move to space", + "Float left (wrap text)": "Float left (wrap text)", + "Float right (wrap text)": "Float right (wrap text)" } diff --git a/apps/client/public/locales/ru-RU/translation.json b/apps/client/public/locales/ru-RU/translation.json index ca14b406..f403854e 100644 --- a/apps/client/public/locales/ru-RU/translation.json +++ b/apps/client/public/locales/ru-RU/translation.json @@ -1137,5 +1137,7 @@ "Create subpage of {{name}}": "Создать подстраницу для {{name}}", "Dictation language": "Язык диктовки", "Auto-detect": "Автоопределение", - "Spoken language hint sent to the transcription model. Auto-detect lets the model decide.": "Подсказка языка речи для модели транскрипции. «Автоопределение» оставляет выбор за моделью." + "Spoken language hint sent to the transcription model. Auto-detect lets the model decide.": "Подсказка языка речи для модели транскрипции. «Автоопределение» оставляет выбор за моделью.", + "Float left (wrap text)": "Обтекание слева", + "Float right (wrap text)": "Обтекание справа" } diff --git a/apps/client/src/features/editor/components/image/image-menu.tsx b/apps/client/src/features/editor/components/image/image-menu.tsx index 179deda1..e328090b 100644 --- a/apps/client/src/features/editor/components/image/image-menu.tsx +++ b/apps/client/src/features/editor/components/image/image-menu.tsx @@ -13,6 +13,8 @@ import { IconLayoutAlignCenter, IconLayoutAlignLeft, IconLayoutAlignRight, + IconFloatLeft, + IconFloatRight, IconDownload, IconRefresh, IconTrash, @@ -41,6 +43,8 @@ export function ImageMenu({ editor }: EditorMenuProps) { isAlignLeft: ctx.editor.isActive("image", { align: "left" }), isAlignCenter: ctx.editor.isActive("image", { align: "center" }), isAlignRight: ctx.editor.isActive("image", { align: "right" }), + isFloatLeft: ctx.editor.isActive("image", { align: "floatLeft" }), + isFloatRight: ctx.editor.isActive("image", { align: "floatRight" }), src: imageAttrs?.src || null, alt: imageAttrs?.alt || "", }; @@ -104,6 +108,22 @@ export function ImageMenu({ editor }: EditorMenuProps) { .run(); }, [editor]); + const alignImageFloatLeft = useCallback(() => { + editor + .chain() + .focus(undefined, { scrollIntoView: false }) + .setImageAlign("floatLeft") + .run(); + }, [editor]); + + const alignImageFloatRight = useCallback(() => { + editor + .chain() + .focus(undefined, { scrollIntoView: false }) + .setImageAlign("floatRight") + .run(); + }, [editor]); + const handleDownload = useCallback(() => { if (!editorState?.src) return; const url = getFileUrl(editorState.src); @@ -201,6 +221,30 @@ export function ImageMenu({ editor }: EditorMenuProps) { + + + + + + + + + + + +
{altTextButton} diff --git a/apps/client/src/features/editor/components/image/image-resize.module.css b/apps/client/src/features/editor/components/image/image-resize.module.css index 24414171..e527fae0 100644 --- a/apps/client/src/features/editor/components/image/image-resize.module.css +++ b/apps/client/src/features/editor/components/image/image-resize.module.css @@ -62,3 +62,17 @@ .resizing .handleBar { background-color: light-dark(var(--mantine-color-blue-6), var(--mantine-color-blue-4)); } + +/* Float image (#145): on narrow screens a floated image would crowd the text to + an unreadable column, so collapse it to full width and drop the float. + `!important` is required because applyAlignment sets `float`/`padding` inline, + which a normal rule cannot override. Keys off the data-image-align attribute + the node view mirrors onto the container. */ +@media (max-width: 600px) { + :global([data-image-align="floatLeft"]), + :global([data-image-align="floatRight"]) { + float: none !important; + width: 100% !important; + padding: 0 !important; + } +} diff --git a/packages/editor-ext/src/lib/image/image.ts b/packages/editor-ext/src/lib/image/image.ts index 6a921926..50e40491 100644 --- a/packages/editor-ext/src/lib/image/image.ts +++ b/packages/editor-ext/src/lib/image/image.ts @@ -51,7 +51,9 @@ declare module "@tiptap/core" { setImageAt: ( attributes: ImageAttributes & { pos: number | Range }, ) => ReturnType; - setImageAlign: (align: "left" | "center" | "right") => ReturnType; + setImageAlign: ( + align: "left" | "center" | "right" | "floatLeft" | "floatRight", + ) => ReturnType; setImageWidth: (width: number) => ReturnType; setImageSize: (width: number, height: number) => ReturnType; }; @@ -375,7 +377,26 @@ export const TiptapImage = Image.extend({ }); function applyAlignment(container: HTMLElement, align: string) { - if (align === "left") { + // Reset the float-mode styles first so toggling between any two modes is clean + // (a previous float must not leak into a later left/center/right). + container.style.float = ""; + container.style.padding = ""; + // Mirror the resolved alignment onto the CONTAINER as a data attribute so the + // responsive stylesheet can neutralize the float on small screens (an inline + // `float` can only be overridden by `!important`, which keys off this attr). + container.dataset.imageAlign = align; + + if (align === "floatLeft") { + // Real text wrap: the (shrink-to-fit) container floats left, text flows on + // its right. The inner already carries max-width:100%. + container.style.float = "left"; + container.style.padding = "0 10px 0 0"; + container.style.justifyContent = "flex-start"; + } else if (align === "floatRight") { + container.style.float = "right"; + container.style.padding = "0 0 0 10px"; + container.style.justifyContent = "flex-end"; + } else if (align === "left") { container.style.justifyContent = "flex-start"; } else if (align === "right") { container.style.justifyContent = "flex-end";