feat(editor): inline image alignment — place several images side by side

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

CHANGELOG.md

@@ -12,6 +12,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- **Place several images side by side in a row.** A new "Inline (side by
+  side)" alignment mode in the image bubble menu renders consecutive inline
+  images as a row that wraps onto the next line on narrow screens. Unlike the
+  float modes, text does not wrap around inline images. The mode round-trips
+  losslessly through markdown as `data-align`, like the other alignment
+  values.
+
 - **Editable captions for images.** Images gain an optional caption shown
   below them, edited inline from the image bubble menu and stored as a `caption` attribute. Captions round-trip
   losslessly through markdown as a `data-caption` attribute on the image, so

apps/client/public/locales/en-US/translation.json

@@ -356,7 +356,6 @@
   "Strike": "Strike",
   "Code": "Code",
   "Spoiler": "Spoiler",
-  "Stress": "Stress",
   "Comment": "Comment",
   "Text": "Text",
   "Heading 1": "Heading 1",
@@ -1323,6 +1322,7 @@
   "Move to space": "Move to space",
   "Float left (wrap text)": "Float left (wrap text)",
   "Float right (wrap text)": "Float right (wrap text)",
+  "Inline (side by side)": "Inline (side by side)",
   "Switch to tree": "Switch to tree",
   "Switch to flat list": "Switch to flat list",
   "Toggle subpages display mode": "Toggle subpages display mode",

apps/client/public/locales/ru-RU/translation.json

@@ -352,7 +352,6 @@
   "Strike": "Перечёркнутый",
   "Code": "Код",
   "Spoiler": "Спойлер",
-  "Stress": "Ударение",
   "Comment": "Комментарий",
   "Text": "Текст",
   "Heading 1": "Заголовок 1",
@@ -1176,6 +1175,7 @@
   "Spoken language hint sent to the transcription model. Auto-detect lets the model decide.": "Подсказка языка речи для модели транскрипции. «Автоопределение» оставляет выбор за моделью.",
   "Float left (wrap text)": "Обтекание слева",
   "Float right (wrap text)": "Обтекание справа",
+  "Inline (side by side)": "В ряд",
   "Switch to tree": "Переключить на дерево",
   "Switch to flat list": "Переключить на плоский список",
   "Toggle subpages display mode": "Переключить режим отображения подстраниц",

apps/client/src/features/editor/components/bubble-menu/bubble-menu.tsx

@@ -1,14 +1,7 @@
 import { BubbleMenu, BubbleMenuProps } from "@tiptap/react/menus";
 import { isNodeSelection, useEditorState } from "@tiptap/react";
 import type { Editor } from "@tiptap/react";
-import {
-  ComponentType,
-  CSSProperties,
-  FC,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import { FC, useEffect, useRef, useState } from "react";
 import {
   IconBold,
   IconCode,
@@ -36,46 +29,12 @@ import { LinkSelector } from "@/features/editor/components/bubble-menu/link-sele
 import { useTranslation } from "react-i18next";
 import { showLinkMenuAtom } from "@/features/editor/atoms/editor-atoms";
 import { userAtom } from "@/features/user/atoms/current-user-atom";
-import {
-  hasStressAfterSelection,
-  toggleStressAccent,
-} from "./stress-accent";
-
-// Tabler has no acute-accent glyph (IconGrave is a tombstone), so we ship a
-// tiny local icon that mirrors the Tabler icon API ({ style, stroke }).
-function IconStress({
-  style,
-  stroke = 2,
-}: {
-  style?: React.CSSProperties;
-  stroke?: string | number;
-}) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={stroke}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      style={style}
-    >
-      <path d="M5 19l5 -12l5 12" />
-      <path d="M7.5 14h5" />
-      <path d="M13 5l4 -3" />
-    </svg>
-  );
-}
 
 export interface BubbleMenuItem {
   name: string;
   isActive: () => boolean;
   command: () => void;
-  // Rendered as <item.icon style={...} stroke={2} />, so the real contract is
-  // just { style?, stroke? }. stroke is string|number to match Tabler's own prop
-  // type; Tabler icons and the local IconStress both satisfy it (no cast needed).
-  icon: ComponentType<{ style?: CSSProperties; stroke?: string | number }>;
+  icon: typeof IconBold;
 }
 
 type EditorBubbleMenuProps = Omit<BubbleMenuProps, "children" | "editor"> & {
@@ -118,8 +77,6 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
         isCode: ctx.editor.isActive("code"),
         isComment: ctx.editor.isActive("comment"),
         isSpoiler: ctx.editor.isActive("spoiler"),
-        // A stress accent already sits right after the selection end.
-        isStress: hasStressAfterSelection(ctx.editor.state),
       };
     },
   });
