diff --git a/src/BloomBrowserUI/bookEdit/js/canvasElementManager/CanvasElementContextControls.tsx b/src/BloomBrowserUI/bookEdit/js/canvasElementManager/CanvasElementContextControls.tsx
index 0ff4d839fb98..8ddc7d813f2d 100644
--- a/src/BloomBrowserUI/bookEdit/js/canvasElementManager/CanvasElementContextControls.tsx
+++ b/src/BloomBrowserUI/bookEdit/js/canvasElementManager/CanvasElementContextControls.tsx
@@ -7,14 +7,7 @@ import { kBloomBlue, lightTheme } from "../../../bloomMaterialUITheme";
 import { SvgIconProps } from "@mui/material";
 import { default as MenuIcon } from "@mui/icons-material/MoreHorizSharp";
 import { ThemeProvider } from "@mui/material/styles";
-import {
-    divider,
-    ILocalizableMenuItemProps,
-    LocalizableMenuItem,
-    LocalizableNestedMenuItem,
-} from "../../../react_components/localizableMenuItem";
 import Menu from "@mui/material/Menu";
-import { Divider } from "@mui/material";
 import { getCanvasElementManager } from "../../toolbox/canvas/canvasElementPageBridge";
 import { kBackgroundImageClass } from "../../toolbox/canvas/canvasElementConstants";
 import { BloomTooltip } from "../../../react_components/BloomToolTip";
