inline-style-editor 1.4.2 → 1.5.3

package/package.json

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

package/src/assets/style.scss

@@ -38,21 +38,13 @@
         margin: auto;
     }
 
-    .prop-name {
-        display: flex;
-        align-items: center;
-
-        &>span {
-            margin-left: 4px;
-        }
+    .current-value {
+        font-size: 12px;
+        color: #64748b;
+        min-width: 40px;
+        text-align: right;
     }
 
-    .delete {
-        cursor: pointer;
-        font-size: 20px;
-        margin: 0 4px;
-        margin-bottom: 2px;
-    }
 
     .select-tab {
         display: flex;
@@ -91,21 +83,100 @@
     }
 
     .editor .prop-section {
-        display: flex;
-        align-items: center;
-        margin: 5px 0;
-        align-items: baseline;
+        background: #f8fafc;
+        border-radius: 6px;
+        padding: 8px;
+        margin: 6px 0;
+
+        &:first-child {
+            margin-top: 0;
+        }
+
+        &.slider {
+            .prop-header + input[type="range"] {
+                display: inline-block;
+                width: calc(100% - 50px);
+                vertical-align: middle;
+            }
+
+            .current-value {
+                display: inline-block;
+                vertical-align: middle;
+            }
+        }
     }
 
-    .editor .prop-section>span {
-        margin: 0 5px;
+    .prop-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 6px;
     }
 
-    .editor .prop-section :first-child {
+    .prop-name {
+        display: flex;
+        align-items: center;
+        gap: 8px;
         color: #5d5d5d;
         font-weight: bold;
     }
 
+    .selected-label {
+        font-size: 12px;
+        color: #64748b;
+        font-weight: 500;
+    }
+
+    .close-button,
+    .delete-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 20px;
+        height: 20px;
+        padding: 0;
+        border: none;
+        cursor: pointer;
+        flex-shrink: 0;
+        transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
+
+        svg {
+            width: 12px;
+            height: 12px;
+        }
+    }
+
+    .delete-btn {
+        border-radius: 4px;
+        background: transparent;
+        color: #94a3b8;
+
+        &:hover {
+            background: #fee2e2;
+            color: #dc2626;
+        }
+    }
+
+    .close-button {
+        position: absolute;
+        top: -8px;
+        right: -8px;
+        border-radius: 50%;
+        background: #64748b;
+        color: white;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+
+        &:hover {
+            background: #475569;
+            transform: scale(1.1);
+        }
+
+        svg {
+            width: 10px;
+            height: 10px;
+        }
+    }
+
     .editor .btn {
         &.active {
             background-color: #4d84bf;
@@ -125,19 +196,41 @@
         padding: 5px;
     }
 
-    .close-button {
-        position: absolute;
-        top: -7px;
-        right: -7px;
-        background-color: #dbdbdb;
-        color: #818181;
-        width: 15px;
-        height: 15px;
+    .icon-selector {
         display: flex;
-        justify-content: center;
+        gap: 2px;
         align-items: center;
+    }
+
+    .icon-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 26px;
+        height: 26px;
+        padding: 4px;
+        border: 1.5px solid transparent;
+        border-radius: 5px;
+        background: transparent;
         cursor: pointer;
-        border-radius: 3px;
+        color: #94a3b8;
+
+        &:hover {
+            background: #e2e8f0;
+            color: #475569;
+        }
+
+        &.selected {
+            background: white;
+            border-color: #3b82f6;
+            color: #2563eb;
+            box-shadow: 0 1px 3px 0 rgba(59, 130, 246, 0.3), 0 0 0 1px rgba(59, 130, 246, 0.1);
+        }
+
+        svg {
+            width: 16px;
+            height: 16px;
+        }
     }
 
     .layout_default.picker_wrapper {

package/src/components/InlineStyleEditor.svelte

@@ -20,6 +20,7 @@
         "textPath",
         "tref",
         "tspan",
+        "g",
     ];
 
     const borderProps = ["border-radius", "border-width", "border-color", "border-style"];
@@ -55,6 +56,23 @@
         "background-color": { type: "color" },
     };
 
+    const propertyIcons = {
+        stroke: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="2" y1="14" x2="14" y2="2"/></svg>`,
+        fill: `<svg viewBox="0 0 16 16" fill="currentColor"><rect x="2" y="2" width="12" height="12" rx="2"/></svg>`,
+        color: `<svg viewBox="0 0 16 16" fill="currentColor"><text x="3" y="11" font-size="10" font-weight="bold">A</text><rect x="2" y="13" width="12" height="2"/></svg>`,
+        "border-color": `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="2" width="12" height="12" rx="1"/></svg>`,
+        "background-color": `<svg viewBox="0 0 16 16" fill="currentColor"><rect x="4" y="4" width="10" height="10" rx="1" opacity="0.5"/><rect x="2" y="2" width="10" height="10" rx="1"/></svg>`,
+        "border-radius": `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 10 L2 2 L10 2" stroke-linecap="round"/><path d="M2 10 Q2 14 6 14 L14 14" stroke-linecap="round"/></svg>`,
+        "border-width": `<svg viewBox="0 0 16 16" fill="currentColor"><rect x="2" y="2" width="12" height="2"/><rect x="2" y="7" width="12" height="3"/><rect x="2" y="13" width="12" height="1"/></svg>`,
+        "border-style": `<svg viewBox="0 0 16 16" fill="currentColor"><rect x="2" y="2" width="12" height="1.5"/><rect x="2" y="7" width="3" height="1.5"/><rect x="7" y="7" width="3" height="1.5"/><rect x="2" y="12" width="1.5" height="1.5"/><rect x="5" y="12" width="1.5" height="1.5"/><rect x="8" y="12" width="1.5" height="1.5"/><rect x="11" y="12" width="1.5" height="1.5"/></svg>`,
+        "font-size": `<svg viewBox="0 0 16 16" fill="currentColor"><text x="1" y="12" font-size="12" font-weight="bold">T</text><text x="9" y="12" font-size="8" font-weight="bold">T</text></svg>`,
+        "font-weight": `<svg viewBox="0 0 16 16" fill="currentColor"><text x="3" y="13" font-size="14" font-weight="bold">B</text></svg>`,
+        "font-family": `<svg viewBox="0 0 16 16" fill="currentColor"><text x="4" y="13" font-size="14" font-style="italic" font-family="serif">F</text></svg>`,
+        "stroke-width": `<svg viewBox="0 0 16 16" fill="currentColor"><rect x="2" y="2" width="12" height="2"/><rect x="2" y="7" width="12" height="3"/><rect x="2" y="13" width="12" height="1"/></svg>`,
+        "stroke-dasharray": `<svg viewBox="0 0 16 16" fill="currentColor"><rect x="1" y="7" width="4" height="2"/><rect x="7" y="7" width="4" height="2"/><rect x="13" y="7" width="2" height="2"/></svg>`,
+        "stroke-linejoin": `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"><polyline points="3,12 8,4 13,12"/></svg>`,
+    };
+
     // Props
     const props = $props();
     const getElems = props.getElems ?? null;
@@ -69,6 +87,7 @@
             if (cssRuleName === "inline") return "Selected element";
             return cssRuleName;
         });
