Merge branch 'dev' of https://github.com/artf/grapesjs into fix-add-events

packages/core/src/style_manager/model/Property.ts

@@ -354,7 +354,7 @@ export default class Property<T extends Record<string, any> = PropertyProps> ext
   }
 
   __getClearProps() {
-    return { value: '' } as unknown as Partial<T>;
+    return { value: '', important: false } as unknown as Partial<T>;
   }
 
   /**
@@ -492,7 +492,7 @@ export default class Property<T extends Record<string, any> = PropertyProps> ext
     const fn = this.get('functionName');
     const def = this.getDefaultValue();
     let value = isUndefined(val) ? (this.get('value') as string) : val;
-    const hasValue = !isUndefined(value) && value !== '';
+    const hasValue = this.hasValue();
 
     if (value && def && value === def) {
       return def;

packages/core/src/utils/Resizer.ts

@@ -676,11 +676,13 @@ export default class Resizer {
     const parentH = this.parentDim!.h;
     const unitWidth = this.opts.unitWidth;
     const unitHeight = this.opts.unitHeight;
+    const parentRect = this.getParentRect();
     const startW = unitWidth === '%' ? (startDim.w / 100) * parentW : startDim.w;
     const startH = unitHeight === '%' ? (startDim.h / 100) * parentH : startDim.h;
+
     const box: RectDim = {
-      t: startDim.t,
+      t: startDim.t - parentRect.top,
-      l: startDim.l,
+      l: startDim.l - parentRect.left,
       w: startW,
       h: startH,
     };
@@ -750,4 +752,20 @@ export default class Resizer {
 
     return box;
   }
+
+  getParentRect(): BoundingRect {
+    let parentRect = { left: 0, top: 0, width: 0, height: 0 };
+    const { el } = this;
+
+    if (!el) return parentRect;
+
+    const { offsetParent } = el;
+
+    // Check if the parent or any ancestor has `position: relative`, `absolute`, `fixed`, or `sticky`
+    if (offsetParent && offsetParent.tagName !== 'BODY') {
+      parentRect = this.getElementPos(offsetParent as HTMLElement);
+    }
+
+    return parentRect;
+  }
 }