Lexical: Further fixes

- Improved node resizer positioning to be more accurate
- Fixed drop handling not running within editor margin space
- Made media dom update smarter to reduce reloads
- Fixed media alignment, broken due to added wrapper

diff --git a/resources/js/wysiwyg/index.ts b/resources/js/wysiwyg/index.ts
index 1e5e4b3ce3e64f3315883bdffb0caee2bd3f0b06..9015cea0c5638c8a10f29cca18a9751c35269dd9 100644 (file)
--- a/resources/js/wysiwyg/index.ts
+++ b/resources/js/wysiwyg/index.ts
@@ -13,7 +13,7 @@ import {registerTaskListHandler} from "./ui/framework/helpers/task-list-handler"
 import {registerTableSelectionHandler} from "./ui/framework/helpers/table-selection-handler";
 import {el} from "./utils/dom";
 import {registerShortcuts} from "./services/shortcuts";
 import {registerTableSelectionHandler} from "./ui/framework/helpers/table-selection-handler";
 import {el} from "./utils/dom";
 import {registerShortcuts} from "./services/shortcuts";

-import {registerNodeResizer} from "./ui/framework/helpers/image-resizer";
+import {registerNodeResizer} from "./ui/framework/helpers/node-resizer";

 
 export function createPageEditorInstance(container: HTMLElement, htmlContent: string, options: Record<string, any> = {}): SimpleWysiwygEditorInterface {
     const config: CreateEditorArgs = {
 
 export function createPageEditorInstance(container: HTMLElement, htmlContent: string, options: Record<string, any> = {}): SimpleWysiwygEditorInterface {
     const config: CreateEditorArgs = {

diff --git a/resources/js/wysiwyg/nodes/media.ts b/resources/js/wysiwyg/nodes/media.ts
index 5b3c1b9c271208d8855af6fafca6e885f1464eec..fb940f8934e37b97625b14c64f51a5ef64141de6 100644 (file)
--- a/resources/js/wysiwyg/nodes/media.ts
+++ b/resources/js/wysiwyg/nodes/media.ts
@@ -4,18 +4,17 @@ import {
     ElementNode,
     LexicalEditor,
     LexicalNode,
     ElementNode,
     LexicalEditor,
     LexicalNode,

-    SerializedElementNode, Spread
+    Spread

 } from 'lexical';
 import type {EditorConfig} from "lexical/LexicalEditor";
 
 } from 'lexical';
 import type {EditorConfig} from "lexical/LexicalEditor";
 

-import {el, sizeToPixels} from "../utils/dom";
+import {el, setOrRemoveAttribute, sizeToPixels} from "../utils/dom";

 import {
     CommonBlockAlignment,
     SerializedCommonBlockNode,
     setCommonBlockPropsFromElement,
     updateElementWithCommonBlockProps
 } from "./_common";
 import {
     CommonBlockAlignment,
     SerializedCommonBlockNode,
     setCommonBlockPropsFromElement,
     updateElementWithCommonBlockProps
 } from "./_common";

-import {elem} from "../../services/dom";

 import {$selectSingleNode} from "../utils/selection";
 
 export type MediaNodeTag = 'iframe' | 'embed' | 'object' | 'video' | 'audio';
 import {$selectSingleNode} from "../utils/selection";
 
 export type MediaNodeTag = 'iframe' | 'embed' | 'object' | 'video' | 'audio';


@@ -218,8 +217,37 @@ export class MediaNode extends ElementNode {
         return wrap;
     }
 
         return wrap;
     }
 

-    updateDOM(prevNode: unknown, dom: HTMLElement) {
-        return true;
+    updateDOM(prevNode: MediaNode, dom: HTMLElement): boolean {
+        if (prevNode.__tag !== this.__tag) {
+            return true;
+        }
+
+        if (JSON.stringify(prevNode.__sources) !== JSON.stringify(this.__sources)) {
+            return true;
+        }
+
+        if (JSON.stringify(prevNode.__attributes) !== JSON.stringify(this.__attributes)) {
+            return true;
+        }
+
+        const mediaEl = dom.firstElementChild as HTMLElement;
+
+        if (prevNode.__id !== this.__id) {
+            setOrRemoveAttribute(mediaEl, 'id', this.__id);
+        }
+
+        if (prevNode.__alignment !== this.__alignment) {
+            if (prevNode.__alignment) {
+                dom.classList.remove(`align-${prevNode.__alignment}`);
+                mediaEl.classList.remove(`align-${prevNode.__alignment}`);
+            }
+            if (this.__alignment) {
+                dom.classList.add(`align-${this.__alignment}`);
+                mediaEl.classList.add(`align-${this.__alignment}`);
+            }
+        }
+
+        return false;

     }
 
     static importDOM(): DOMConversionMap|null {
     }
 
     static importDOM(): DOMConversionMap|null {

diff --git a/resources/js/wysiwyg/services/drop-paste-handling.ts b/resources/js/wysiwyg/services/drop-paste-handling.ts
index 85d0235d88b2ac3d8eaba11bcfd8f48727b4236e..07e35d4438e050b9410dd00f14913c4cca28dab5 100644 (file)
--- a/resources/js/wysiwyg/services/drop-paste-handling.ts
+++ b/resources/js/wysiwyg/services/drop-paste-handling.ts
@@ -103,6 +103,7 @@ function createDropListener(context: EditorUiContext): (event: DragEvent) => boo
         if (templateId) {
             insertTemplateToEditor(editor, templateId, event);
             event.preventDefault();
         if (templateId) {
             insertTemplateToEditor(editor, templateId, event);
             event.preventDefault();

+            event.stopPropagation();

             return true;
         }
 
             return true;
         }
 


@@ -114,6 +115,7 @@ function createDropListener(context: EditorUiContext): (event: DragEvent) => boo
                 $insertNodesAtEvent(newNodes, event, editor);
             });
             event.preventDefault();
                 $insertNodesAtEvent(newNodes, event, editor);
             });
             event.preventDefault();

