@@ -238,15 +238,9 @@ export class MediaNode extends ElementNode {
 
 createDOM(_config: EditorConfig, _editor: LexicalEditor) {
 const media = this.createInnerDOM();
-const wrap = el('span', {
+return el('span', {
 class: media.className + ' editor-media-wrap',
 }, [media]);
-
-wrap.addEventListener('click', e => {
-_editor.update(() => $selectSingleNode(this));
-});
-
-return wrap;
 }
 
 updateDOM(prevNode: MediaNode, dom: HTMLElement): boolean {

@@ -224,6 +224,10 @@ export function getImageToolbarContent(): EditorUiElement[] {
 return [new EditorButton(image)];
 }
 
+export function getMediaToolbarContent(): EditorUiElement[] {
+return [new EditorButton(media)];
+}
+
 export function getLinkToolbarContent(): EditorUiElement[] {
 return [
 new EditorButton(link),

@@ -34,7 +34,11 @@ export class EditorContextToolbar extends EditorContainerUiElement {
 
 dom.hidden = !showing;
 
-if (!showing) {
+if (!this.target.isConnected) {
+// If our target is no longer in the DOM, tell the manager an update is needed.
+this.getContext().manager.triggerFutureStateRefresh();
+return;
+} else if (!showing) {
 return;
 }
 

@@ -3,7 +3,7 @@ import {
 getCodeToolbarContent, getDetailsToolbarContent,
 getImageToolbarContent,
 getLinkToolbarContent,
-getMainEditorFullToolbar, getTableToolbarContent
+getMainEditorFullToolbar, getMediaToolbarContent, getTableToolbarContent
 } from "./defaults/toolbars";
 import {EditorUIManager} from "./framework/manager";
 import {EditorUiContext} from "./framework/core";
@@ -44,6 +44,10 @@ export function buildEditorUI(container: HTMLElement, element: HTMLElement, scro
 selector: 'img:not([drawio-diagram] img)',
 content: getImageToolbarContent(),
 });
+manager.registerContextToolbar('media', {
+selector: '.editor-media-wrap',
+content: getMediaToolbarContent(),
+});
 manager.registerContextToolbar('link', {
 selector: 'a',
 content: getLinkToolbarContent(),