+    const ignoredProps = props.ignoredProps ?? [];
 
     const typeText = "text";
     const typeBorder = "border";
@@ -153,6 +172,7 @@
     function initAndGroup() {
         const allProps = { ...cssPropByType, ...customProps };
         const _allCurrentPropDefs = pick(allProps, propByType[curType]);
+        ignoredProps.forEach((prop) => delete _allCurrentPropDefs[prop]);
         Object.keys(_allCurrentPropDefs).forEach((key) => {
             const propSelectType = _allCurrentPropDefs[key].type;
             let retrieveType = "number";
@@ -172,7 +192,7 @@
             }
         });
 
-        propsByType = Object.entries(_allCurrentPropDefs)
+        const _propsByType = Object.entries(_allCurrentPropDefs)
             .reduce((byType, [propName, selectorDef]) => {
                 const selectorType = selectorDef.type;
                 const existing = byType.find((x) => x.type === selectorType);
@@ -190,6 +210,18 @@
                 if (inputTypeOrder[a.type] > inputTypeOrder[b.type]) return 1;
                 return 0;
             });
+
+        // Pre-select fill over stroke if the element has a non-transparent fill
+        const colorGroup = _propsByType.find((g) => g.type === "color");
+        if (colorGroup) {
+            const fillIndex = colorGroup.props.indexOf("fill");
+            const fillValue = _allCurrentPropDefs["fill"]?.value;
+            if (fillIndex !== -1 && fillValue && fillValue !== "#00000000") {
+                colorGroup.selected = fillIndex;
+            }
+        }
+
+        propsByType = _propsByType;
         allCurrentPropDefs = _allCurrentPropDefs;
         updateHelpers();
     }
