inline-style-editor 1.2.14 → 1.2.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "inline-style-editor",
-  "version": "1.2.14",
+  "version": "1.2.16",
   "description": "Update CSS rules or add inline style to elements visualy",
   "scripts": {
     "build": "rollup --config",

package/src/assets/style.scss

@@ -91,6 +91,9 @@
         &.active {
             background-color: #4d84bf;
         }
+        &.delete-elem {
+            background-color: #d13737;
+        }
         margin: 0 5px;
         background-color: #3333330d;
         border-radius: 4px;

package/src/components/InlineStyleEditor.svelte

@@ -34,6 +34,7 @@
     export let listenOnClick = false;
     export let onStyleChanged = () => {};
     export let customProps = {};
+    export let inlineDeletable = () => true;
 
     const typeText = "text";
     const typeBorder = "border";
@@ -270,6 +271,7 @@
         const popupDimension = self.getBoundingClientRect();
         x = (x + popupDimension.width + 20 > pageDimensions.width) ? x - popupDimension.width - 20: x + 20;
         y = (y + popupDimension.height + 20 > pageDimensions.height) ? y - popupDimension.height - 20 : y + 20;
+        y = Math.max(y, 0);
         self.style.left = x + "px";
         self.style.top = y + "px";
         helperElemWrapper.style.display = "block";
@@ -370,6 +372,10 @@
         onStyleChanged(currentElement, currentRule, 'bringtofront', null);
     }
 
+    function deleteElem() {
+        currentElement.remove();
+        close();
+    }
     function deleteProp(propName) {
         if (currentRule === 'inline') {
             currentElement.style.removeProperty(propName)
@@ -478,6 +484,11 @@ on:click={overlayClicked}>
                 Bring to front
             </div>
         {/if}
+        {#if currentRule === 'inline' && inlineDeletable(currentElement)}
+            <div class="btn delete-elem" on:click="{deleteElem}">
+                Delete element
+            </div>
+        {/if}
     </div>
     {/if}
 </div>