diff --git a/resources/js/wysiwyg/lexical/rich-text/LexicalMediaNode.ts b/resources/js/wysiwyg/lexical/rich-text/LexicalMediaNode.ts index 6e9c24717..4f4b1d82a 100644 --- a/resources/js/wysiwyg/lexical/rich-text/LexicalMediaNode.ts +++ b/resources/js/wysiwyg/lexical/rich-text/LexicalMediaNode.ts @@ -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 { diff --git a/resources/js/wysiwyg/ui/defaults/toolbars.ts b/resources/js/wysiwyg/ui/defaults/toolbars.ts index b09a7530f..cdc451d08 100644 --- a/resources/js/wysiwyg/ui/defaults/toolbars.ts +++ b/resources/js/wysiwyg/ui/defaults/toolbars.ts @@ -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), diff --git a/resources/js/wysiwyg/ui/framework/toolbars.ts b/resources/js/wysiwyg/ui/framework/toolbars.ts index b4e49af95..de2255444 100644 --- a/resources/js/wysiwyg/ui/framework/toolbars.ts +++ b/resources/js/wysiwyg/ui/framework/toolbars.ts @@ -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; } diff --git a/resources/js/wysiwyg/ui/index.ts b/resources/js/wysiwyg/ui/index.ts index fda37085e..e7ec6adbc 100644 --- a/resources/js/wysiwyg/ui/index.ts +++ b/resources/js/wysiwyg/ui/index.ts @@ -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(),