@@ -248,7 +280,10 @@
         return elems.reduce((typesByElem, elemDef) => {
             const elem = elemDef[0];
             const types = [];
-            if (elem.firstChild && (elem.firstChild.nodeType === 3 || elem.firstChild.tagName === "tspan")) {
+            if (
+                elem.firstChild &&
+                ((!elem.firstElementChild && elem.firstChild.nodeType === 3) || elem.firstChild.tagName === "tspan")
+            ) {
                 // Node.TEXT_NODE
                 types.push(typeText);
             }
@@ -444,13 +479,37 @@
         close();
     }
     function deleteProp(propName) {
-        if (currentRule === "inline") {
-            currentElement.style.removeProperty(propName);
+        const propDef = allCurrentPropDefs[propName];
+        const isCustomProp = propName in customProps;
+
+        // Check if custom prop has a defaultValue
+        if (isCustomProp && propDef && "defaultValue" in customProps[propName]) {
+            const defaultValue = customProps[propName].defaultValue;
+            if (propDef.setter) {
+                propDef.setter(currentElement, defaultValue);
+            }
+            propDef.value = defaultValue;
+            propDef.displayed = defaultValue;
+            onStyleChanged(currentElement, currentRule, propName, defaultValue);
         } else {
-            currentRule.style.removeProperty(propName);
+            // Standard CSS property reset
+            if (currentRule === "inline") {
+                currentElement.style.removeProperty(propName);
+            } else {
+                currentRule.style.removeProperty(propName);
+            }
+            onStyleChanged(currentElement, currentRule, propName, null);
+            // Update the displayed value without rebuilding (which would reset selection)
+            if (propDef) {
+                const propSelectType = propDef.type;
+                let retrieveType = "number";
+                if (propSelectType === "color") retrieveType = "rgb";
+                else if (propSelectType === "select") retrieveType = "raw";
+                propDef.displayed = getComputedPropValue(currentElement, propName, "raw");
+                propDef.value = getComputedPropValue(currentElement, propName, retrieveType);
+            }
         }
-        onStyleChanged(currentElement, currentRule, propName, null);
-        initAndGroup();
+        updateHelpers();
     }
 
     function selectRule(ruleIndex) {
@@ -480,7 +539,11 @@
 </svg>
 
 <div class="ise" bind:this={self}>
-    <div class="close-button" onclick={close}>x</div>
+    <button class="close-button" title="Close" onclick={close}>
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5">
+            <path d="M4 4 L12 12 M12 4 L4 12" />
+        </svg>
+    </button>
     {#if targetsToSearch.length > 1}
         <div class="select-tab">
             <b> Element </b>
@@ -497,73 +560,89 @@
             {/each}
         </div>
     {/if}
-    <div class="select-tab">
-        <b> Applied to: </b>
-        {#if nbChars(getRuleNamesTransformed(allRules[selectedElemIndex])) > 30}
-            <select onchange={(e) => selectRule(e.target.value)}>
+    {#if allRules[selectedElemIndex]?.length > 1}
+        <div class="select-tab">
+            <b> Applied to: </b>
+            {#if nbChars(getRuleNamesTransformed(allRules[selectedElemIndex])) > 30}
+                <select onchange={(e) => selectRule(e.target.value)}>
+                    {#each getRuleNames(allRules[selectedElemIndex]) as ruleName, ruleIndex}
+                        <option selected={selectedRuleIndex === ruleIndex} value={ruleIndex}
+                            >{getCssRuleName(ruleName, clickedElement)}</option
+                        >
+                    {/each}
+                </select>
+            {:else}
                 {#each getRuleNames(allRules[selectedElemIndex]) as ruleName, ruleIndex}
-                    <option selected={selectedRuleIndex === ruleIndex} value={ruleIndex}
-                        >{getCssRuleName(ruleName, clickedElement)}</option
+                    <span
+                        title={ruleName}
+                        class:selected={selectedRuleIndex === ruleIndex}
+                        onclick={() => {
+                            selectRule(ruleIndex);
+                        }}
+                    >
+                        {getCssRuleName(ruleName, clickedElement)}</span
                     >
                 {/each}
-            </select>
-        {:else}
-            {#each getRuleNames(allRules[selectedElemIndex]) as ruleName, ruleIndex}
-                <span
-                    title={ruleName}
-                    class:selected={selectedRuleIndex === ruleIndex}
-                    onclick={() => {
-                        selectRule(ruleIndex);
-                    }}
-                >
-                    {getCssRuleName(ruleName, clickedElement)}</span
-                >
-            {/each}
-        {/if}
-    </div>
-    <div class="select-tab">
-        <b> Property type: </b>
-        {#each allTypes[selectedElemIndex] || [] as type, typeIndex}
-            <!-- Only display "custom" on "inline" rule -->
-            {#if type !== "custom" || (currentRule === "inline" && type === "custom" && hasDisplayedCustom)}
-                <span
-                    class:selected={selectedTypeIndex === typeIndex}
-                    onclick={() => {
-                        selectedTypeIndex = typeIndex;
-                    }}
-                >
-                    {type === "stroke" ? "SVG paint" : capitalizeFirstLetter(type)}
-                </span>
             {/if}
-        {/each}
-    </div>
+        </div>
+    {/if}
+    {#if (allTypes[selectedElemIndex] || []).filter((t) => t !== "custom" || (currentRule === "inline" && hasDisplayedCustom)).length > 1}
+        <div class="select-tab">
+            <b> Property type: </b>
+            {#each allTypes[selectedElemIndex] || [] as type, typeIndex}
+                <!-- Only display "custom" on "inline" rule -->
+                {#if type !== "custom" || (currentRule === "inline" && type === "custom" && hasDisplayedCustom)}
+                    <span
+                        class:selected={selectedTypeIndex === typeIndex}
+                        onclick={() => {
+                            selectedTypeIndex = typeIndex;
+                        }}
+                    >
+                        {type === "stroke" ? "SVG paint" : capitalizeFirstLetter(type)}
+                    </span>
+                {/if}
+            {/each}
+        </div>
+    {/if}
     {#if allTypes[selectedElemIndex]}
         <div class="editor">
             {#each propsByType as choices}
                 {@const selectedName = choices.props[choices.selected]}
                 <div class="prop-section {choices.type}">
-                    <div class="prop-name">
-                        {#if choices.props.length > 1}
-                            <select
-                                onchange={async (e) => {
-                                    choices.selected = e.target.value;
-                                    await tick();
-                                }}
-                            >
-                                {#each choices.props as propName, i}
-                                    <option selected={i === choices.selected} value={i}>
-                                        {#if choices.type === "color"}
-                                            {capitalizeFirstLetter(propName)} color
-                                        {:else}
-                                            {pascalCaseToSentence(propName)}
-                                        {/if}
-                                    </option>
-                                {/each}
-                            </select>
-                        {:else}
-                            <span> {pascalCaseToSentence(selectedName)} </span>
-                        {/if}
-                        <span class="delete" onclick={() => deleteProp(selectedName)}>✕</span>
+                    <div class="prop-header">
+                        <div class="prop-name">
+                            {#if choices.props.length > 1}
+                                <div class="icon-selector">
+                                    {#each choices.props as propName, i}
+                                        <button
+                                            class="icon-btn"
+                                            class:selected={i === choices.selected}
+                                            title={choices.type === "color"
+                                                ? `${capitalizeFirstLetter(propName)} color`
+                                                : pascalCaseToSentence(propName)}
+                                            onclick={async () => {
+                                                choices.selected = i;
+                                                await tick();
+                                            }}
+                                        >
+                                            {@html propertyIcons[propName]}
+                                        </button>
+                                    {/each}
+                                </div>
+                                <span class="selected-label"
+                                    >{choices.type === "color"
+                                        ? `${capitalizeFirstLetter(selectedName)} color`
+                                        : pascalCaseToSentence(selectedName)}</span
+                                >
+                            {:else}
+                                <span>{pascalCaseToSentence(selectedName)}</span>
+                            {/if}
+                        </div>
+                        <button class="delete-btn" title="Reset to default" onclick={() => deleteProp(selectedName)}>
+                            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M4 4 L12 12 M12 4 L4 12" />
+                            </svg>
+                        </button>
                     </div>
                     {#if choices.type === "slider"}
                         <input