@social-mail/social-mail-client 1.8.316 → 1.8.318

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social-mail/social-mail-client",
-  "version": "1.8.316",
+  "version": "1.8.318",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/site-editor/drag-drop/DragDropHelper.ts

@@ -24,8 +24,13 @@ export function InstallDragDropHelper(editor: HtmlPageEditor) {
     const dropTarget = (editor as any).dropTarget as SelectedElement;
 
     document.addEventListener("dragstart", (e) => {
+        const target = e.target as HTMLElement;
+        const s = document.defaultView.getComputedStyle(target);
+        if(/absolute|relative/i.test(s.position)) {
+            return;
+        }
         setTimeout(() => document.body.contentEditable = "false", 0);
-        dragged = e.target as HTMLElement;
+        dragged = target;
         e.dataTransfer.dropEffect = "move";
         e.dataTransfer.setDragImage(dragged, 0, 0);
     });

package/src/site-editor/editor/UndoRedo.tsx

@@ -41,6 +41,15 @@ export default class UndoRedo {
         setTimeout(() => this.silent = false, 100);
     }
 
+    beginPause() {
+        this.silent = true;
+        return {
+            resume: () => {
+                this.silent = false;
+            }
+        };
+    }
+
     observe(records: MutationRecord[]) {
         if (this.silent) {
             return;

package/src/site-editor/editor/ui/SelectionUI.tsx

@@ -24,6 +24,7 @@ interface IRect {
     dy;
     sx;
     sy;
+    move?: boolean;
 }
 
 const setCapture = (editor: HtmlPageEditor, element: HTMLElement, e: PointerEvent, fx: (r: IRect, ) => IRect) => {
@@ -49,6 +50,8 @@ const setCapture = (editor: HtmlPageEditor, element: HTMLElement, e: PointerEven
 
     const ps = (v, max) => (v* 100 / (max || 1)).toFixed(2);
 
+    const d = editor.undoRedo.beginPause();
+
     const captureMove = (evt: PointerEvent) => {
         const dx = evt.clientX - sx;
         const dy = evt.clientY - sy;
@@ -67,16 +70,18 @@ const setCapture = (editor: HtmlPageEditor, element: HTMLElement, e: PointerEven
         selectedElement.setAttribute(`${prefix}-inset`, av);
         // if (/^img$/i.test(selectedElement.tagName)) {
             // image needs width/height as well...
-            let widthDiff = -r.left;
-            let heightDiff = -r.top;
-            if (ri.bottom === r.bottom) {
-                heightDiff -= r.bottom;
-            }
-            if (ri.right === r.right) {
-                widthDiff -= r.right;
+            if (!r.move) {
+                let widthDiff = -r.left;
+                let heightDiff = -r.top;
+                if (ri.bottom === r.bottom) {
+                    heightDiff -= r.bottom;
+                }
+                if (ri.right === r.right) {
+                    widthDiff -= r.right;
+                }
+                selectedElement.setAttribute(`${prefix}-width`, ps(width + widthDiff, width) + "%");
+                selectedElement.setAttribute(`${prefix}-height`, ps(height + heightDiff, height) + "%");
             }
-            selectedElement.setAttribute(`${prefix}-width`, ps(width + widthDiff, width) + "%");
-            selectedElement.setAttribute(`${prefix}-height`, ps(height + heightDiff, height) + "%");
         // }
 
         setTimeout(() => {
@@ -87,10 +92,13 @@ const setCapture = (editor: HtmlPageEditor, element: HTMLElement, e: PointerEven
 
     element.addEventListener("pointermove", captureMove);
     element.setPointerCapture(e.pointerId);
-    const release = () => {
+    const release = (e1) => {
         element.releasePointerCapture(e.pointerId);
         element.removeEventListener("pointermove", captureMove);
         element.removeEventListener("pointerup", release);
+        captureMove(e1);
+        d.resume();
+        editor.commit();
     };
     element.addEventListener("pointerup", release);
 };
@@ -149,6 +157,7 @@ const eventPointerDown = (editor: HtmlPageEditor, e: PointerEvent) =>  {
         r.left += r.dx;
         r.bottom -= r.dy;
         r.right -= r.dx;
+        r.move = true;
         return r;
     });