Lexical: Added a media toolbar, improved toolbars and media selection

- Updated toolbars to auto-refresh ui if it attempts to update targeting
  a DOM element which no longer exists.
- Removed MediaNode dom specific click handling which was causing
  selection issues, and did not seem to be needed now.

Author: ssddanbrown

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 {

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),

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;
         }
 

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(),