@@ -27,6 +20,7 @@ import { getAudioSentencesOfVisibleEditables } from "bloom-player";
 import { canvasElementControlRegistry } from "../../toolbox/canvas/canvasElementControlRegistry";
 import { buildCanvasElementControlRegistryContext } from "../../toolbox/canvas/buildCanvasElementControlRegistryContext";
 import {
+    ICanvasElementControlConfiguration,
     IControlContext,
     ILanguageNameValues,
     IControlMenuRow,
@@ -36,17 +30,46 @@ import {
     getMenuSections,
     getToolbarItems,
 } from "../../toolbox/canvas/canvasControlResolution";
-
-interface IMenuItemWithSubmenu extends ILocalizableMenuItemProps {
-    subMenu?: ILocalizableMenuItemProps[];
-}
+import {
+    contextMenuCss,
+    convertControlMenuRows,
+    IMenuItemWithSubmenu,
+    joinMenuSectionsWithSingleDividers,
+    renderContextMenuItems,
+    runControlCallback,
+    scaleIconNode,
+} from "./canvasControlMenuRendering";
 
 // This is the controls bar that appears beneath a canvas element when it is selected. It contains buttons
 // for the most common operations that apply to the canvas element in its current state, and a menu for less common
 // operations.
 
-const CanvasElementContextControls: React.FunctionComponent<{
+/**
+ * What a caller must supply to put this bar on something that is not a canvas element. An
+ * inline image -- a picture inside a text block -- passes this, so that a picture offers the
+ * same toolbar wherever the user meets one (see inlineImageInteractions.ts).
+ */
+export interface IControlsForNonCanvasObject {
+    // Which controls the bar and the menu offer, in place of the canvas element registry's
+    // entry for the element's type.
+    configuration: ICanvasElementControlConfiguration;
+    // The menu behind the "..." button, already built.
+    menuItems: IMenuItemWithSubmenu[];
+    // Merged over the context the registry commands run in. This is where an object says
+    // how to delete itself (IControlContext.deleteThisObject).
+    contextAdditions: Partial<IControlContext>;
+    // Run after a toolbar command's action, for the buttons this component builds itself. A
+    // control that supplies its own toolbar.render owns its interactions and does not go
+    // through here -- nothing in the inline-image toolbar does, but a control added there
+    // later would need to call this itself. An inline image uses it to stamp what the command
+    // did onto the copies in the other languages.
+    afterToolbarCommand?: () => void;
+}
+
+export const CanvasElementContextControls: React.FunctionComponent<{
     canvasElement: HTMLElement;
+    // Left out for a canvas element, which is what this bar was written for.
+    controlsForNonCanvasObject?: IControlsForNonCanvasObject;
     // These props support reusing the context controls menu for a right-click on the canvas element.
     // The first two make the open state of the menu a controlled property. Basically the
     // parent stores the state and passes it in, but to get the normal behavior of
@@ -225,11 +248,13 @@ const CanvasElementContextControls: React.FunctionComponent<{
         onClick: () => void;
         iconScale?: number;
         disabled?: boolean;
+        testId?: string;
     }): IToolbarItem => {
         return {
             key: props.key,
             node: (
                 <ButtonWithTooltip
+                    testId={props.testId}
                     tipL10nKey={props.tipL10nKey}
                     icon={props.icon}
                     iconScale={props.iconScale}
@@ -254,33 +279,6 @@ const CanvasElementContextControls: React.FunctionComponent<{
     };
     // editable and langName are computed earlier, but keep them here for the UI below.
 
-    const maxMenuWidth = 338;
-
-    // Control callbacks can be either sync or async by contract.
-    // We always call through this helper so sync exceptions and async
-    // rejections are handled consistently from UI event handlers.
-    const runControlCallback = (
-        callbackLabel: string,
-        callback: () => void | Promise<void>,
-    ): void => {
-        try {
-            const result = callback();
-            if (result) {
-                void result.catch((error) => {
-                    console.error(
-                        `Canvas control callback failed (${callbackLabel})`,
-                        error,
-                    );
-                });
-            }
-        } catch (error) {
-            console.error(
-                `Canvas control callback failed (${callbackLabel})`,
-                error,
-            );
-        }
-    };
-
     const getSpacerToolbarItem = (index: number): IToolbarItem => {
         return {
             key: `spacer-${index}`,
@@ -297,76 +295,6 @@ const CanvasElementContextControls: React.FunctionComponent<{
 
     let toolbarItems: IToolbarItem[] = [];
 
-    const convertControlMenuRows = (
-        rows: IControlMenuRow[],
-        controlContext: IControlContext,
-        controlRuntime: IControlRuntime,
-    ): IMenuItemWithSubmenu[] => {
-        const convertedRows: IMenuItemWithSubmenu[] = [];
-
-        rows.forEach((row) => {
-            if (row.separatorAbove && convertedRows.length > 0) {
-                convertedRows.push(divider as IMenuItemWithSubmenu);
-            }
-
-            const convertedSubMenu = row.subMenuItems
-                ? convertControlMenuRows(
-                      row.subMenuItems,
-                      controlContext,
-                      controlRuntime,
-                  )
-                : undefined;
-
-            const convertedRow: IMenuItemWithSubmenu = {
-                l10nId: row.l10nId ?? null,
-                english: row.englishLabel ?? "",
-                subLabelL10nId: row.subLabelL10nId,
-                generatedSubLabel: row.subLabel,
-                shortcutDisplay: row.shortcut?.display,
-                icon: scaleIconNode(row.icon, row.iconScale),
-                disabled: row.disabled,
-                featureName: row.featureName,
-                subscriptionTooltipOverride: row.subscriptionTooltipOverride,
-                onClick: () => {
-                    // Ordinary leaf commands close centrally here. Registry
-                    // handlers only call runtime.closeMenu(...) for special
-                    // cases such as dialog launches or submenu-specific focus
-                    // behavior.
-                    if (!convertedSubMenu) {
-                        controlRuntime.closeMenu();
-                    }
-                    runControlCallback(
-                        `menu:${row.id ?? row.englishLabel ?? "unknown"}`,
-                        () => row.onSelect(controlContext, controlRuntime),
-                    );
-                },
-            };
-
-            if (convertedSubMenu) {
-                convertedRow.subMenu = convertedSubMenu;
-            }
-
-            convertedRows.push(convertedRow);
-
-            if (row.helpRowL10nId || row.helpRowEnglish) {
-                if (row.helpRowSeparatorAbove && convertedRows.length > 0) {
-                    convertedRows.push(divider as IMenuItemWithSubmenu);
-                }
-
-                convertedRows.push({
-                    l10nId: null,
-                    english: "",
-                    subLabelL10nId: row.helpRowL10nId,
-                    generatedSubLabel: row.helpRowEnglish,
-                    onClick: () => {},
-                    disabled: true,
-                });
-            }
-        });
-
-        return convertedRows;
-    };
-
     const getToolbarItemForResolvedControl = (
         item: ReturnType<typeof getToolbarItems>[number],
         index: number,
@@ -394,11 +322,12 @@ const CanvasElementContextControls: React.FunctionComponent<{
         const icon = control.toolbar?.icon ?? control.icon;
         const iconScale = control.toolbar?.iconScale ?? control.iconScale;
         const onClick = () => {
-            runControlCallback(`toolbar:${control.id}`, () =>
-                control.action(controlContext, {
+            runControlCallback(`toolbar:${control.id}`, async () => {
+                await control.action(controlContext, {
                     closeMenu: () => {},
-                }),
-            );
+                });
+                props.controlsForNonCanvasObject?.afterToolbarCommand?.();
+            });
         };
 
         if (typeof icon === "function") {
@@ -409,6 +338,7 @@ const CanvasElementContextControls: React.FunctionComponent<{
                 onClick,
                 iconScale: iconScale ?? 1,
                 disabled: !item.enabled,
+                testId: `toolbar-${control.id}`,
             });
         }
 
@@ -432,6 +362,7 @@ const CanvasElementContextControls: React.FunctionComponent<{
                     }}
                 >
                     <button
+                        data-testid={`toolbar-${control.id}`}
                         onClick={onClick}
                         css={getIconCss(
                             iconScale,
@@ -460,24 +391,28 @@ const CanvasElementContextControls: React.FunctionComponent<{
         hasClipboardText,
         languageNameValues,
         aiImageEditingAvailable: aiImageEditingStatus?.visible ?? false,
+        ...props.controlsForNonCanvasObject?.contextAdditions,
     };
 
     const definition =
+        props.controlsForNonCanvasObject?.configuration ??
         canvasElementControlRegistry[controlContext.elementType] ??
         canvasElementControlRegistry.none;
 
-    menuOptions = joinMenuSectionsWithSingleDividers(
-        getMenuSections(definition, controlContext, controlRuntime).map(
-            (section) =>
-                convertControlMenuRows(
-                    section
-                        .map((item) => item.menuRow)
-                        .filter((row): row is IControlMenuRow => !!row),
-                    controlContext,
-                    controlRuntime,
-                ),
-        ),
-    );
+    menuOptions =
+        props.controlsForNonCanvasObject?.menuItems ??
+        joinMenuSectionsWithSingleDividers(
+            getMenuSections(definition, controlContext, controlRuntime).map(
+                (section) =>
+                    convertControlMenuRows(
+                        section
+                            .map((item) => item.menuRow)
+                            .filter((row): row is IControlMenuRow => !!row),
+                        controlContext,
+                        controlRuntime,
+                    ),
+            ),
+        );
 
     toolbarItems = normalizeToolbarItems(
         getToolbarItems(definition, controlContext, controlRuntime)
@@ -555,43 +490,7 @@ const CanvasElementContextControls: React.FunctionComponent<{
                         // The other option would be to put a resize observer on the menu, and use an action prop and
                         // call updatePosition() whenever it resizes
                         keepMounted
-                        css={css`
-                            ul {
-                                max-width: ${maxMenuWidth}px;
-                                color: #4d4d4d;
-                                li {
-                                    display: flex;
-                                    align-items: flex-start;
-                                    color: #4d4d4d;
-                                    .MuiListItemIcon-root {
-                                        color: inherit !important;
-                                    }
-                                    svg {
-                                        color: inherit !important;
-                                    }
-                                    p,
-                                    span {
-                                        color: #4d4d4d;
-                                    }
-                                    img.canvas-context-menu-monochrome-icon {
-                                        display: block;
-                                        width: 24px;
-                                        height: 24px;
-                                        object-fit: contain;
-                                        filter: brightness(0) saturate(100%)
-                                            invert(31%) sepia(0%) saturate(0%)
-                                            hue-rotate(180deg) brightness(95%)
-                                            contrast(94%);
-                                    }
-                                    p {
-                                        white-space: initial;
-                                    }
-                                    &.MuiDivider-root {
-                                        margin-bottom: 12px;
-                                    }
-                                }
-                            }
-                        `}
+                        css={contextMenuCss}
                         open={
                             props.menuOpen &&
                             (!!props.menuAnchorPosition || !!menuEl.current)
@@ -609,84 +508,7 @@ const CanvasElementContextControls: React.FunctionComponent<{
                         disableAutoFocus={true}
                         disableEnforceFocus={true}
                     >
-                        {(() => {
-                            const menuHasShortcuts = menuOptions.some(
-                                (o) => !!o.shortcutDisplay,
-                            );
-                            return menuOptions.map((option, index) => {
-                                if (option.l10nId === "-") {
-                                    return (
-                                        <Divider
-                                            key={index}
-                                            variant="middle"
-                                            component="li"
-                                        />
-                                    );
-                                }
-                                if (option.subMenu) {
-                                    const subMenuHasShortcuts =
-                                        option.subMenu.some(
-                                            (o) => !!o.shortcutDisplay,
-                                        );
-                                    return (
-                                        <LocalizableNestedMenuItem
-                                            {...option}
-                                            key={option.l10nId}
-                                            truncateMainLabel={true}
-                                        >
-                                            {option.subMenu.map(
-                                                (subOption, subIndex) => {
-                                                    if (
-                                                        subOption.l10nId === "-"
-                                                    ) {
-                                                        return (
-                                                            <Divider
-                                                                key={subIndex}
-                                                                variant="middle"
-                                                                component="li"
-                                                            />
-                                                        );
-                                                    }
-                                                    return (
-                                                        <LocalizableMenuItem
-                                                            key={
-                                                                subOption.l10nId
-                                                            }
-                                                            {...subOption}
-                                                            onClick={
-                                                                subOption.onClick
-                                                            }
-                                                            leaveSpaceForShortcut={
-                                                                subMenuHasShortcuts
-                                                            }
-                                                            css={css`
-                                                                max-width: ${maxMenuWidth}px;
-                                                                white-space: wrap;
-                                                                // Styles for subLabels
-                                                                p {
-                                                                    // Determined empirically...
-                                                                    // Styling in NestedMenuItem is impossibly difficult.
-                                                                    left: -8px;
-                                                                }
-                                                            `}
-                                                        />
-                                                    );
-                                                },
-                                            )}
-                                        </LocalizableNestedMenuItem>
-                                    );
-                                }
-                                return (
-                                    <LocalizableMenuItem
-                                        key={option.l10nId}
-                                        {...option}
-                                        onClick={option.onClick}
-                                        variant="body1"
-                                        leaveSpaceForShortcut={menuHasShortcuts}
-                                    />
-                                );
-                            });
-                        })()}
+                        {renderContextMenuItems(menuOptions)}
                     </Menu>
                 </div>
                 {langName && (
@@ -714,6 +536,7 @@ const ButtonWithTooltip: React.FunctionComponent<{
     onClick: React.MouseEventHandler;
     iconScale?: number;
     disabled?: boolean;
+    testId?: string;
 }> = (props) => {
     return (
         <BloomTooltip
@@ -723,6 +546,7 @@ const ButtonWithTooltip: React.FunctionComponent<{
             }}
         >
             <button
+                data-testid={props.testId}
                 onClick={props.onClick}
                 css={getIconCss(
                     props.iconScale,
@@ -786,42 +610,3 @@ function getIconCss(iconScale?: number, extra = "") {
         }
     `;
 }
-
-const scaleIconNode = (
-    iconNode: React.ReactNode,
-    iconScale?: number,
-): React.ReactNode => {
-    if (!iconNode || iconScale === undefined || iconScale === 1) {
-        return iconNode;
-    }
-
-    return (
-        <span
-            css={css`
-                display: inline-flex;
-                align-items: center;
-                justify-content: center;
-                transform: scale(${iconScale});
-                transform-origin: center;
-            `}
-        >
-            {iconNode}
-        </span>
-    );
-};
-
-function joinMenuSectionsWithSingleDividers(
-    menuSections: IMenuItemWithSubmenu[][],
-): IMenuItemWithSubmenu[] {
-    const nonEmptySections = menuSections.filter(
-        (section) => section.length > 0,
-    );
-    const menuItems: IMenuItemWithSubmenu[] = [];
-    nonEmptySections.forEach((section, index) => {
-        if (index > 0) {
-            menuItems.push(divider as IMenuItemWithSubmenu);
-        }
-        menuItems.push(...section);
-    });
-    return menuItems;
-}
diff --git a/src/BloomBrowserUI/bookEdit/js/canvasElementManager/canvasControlMenuRendering.tsx b/src/BloomBrowserUI/bookEdit/js/canvasElementManager/canvasControlMenuRendering.tsx
new file mode 100644
index 000000000000..4b90d81dd7ce
--- /dev/null
+++ b/src/BloomBrowserUI/bookEdit/js/canvasElementManager/canvasControlMenuRendering.tsx
@@ -0,0 +1,268 @@
+import { css } from "@emotion/react";
+import * as React from "react";
+import { Divider } from "@mui/material";
+import {
+    divider,
+    ILocalizableMenuItemProps,
+    LocalizableMenuItem,
+    LocalizableNestedMenuItem,
+} from "../../../react_components/localizableMenuItem";
+import {
+    IControlContext,
+    IControlMenuRow,
+    IControlRuntime,
+} from "../../toolbox/canvas/canvasControlTypes";
+
+// The presentation layer shared by every menu that renders canvas-control registry rows:
+// CanvasElementContextControls (a canvas element's "..." menu and right-click menu) and
+// TextContextMenu (whose inline-image commands come from the same registry, BL-16649).
+// It owes its existence to that reuse: the registry speaks IControlMenuRow, the
+// LocalizableMenuItem components speak ILocalizableMenuItemProps, and everything here is
+// the translation between them -- plus the rendering details (dividers, nested submenus,
+// shortcut alignment, icon scaling) that should look the same wherever the rows appear.
+
+export interface IMenuItemWithSubmenu extends ILocalizableMenuItemProps {
+    subMenu?: ILocalizableMenuItemProps[];
+}
+
+// One width for these menus everywhere, so a command's label wraps the same way whichever
+// surface it appears on.
+export const kContextMenuMaxWidth = 338;
+
+// The styling the menu's ul needs wherever these rows are rendered; notably the filter that
+// turns the raster icons (reset image, fill space, AI edit) the same monochrome as the MUI
+// svg icons.
+export const contextMenuCss = css`
+    ul {
+        max-width: ${kContextMenuMaxWidth}px;
+        color: #4d4d4d;
+        li {
+            display: flex;
+            align-items: flex-start;
+            color: #4d4d4d;
+            .MuiListItemIcon-root {
+                color: inherit !important;
+            }
+            svg {
+                color: inherit !important;
+            }
+            p,
+            span {
+                color: #4d4d4d;
+            }
+            img.canvas-context-menu-monochrome-icon {
+                display: block;
+                width: 24px;
+                height: 24px;
+                object-fit: contain;
+                filter: brightness(0) saturate(100%) invert(31%) sepia(0%)
+                    saturate(0%) hue-rotate(180deg) brightness(95%)
+                    contrast(94%);
+            }
+            p {
+                white-space: initial;
+            }
+            &.MuiDivider-root {
+                margin-bottom: 12px;
+            }
+        }
+    }
+`;
+
+// Control callbacks can be either sync or async by contract.
+// We always call through this helper so sync exceptions and async
+// rejections are handled consistently from UI event handlers.
+export const runControlCallback = (
+    callbackLabel: string,
+    callback: () => void | Promise<void>,
+): void => {
+    try {
+        const result = callback();
+        if (result) {
+            void result.catch((error) => {
+                console.error(
+                    `Canvas control callback failed (${callbackLabel})`,
+                    error,
+                );
+            });
+        }
+    } catch (error) {
+        console.error(
+            `Canvas control callback failed (${callbackLabel})`,
+            error,
+        );
+    }
+};
+
+export const scaleIconNode = (
+    iconNode: React.ReactNode,
+    iconScale?: number,
+): React.ReactNode => {
+    if (!iconNode || iconScale === undefined || iconScale === 1) {
+        return iconNode;
+    }
+
+    return (
+        <span
+            css={css`
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                transform: scale(${iconScale});
+                transform-origin: center;
+            `}
+        >
+            {iconNode}
+        </span>
+    );
+};
+
+export const convertControlMenuRows = (
+    rows: IControlMenuRow[],
+    controlContext: IControlContext,
+    controlRuntime: IControlRuntime,
+): IMenuItemWithSubmenu[] => {
+    const convertedRows: IMenuItemWithSubmenu[] = [];
+
+    rows.forEach((row) => {
+        if (row.separatorAbove && convertedRows.length > 0) {
+            convertedRows.push(divider as IMenuItemWithSubmenu);
+        }
+
+        const convertedSubMenu = row.subMenuItems
+            ? convertControlMenuRows(
+                  row.subMenuItems,
+                  controlContext,
+                  controlRuntime,
+              )
+            : undefined;
+
+        const convertedRow: IMenuItemWithSubmenu = {
+            l10nId: row.l10nId ?? null,
+            english: row.englishLabel ?? "",
+            subLabelL10nId: row.subLabelL10nId,
+            generatedSubLabel: row.subLabel,
+            shortcutDisplay: row.shortcut?.display,
+            icon: scaleIconNode(row.icon, row.iconScale),
+            disabled: row.disabled,
+            featureName: row.featureName,
+            subscriptionTooltipOverride: row.subscriptionTooltipOverride,
+            onClick: () => {
+                // Ordinary leaf commands close centrally here. Registry
+                // handlers only call runtime.closeMenu(...) for special
+                // cases such as dialog launches or submenu-specific focus
+                // behavior.
+                if (!convertedSubMenu) {
+                    controlRuntime.closeMenu();
+                }
+                runControlCallback(
+                    `menu:${row.id ?? row.englishLabel ?? "unknown"}`,
+                    () => row.onSelect(controlContext, controlRuntime),
+                );
+            },
+        };
+
+        if (convertedSubMenu) {
+            convertedRow.subMenu = convertedSubMenu;
+        }
+
+        convertedRows.push(convertedRow);
+
+        if (row.helpRowL10nId || row.helpRowEnglish) {
+            if (row.helpRowSeparatorAbove && convertedRows.length > 0) {
+                convertedRows.push(divider as IMenuItemWithSubmenu);
+            }
+
+            convertedRows.push({
+                l10nId: null,
+                english: "",
+                subLabelL10nId: row.helpRowL10nId,
+                generatedSubLabel: row.helpRowEnglish,
+                onClick: () => {},
+                disabled: true,
+            });
+        }
+    });
+
+    return convertedRows;
+};
+
+export function joinMenuSectionsWithSingleDividers(
+    menuSections: IMenuItemWithSubmenu[][],
+): IMenuItemWithSubmenu[] {
+    const nonEmptySections = menuSections.filter(
+        (section) => section.length > 0,
+    );
+    const menuItems: IMenuItemWithSubmenu[] = [];
+    nonEmptySections.forEach((section, index) => {
+        if (index > 0) {
+            menuItems.push(divider as IMenuItemWithSubmenu);
+        }
+        menuItems.push(...section);
+    });
+    return menuItems;
+}
+
+// Renders converted rows as the children of an MUI Menu: dividers, nested submenus, and
+// shortcut-column alignment included.
+export function renderContextMenuItems(
+    menuOptions: IMenuItemWithSubmenu[],
+): React.ReactNode[] {
+    const menuHasShortcuts = menuOptions.some((o) => !!o.shortcutDisplay);
+    return menuOptions.map((option, index) => {
+        if (option.l10nId === "-") {
+            return <Divider key={index} variant="middle" component="li" />;
+        }
+        if (option.subMenu) {
+            const subMenuHasShortcuts = option.subMenu.some(
+                (o) => !!o.shortcutDisplay,
+            );
+            return (
+                <LocalizableNestedMenuItem
+                    {...option}
+                    key={option.l10nId}
+                    truncateMainLabel={true}
+                >
+                    {option.subMenu.map((subOption, subIndex) => {
+                        if (subOption.l10nId === "-") {
+                            return (
+                                <Divider
+                                    key={subIndex}
+                                    variant="middle"
+                                    component="li"
+                                />
+                            );
+                        }
+                        return (
+                            <LocalizableMenuItem
+                                key={subOption.l10nId}
+                                {...subOption}
+                                onClick={subOption.onClick}
+                                leaveSpaceForShortcut={subMenuHasShortcuts}
+                                css={css`
+                                    max-width: ${kContextMenuMaxWidth}px;
+                                    white-space: wrap;
+                                    // Styles for subLabels
+                                    p {
+                                        // Determined empirically...
+                                        // Styling in NestedMenuItem is impossibly difficult.
+                                        left: -8px;
+                                    }
+                                `}
+                            />
+                        );
+                    })}
+                </LocalizableNestedMenuItem>
+            );
+        }
+        return (
+            <LocalizableMenuItem
+                key={option.l10nId}
+                {...option}
+                onClick={option.onClick}
+                variant="body1"
+                leaveSpaceForShortcut={menuHasShortcuts}
+            />
+        );
+    });
+}
diff --git a/src/BloomBrowserUI/bookEdit/toolbox/canvas/canvasControlRegistry.ts b/src/BloomBrowserUI/bookEdit/toolbox/canvas/canvasControlRegistry.ts
index ba74b8321e15..15cd87665953 100644
--- a/src/BloomBrowserUI/bookEdit/toolbox/canvas/canvasControlRegistry.ts
+++ b/src/BloomBrowserUI/bookEdit/toolbox/canvas/canvasControlRegistry.ts
@@ -42,7 +42,6 @@ import { default as VolumeUpIcon } from "@mui/icons-material/VolumeUp";
 import { getWorkspaceBundleExports } from "../../js/workspaceFrames";
 import {
     doImageCommand,
-    getImageFromCanvasElement,
     getImageFromContainer,
     getImageTransparencyMode,
     getImageUrlFromImageContainer,
@@ -115,7 +114,12 @@ const getImageContainer = (ctx: IControlContext): HTMLElement | undefined => {
     if (imageContainer) {
         return imageContainer;
     }
-    return getImageFromCanvasElement(ctx.canvasElement)
+    // An element whose img is a direct child, with no bloom-imageContainer -- a legacy
+    // shape, or an inline image in a text block (whose wrapper is the "canvas element"
+    // here) -- is its own container. Same fallback as
+    // buildCanvasElementControlRegistryContext, whose hasImage these commands are
+    // offered against.
+    return getImageFromContainer(ctx.canvasElement)
         ? ctx.canvasElement
         : undefined;
 };
@@ -1255,7 +1259,14 @@ export const controlRegistry: Record<TopLevelControlId, IControlDefinition> = {
         menu: {
             iconScale: 1.2,
         },
-        action: () => {
+        action: (ctx) => {
+            // See IControlContext.deleteThisObject: an inline image deletes itself, because
+            // it is not the page's active canvas element and deleting it means more than
+            // removing one element.
+            if (ctx.deleteThisObject) {
+                ctx.deleteThisObject();
+                return;
+            }
             getCanvasElementManager()?.deleteCurrentCanvasElement?.();
         },
     },
diff --git a/src/BloomBrowserUI/bookEdit/toolbox/canvas/canvasControlTypes.ts b/src/BloomBrowserUI/bookEdit/toolbox/canvas/canvasControlTypes.ts
index 60b1131c902c..843d58b8736b 100644
--- a/src/BloomBrowserUI/bookEdit/toolbox/canvas/canvasControlTypes.ts
+++ b/src/BloomBrowserUI/bookEdit/toolbox/canvas/canvasControlTypes.ts
@@ -155,6 +155,12 @@ export interface IControlContext {
     // edit (see aiImageEditorImageFormats.ts). False for formats the editor can't open
     // (e.g. svg), which keeps "Edit with AI" disabled for them.
     imageIsAiEditableFormat: boolean;
+    // How to delete the object these controls are about, for an object that is not a canvas
+    // element. An inline image (a picture inside a text block) sets this, because deleting
+    // one means taking its copy out of every language's text, which the canvas element
+    // manager knows nothing about. Left out, Delete removes the page's active canvas
+    // element, as it always has.
+    deleteThisObject?: () => void;
 }
 
 export interface IControlRuntime {