@agent-native/core-corpus 0.214.0 → 0.217.0

package/corpus/templates/slides-2/app/lib/slide-image-replacement.ts

@@ -0,0 +1,1919 @@
+import { SOURCE_STAMP_ATTR } from "./slide-source-map";
+
+const PLACEHOLDER_TARGET_PREFIX = "placeholder:";
+const MAX_PENDING_SLIDE_IMAGE_UPLOADS = 16;
+export const CROP_TRANSITION_ANIMATION_ID_PREFIX = "fmd-crop-transition:";
+export const CROP_CSS_ANIMATION_NAME_PREFIX = "fmd_crop_";
+export const CROP_TRANSITION_FRAME_NEUTRALS: Record<string, string> = {
+  opacity: "1",
+  filter: "none",
+  "backdrop-filter": "none",
+  "clip-path": "none",
+  "mask-image": "none",
+};
+
+type InlineStyleDeclaration = {
+  property: string;
+  value: string;
+  priority: string;
+};
+
+type CropTransitionInlineStyleOverride = {
+  property: string;
+  originalValue: string;
+  originalPriority: string;
+  temporaryValue: string;
+  temporaryPriority: string;
+  active: boolean;
+};
+
+// A replaced slide can inherit a live WAAPI copy and its temporary inline fallback.
+const cropTransitionInlineStyleOverrides = new WeakMap<
+  HTMLElement,
+  Map<string, CropTransitionInlineStyleOverride>
+>();
+
+function withCssTransitionsDisabled<T>(
+  element: HTMLElement,
+  update: () => T,
+): T {
+  const declarations: InlineStyleDeclaration[] = [];
+  for (const property of Array.from(
+    { length: element.style.length },
+    (_, index) => element.style.item(index),
+  )) {
+    if (!/^transition(?:-|$)/.test(property)) continue;
+    declarations.push({
+      property,
+      value: element.style.getPropertyValue(property),
+      priority: element.style.getPropertyPriority(property),
+    });
+    element.style.removeProperty(property);
+  }
+
+  element.style.setProperty("transition", "none", "important");
+  getComputedStyle(element).getPropertyValue("transition");
+  try {
+    return update();
+  } finally {
+    getComputedStyle(element).getPropertyValue("opacity");
+    element.style.removeProperty("transition");
+    for (const { property, value, priority } of declarations) {
+      element.style.setProperty(property, value, priority);
+    }
+  }
+}
+
+function writeInlineStyleDeclaration(
+  element: HTMLElement,
+  property: string,
+  value: string,
+  priority: string,
+): void {
+  if (value) element.style.setProperty(property, value, priority);
+  else element.style.removeProperty(property);
+}
+
+export function registerCropTransitionInlineStyleOverride(
+  element: HTMLElement,
+  property: string,
+  originalValue: string,
+  originalPriority: string,
+  temporaryValue: string,
+  temporaryPriority: string,
+): () => void {
+  let overrides = cropTransitionInlineStyleOverrides.get(element);
+  if (!overrides) {
+    overrides = new Map();
+    cropTransitionInlineStyleOverrides.set(element, overrides);
+  }
+
+  const previous = overrides.get(property);
+  if (previous?.active) {
+    const stillTemporary =
+      element.style.getPropertyValue(property) === previous.temporaryValue &&
+      element.style.getPropertyPriority(property) ===
+        previous.temporaryPriority;
+    if (stillTemporary) {
+      originalValue = previous.originalValue;
+      originalPriority = previous.originalPriority;
+    }
+    previous.active = false;
+  }
+  if (
+    !previous &&
+    originalValue === temporaryValue &&
+    originalPriority === temporaryPriority
+  ) {
+    return () => {};
+  }
+
+  const override: CropTransitionInlineStyleOverride = {
+    property,
+    originalValue,
+    originalPriority,
+    temporaryValue,
+    temporaryPriority,
+    active: true,
+  };
+  overrides.set(property, override);
+
+  return () => {
+    if (!override.active) return;
+    override.active = false;
+    if (overrides?.get(property) === override) overrides.delete(property);
+    if (
+      element.style.getPropertyValue(property) === temporaryValue &&
+      element.style.getPropertyPriority(property) === temporaryPriority
+    ) {
+      withCssTransitionsDisabled(element, () =>
+        writeInlineStyleDeclaration(
+          element,
+          property,
+          originalValue,
+          originalPriority,
+        ),
+      );
+    }
+  };
+}
+
+export function serializeWithRestoredCropTransitionInlineOverrides<T>(
+  element: HTMLElement,
+  serialize: () => T,
+): T {
+  const active = [
+    ...(cropTransitionInlineStyleOverrides.get(element)?.values() ?? []),
+  ].filter(
+    (override) =>
+      override.active &&
+      element.style.getPropertyValue(override.property) ===
+        override.temporaryValue &&
+      element.style.getPropertyPriority(override.property) ===
+        override.temporaryPriority,
+  );
+  if (active.length === 0) return serialize();
+  for (const override of active) {
+    writeInlineStyleDeclaration(
+      element,
+      override.property,
+      override.originalValue,
+      override.originalPriority,
+    );
+  }
+  try {
+    return serialize();
+  } finally {
+    for (const override of active) {
+      if (
+        override.active &&
+        element.style.getPropertyValue(override.property) ===
+          override.originalValue &&
+        element.style.getPropertyPriority(override.property) ===
+          override.originalPriority
+      ) {
+        writeInlineStyleDeclaration(
+          element,
+          override.property,
+          override.temporaryValue,
+          override.temporaryPriority,
+        );
+      }
+    }
+  }
+}
+
+type CropAnimationTransferBase = {
+  animation: Animation;
+  objectId: string;
+  targetKind: "frame" | "image";
+  currentTime: CSSNumberish | null;
+  playbackRate: number;
+  playState: AnimationPlayState;
+};
+
+type CropTransitionAnimationTransfer = CropAnimationTransferBase & {
+  kind: "transition";
+  animationId: string;
+  property: string;
+  keyframes: Keyframe[];
+  timing: EffectTiming;
+};
+
+type CropCssAnimationTransfer = CropAnimationTransferBase & {
+  kind: "css";
+  animationName: string;
+  occurrence: number;
+};
+
+type CropAnimationTransfer =
+  | CropTransitionAnimationTransfer
+  | CropCssAnimationTransfer;
+
+export function captureCropTransitionAnimations(
+  root: HTMLElement,
+): CropAnimationTransfer[] {
+  const transfers: CropAnimationTransfer[] = [];
+  const elements = [
+    root,
+    ...Array.from(root.querySelectorAll<HTMLElement>("*")),
+  ];
+  for (const element of elements) {
+    const cssAnimationOccurrences = new Map<string, number>();
+    const animations =
+      typeof element.getAnimations === "function"
+        ? element.getAnimations()
+        : [];
+    for (const animation of animations) {
+      const animationName =
+        "animationName" in animation &&
+        typeof animation.animationName === "string"
+          ? animation.animationName
+          : null;
+      if (
+        animationName?.startsWith(CROP_CSS_ANIMATION_NAME_PREFIX) &&
+        animation.playState !== "idle"
+      ) {
+        const occurrence = cssAnimationOccurrences.get(animationName) ?? 0;
+        cssAnimationOccurrences.set(animationName, occurrence + 1);
+        const frame = element.matches(".fmd-pptx-image")
+          ? element
+          : element.closest<HTMLElement>(
+              ".fmd-pptx-image[data-slide-object-id]",
+            );
+        const objectId = frame?.getAttribute("data-slide-object-id");
+        if (!frame || !objectId) continue;
+        transfers.push({
+          kind: "css",
+          animation,
+          animationName,
+          occurrence,
+          objectId,
+          targetKind: element === frame ? "frame" : "image",
+          currentTime: animation.currentTime,
+          playbackRate: animation.playbackRate,
+          playState: animation.playState,
+        });
+        continue;
+      }
+      if (
+        animationName !== null ||
+        !animation.id.startsWith(CROP_TRANSITION_ANIMATION_ID_PREFIX) ||
+        animation.playState === "finished" ||
+        animation.currentTime === null ||
+        !(animation.effect instanceof KeyframeEffect)
+      ) {
+        continue;
+      }
+      const frame = element.matches(".fmd-pptx-image")
+        ? element
+        : element.closest<HTMLElement>(".fmd-pptx-image[data-slide-object-id]");
+      const objectId = frame?.getAttribute("data-slide-object-id");
+      if (!frame || !objectId) continue;
+      const property = animation.id.slice(
+        CROP_TRANSITION_ANIMATION_ID_PREFIX.length,
+      );
+      if (!property) continue;
+      transfers.push({
+        kind: "transition",
+        animation,
+        animationId: animation.id,
+        objectId,
+        targetKind: element === frame ? "frame" : "image",
+        property,
+        keyframes: animation.effect.getKeyframes(),
+        timing: animation.effect.getTiming(),
+        currentTime: animation.currentTime,
+        playbackRate: animation.playbackRate,
+        playState: animation.playState,
+      });
+    }
+  }
+  return transfers;
+}
+
+export function restoreCropTransitionAnimations(
+  root: HTMLElement,
+  transfers: CropAnimationTransfer[],
+): boolean {
+  let restored = true;
+  for (const transfer of transfers) {
+    const frame = Array.from(
+      root.querySelectorAll<HTMLElement>(
+        ".fmd-pptx-image[data-slide-object-id]",
+      ),
+    ).find(
+      (candidate) =>
+        candidate.getAttribute("data-slide-object-id") === transfer.objectId,
+    );
+    const target =
+      transfer.targetKind === "frame"
+        ? frame
+        : frame?.querySelector<HTMLImageElement>("img");
+    const image =
+      transfer.targetKind === "frame"
+        ? frame?.querySelector<HTMLImageElement>("img")
+        : (target as HTMLImageElement | null | undefined);
+    if (!frame || !(target instanceof HTMLElement)) {
+      if (transfer.kind === "transition") transfer.animation.cancel();
+      continue;
+    }
+
+    if (transfer.kind === "css") {
+      void getComputedStyle(target).animationName;
+      const animation = target
+        .getAnimations()
+        .filter(
+          (candidate): candidate is CSSAnimation =>
+            "animationName" in candidate &&
+            candidate.animationName === transfer.animationName,
+        )[transfer.occurrence];
+      if (!animation) {
+        restored = false;
+        continue;
+      }
+      animation.playbackRate = transfer.playbackRate;
+      if (transfer.playState === "paused") animation.pause();
+      if (transfer.currentTime !== null)
+        animation.currentTime = transfer.currentTime;
+      if (transfer.playState === "running") animation.play();
+      else if (transfer.playState === "finished") animation.finish();
+      else if (transfer.playState === "idle") animation.cancel();
+      transfer.animation.cancel();
+      continue;
+    }
+
+    const frameNeutralValue =
+      transfer.targetKind === "frame" && image
+        ? CROP_TRANSITION_FRAME_NEUTRALS[transfer.property]
+        : undefined;
+    const styleTarget = frameNeutralValue !== undefined ? image! : target;
+    const originalValue = styleTarget.style.getPropertyValue(transfer.property);
+    const originalPriority = styleTarget.style.getPropertyPriority(
+      transfer.property,
+    );
+    const temporaryValue = frameNeutralValue ?? originalValue;
+    const temporaryPriority =
+      frameNeutralValue !== undefined
+        ? "important"
+        : originalPriority === "important"
+          ? ""
+          : originalPriority;
+    const restoreStyle = registerCropTransitionInlineStyleOverride(
+      styleTarget,
+      transfer.property,
+      originalValue,
+      originalPriority,
+      temporaryValue,
+      temporaryPriority,
+    );
+    if (originalValue || temporaryValue) {
+      withCssTransitionsDisabled(styleTarget, () => {
+        styleTarget.style.setProperty(
+          transfer.property,
+          temporaryValue,
+          temporaryPriority,
+        );
+      });
+    }
+
+    try {
+      const animation = target.animate(transfer.keyframes, transfer.timing);
+      animation.id = transfer.animationId;
+      animation.playbackRate = transfer.playbackRate;
+      animation.currentTime = transfer.currentTime;
+      if (transfer.playState === "paused") animation.pause();
+      void animation.finished.then(() => {
+        animation.cancel();
+        restoreStyle();
+      }, restoreStyle);
+    } catch {
+      restored = false;
+      restoreStyle();
+    } finally {
+      transfer.animation.cancel();
+    }
+  }
+  return restored;
+}
+
+interface ReplaceOptions {
+  alt?: string;
+  objectId?: string;
+  style?: string;
+}
+
+export interface SlideImageDropPosition {
+  x: number;
+  y: number;
+}
+
+export const IMAGE_OBJECT_POSITION_VALUES = [
+  "left top",
+  "center top",
+  "right top",
+  "left center",
+  "center center",
+  "right center",
+  "left bottom",
+  "center bottom",
+  "right bottom",
+] as const;
+
+export type ImageObjectPosition = (typeof IMAGE_OBJECT_POSITION_VALUES)[number];
+
+export interface OptimisticImagePreview {
+  previewSrc: string;
+  replaceSrc: string | null;
+  alt?: string;
+  style?: string;
+  position?: SlideImageDropPosition;
+  objectId?: string;
+}
+
+export interface SlideImageUploadProvenance {
+  editedSourceStamp: string;
+  editedNodeMarkup: string;
+}
+
+const pendingSlideImageUploads = new Map<
+  string,
+  Map<string, SlideImageUploadProvenance | null>
+>();
+let pendingSlideImageUploadCount = 0;
+
+function trimPendingSlideImageUploads(): void {
+  // ponytail: FIFO cap of 16 hints; use upload IDs if simultaneous uploads outgrow it.
+  while (pendingSlideImageUploadCount > MAX_PENDING_SLIDE_IMAGE_UPLOADS) {
+    const firstSlide = pendingSlideImageUploads.entries().next().value;
+    if (!firstSlide) {
+      pendingSlideImageUploadCount = 0;
+      return;
+    }
+
+    const [slideId, contentSnapshots] = firstSlide;
+    const firstContent = contentSnapshots.keys().next().value;
+    if (firstContent === undefined) {
+      pendingSlideImageUploads.delete(slideId);
+      continue;
+    }
+
+    contentSnapshots.delete(firstContent);
+    pendingSlideImageUploadCount -= 1;
+    if (contentSnapshots.size === 0) pendingSlideImageUploads.delete(slideId);
+  }
+}
+
+export function registerSlideImageUploadProvenance(
+  slideId: string,
+  content: string,
+  provenance: SlideImageUploadProvenance,
+): void {
+  let contentSnapshots = pendingSlideImageUploads.get(slideId);
+  if (!contentSnapshots) {
+    contentSnapshots = new Map();
+    pendingSlideImageUploads.set(slideId, contentSnapshots);
+  }
+  if (!contentSnapshots.has(content)) {
+    contentSnapshots.set(content, provenance);
+    pendingSlideImageUploadCount += 1;
+    trimPendingSlideImageUploads();
+    return;
+  }
+
+  const previous = contentSnapshots.get(content);
+  if (
+    !previous ||
+    previous.editedSourceStamp !== provenance.editedSourceStamp ||
+    previous.editedNodeMarkup !== provenance.editedNodeMarkup
+  ) {
+    contentSnapshots.set(content, null);
+  }
+}
+
+export function takeSlideImageUploadProvenance(
+  slideId: string,
+  content: string,
+): SlideImageUploadProvenance | null {
+  const provenance =
+    pendingSlideImageUploads.get(slideId)?.get(content) ?? null;
+  discardSlideImageUploadProvenance(slideId, content);
+  return provenance;
+}
+
+export function discardSlideImageUploadProvenance(
+  slideId: string,
+  content: string,
+): void {
+  const contentSnapshots = pendingSlideImageUploads.get(slideId);
+  if (contentSnapshots?.delete(content)) pendingSlideImageUploadCount -= 1;
+  if (contentSnapshots?.size === 0) pendingSlideImageUploads.delete(slideId);
+}
+
+export function captureSlideImageUploadProvenance(
+  root: HTMLElement,
+  sourceSnapshotHtml = root.innerHTML,
+): SlideImageUploadProvenance | null {
+  const edited = root.querySelector<HTMLElement>('[contenteditable="true"]');
+  const editedSourceStamp = edited?.getAttribute(SOURCE_STAMP_ATTR);
+  if (!edited || !editedSourceStamp) return null;
+
+  const sourceSnapshot = Array.from(
+    parseFragment(sourceSnapshotHtml).body.querySelectorAll<HTMLElement>(
+      `[${SOURCE_STAMP_ATTR}]`,
+    ),
+  ).find(
+    (element) => element.getAttribute(SOURCE_STAMP_ATTR) === editedSourceStamp,
+  );
+  if (!sourceSnapshot || sourceSnapshot.tagName !== edited.tagName) return null;
+
+  const snapshot = sourceSnapshot.cloneNode(true) as HTMLElement;
+  for (const node of [
+    snapshot,
+    ...snapshot.querySelectorAll<HTMLElement>("*"),
+  ]) {
+    for (const attribute of [
+      "contenteditable",
+      "data-builder-id",
+      "data-slide-text-block",
+      "data-editing-block",
+      "spellcheck",
+    ]) {
+      node.removeAttribute(attribute);
+    }
+  }
+
+  return {
+    editedSourceStamp,
+    editedNodeMarkup: snapshot.outerHTML,
+  };
+}
+
+const DROPPED_IMAGE_WIDTH = 320;
+const DROPPED_IMAGE_HEIGHT = 180;
+
+interface PlaceholderTarget {
+  index: number | null;
+  label: string;
+}
+
+export function imageFileLooksSupported(file: File): boolean {
+  return (
+    file.type.startsWith("image/") ||
+    /\.(?:png|jpe?g|gif|webp|avif|ico|svg)$/i.test(file.name)
+  );
+}
+
+export function createPlaceholderImageTarget(
+  index: number,
+  label: string,
+): string {
+  return `${PLACEHOLDER_TARGET_PREFIX}${index}:${encodeURIComponent(label)}`;
+}
+
+function parsePlaceholderTarget(src: string): PlaceholderTarget | null {
+  if (!src.startsWith(PLACEHOLDER_TARGET_PREFIX)) return null;
+
+  const rest = src.slice(PLACEHOLDER_TARGET_PREFIX.length);
+  const separator = rest.indexOf(":");
+  if (separator > 0) {
+    const maybeIndex = rest.slice(0, separator);
+    if (/^\d+$/.test(maybeIndex)) {
+      return {
+        index: Number(maybeIndex),
+        label: decodeURIComponent(rest.slice(separator + 1) || "image"),
+      };
+    }
+  }
+
+  return { index: null, label: rest || "image" };
+}
+
+function parseFragment(html: string): Document {
+  return new DOMParser().parseFromString(`<body>${html}`, "text/html");
+}
+
+function serializeFragment(doc: Document): string {
+  return doc.body.innerHTML;
+}
+
+function findImageWithSource(
+  doc: Document,
+  src: string,
+): HTMLImageElement | null {
+  return (
+    Array.from(doc.body.querySelectorAll<HTMLImageElement>("img")).find(
+      (image) => image.getAttribute("src") === src,
+    ) ?? null
+  );
+}
+
+function findEmptyImageCropViewport(
+  doc: Document,
+  objectId: string,
+): HTMLElement | null {
+  const frame = Array.from(
+    doc.body.querySelectorAll<HTMLElement>(
+      '.fmd-pptx-image[data-pptx-element-kind="image"][data-slide-object-id]',
+    ),
+  ).find(
+    (candidate) => candidate.getAttribute("data-slide-object-id") === objectId,
+  );
+  const viewport = frame?.querySelector<HTMLElement>(
+    ".fmd-image-crop-viewport",
+  );
+  return viewport && viewport.childElementCount === 0 ? viewport : null;
+}
+
+function imageStructure(
+  doc: Document,
+  options: {
+    ignoreImageFrameGeometry?: boolean;
+    ignoredSourceStamp?: string;
+  } = {},
+): string {
+  const body = doc.body.cloneNode(true) as HTMLElement;
+  if (options.ignoredSourceStamp) {
+    const editedNode = Array.from(
+      body.querySelectorAll<HTMLElement>(`[${SOURCE_STAMP_ATTR}]`),
+    ).find(
+      (element) =>
+        element.getAttribute(SOURCE_STAMP_ATTR) === options.ignoredSourceStamp,
+    );
+    editedNode?.remove();
+  }
+  if (options.ignoreImageFrameGeometry) {
+    body
+      .querySelectorAll<HTMLElement>(".fmd-pptx-image")
+      .forEach(removeImageGeometryStyles);
+  }
+  body.querySelectorAll("img").forEach((image, index) => {
+    image.replaceWith(`__slide-image-${index}__`);
+  });
+  return body.innerHTML;
+}
+
+const LIVE_IMAGE_GEOMETRY_STYLE_PROPERTIES = [
+  "position",
+  "inset",
+  "inset-block",
+  "inset-block-start",
+  "inset-block-end",
+  "inset-inline",
+  "inset-inline-start",
+  "inset-inline-end",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "width",
+  "min-width",
+  "max-width",
+  "height",
+  "min-height",
+  "max-height",
+  "margin",
+  "margin-top",
+  "margin-right",
+  "margin-bottom",
+  "margin-left",
+  "transform",
+  "transform-origin",
+  "translate",
+  "scale",
+  "rotate",
+  "aspect-ratio",
+] as const;
+
+function removeImageGeometryStyles(element: HTMLElement): void {
+  for (const property of LIVE_IMAGE_GEOMETRY_STYLE_PROPERTIES) {
+    element.style.removeProperty(property);
+  }
+  if (element.style.length === 0) element.removeAttribute("style");
+}
+
+function applyImageGeometryStyles(
+  liveElement: HTMLElement,
+  nextElement: HTMLElement,
+): void {
+  removeImageGeometryStyles(liveElement);
+  for (const property of LIVE_IMAGE_GEOMETRY_STYLE_PROPERTIES) {
+    const value = nextElement.style.getPropertyValue(property);
+    if (value) {
+      liveElement.style.setProperty(
+        property,
+        value,
+        nextElement.style.getPropertyPriority(property),
+      );
+    }
+  }
+}
+
+function hasSameImageGeometryStyles(
+  left: HTMLElement,
+  right: HTMLElement,
+): boolean {
+  return LIVE_IMAGE_GEOMETRY_STYLE_PROPERTIES.every(
+    (property) =>
+      left.style.getPropertyValue(property) ===
+        right.style.getPropertyValue(property) &&
+      left.style.getPropertyPriority(property) ===
+        right.style.getPropertyPriority(property),
+  );
+}
+
+function updateImageAttributesInPlace(
+  liveImage: HTMLImageElement,
+  nextImage: HTMLImageElement,
+  preserveLiveGeometry: boolean,
+): void {
+  const liveGeometry = preserveLiveGeometry
+    ? LIVE_IMAGE_GEOMETRY_STYLE_PROPERTIES.map((property) => {
+        const value = liveImage.style.getPropertyValue(property);
+        return value
+          ? {
+              priority: liveImage.style.getPropertyPriority(property),
+              property,
+              value,
+            }
+          : null;
+      }).filter(
+        (
+          declaration,
+        ): declaration is {
+          priority: string;
+          property: (typeof LIVE_IMAGE_GEOMETRY_STYLE_PROPERTIES)[number];
+          value: string;
+        } => declaration !== null,
+      )
+    : [];
+
+  for (const attribute of Array.from(liveImage.attributes)) {
+    if (
+      attribute.name !== "src" &&
+      attribute.name !== "style" &&
+      !nextImage.hasAttribute(attribute.name)
+    ) {
+      liveImage.removeAttribute(attribute.name);
+    }
+  }
+  for (const attribute of Array.from(nextImage.attributes)) {
+    if (attribute.name !== "style") {
+      liveImage.setAttribute(attribute.name, attribute.value);
+    }
+  }
+
+  const nextStyle = nextImage.getAttribute("style");
+  if (nextStyle === null && liveGeometry.length === 0) {
+    liveImage.removeAttribute("style");
+  } else {
+    liveImage.setAttribute("style", nextStyle ?? "");
+  }
+  for (const declaration of liveGeometry) {
+    liveImage.style.setProperty(
+      declaration.property,
+      declaration.value,
+      declaration.priority,
+    );
+  }
+}
+
+export function swapImageSourcesInPlace(
+  root: HTMLElement,
+  previousContent: string,
+  nextContent: string,
+): boolean {
+  const previousDoc = parseFragment(previousContent);
+  const nextDoc = parseFragment(nextContent);
+  const previousImages = Array.from(
+    previousDoc.body.querySelectorAll<HTMLImageElement>("img"),
+  );
+  const nextImages = Array.from(
+    nextDoc.body.querySelectorAll<HTMLImageElement>("img"),
+  );
+  if (
+    previousImages.length === 0 ||
+    previousImages.length !== nextImages.length
+  ) {
+    return false;
+  }
+
+  const nextSources = nextImages.map((image) => image.getAttribute("src"));
+  if (
+    imageStructure(previousDoc, { ignoreImageFrameGeometry: true }) !==
+    imageStructure(nextDoc, { ignoreImageFrameGeometry: true })
+  ) {
+    return false;
+  }
+  const liveImages = Array.from(root.querySelectorAll<HTMLImageElement>("img"));
+  if (liveImages.length !== nextSources.length) return false;
+  const previousFrames = Array.from(
+    previousDoc.body.querySelectorAll<HTMLElement>(".fmd-pptx-image"),
+  );
+  const nextFrames = Array.from(
+    nextDoc.body.querySelectorAll<HTMLElement>(".fmd-pptx-image"),
+  );
+  const liveFrames = Array.from(
+    root.querySelectorAll<HTMLElement>(".fmd-pptx-image"),
+  );
+  if (
+    previousFrames.length !== nextFrames.length ||
+    liveFrames.length !== nextFrames.length
+  ) {
+    return false;
+  }
+  for (let index = 0; index < nextFrames.length; index += 1) {
+    const objectId = nextFrames[index]!.getAttribute("data-slide-object-id");
+    if (
+      previousFrames[index]!.getAttribute("data-slide-object-id") !==
+        objectId ||
+      liveFrames[index]!.getAttribute("data-slide-object-id") !== objectId
+    ) {
+      return false;
+    }
+  }
+  liveImages.forEach((image, index) => {
+    const previousImage = previousImages[index]!;
+    const nextImage = nextImages[index]!;
+    const preserveLiveGeometry =
+      !image.closest(".fmd-pptx-image") &&
+      !hasSameImageGeometryStyles(image, previousImage);
+    updateImageAttributesInPlace(image, nextImage, preserveLiveGeometry);
+  });
+  previousFrames.forEach((frame, index) => {
+    const nextFrame = nextFrames[index]!;
+    const liveFrame = liveFrames[index]!;
+    // A source update can race with a live move. Restore the snapshot geometry
+    // only when the live frame still matches the snapshot being replaced.
+    if (hasSameImageGeometryStyles(liveFrame, frame)) {
+      applyImageGeometryStyles(liveFrame, nextFrame);
+    }
+  });
+  return true;
+}
+
+export function updateLiveImagesUnderEdit(
+  root: HTMLElement,
+  previousContent: string,
+  nextContent: string,
+  provenance: SlideImageUploadProvenance | null,
+): boolean {
+  const previousDoc = parseFragment(previousContent);
+  const nextDoc = parseFragment(nextContent);
+  const previousImages = Array.from(previousDoc.body.querySelectorAll("img"));
+  const nextImages = Array.from(nextDoc.body.querySelectorAll("img"));
+  const liveImages = Array.from(root.querySelectorAll<HTMLImageElement>("img"));
+  const edited = root.querySelector<HTMLElement>('[contenteditable="true"]');
+  const editedSourceStamp = edited?.getAttribute(SOURCE_STAMP_ATTR);
+  const nextEditedNode = editedSourceStamp
+    ? Array.from(
+        nextDoc.body.querySelectorAll<HTMLElement>(`[${SOURCE_STAMP_ATTR}]`),
+      ).find(
+        (element) =>
+          element.getAttribute(SOURCE_STAMP_ATTR) === editedSourceStamp,
+      )
+    : null;
+  if (
+    !provenance ||
+    !editedSourceStamp ||
+    editedSourceStamp !== provenance.editedSourceStamp ||
+    !nextEditedNode ||
+    nextEditedNode.outerHTML !== provenance.editedNodeMarkup ||
+    !Array.from(
+      previousDoc.body.querySelectorAll<HTMLElement>(`[${SOURCE_STAMP_ATTR}]`),
+    ).some(
+      (element) =>
+        element.getAttribute(SOURCE_STAMP_ATTR) === editedSourceStamp,
+    ) ||
+    nextImages.length === 0 ||
+    previousImages.length !== nextImages.length ||
+    liveImages.length !== nextImages.length ||
+    previousImages.every(
+      (image, index) => image.outerHTML === nextImages[index].outerHTML,
+    )
+  ) {
+    return false;
+  }
+  if (
+    imageStructure(previousDoc, { ignoredSourceStamp: editedSourceStamp }) !==
+    imageStructure(nextDoc, { ignoredSourceStamp: editedSourceStamp })
+  ) {
+    return false;
+  }
+  liveImages.forEach((image, index) => {
+    const stamp = image.getAttribute(SOURCE_STAMP_ATTR);
+    updateImageAttributesInPlace(image, nextImages[index], true);
+    if (stamp === null) image.removeAttribute(SOURCE_STAMP_ATTR);
+    else image.setAttribute(SOURCE_STAMP_ATTR, stamp);
+  });
+  return true;
+}
+
+export function prefetchImage(src: string): Promise<boolean> {
+  if (typeof Image === "undefined") return Promise.resolve(true);
+
+  return new Promise<boolean>((resolve) => {
+    const image = new Image();
+    let settled = false;
+    const settle = (ready: boolean) => {
+      if (settled) return;
+      settled = true;
+      resolve(ready);
+    };
+    image.onload = () => {
+      if (typeof image.decode !== "function") {
+        settle(true);
+        return;
+      }
+      void Promise.resolve()
+        .then(() => image.decode())
+        .then(
+          () => settle(true),
+          () => settle(false),
+        );
+    };
+    image.onerror = () => settle(false);
+    image.src = src;
+  });
+}
+
+export function normalizeImageObjectPosition(
+  value: string | null | undefined,
+): ImageObjectPosition {
+  const normalized = value?.trim().toLowerCase().replace(/\s+/g, " ");
+  const aliases: Record<string, ImageObjectPosition> = {
+    left: "left center",
+    right: "right center",
+    top: "center top",
+    bottom: "center bottom",
+    "top left": "left top",
+    "top center": "center top",
+    "top right": "right top",
+    "center left": "left center",
+    "center right": "right center",
+    "bottom left": "left bottom",
+    "bottom center": "center bottom",
+    "bottom right": "right bottom",
+    "0% 0%": "left top",
+    "50% 0%": "center top",
+    "100% 0%": "right top",
+    "0% 50%": "left center",
+    "50% 50%": "center center",
+    "100% 50%": "right center",
+    "0% 100%": "left bottom",
+    "50% 100%": "center bottom",
+    "100% 100%": "right bottom",
+  };
+  if (normalized && normalized in aliases) return aliases[normalized];
+  if (
+    normalized &&
+    IMAGE_OBJECT_POSITION_VALUES.includes(normalized as ImageObjectPosition)
+  ) {
+    return normalized as ImageObjectPosition;
+  }
+  return "center center";
+}
+
+function hasImageSource(content: string, src: string): boolean {
+  return findImageWithSource(parseFragment(content), src) !== null;
+}
+
+function cleanAlt(value: string | undefined): string {
+  return (value || "Uploaded image").replace(/\s+/g, " ").trim();
+}
+
+function createSlideObjectId(): string {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+    return crypto.randomUUID();
+  }
+  return `slide-object-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+
+function hasStyleProperty(style: string, property: string): boolean {
+  return new RegExp(`(?:^|;)\\s*${property}\\s*:`, "i").test(style);
+}
+
+function appendImageStyle(baseStyle: string): string {
+  const declarations = [baseStyle.trim().replace(/;+\s*$/, "")].filter(Boolean);
+  if (!hasStyleProperty(baseStyle, "display"))
+    declarations.push("display: block");
+  if (!hasStyleProperty(baseStyle, "object-fit")) {
+    declarations.push("object-fit: cover");
+  }
+  if (!hasStyleProperty(baseStyle, "min-width"))
+    declarations.push("min-width: 0");
+  return declarations.length > 0 ? `${declarations.join("; ")};` : "";
+}
+
+function imageElementForPlaceholder(
+  doc: Document,
+  placeholder: HTMLElement | null,
+  newSrc: string,
+  alt: string,
+  options: ReplaceOptions = {},
+): HTMLImageElement {
+  const img = doc.createElement("img");
+  img.setAttribute("src", newSrc);
+  img.setAttribute("alt", alt);
+  img.className = "fmd-img-uploaded";
+
+  const placeholderStyle = placeholder?.getAttribute("style") ?? "";
+  const style =
+    options.style ??
+    appendImageStyle(
+      placeholderStyle ||
+        "width: 100%; height: 100%; border-radius: 8px; object-fit: cover;",
+    );
+  if (style) img.setAttribute("style", style);
+  if (options.objectId) {
+    img.setAttribute("data-slide-object-id", options.objectId);
+  }
+
+  return img;
+}
+
+function replacePlaceholderTarget(
+  content: string,
+  target: PlaceholderTarget,
+  newSrc: string,
+  options: ReplaceOptions,
+): string {
+  const doc = parseFragment(content);
+  const placeholders = Array.from(
+    doc.body.querySelectorAll<HTMLElement>(".fmd-img-placeholder"),
+  );
+  const placeholder =
+    target.index === null
+      ? placeholders.find(
+          (el) => el.textContent?.trim() === target.label.trim(),
+        ) || placeholders[0]
+      : placeholders[target.index];
+
+  if (!placeholder) return content;
+
+  const img = imageElementForPlaceholder(
+    doc,
+    placeholder,
+    newSrc,
+    cleanAlt(options.alt || placeholder.textContent || target.label),
+    options,
+  );
+  placeholder.replaceWith(img);
+  return serializeFragment(doc);
+}
+
+function replaceImageSrc(
+  content: string,
+  oldSrc: string,
+  newSrc: string,
+  options: ReplaceOptions,
+): string {
+  const doc = parseFragment(content);
+  const image = findImageWithSource(doc, oldSrc);
+  if (!image) return content;
+
+  image.setAttribute("src", newSrc);
+  if (options.alt) image.setAttribute("alt", cleanAlt(options.alt));
+  return serializeFragment(doc);
+}
+
+type ImageStyleUpdates = {
+  objectFit?: "cover" | "contain";
+  objectPosition?: ImageObjectPosition;
+};
+
+function applyImageStyle(
+  image: HTMLImageElement,
+  updates: ImageStyleUpdates,
+): void {
+  if (updates.objectFit) {
+    image.style.setProperty("object-fit", updates.objectFit);
+  }
+  if (updates.objectPosition) {
+    if (!updates.objectFit) image.style.setProperty("object-fit", "cover");
+    image.style.setProperty("object-position", updates.objectPosition);
+  }
+}
+
+function imageStyleDeclarations(updates: ImageStyleUpdates): string {
+  return [
+    updates.objectFit || (updates.objectPosition ? "cover" : undefined),
+    updates.objectPosition,
+  ]
+    .map((value, index) =>
+      value
+        ? `${index === 0 ? "object-fit" : "object-position"}: ${value}`
+        : null,
+    )
+    .filter((declaration): declaration is string => declaration !== null)
+    .join("; ");
+}
+
+function escapeHtmlAttribute(value: string): string {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/"/g, "&quot;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+}
+
+interface ImageSourceToken {
+  alt?: string;
+  end: number;
+  kind: "html" | "markdown";
+  source: string;
+  start: number;
+  title?: string;
+}
+
+function decodeMarkdownImageDestination(rawSource: string): string {
+  const destination = rawSource.startsWith("<")
+    ? rawSource.slice(1, -1)
+    : rawSource;
+  const decoded = parseFragment(`<span>${destination}</span>`).body
+    .firstElementChild?.textContent;
+  return (decoded ?? destination).replace(/\\([\\()])/g, "$1");
+}
+
+function isMarkdownCharacterEscaped(content: string, index: number): boolean {
+  let backslashes = 0;
+  for (
+    let cursor = index - 1;
+    cursor >= 0 && content[cursor] === "\\";
+    cursor -= 1
+  ) {
+    backslashes += 1;
+  }
+  return backslashes % 2 === 1;
+}
+
+function findClosingMarkdownBracket(
+  content: string,
+  openIndex: number,
+): number {
+  let depth = 0;
+  for (let index = openIndex; index < content.length; index += 1) {
+    if (content[index] === "\\") {
+      index += 1;
+      continue;
+    }
+    if (content[index] === "[") {
+      depth += 1;
+    } else if (content[index] === "]") {
+      depth -= 1;
+      if (depth === 0) return index;
+    }
+  }
+  return -1;
+}
+
+function skipMarkdownWhitespace(content: string, start: number): number {
+  let index = start;
+  while (index < content.length && /\s/.test(content[index] ?? "")) {
+    index += 1;
+  }
+  return index;
+}
+
+interface MarkdownDestination {
+  end: number;
+  rawSource: string;
+}
+
+function parseMarkdownDestination(
+  content: string,
+  start: number,
+  endsAtClosingParenthesis: boolean,
+): MarkdownDestination | null {
+  if (content[start] === "<") {
+    for (let index = start + 1; index < content.length; index += 1) {
+      if (content[index] === "\\") {
+        index += 1;
+      } else if (content[index] === ">") {
+        return {
+          end: index + 1,
+          rawSource: content.slice(start, index + 1),
+        };
+      } else if (/\s/.test(content[index] ?? "")) {
+        return null;
+      }
+    }
+    return null;
+  }
+
+  let depth = 0;
+  let end = start;
+  for (; end < content.length; end += 1) {
+    const character = content[end];
+    if (character === "\\") {
+      end += 1;
+      continue;
+    }
+    if (/\s/.test(character ?? "")) break;
+    if (character === "(") {
+      depth += 1;
+    } else if (character === ")") {
+      if (depth === 0 && endsAtClosingParenthesis) break;
+      if (depth > 0) depth -= 1;
+    }
+  }
+
+  return end > start ? { end, rawSource: content.slice(start, end) } : null;
+}
+
+function parseMarkdownTitle(
+  content: string,
+  start: number,
+): { end: number; value: string } | null {
+  const opener = content[start];
+  if (opener === '"' || opener === "'") {
+    for (let index = start + 1; index < content.length; index += 1) {
+      if (content[index] === "\\") {
+        index += 1;
+      } else if (content[index] === opener) {
+        return {
+          end: index + 1,
+          value: content.slice(start + 1, index),
+        };
+      }
+    }
+    return null;
+  }
+
+  if (opener !== "(") return null;
+  let depth = 0;
+  for (let index = start; index < content.length; index += 1) {
+    if (content[index] === "\\") {
+      index += 1;
+    } else if (content[index] === "(") {
+      depth += 1;
+    } else if (content[index] === ")") {
+      depth -= 1;
+      if (depth === 0) {
+        return {
+          end: index + 1,
+          value: content.slice(start + 1, index),
+        };
+      }
+    }
+  }
+  return null;
+}
+
+function normalizeMarkdownReferenceLabel(value: string): string {
+  return value
+    .replace(/\\([\\[\]])/g, "$1")
+    .replace(/\s+/g, " ")
+    .trim()
+    .toLowerCase();
+}
+
+interface MarkdownReferenceDefinition {
+  source: string;
+  title?: string;
+}
+
+function markdownReferenceDefinitions(
+  content: string,
+): Map<string, MarkdownReferenceDefinition> {
+  const definitions = new Map<string, MarkdownReferenceDefinition>();
+  const nonRenderedRanges = nonRenderedSourceRanges(content, true);
+  let rangeIndex = 0;
+  let lineStart = 0;
+
+  while (lineStart < content.length) {
+    while (
+      rangeIndex < nonRenderedRanges.length &&
+      lineStart >= nonRenderedRanges[rangeIndex].end
+    ) {
+      rangeIndex += 1;
+    }
+    const newline = content.indexOf("\n", lineStart);
+    const lineEnd = newline === -1 ? content.length : newline;
+    const line = content.slice(lineStart, lineEnd).replace(/\r$/, "");
+    const range = nonRenderedRanges[rangeIndex];
+    if (range && lineStart >= range.start && lineStart < range.end) {
+      if (newline === -1) break;
+      lineStart = newline + 1;
+      continue;
+    }
+    let cursor = 0;
+    while (cursor < 3 && line[cursor] === " ") cursor += 1;
+
+    const labelStart = cursor;
+    if (line[cursor] === "[") {
+      const labelEnd = findClosingMarkdownBracket(line, cursor);
+      if (labelEnd !== -1 && line[labelEnd + 1] === ":") {
+        cursor = skipMarkdownWhitespace(line, labelEnd + 2);
+        const destination = parseMarkdownDestination(line, cursor, false);
+        if (destination) {
+          cursor = skipMarkdownWhitespace(line, destination.end);
+          const parsedTitle = parseMarkdownTitle(line, cursor);
+          if (parsedTitle) {
+            cursor = skipMarkdownWhitespace(line, parsedTitle.end);
+          }
+          if (cursor === line.length) {
+            const label = normalizeMarkdownReferenceLabel(
+              line.slice(labelStart + 1, labelEnd),
+            );
+            if (label && !definitions.has(label)) {
+              definitions.set(label, {
+                source: decodeMarkdownImageDestination(destination.rawSource),
+                ...(parsedTitle ? { title: parsedTitle.value } : {}),
+              });
+            }
+          }
+        }
+      }
+    }
+
+    if (newline === -1) break;
+    lineStart = newline + 1;
+  }
+
+  return definitions;
+}
+
+function markdownReferenceImageToken(
+  content: string,
+  start: number,
+  alt: string,
+  afterAlt: number,
+  definitions: Map<string, MarkdownReferenceDefinition>,
+): ImageSourceToken | null {
+  let label = alt;
+  let end = afterAlt;
+  if (content[afterAlt] === "[") {
+    const labelEnd = findClosingMarkdownBracket(content, afterAlt);
+    if (labelEnd === -1) return null;
+    label = content.slice(afterAlt + 1, labelEnd) || alt;
+    end = labelEnd + 1;
+  }
+
+  const definition = definitions.get(normalizeMarkdownReferenceLabel(label));
+  if (!definition) return null;
+  return {
+    alt,
+    end,
+    kind: "markdown",
+    source: definition.source,
+    start,
+    ...(definition.title ? { title: definition.title } : {}),
+  };
+}
+
+function markdownImageTokenAt(
+  content: string,
+  start: number,
+  definitions: Map<string, MarkdownReferenceDefinition>,
+): ImageSourceToken | null {
+  const altEnd = findClosingMarkdownBracket(content, start + 1);
+  if (altEnd === -1) return null;
+  const alt = content.slice(start + 2, altEnd);
+  const afterAlt = altEnd + 1;
+
+  if (content[afterAlt] === "(") {
+    const destination = parseMarkdownDestination(content, afterAlt + 1, true);
+    if (!destination) return null;
+    let cursor = skipMarkdownWhitespace(content, destination.end);
+    const parsedTitle = parseMarkdownTitle(content, cursor);
+    if (parsedTitle) {
+      cursor = skipMarkdownWhitespace(content, parsedTitle.end);
+    }
+    if (content[cursor] !== ")") return null;
+    return {
+      alt,
+      end: cursor + 1,
+      kind: "markdown",
+      source: decodeMarkdownImageDestination(destination.rawSource),
+      start,
+      ...(parsedTitle ? { title: parsedTitle.value } : {}),
+    };
+  }
+
+  return markdownReferenceImageToken(
+    content,
+    start,
+    alt,
+    afterAlt,
+    definitions,
+  );
+}
+
+interface SourceRange {
+  end: number;
+  start: number;
+}
+
+function markdownFenceEndAt(content: string, start: number): number | null {
+  if (start > 0 && content[start - 1] !== "\n") return null;
+
+  const openingLineEnd = content.indexOf("\n", start);
+  const openingLine = content
+    .slice(start, openingLineEnd === -1 ? content.length : openingLineEnd)
+    .replace(/\r$/, "");
+  const opener = openingLine.match(/^ {0,3}(`{3,}|~{3,})/);
+  if (!opener) return null;
+
+  const marker = opener[1][0];
+  const markerLength = opener[1].length;
+  const closingFence = new RegExp(`^ {0,3}${marker}{${markerLength},}[ \\t]*$`);
+  let lineStart = openingLineEnd === -1 ? content.length : openingLineEnd + 1;
+
+  while (lineStart < content.length) {
+    const lineEnd = content.indexOf("\n", lineStart);
+    const line = content
+      .slice(lineStart, lineEnd === -1 ? content.length : lineEnd)
+      .replace(/\r$/, "");
+    if (closingFence.test(line)) {
+      return lineEnd === -1 ? content.length : lineEnd + 1;
+    }
+    if (lineEnd === -1) break;
+    lineStart = lineEnd + 1;
+  }
+
+  return content.length;
+}
+
+function markdownInlineCodeEndAt(
+  content: string,
+  start: number,
+): number | null {
+  if (content[start] !== "`" || isMarkdownCharacterEscaped(content, start)) {
+    return null;
+  }
+
+  let delimiterLength = 1;
+  while (content[start + delimiterLength] === "`") delimiterLength += 1;
+  const delimiter = "`".repeat(delimiterLength);
+  for (let end = start + delimiterLength; end < content.length; end += 1) {
+    if (!content.startsWith(delimiter, end)) continue;
+    if (content[end - 1] === "`" || content[end + delimiterLength] === "`") {
+      continue;
+    }
+    return end + delimiterLength;
+  }
+
+  return null;
+}
+
+function findHtmlTagEnd(content: string, start: number): number | null {
+  let quote: '"' | "'" | null = null;
+  for (let end = start + 1; end < content.length; end += 1) {
+    const character = content[end];
+    if (quote) {
+      if (character === quote) quote = null;
+    } else if (character === '"' || character === "'") {
+      quote = character;
+    } else if (character === ">") {
+      return end + 1;
+    }
+  }
+  return null;
+}
+
+const NON_RENDERED_HTML_ELEMENTS = new Set([
+  "code",
+  "pre",
+  "script",
+  "style",
+  "textarea",
+]);
+
+function htmlTagEndAt(content: string, start: number): number | null {
+  if (content[start] !== "<" || isMarkdownCharacterEscaped(content, start)) {
+    return null;
+  }
+
+  const next = content[start + 1];
+  if (!next || (!/[A-Za-z]/.test(next) && !["/", "!", "?"].includes(next))) {
+    return null;
+  }
+
+  if (content.startsWith("<!--", start)) {
+    const commentEnd = content.indexOf("-->", start + 4);
+    return commentEnd === -1 ? content.length : commentEnd + 3;
+  }
+
+  return findHtmlTagEnd(content, start);
+}
+
+function htmlNonRenderedElementRangeEndAt(
+  content: string,
+  start: number,
+): number | null {
+  const tagEnd = htmlTagEndAt(content, start);
+  if (tagEnd === null) return null;
+
+  const rawTag = content.slice(start, tagEnd);
+  const element = rawTag.match(/^<([A-Za-z][\w:-]*)(?:\s|\/?>)/);
+  if (
+    !element ||
+    !NON_RENDERED_HTML_ELEMENTS.has(element[1].toLowerCase()) ||
+    /\/\s*>$/.test(rawTag)
+  ) {
+    return null;
+  }
+
+  const closingTag = new RegExp(`</${element[1]}\\s*>`, "i").exec(
+    content.slice(tagEnd),
+  );
+  return closingTag
+    ? tagEnd + closingTag.index + closingTag[0].length
+    : content.length;
+}
+
+function nonRenderedSourceRanges(
+  content: string,
+  includeHtmlTags: boolean,
+): SourceRange[] {
+  const ranges: SourceRange[] = [];
+  let start = 0;
+  while (start < content.length) {
+    const htmlTagEnd = htmlTagEndAt(content, start);
+    const end =
+      markdownFenceEndAt(content, start) ??
+      markdownInlineCodeEndAt(content, start) ??
+      htmlNonRenderedElementRangeEndAt(content, start) ??
+      (includeHtmlTags ? htmlTagEnd : null);
+    if (end === null || end <= start) {
+      if (!includeHtmlTags && htmlTagEnd !== null) {
+        start = htmlTagEnd;
+        continue;
+      }
+      start += 1;
+      continue;
+    }
+    ranges.push({ end, start });
+    start = end;
+  }
+  return ranges;
+}
+
+function markdownImageSourceTokens(content: string): ImageSourceToken[] {
+  const definitions = markdownReferenceDefinitions(content);
+  const nonRenderedRanges = nonRenderedSourceRanges(content, true);
+  const tokens: ImageSourceToken[] = [];
+  let rangeIndex = 0;
+  for (let start = 0; start < content.length - 1; start += 1) {
+    while (
+      rangeIndex < nonRenderedRanges.length &&
+      start >= nonRenderedRanges[rangeIndex].end
+    ) {
+      rangeIndex += 1;
+    }
+    const range = nonRenderedRanges[rangeIndex];
+    if (range && start >= range.start && start < range.end) {
+      start = range.end - 1;
+      continue;
+    }
+    if (
+      content[start] !== "!" ||
+      content[start + 1] !== "[" ||
+      isMarkdownCharacterEscaped(content, start)
+    ) {
+      continue;
+    }
+    const token = markdownImageTokenAt(content, start, definitions);
+    if (token) {
+      tokens.push(token);
+      start = token.end - 1;
+    }
+  }
+  return tokens;
+}
+
+function htmlImageSourceTokens(content: string): ImageSourceToken[] {
+  const tokens: ImageSourceToken[] = [];
+  const nonRenderedRanges = nonRenderedSourceRanges(content, false);
+  let rangeIndex = 0;
+  let cursor = 0;
+  while (cursor < content.length) {
+    const start = content.indexOf("<", cursor);
+    if (start === -1) break;
+    while (
+      rangeIndex < nonRenderedRanges.length &&
+      start >= nonRenderedRanges[rangeIndex].end
+    ) {
+      rangeIndex += 1;
+    }
+    const range = nonRenderedRanges[rangeIndex];
+    if (range && start >= range.start && start < range.end) {
+      cursor = range.end;
+      continue;
+    }
+    const end = htmlTagEndAt(content, start);
+    if (end === null) {
+      cursor = start + 1;
+      continue;
+    }
+
+    const rawTag = content.slice(start, end);
+    if (/^<img\b/i.test(rawTag)) {
+      const image = parseFragment(rawTag).body.querySelector("img");
+      const source = image?.getAttribute("src");
+      if (source) {
+        tokens.push({
+          end,
+          kind: "html",
+          source,
+          start,
+        });
+      }
+    }
+    cursor = end;
+  }
+  return tokens;
+}
+
+function imageSourceTokens(content: string): ImageSourceToken[] {
+  const tokens = [
+    ...htmlImageSourceTokens(content),
+    ...markdownImageSourceTokens(content),
+  ];
+  return tokens.sort((a, b) => a.start - b.start);
+}
+
+export function imageOccurrenceInRenderedSlide(
+  root: ParentNode | null,
+  image: HTMLImageElement,
+): number {
+  const src = image.getAttribute("src");
+  if (!root || !src) return 0;
+
+  return Math.max(
+    0,
+    Array.from(root.querySelectorAll<HTMLImageElement>(".slide-content img"))
+      .filter((candidate) => candidate.getAttribute("src") === src)
+      .indexOf(image),
+  );
+}
+
+function markdownImageStyleDeclarations(updates: ImageStyleUpdates): string {
+  const imageStyle = imageStyleDeclarations(updates);
+  return ["display: block", "width: 100%", "aspect-ratio: 16 / 9", imageStyle]
+    .filter(Boolean)
+    .join("; ");
+}
+
+function updateMarkdownImageAt(
+  content: string,
+  token: ImageSourceToken,
+  updates: ImageStyleUpdates,
+): string {
+  if (token.alt === undefined) return content;
+  const style = markdownImageStyleDeclarations(updates);
+  const title = token.title
+    ? ` title="${escapeHtmlAttribute(token.title)}"`
+    : "";
+  const replacement = `<img data-markdown-image="true" src="${escapeHtmlAttribute(token.source)}" alt="${escapeHtmlAttribute(token.alt)}"${title} style="${style};">`;
+  return content.slice(0, token.start) + replacement + content.slice(token.end);
+}
+
+function updateHtmlImageAt(
+  content: string,
+  token: ImageSourceToken,
+  updates: ImageStyleUpdates,
+): string {
+  const image = parseFragment(
+    content.slice(token.start, token.end),
+  ).body.querySelector<HTMLImageElement>("img");
+  if (!image || image.getAttribute("src") !== token.source) return content;
+  applyImageStyle(image, updates);
+  const replacement = image.outerHTML;
+  return content.slice(0, token.start) + replacement + content.slice(token.end);
+}
+
+export function updateImageFitInSlideHtml(
+  content: string,
+  src: string,
+  updates: ImageStyleUpdates,
+  imageOccurrence = 0,
+): string {
+  let matchingImage = 0;
+  for (const token of imageSourceTokens(content)) {
+    if (token.source !== src) continue;
+    if (matchingImage++ !== Math.max(0, imageOccurrence)) continue;
+    return token.kind === "html"
+      ? updateHtmlImageAt(content, token, updates)
+      : updateMarkdownImageAt(content, token, updates);
+  }
+  return content;
+}
+
+export function replaceOptimisticImagePreview(
+  content: string,
+  previewSrc: string,
+  finalSrc: string | null,
+): string {
+  const doc = parseFragment(content);
+  const image = findImageWithSource(doc, previewSrc);
+  if (!image) return content;
+
+  if (!finalSrc) {
+    image.remove();
+  } else {
+    const placeholderTarget = parsePlaceholderTarget(finalSrc);
+    if (placeholderTarget) {
+      const placeholder = doc.createElement("div");
+      placeholder.className = "fmd-img-placeholder";
+      placeholder.textContent = placeholderTarget.label;
+      const style = image.getAttribute("style");
+      if (style) placeholder.setAttribute("style", style);
+      image.replaceWith(placeholder);
+    } else {
+      image.setAttribute("src", finalSrc);
+    }
+  }
+  return serializeFragment(doc);
+}
+
+export function captureOptimisticImagePreview(
+  content: string,
+  preview: OptimisticImagePreview,
+): OptimisticImagePreview {
+  const image = findImageWithSource(parseFragment(content), preview.previewSrc);
+  if (!image) return preview;
+
+  return {
+    ...preview,
+    alt: image.getAttribute("alt") ?? preview.alt,
+    objectId: image.getAttribute("data-slide-object-id") ?? preview.objectId,
+    style: image.getAttribute("style") ?? undefined,
+  };
+}
+
+export function applyOptimisticImagePreview(
+  content: string,
+  preview: OptimisticImagePreview,
+): string {
+  if (hasImageSource(content, preview.previewSrc)) return content;
+  if (!preview.replaceSrc && preview.objectId) {
+    const doc = parseFragment(content);
+    const viewport = findEmptyImageCropViewport(doc, preview.objectId);
+    if (viewport) {
+      const image = doc.createElement("img");
+      image.setAttribute("src", preview.previewSrc);
+      image.setAttribute("alt", cleanAlt(preview.alt));
+      image.className = "fmd-img-uploaded";
+      if (preview.style) image.setAttribute("style", preview.style);
+      viewport.appendChild(image);
+      return serializeFragment(doc);
+    }
+  }
+  return preview.replaceSrc
+    ? replaceImageTargetInSlideHtml(
+        content,
+        preview.replaceSrc,
+        preview.previewSrc,
+        {
+          alt: preview.alt,
+          objectId: preview.objectId,
+          style: preview.style,
+        },
+      )
+    : insertDroppedImageIntoSlideHtml(content, preview.previewSrc, {
+        alt: preview.alt,
+        position: preview.position,
+        objectId: preview.objectId,
+        style: preview.style,
+      });
+}
+
+export function hasOptimisticImagePreview(
+  content: string,
+  previewSrc: string,
+): boolean {
+  return hasImageSource(content, previewSrc);
+}
+
+export function stripOptimisticImagePreviews(
+  content: string,
+  previews: readonly OptimisticImagePreview[],
+): string {
+  return previews.reduce(
+    (current, preview) =>
+      replaceOptimisticImagePreview(
+        current,
+        preview.previewSrc,
+        preview.replaceSrc,
+      ),
+    content,
+  );
+}
+
+export function insertImageIntoSlideHtml(
+  content: string,
+  newSrc: string,
+  options: ReplaceOptions = {},
+): string {
+  const doc = parseFragment(content);
+  const firstPlaceholder = doc.body.querySelector<HTMLElement>(
+    ".fmd-img-placeholder",
+  );
+  if (firstPlaceholder) {
+    const img = imageElementForPlaceholder(
+      doc,
+      firstPlaceholder,
+      newSrc,
+      cleanAlt(options.alt || firstPlaceholder.textContent || "Uploaded image"),
+      options,
+    );
+    firstPlaceholder.replaceWith(img);
+    return serializeFragment(doc);
+  }
+
+  const img = doc.createElement("img");
+  img.setAttribute("src", newSrc);
+  img.setAttribute("alt", cleanAlt(options.alt));
+  img.className = "fmd-img-uploaded";
+  img.setAttribute(
+    "style",
+    "position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;",
+  );
+  const slideRoot = doc.body.querySelector<HTMLElement>(".fmd-slide");
+  const root = slideRoot || doc.body;
+  if (
+    slideRoot &&
+    !/(?:^|;)\s*position\s*:/i.test(slideRoot.getAttribute("style") ?? "")
+  ) {
+    slideRoot.setAttribute(
+      "style",
+      `${(slideRoot.getAttribute("style") ?? "").trim().replace(/;+\s*$/, "")}; position: relative;`.replace(
+        /^;\s*/,
+        "",
+      ),
+    );
+  }
+  root.insertBefore(img, root.firstChild);
+  return serializeFragment(doc);
+}
+
+export function insertDroppedImageIntoSlideHtml(
+  content: string,
+  newSrc: string,
+  options: ReplaceOptions & {
+    position?: SlideImageDropPosition;
+    objectId?: string;
+    style?: string;
+  } = {},
+): string {
+  const doc = parseFragment(content);
+  const img = doc.createElement("img");
+  const position = options.position ?? {
+    x: 640,
+    y: 360,
+  };
+  const left = Math.max(0, Math.round(position.x - DROPPED_IMAGE_WIDTH / 2));
+  const top = Math.max(0, Math.round(position.y - DROPPED_IMAGE_HEIGHT / 2));
+
+  img.setAttribute("src", newSrc);
+  img.setAttribute("alt", cleanAlt(options.alt));
+  img.setAttribute(
+    "data-slide-object-id",
+    options.objectId ?? createSlideObjectId(),
+  );
+  img.className = "fmd-img-uploaded";
+  img.setAttribute(
+    "style",
+    options.style ??
+      `position: absolute; left: ${left}px; top: ${top}px; width: ${DROPPED_IMAGE_WIDTH}px; height: ${DROPPED_IMAGE_HEIGHT}px; max-width: none; max-height: none; margin: 0; border-radius: 8px; object-fit: contain; box-sizing: border-box; z-index: 1;`,
+  );
+
+  const slideRoot = doc.body.querySelector<HTMLElement>(".fmd-slide");
+  if (slideRoot) {
+    if (!hasStyleProperty(slideRoot.getAttribute("style") ?? "", "position")) {
+      slideRoot.setAttribute(
+        "style",
+        `${(slideRoot.getAttribute("style") ?? "").trim().replace(/;+\s*$/, "")}; position: relative;`.replace(
+          /^;\s*/,
+          "",
+        ),
+      );
+    }
+    slideRoot.appendChild(img);
+  } else {
+    doc.body.append(doc.createTextNode("\n\n"), img);
+  }
+
+  return serializeFragment(doc);
+}
+
+export function replaceImageTargetInSlideHtml(
+  content: string,
+  oldSrc: string,
+  newSrc: string,
+  options: ReplaceOptions = {},
+): string {
+  const placeholderTarget = parsePlaceholderTarget(oldSrc);
+  if (placeholderTarget) {
+    return replacePlaceholderTarget(
+      content,
+      placeholderTarget,
+      newSrc,
+      options,
+    );
+  }
+
+  return replaceImageSrc(content, oldSrc, newSrc, options);
+}