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.

diff --git a/resources/js/wysiwyg/lexical/rich-text/LexicalMediaNode.ts b/resources/js/wysiwyg/lexical/rich-text/LexicalMediaNode.ts
index 6e9c24717c3e273a68de3fcce5e2ced0a5084868..4f4b1d82af89bc48643d6bb08c7b019e1a2cdb79 100644 (file)
--- 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();
 
     createDOM(_config: EditorConfig, _editor: LexicalEditor) {
         const media = this.createInnerDOM();

-        const wrap = el('span', {
+        return el('span', {

             class: media.className + ' editor-media-wrap',
         }, [media]);
             class: media.className + ' editor-media-wrap',
         }, [media]);

-
-        wrap.addEventListener('click', e => {
-            _editor.update(() => $selectSingleNode(this));
-        });
-
-        return wrap;

     }
 
     updateDOM(prevNode: MediaNode, dom: HTMLElement): boolean {
     }
 
     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 b09a7530f1f21773bb27c76486ebe6fc7c16f6fe..cdc451d088bc08c02a003eac320773b868996f6b 100644 (file)
--- 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)];
 }
 
     return [new EditorButton(image)];
 }
 

+export function getMediaToolbarContent(): EditorUiElement[] {
+    return [new EditorButton(media)];
+}
+

 export function getLinkToolbarContent(): EditorUiElement[] {
     return [
         new EditorButton(link),
 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 b4e49af950c93342a216b90931b1f7af4aaaa861..de2255444ebf6fcfc43fb7a9a225c3f36c208cc1 100644 (file)
--- 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;
 
 
         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;
         }
 
             return;
         }
 

diff --git a/resources/js/wysiwyg/ui/index.ts b/resources/js/wysiwyg/ui/index.ts
index fda37085ef377b3e578c5e944eeebd662af14a8a..e7ec6adbcd56b7eff8e6676b89220707ad329617 100644 (file)
--- a/resources/js/wysiwyg/ui/index.ts
+++ b/resources/js/wysiwyg/ui/index.ts
@@ -3,7 +3,7 @@ import {
     getCodeToolbarContent, getDetailsToolbarContent,
     getImageToolbarContent,
     getLinkToolbarContent,
     getCodeToolbarContent, getDetailsToolbarContent,
     getImageToolbarContent,
     getLinkToolbarContent,

-    getMainEditorFullToolbar, getTableToolbarContent
+    getMainEditorFullToolbar, getMediaToolbarContent, getTableToolbarContent

 } from "./defaults/toolbars";
 import {EditorUIManager} from "./framework/manager";
 import {EditorUiContext} from "./framework/core";
 } 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(),
     });
         selector: 'img:not([drawio-diagram] img)',
         content: getImageToolbarContent(),
     });

+    manager.registerContextToolbar('media', {
+        selector: '.editor-media-wrap',
+        content: getMediaToolbarContent(),
+    });

     manager.registerContextToolbar('link', {
         selector: 'a',
         content: getLinkToolbarContent(),
     manager.registerContextToolbar('link', {
         selector: 'a',
         content: getLinkToolbarContent(),