@@ -0,0 +1,81 @@
+import type { Locator, Page } from '@playwright/test';
+import { expect, test } from '../fixtures/muya';
+import { editor, floats } from '../helpers/selectors';
+
+const DATA_URI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkAAIAAAoAAv/lxKUAAAAASUVORK5CYII=';
+
+async function loadImage(page: Page, markdown: string, autoFocus: boolean): Promise<Locator> {
+    await page.evaluate(
+        ([md, focus]) => window.muya!.setContent(md as string, focus as boolean),
+        [markdown.replace('SRC', DATA_URI), autoFocus] as const,
+    );
+    const image = page.locator(editor.image).first();
+    await expect.poll(() => image.evaluate(el => el.classList.contains('mu-image-success'))).toBe(true);
+    const innerImg = image.locator('img').first();
+    await expect(innerImg).toBeVisible();
+    return innerImg;
+}
+
+async function expectHandlesOnImage(page: Page, innerImg: Locator) {
+    const handles = page.locator(floats.imageTransformerHandle);
+    await expect(handles).toHaveCount(2);
+
+    const imageBox = await innerImg.boundingBox();
+    const leftBox = await page.locator(`${floats.imageTransformer} .bar.left`).boundingBox();
+    const rightBox = await page.locator(`${floats.imageTransformer} .bar.right`).boundingBox();
+    if (!imageBox || !leftBox || !rightBox)
+        throw new Error('image or handles have no bounding box');
+
+    // Each handle straddles its edge of the image, vertically centred on it.
+    expect(Math.abs(leftBox.x + leftBox.width / 2 - imageBox.x)).toBeLessThanOrEqual(6);
+    expect(Math.abs(rightBox.x + rightBox.width / 2 - (imageBox.x + imageBox.width))).toBeLessThanOrEqual(6);
+    const imageCy = imageBox.y + imageBox.height / 2;
+    expect(Math.abs(leftBox.y + leftBox.height / 2 - imageCy)).toBeLessThanOrEqual(6);
+}
+
+test.describe('ImageResizeBar with the caret on the image\'s line (#5391)', () => {
+    test('the first click places the handles on the image, not at the window corner', async ({ page }) => {
+        // `autoFocus` puts the caret at offset 0 of the first block — the state
+        // the editor is in right after a document that starts with an image is
+        // opened. That caret makes the image token's markers "revealed", so
+        // clearing it on click re-renders the paragraph.
+        const innerImg = await loadImage(page, '![alt](SRC)\n\nafter\n', true);
+
+        await innerImg.click();
+
+        await expectHandlesOnImage(page, innerImg);
+    });
+
+    test('the handles and the toolbar follow the image when blurring shifts it', async ({ page }) => {
+        // Blurring the paragraph hides the `**` markers the caret had revealed,
+        // which reflows the line and moves the image sideways.
+        const innerImg = await loadImage(page, '**bold** ![alt](SRC) tail\n', false);
+        await page.evaluate(() =>
+            window.muya!.editor.scrollPage!.firstContentInDescendant()!.setCursor(3, 3, true));
+
+        await innerImg.click();
+
+        await expectHandlesOnImage(page, innerImg);
+
+        const imageBox = (await innerImg.boundingBox())!;
+        const toolbarBox = (await page.locator(floats.imageToolbar).boundingBox())!;
+        expect(Math.abs(
+            toolbarBox.x + toolbarBox.width / 2 - (imageBox.x + imageBox.width / 2),
+        )).toBeLessThanOrEqual(6);
+    });
+
+    test('the handles survive a click that first parked the caret on the image line', async ({ page }) => {
+        const innerImg = await loadImage(page, '# Title\n\nbefore\n\n![alt](SRC)\n\nafter\n', false);
+
+        // Park the caret on the image's own line by clicking the empty space to
+        // the right of the image, as a user would.
+        const imageBox = await innerImg.boundingBox();
+        if (!imageBox)
+            throw new Error('image has no bounding box');
+        await page.mouse.click(imageBox.x + imageBox.width + 150, imageBox.y + imageBox.height / 2);
+
+        await innerImg.click();
+
+        await expectHandlesOnImage(page, innerImg);
+    });
+});
@@ -83,6 +83,12 @@ class ImageSelection {
         }
     }
 
+    private _imageWrappers(contentDom: HTMLElement): HTMLElement[] {
+        return Array.from(
+            contentDom.querySelectorAll<HTMLElement>(`.${CLASS_NAMES.MU_INLINE_IMAGE}`),
+        );
+    }
+
     private _handleClickInlineImage(event: Event, imageWrapper: HTMLElement) {
         event.preventDefault();
         event.stopPropagation();
@@ -130,38 +136,44 @@ class ImageSelection {
                 }
             }
 