+            event.stopPropagation();

             return true;
         }
 
             return true;
         }
 


@@ -121,6 +123,7 @@ function createDropListener(context: EditorUiContext): (event: DragEvent) => boo
             const handled = handleMediaInsert(event.dataTransfer, context);
             if (handled) {
                 event.preventDefault();
             const handled = handleMediaInsert(event.dataTransfer, context);
             if (handled) {
                 event.preventDefault();

+                event.stopPropagation();

                 return true;
             }
         }
                 return true;
             }
         }


@@ -150,9 +153,11 @@ export function registerDropPasteHandling(context: EditorUiContext): () => void
 
     const unregisterDrop = context.editor.registerCommand(DROP_COMMAND, dropListener, COMMAND_PRIORITY_HIGH);
     const unregisterPaste = context.editor.registerCommand(PASTE_COMMAND, pasteListener, COMMAND_PRIORITY_HIGH);
 
     const unregisterDrop = context.editor.registerCommand(DROP_COMMAND, dropListener, COMMAND_PRIORITY_HIGH);
     const unregisterPaste = context.editor.registerCommand(PASTE_COMMAND, pasteListener, COMMAND_PRIORITY_HIGH);

+    context.scrollDOM.addEventListener('drop', dropListener);

 
     return () => {
         unregisterDrop();
         unregisterPaste();
 
     return () => {
         unregisterDrop();
         unregisterPaste();

+        context.scrollDOM.removeEventListener('drop', dropListener);

     };
 }
\ No newline at end of file
     };
 }
\ No newline at end of file

diff --git a/resources/js/wysiwyg/todo.md b/resources/js/wysiwyg/todo.md
index 15a59c7345f4e23221ad8baf317ffc1250932bdd..9c196d6d306975a90a6e5e32ec8a1bfd3452fd24 100644 (file)
--- a/resources/js/wysiwyg/todo.md
+++ b/resources/js/wysiwyg/todo.md
@@ -16,4 +16,4 @@
 
 ## Bugs
 
 
 ## Bugs
 