@@ -161,18 +118,6 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
       command: () => props.editor.chain().focus().toggleSpoiler().run(),
       icon: IconEyeOff,
     },
-    {
-      name: "Stress",
-      isActive: () => editorState?.isStress,
-      // Toggle the U+0301 combining accent right after the selected letter.
-      // The whole toggle is a single transaction, so one Ctrl+Z reverts it.
-      command: () => {
-        const editor = props.editor;
-        editor.view.dispatch(toggleStressAccent(editor.state));
-        editor.view.focus();
-      },
-      icon: IconStress,
-    },
     {
       name: "Clear formatting",
       // Action, not a toggle — never show an active/highlighted state.

apps/client/src/features/editor/components/bubble-menu/stress-accent.test.ts

@@ -1,94 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { Schema } from "@tiptap/pm/model";
-import { EditorState, TextSelection } from "@tiptap/pm/state";
-import {
-  STRESS_ACCENT,
-  hasStressAfterSelection,
-  toggleStressAccent,
-} from "./stress-accent";
-
-// Minimal ProseMirror schema: paragraph of text with a single `bold` mark.
-const schema = new Schema({
-  nodes: {
-    doc: { content: "block+" },
-    paragraph: {
-      group: "block",
-      content: "text*",
-      toDOM: () => ["p", 0],
-    },
-    text: { group: "inline" },
-  },
-  marks: {
-    bold: { toDOM: () => ["strong", 0] },
-  },
-});
-
-function makeState(
-  text: string,
-  from: number,
-  to: number,
-  marked = false,
-): EditorState {
-  const marks = marked ? [schema.marks.bold.create()] : [];
-  const textNode = schema.text(text, marks);
-  const doc = schema.node("doc", null, [
-    schema.node("paragraph", null, [textNode]),
-  ]);
-  const state = EditorState.create({ schema, doc });
-  return state.apply(
-    state.tr.setSelection(TextSelection.create(state.doc, from, to)),
-  );
-}
-
-describe("stress-accent", () => {
-  it("uses U+0301 as the combining accent", () => {
-    expect(STRESS_ACCENT).toHaveLength(1);
-    expect(STRESS_ACCENT.codePointAt(0)).toBe(0x0301);
-  });
-
-  it("inserts the accent right after the selected vowel", () => {
-    // "кот", select "о" (positions 2..3).
-    const state = makeState("кот", 2, 3);
-    expect(hasStressAfterSelection(state)).toBe(false);
-
-    const next = state.apply(toggleStressAccent(state));
-    expect(next.doc.textContent).toBe(`ко${STRESS_ACCENT}т`);
-    // Selection is preserved on the letter, so the button reads active.
-    expect(next.selection.from).toBe(2);
-    expect(next.selection.to).toBe(3);
-    expect(hasStressAfterSelection(next)).toBe(true);
-  });
-
-  it("removes the accent on a second toggle (round-trips to original)", () => {
-    const state = makeState("кот", 2, 3);
-    const inserted = state.apply(toggleStressAccent(state));
-    const removed = inserted.apply(toggleStressAccent(inserted));
-
-    expect(removed.doc.textContent).toBe("кот");
-    expect(hasStressAfterSelection(removed)).toBe(false);
-    expect(removed.selection.from).toBe(2);
-    expect(removed.selection.to).toBe(3);
-  });
-
-  it("inherits the letter's marks so the accent stays bold", () => {
-    // Whole word is bold; select "о".
-    const state = makeState("кот", 2, 3, true);
-    const next = state.apply(toggleStressAccent(state));
-
-    // The accent lands at positions 3..4 (right after "о")...
-    expect(next.doc.textBetween(3, 4)).toBe(STRESS_ACCENT);
-    // ...inside a bold text node, so it inherits the letter's bold mark.
-    const accentNode = next.doc.nodeAt(3);
-    expect(accentNode?.marks.some((m) => m.type.name === "bold")).toBe(true);
-  });
-
-  it("handles a selection at the end of the doc without throwing", () => {
-    // "а" is the whole paragraph; select it (1..2), end of content.
-    const state = makeState("а", 1, 2);
-    expect(hasStressAfterSelection(state)).toBe(false);
-
-    const next = state.apply(toggleStressAccent(state));
-    expect(next.doc.textContent).toBe(`а${STRESS_ACCENT}`);
-    expect(hasStressAfterSelection(next)).toBe(true);
-  });
-});

apps/client/src/features/editor/components/bubble-menu/stress-accent.ts

@@ -1,41 +0,0 @@
-import { EditorState, TextSelection, Transaction } from "@tiptap/pm/state";
-
-// U+0301 COMBINING ACUTE ACCENT — a plain Unicode combining char inserted
-// right after a vowel to render a Russian-style stress accent over it.
-// It is stored as literal text (not a TipTap mark), so it survives HTML/
-// Markdown export, full-text search and public share with zero server or
-// converter changes.
-export const STRESS_ACCENT = "́";
-
-// True when a stress accent already sits immediately after the selection end
-// (the single char following the selection). Used both for the toolbar
-// active state and to decide the toggle direction.
-export function hasStressAfterSelection(state: EditorState): boolean {
-  const { to } = state.selection;
-  const docSize = state.doc.content.size;
-  // Clamp to the doc size so a selection at the very end never reads past it.
-  const afterChar = state.doc.textBetween(to, Math.min(to + 1, docSize));
-  return afterChar === STRESS_ACCENT;
-}
-
-// Build a single transaction that toggles the stress accent after the
-// selection. One transaction => one undo step (Ctrl+Z reverts the toggle).
-export function toggleStressAccent(state: EditorState): Transaction {
-  const { from, to } = state.selection;
-  const tr = state.tr;
-
-  if (hasStressAfterSelection(state)) {
-    // Toggle off: drop the accent that immediately follows the letter.
-    tr.delete(to, to + 1);
-  } else {
-    // Toggle on: insertText inherits the marks at `to`, so the accent lands
-    // in the same text node as the letter and renders over it even when the
-    // letter is bold / italic / colored.
-    tr.insertText(STRESS_ACCENT, to);
-  }
-
-  // Restore the original selection so the accented letter stays highlighted
-  // and a re-click toggles the accent back off.
-  tr.setSelection(TextSelection.create(tr.doc, from, to));
-  return tr;
-}

apps/client/src/features/editor/components/image/image-menu.tsx

@@ -15,6 +15,7 @@ import {
   IconLayoutAlignRight,
   IconFloatLeft,
   IconFloatRight,
+  IconLayoutColumns,
   IconDownload,
   IconRefresh,
   IconTrash,
@@ -46,6 +47,7 @@ export function ImageMenu({ editor }: EditorMenuProps) {
         isAlignRight: ctx.editor.isActive("image", { align: "right" }),
         isFloatLeft: ctx.editor.isActive("image", { align: "floatLeft" }),
         isFloatRight: ctx.editor.isActive("image", { align: "floatRight" }),
+        isInline: ctx.editor.isActive("image", { align: "inline" }),
         src: imageAttrs?.src || null,
         alt: imageAttrs?.alt || "",
         caption: imageAttrs?.caption || "",
@@ -126,6 +128,14 @@ export function ImageMenu({ editor }: EditorMenuProps) {
       .run();
   }, [editor]);
 
+  const alignImageInline = useCallback(() => {
+    editor
+      .chain()
+      .focus(undefined, { scrollIntoView: false })
+      .setImageAlign("inline")
+      .run();
+  }, [editor]);
+
   const handleDownload = useCallback(() => {
     if (!editorState?.src) return;
     const url = getFileUrl(editorState.src);
@@ -259,6 +269,18 @@ export function ImageMenu({ editor }: EditorMenuProps) {
           </ActionIcon>
         </Tooltip>
 
+        <Tooltip position="top" label={t("Inline (side by side)")} withinPortal={false}>
+          <ActionIcon
+            onClick={alignImageInline}
+            size="lg"
+            aria-label={t("Inline (side by side)")}
+            variant="subtle"
+            className={clsx({ [classes.active]: editorState?.isInline })}
+          >
+            <IconLayoutColumns size={18} />
+          </ActionIcon>
+        </Tooltip>
+
         <div className={classes.divider} />
 
         {altTextButton}

packages/editor-ext/src/lib/image/image.spec.ts

@@ -63,6 +63,38 @@ describe("applyAlignment", () => {
     expect(el.dataset.imageAlign).toBe("center");
   });
 
+  it("inline -> inline-block + top alignment + gap padding, no float", () => {
+    applyAlignment(el, "inline");
+    expect(el.style.display).toBe("inline-block");
+    expect(el.style.verticalAlign).toBe("top");
+    expect(el.style.padding).toBe("0px 10px 10px 0px");
+    expect(el.dataset.imageAlign).toBe("inline");
+    expect(el.style.cssFloat).toBe("");
+  });
+
+  it("clears inline-block when switching inline -> center (reset-then-apply)", () => {
+    applyAlignment(el, "inline");
+    expect(el.style.display).toBe("inline-block");
+    // Switching back to a flex alignment must replace the inline-block
+    // override with the constructor-style flex, not just clear it.
+    applyAlignment(el, "center");
+    expect(el.style.display).toBe("flex");
+    expect(el.style.verticalAlign).toBe("");
+    expect(el.style.padding).toBe("");
+    expect(el.dataset.imageAlign).toBe("center");
+    expect(el.style.justifyContent).toBe("center");
+  });
+
+  it("clears a previous float when switching floatLeft -> inline", () => {
+    applyAlignment(el, "floatLeft");
+    expect(el.style.cssFloat).toBe("left");
+    applyAlignment(el, "inline");
+    expect(el.style.cssFloat).toBe("");
+    expect(el.style.display).toBe("inline-block");
+    expect(el.style.verticalAlign).toBe("top");
+    expect(el.dataset.imageAlign).toBe("inline");
+  });
+
   it("clears a previous float when switching floatLeft -> left (reset-then-apply)", () => {
     applyAlignment(el, "floatLeft");
     expect(el.style.cssFloat).toBe("left");

packages/editor-ext/src/lib/image/image.ts

@@ -53,7 +53,13 @@ declare module "@tiptap/core" {
         attributes: ImageAttributes & { pos: number | Range },
       ) => ReturnType;
       setImageAlign: (
-        align: "left" | "center" | "right" | "floatLeft" | "floatRight",
+        align:
+          | "left"
+          | "center"
+          | "right"
+          | "floatLeft"
+          | "floatRight"
+          | "inline",
       ) => ReturnType;
       setImageWidth: (width: number) => ReturnType;
       setImageSize: (width: number, height: number) => ReturnType;
@@ -415,6 +421,14 @@ export function applyAlignment(container: HTMLElement, align: string) {
   // (a previous float must not leak into a later left/center/right).
   container.style.cssFloat = "";
   container.style.padding = "";
+  // The ResizableNodeView constructor sets an inline `display: flex` on the
+  // container; the inline mode overrides it with `inline-block`, so the reset
+  // restores the constructor's flex here. This keeps the container's layout
+  // independent of any app-level CSS class (which also happens to set flex)
+  // and makes non-inline modes carry exactly the same inline styles as before
+  // the inline mode existed.
+  container.style.display = "flex";
+  container.style.verticalAlign = "";
   // 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).
@@ -430,6 +444,15 @@ export function applyAlignment(container: HTMLElement, align: string) {
     container.style.cssFloat = "right";
     container.style.padding = "0 0 0 10px";
     container.style.justifyContent = "flex-end";
+  } else if (align === "inline") {
+    // Consecutive inline images sit side by side on one line box and wrap to
+    // the next line when the viewport is narrow. The right/bottom padding
+    // provides the gap between images in a row and between wrapped rows;
+    // vertical-align: top keeps rows of different-height images aligned by
+    // their top edge.
+    container.style.display = "inline-block";
+    container.style.verticalAlign = "top";
+    container.style.padding = "0 10px 10px 0";
   } else if (align === "left") {
     container.style.justifyContent = "flex-start";
   } else if (align === "right") {