diff --git a/.changeset/calm-images-select.md b/.changeset/calm-images-select.md new file mode 100644 index 0000000000..a2de4d4126 --- /dev/null +++ b/.changeset/calm-images-select.md @@ -0,0 +1,5 @@ +--- +"@emdash-cms/admin": patch +--- + +Fixes image action controls intermittently failing to appear when selecting an image in the editor. diff --git a/packages/admin/src/components/editor/ImageNode.tsx b/packages/admin/src/components/editor/ImageNode.tsx index a1331ff837..1663ca21b0 100644 --- a/packages/admin/src/components/editor/ImageNode.tsx +++ b/packages/admin/src/components/editor/ImageNode.tsx @@ -47,7 +47,14 @@ declare module "@tiptap/react" { } // React component for the image node view -function ImageNodeView({ node, updateAttributes, selected, deleteNode, editor }: NodeViewProps) { +function ImageNodeView({ + node, + updateAttributes, + selected, + deleteNode, + editor, + getPos, +}: NodeViewProps) { const { t } = useLingui(); const [isEditingAlt, setIsEditingAlt] = React.useState(false); const [altText, setAltText] = React.useState(node.attrs.alt || ""); @@ -75,6 +82,14 @@ function ImageNodeView({ node, updateAttributes, selected, deleteNode, editor }: setAltText(node.attrs.alt || ""); }, [node.attrs.alt]); + const handlePointerDown = (event: React.PointerEvent) => { + if (!editor.isEditable || !event.isPrimary || event.button !== 0) return; + const position = getPos(); + if (typeof position === "number") { + editor.commands.setNodeSelection(position); + } + }; + const getImageAttrs = (): ImageAttributes => ({ src: node.attrs.src, alt: node.attrs.alt, @@ -165,10 +180,8 @@ function ImageNodeView({ node, updateAttributes, selected, deleteNode, editor }: return (
+