-- Template drag/drop not handled when outside core editor area (ignored in margin area).
\ No newline at end of file
+//
\ No newline at end of file

diff --git a/resources/js/wysiwyg/ui/framework/helpers/image-resizer.ts b/resources/js/wysiwyg/ui/framework/helpers/node-resizer.ts
similarity index 92%
rename from resources/js/wysiwyg/ui/framework/helpers/image-resizer.ts
rename to resources/js/wysiwyg/ui/framework/helpers/node-resizer.ts
index c8105eafcbba589a37b2464278baf5256fefe4c9..2e4f2939ca2a2d78029aa65f4631855b889082b4 100644 (file)
--- a/resources/js/wysiwyg/ui/framework/helpers/image-resizer.ts
+++ b/resources/js/wysiwyg/ui/framework/helpers/node-resizer.ts
@@ -73,11 +73,15 @@ class NodeResizer {
             return;
         }
 
             return;
         }
 

-        const nodeDOMBounds = nodeDOM.getBoundingClientRect();
-        this.dom.style.left = nodeDOM.offsetLeft + 'px';
-        this.dom.style.top = nodeDOM.offsetTop + 'px';
-        this.dom.style.width = nodeDOMBounds.width + 'px';
-        this.dom.style.height = nodeDOMBounds.height + 'px';
+        const scrollAreaRect = this.scrollContainer.getBoundingClientRect();
+        const nodeRect = nodeDOM.getBoundingClientRect();
+        const top = nodeRect.top - (scrollAreaRect.top - this.scrollContainer.scrollTop);
+        const left = nodeRect.left - scrollAreaRect.left;
+
+        this.dom.style.top = `${top}px`;
+        this.dom.style.left = `${left}px`;
+        this.dom.style.width = nodeRect.width + 'px';
+        this.dom.style.height = nodeRect.height + 'px';

     }
 
     protected updateDOMSize(width: number, height: number): void {
     }
 
     protected updateDOMSize(width: number, height: number): void {

diff --git a/resources/js/wysiwyg/utils/dom.ts b/resources/js/wysiwyg/utils/dom.ts
index d5c63a816e45f1fdf468a8cc4775ee0a6134f16a..bbb07cb414da19d7a0285ecda1d8f7c3586b3d2a 100644 (file)
--- a/resources/js/wysiwyg/utils/dom.ts
+++ b/resources/js/wysiwyg/utils/dom.ts
@@ -70,4 +70,12 @@ export function extractStyleMapFromElement(element: HTMLElement): StyleMap {
     }
 
     return map;
     }
 
     return map;

+}
+
+export function setOrRemoveAttribute(element: HTMLElement, name: string, value: string|null|undefined) {
+    if (value) {
+        element.setAttribute(name, value);
+    } else {
+        element.removeAttribute(name);
+    }

 }
\ No newline at end of file
 }
\ No newline at end of file

diff --git a/resources/sass/_editor.scss b/resources/sass/_editor.scss
index 31ce564be3797afbc2537dc8c943febf48d070bc..04f18702e4e80cb2c595618d69fe3ecbb4287596 100644 (file)
--- a/resources/sass/_editor.scss
+++ b/resources/sass/_editor.scss
@@ -374,10 +374,21 @@ body.editor-is-fullscreen {
 }
 
 .editor-media-wrap {
 }
 
 .editor-media-wrap {

+  display: inline-block;

   cursor: not-allowed;
   iframe {
     pointer-events: none;
   }
   cursor: not-allowed;
   iframe {
     pointer-events: none;
   }

+  &.align-left {
+    float: left;
+  }
+  &.align-right {
+    float: right;
+  }
+  &.align-center {
+    display: block;
+    margin-inline: auto;
+  }

 }
 
 /**
 }
 
 /**