${fileNames
.map(
(name) =>
- `
`,
+ ``,
)
.join("")}
`;
return Array.from(document.querySelectorAll("img")) as HTMLImageElement[];
};
+const containers = () =>
+ Array.from(
+ document.querySelectorAll(".bloom-imageContainer"),
+ ) as HTMLElement[];
+
// A current-page commit result for slot `ordinal`, replacing `oldSrc` with `newSrc`.
const currentPageResult = (
ordinal: number,
@@ -77,26 +92,105 @@ describe("aiImageEditorPageCommands: the menu command", () => {
expect(postJson).toHaveBeenCalledTimes(1);
expect(postJson).toHaveBeenCalledWith("aiImageEditor/saveThenLaunch", {
- // Only the file name travels: the save reloads this frame, so a live element
+ // Only plain data travels: the save reloads this frame, so a live element
// reference could not survive the round trip. C# adds the page id.
- imageFileName: "old.png",
+ slotIndex: 0,
+ });
+ });
+
+ test("numbers the slot that was clicked, not the picture it shows (BL-16744)", () => {
+ // Every empty slot shows placeHolder.png, so nothing about the picture could say
+ // which slot the user clicked. The index can, and it says so whatever the pictures
+ // are: here the same file twice.
+ const [first, second] = makePageWithImages(
+ "placeHolder.png",
+ "placeHolder.png",
+ );
+
+ launchAiImageEditor(second, undefined);
+ expect(postJson).toHaveBeenCalledWith("aiImageEditor/saveThenLaunch", {
+ slotIndex: 1,
+ });
+
+ // Sanity: the other slot of the same pair is a different index.
+ postJson.mockClear();
+ launchAiImageEditor(first, undefined);
+ expect(postJson).toHaveBeenCalledWith("aiImageEditor/saveThenLaunch", {
+ slotIndex: 0,
+ });
+ });
+
+ test("the clicked container may be given instead of the img", () => {
+ // canvasControlRegistry passes both when it has both. Either must number the same
+ // slot, because they are the same slot.
+ makePageWithImages("a.png", "b.png");
+ const [, secondContainer] = containers();
+
+ launchAiImageEditor(
+ secondContainer.querySelector("img") as HTMLImageElement,
+ secondContainer,
+ );
+
+ expect(postJson).toHaveBeenCalledWith("aiImageEditor/saveThenLaunch", {
+ slotIndex: 1,
+ });
+ });
+
+ test("a branding image does not shift the index", () => {
+ // Branding, license and QR-code images are not in image containers, so they are not
+ // slots at all — which is why neither side needs a list of them. C# will not offer
+ // one and cannot overwrite one.
+ document.body.innerHTML = `
+
+ 
+
+
+
`;
+ const images = Array.from(
+ document.querySelectorAll("img"),
+ ) as HTMLImageElement[];
+
+ launchAiImageEditor(images[2], undefined);
+
+ expect(postJson).toHaveBeenCalledWith("aiImageEditor/saveThenLaunch", {
+ slotIndex: 1,
+ });
+ });
+
+ test("a control Bloom injects into the live page does not shift the index", () => {
+ // Injected controls live in the live page only — the save strips them — so the
+ // saved page C# numbers has none of them.
+ document.body.innerHTML = `
+
+
+ 
+
+
+
`;
+ const images = Array.from(
+ document.querySelectorAll("img"),
+ ) as HTMLImageElement[];
+
+ launchAiImageEditor(images[2], undefined);
+
+ expect(postJson).toHaveBeenCalledWith("aiImageEditor/saveThenLaunch", {
+ slotIndex: 1,
});
});
- test("prefers the image container's url over the img src", () => {
- // An image container's url is the authoritative one (it may be a background-image
- // rather than an
+
+
`;
+ const [container] = containers();
+
+ const outcome = applyAiImageEditorReplacements([
+ currentPageResult(0, "old.png", "ai-image1.png"),
+ ]);
+
+ expect(outcome).toEqual({ applied: 1, expected: 1 });
+ expect(changeImageByElement.mock.calls[0][0]).toBe(container);
+ });
+
+ test("a retry re-targets the same slot, though it no longer shows what C# read", () => {
+ // After a partial failure the overlay stays up and nothing was saved, so a retry's
+ // oldSrc (read from the saved page) still names the pre-swap file. The index does
+ // not care, which is the point: nothing here compares pictures.
+ const images = makePageWithImages(
+ "placeHolder.png",
+ "placeHolder.png",
+ "placeHolder.png",
+ );
+ applyAiImageEditorReplacements([
+ currentPageResult(2, "placeHolder.png", "ai-image1.png"),
+ ]);
+ images[2].setAttribute("src", "ai-image1.png");
+ changeImageByElement.mockClear();
+
+ const outcome = applyAiImageEditorReplacements([
+ currentPageResult(2, "placeHolder.png", "ai-image2.png"),
+ ]);
+
+ expect(outcome).toEqual({ applied: 1, expected: 1 });
+ expect(changeImageByElement.mock.calls[0][0]).toBe(images[2]);
+ });
+
+ test("a lone swap lands on the slot its ordinal names (BL-16744)", () => {
+ // Every empty slot shows placeHolder.png. A commit for the third of them must not
+ // land on the first, which is where a filename-only match always put it.
+ const images = makePageWithImages(
+ "placeHolder.png",
+ "placeHolder.png",
+ "placeHolder.png",
+ );
+
+ const outcome = applyAiImageEditorReplacements([
+ currentPageResult(2, "placeHolder.png", "ai-image1.png"),
+ ]);
+
+ expect(outcome).toEqual({ applied: 1, expected: 1 });
+ expect(changeImageByElement).toHaveBeenCalledTimes(1);
+ expect(changeImageByElement.mock.calls[0][0]).toBe(images[2]);
+ });
+
+ test("a control Bloom injects into the live page does not shift the ordinal", () => {
+ // Injected controls are in the live page only; the ordinal counts the saved page's
+ // slots, which have none of them.
+ document.body.innerHTML = `
+
+
+
+
+
`;
+ const images = Array.from(
+ document.querySelectorAll("img"),
+ ) as HTMLImageElement[];
+
+ const outcome = applyAiImageEditorReplacements([
+ currentPageResult(1, "placeHolder.png", "ai-image1.png"),
+ ]);
+
+ expect(outcome).toEqual({ applied: 1, expected: 1 });
+ expect(changeImageByElement.mock.calls[0][0]).toBe(images[2]);
});
test("ignores results for other pages and results that failed", () => {
@@ -138,7 +318,7 @@ describe("aiImageEditorPageCommands: applying current-page replacements", () =>
expect(changeImageByElement).not.toHaveBeenCalled();
});
- test("reports a shortfall when a slot cannot be matched", () => {
+ test("reports a shortfall when the page has no such slot", () => {
// The caller turns applied < expected into "Only N of M ... could be updated", so
// this has to be counted honestly rather than reported as success.
makePageWithImages("old.png");
diff --git a/src/BloomBrowserUI/bookEdit/aiImageEditor/aiImageEditorPageCommands.ts b/src/BloomBrowserUI/bookEdit/aiImageEditor/aiImageEditorPageCommands.ts
index e80e57599907..05a91128f072 100644
--- a/src/BloomBrowserUI/bookEdit/aiImageEditor/aiImageEditorPageCommands.ts
+++ b/src/BloomBrowserUI/bookEdit/aiImageEditor/aiImageEditorPageCommands.ts
@@ -12,14 +12,10 @@
// getEditablePageBundleExports().applyAiImageEditorReplacements().
import { postJson } from "../../utils/bloomApi";
-import {
- getImageUrlFromImageContainer,
- GetRawImageUrl,
-} from "../js/bloomImages";
+import { kImageContainerClass } from "../js/bloomImages";
import { changeImageByElement } from "../js/bloomEditing";
-import { matchReplacementsToElements } from "./aiImageEditorSlotMatching";
+import { theOneCanvasElementManager } from "../js/canvasElementManager/CanvasElementManager";
import {
- fileNameOf,
IAiImageEditorApplyOutcome,
IAiImageEditorCommitResult,
isCurrentPageSwap,
@@ -34,20 +30,48 @@ import {
// changeImage/changeImageByElement deliberately do not save (BL-16330). Launching against
// that stale DOM opened the editor with an empty "Image to Edit" slot (BL-16682). So we
// hand the clicked image to C#, which saves the page and then opens the overlay itself
-// (AiImageEditorApi.HandleSaveThenLaunch). Only the file name travels: saving reloads this
+// (AiImageEditorApi.HandleSaveThenLaunch). Only the slot index travels: saving reloads this
// frame, so a live element reference would not survive.
export function launchAiImageEditor(
img: HTMLImageElement,
imgContainer: HTMLElement | undefined,
): void {
- const clickedUrl = imgContainer
- ? getImageUrlFromImageContainer(imgContainer)
- : img?.getAttribute("src");
postJson("aiImageEditor/saveThenLaunch", {
- imageFileName: fileNameOf(clickedUrl),
+ slotIndex: slotIndexOnPage(imgContainer ?? img),
});
}
+// Numbers this page's image slots the way C# does (SelectImageSlotsOnPage in
+// AiImageEditorApi.cs): its image containers, in document order. An image container is
+// exactly what a user may replace, so the branding, license and QR-code images, which live
+// outside any container, are not slots at all.
+//
+// The index IS the slot's identity — it is the "{pageId}:{ordinal}" ordinal C# builds — so the
+// two lists have to hold the same containers. Bloom injects controls into the live page that
+// no saved book has, and the save strips them (Cleanup in bloomEditing.ts), so those are the
+// one thing to leave out here.
+function slotIndexOnPage(clicked: HTMLElement | undefined): number {
+ if (!clicked) return 0;
+ const pageRoot = clicked.closest(".bloom-page") ?? document;
+ const slots = Array.from(
+ pageRoot.querySelectorAll("." + kImageContainerClass),
+ ).filter((el) => !el.closest(".bloom-ui"));
+ const index = slots.findIndex(
+ (el) => el === clicked || el.contains(clicked) || clicked.contains(el),
+ );
+ return index < 0 ? 0 : index;
+}
+
+// The element of a slot that carries the picture: the container's own img, or the container
+// itself when it wears the picture as a background image. Mirrors GetImageElementOfSlot in
+// AiImageEditorApi.cs. It matters here because changeImageInfo sets a background image on
+// anything that is not an