-            const rect = imageWrapper
-                .querySelector(`.${CLASS_NAMES.MU_IMAGE_CONTAINER}`)
-                ?.getBoundingClientRect();
-            const reference = {
-                getBoundingClientRect: () => rect,
-                width: imageWrapper.offsetWidth,
-                height: imageWrapper.offsetHeight,
-            };
+            // Identify the clicked image by its position among the paragraph's
+            // images, which survives the re-render below — the node does not,
+            // and ids are not unique (images sharing a src and paragraph offset
+            // render with the same id, so a `#id` lookup finds the first one).
+            const imageIndex = this._imageWrappers(contentDom).indexOf(imageWrapper);
+
+            // Selecting the image blurs the paragraph, and `Format.blurHandler`
+            // re-renders it whenever the caret sat on a token's markers — which
+            // a caret on the image's own line always does. The re-render
+            // reassigns the paragraph's `innerHTML`, detaching `imageWrapper`,
+            // and the markers it hides can shift the image sideways. So select
+            // first and take both references off the live DOM afterwards: from
+            // the detached node the resize bar reads a zero rect and draws its
+            // handles in the window's corner, and the toolbar a stale one (#5391).
+            this._selection.selectImage(Object.assign({}, imageInfo, { block: contentBlock }));
+
+            const liveWrapper = this._imageWrappers(contentDom)[imageIndex] ?? imageWrapper;
+            const imageContainer = liveWrapper.querySelector(
+                `.${CLASS_NAMES.MU_IMAGE_CONTAINER}`,
+            );
+            const rect = imageContainer?.getBoundingClientRect();
 
             eventCenter.emit('muya-image-toolbar', {
                 block: contentBlock,
-                reference,
+                reference: {
+                    getBoundingClientRect: () => rect,
+                    width: liveWrapper.offsetWidth,
+                    height: liveWrapper.offsetHeight,
+                },
                 imageInfo,
             });
 
-            // Resolve the image container from the clicked wrapper directly.
-            // Images that share the same src (and paragraph offset) render with
-            // duplicate DOM ids, so a `document.querySelector('#id ...')` lookup
-            // would resolve to the first occurrence and place the resize bar on
-            // the wrong image.
-            const imageContainer = imageWrapper.querySelector(
-                `.${CLASS_NAMES.MU_IMAGE_CONTAINER}`,
-            );
-
             eventCenter.emit('muya-transformer', {
                 block: contentBlock,
                 reference: imageContainer,
                 imageInfo,
             });
 
-            this._selection.selectImage(Object.assign({}, imageInfo, { block: contentBlock }));
-
             return;
         }
 
 
@@ -0,0 +1,105 @@
+// @vitest-environment happy-dom
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { CLASS_NAMES } from '../../config';
+import { Muya } from '../../muya';
+
+// Regression (#5391): with the caret on the image's own line, clicking the
+// image blurs the paragraph, and `Format.blurHandler` re-renders it — which
+// reassigns the paragraph's `innerHTML` and so replaces the image's DOM nodes.
+// The click handler used to emit `muya-transformer` (and the toolbar's rect)
+// from the pre-render nodes, leaving the resize bar anchored to a detached
+// container whose rect is all zeros, drawing its handles in the window's
+// corner instead of on the image.
+
+const bootedMuyas: Muya[] = [];
+
+beforeEach(() => {
+    window.MUYA_VERSION = 'test';
+});
+
+afterEach(() => {
+    while (bootedMuyas.length)
+        bootedMuyas.pop()!.destroy();
+    delete (window as Partial<Window>).MUYA_VERSION;
+});
+
+function boot(markdown: string): Muya {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const muya = new Muya(host, { markdown } as ConstructorParameters<typeof Muya>[1]);
+    muya.init();
+    bootedMuyas.push(muya);
+    return muya;
+}
+
+// Inject the loaded <img> the async path would produce (it never resolves under
+// happy-dom), so the click takes the handler's `target.tagName === 'IMG'` branch.
+function injectImage(muya: Muya, src: string): HTMLElement {
+    const container = muya.domNode.querySelector<HTMLElement>(
+        `.${CLASS_NAMES.MU_IMAGE_CONTAINER}`,
+    )!;
+    const img = document.createElement('img');
+    img.setAttribute('src', src);
+    container.appendChild(img);
+    return container;
+}
+
+describe('image click with the caret on the image\'s line (#5391)', () => {
+    it('references the image container that is in the document after the click', () => {
+        const src = 'https://example.com/pic.png';
+        const muya = boot(`![alt](${src})\n\nafter`);
+
+        // `muya.init()` focuses the first block, so the caret sits at offset 0
+        // of the image's paragraph — the state a freshly opened document is in.
+        const container = injectImage(muya, src);
+
+        const references: unknown[] = [];
+        muya.eventCenter.on('muya-transformer', (payload: { reference?: unknown }) => {
+            if (payload && payload.reference)
+                references.push(payload.reference);
+        });
+
+        container
+            .querySelector('img')!
+            .dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+
+        expect(references).toHaveLength(1);
+        const reference = references[0] as HTMLElement;
+        expect(reference.classList.contains(CLASS_NAMES.MU_IMAGE_CONTAINER)).toBe(true);
+        expect(muya.domNode.contains(reference)).toBe(true);
+    });
+
+    it('still references the clicked image when the paragraph holds several', () => {
+        const src = 'https://example.com/pic.png';
+        const muya = boot(`![a](${src}) and ![b](${src}) and ![c](${src})`);
+
+        const containers = Array.from(
+            muya.domNode.querySelectorAll<HTMLElement>(`.${CLASS_NAMES.MU_IMAGE_CONTAINER}`),
+        );
+        containers.forEach((container) => {
+            const img = document.createElement('img');
+            img.setAttribute('src', src);
+            container.appendChild(img);
+        });
+
+        const handler = vi.fn();
+        muya.eventCenter.on('muya-transformer', (payload: { reference?: unknown }) => {
+            if (payload && payload.reference)
+                handler(payload.reference);
+        });
+
+        containers[1]!
+            .querySelector('img')!
+            .dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+
+        expect(handler).toHaveBeenCalledTimes(1);
+        const reference = handler.mock.calls[0]![0] as HTMLElement;
+        expect(muya.domNode.contains(reference)).toBe(true);
+        // Second of the three, whether or not the re-render replaced the nodes.
+        const live = Array.from(
+            muya.domNode.querySelectorAll<HTMLElement>(`.${CLASS_NAMES.MU_IMAGE_CONTAINER}`),
+        );
+        expect(live.indexOf(reference)).toBe(1);
+    });
+});