inline-style-editor 1.5.4 → 1.5.6

package/index.d.ts

@@ -27,14 +27,16 @@ export interface SliderDefinition {
 
 export interface InlineStyleEditorOptions {
     onStyleChanged?: (
-        target: HTMLElement,
+        target: HTMLElement | SVGElement,
         eventType: "inline" | CSSStyleRule,
         cssProp: string,
         value: string,
     ) => void;
-    getElems: (el: HTMLElement) => void;
-    customProps: Record<string, ColorDefinition | SelectDefinition | SliderDefinition>;
-    cssRuleFilter: (el: HTMLElement, cssSelector: string) => boolean;
-    getCssRuleName: (ruleName: string, el: HTMLElement) => string;
-    inlineDeletable: (el: HTMLElement) => boolean,
+    getElems?: (el: HTMLElement | SVGElement) => [HTMLElement | SVGElement, string][];
+    listenOnClick?: boolean;
+    customProps?: Record<string, ColorDefinition | SelectDefinition | SliderDefinition>;
+    cssRuleFilter?: (el: HTMLElement | SVGElement, cssSelector: string) => boolean;
+    getCssRuleName?: (ruleName: string, el: HTMLElement | SVGElement) => string;
+    inlineDeletable?: (el: HTMLElement | SVGElement) => boolean;
+    ignoredProps?: string[];
 }

package/package.json

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

package/src/components/InlineStyleEditor.svelte

@@ -42,7 +42,7 @@
         "stroke-width": {
             type: "slider",
             min: 0,
-            max: 20,
+            max: 5,
             step: 0.5,
             suffix: "px",
         },
@@ -173,6 +173,10 @@
         const allProps = { ...cssPropByType, ...customProps };
         const _allCurrentPropDefs = pick(allProps, propByType[curType]);
         ignoredProps.forEach((prop) => delete _allCurrentPropDefs[prop]);
+        const elemTagName = currentElement?.tagName?.toLowerCase();
+        if (curType === typeText && (elemTagName === "text" || elemTagName === "tspan")) {
+            delete _allCurrentPropDefs["color"];
+        }
         Object.keys(_allCurrentPropDefs).forEach((key) => {
             const propSelectType = _allCurrentPropDefs[key].type;
             let retrieveType = "number";
@@ -199,7 +203,6 @@
                 }
             }
         });
-        console.log(_allCurrentPropDefs);
         const _propsByType = Object.entries(_allCurrentPropDefs)
             .reduce((byType, [propName, selectorDef]) => {
                 const selectorType = selectorDef.type;
@@ -253,7 +256,10 @@
         const sheets = document.styleSheets;
         return elems.reduce((matchedRulesByElem, elemDef) => {
             const el = elemDef[0];
-            const matchedRules = ["inline"];
+            const matchedRules = [];
+            if (cssRuleFilter === null || cssRuleFilter(el, "inline")) {
+                matchedRules.push("inline");
+            }
             for (let i in sheets) {
                 try {
                     const rules = sheets[i].cssRules;
@@ -342,6 +348,7 @@
         allTypes = getEditableTypes(targetsToSearch);
         hasDisplayedCustom = false;
         allRules = getMatchedCSSRules(targetsToSearch);
+        if (allRules.every((rules) => rules.length === 0)) return;
         for (let def of Object.values(customProps)) {
             if (def.getter(el) !== null) {
                 hasDisplayedCustom = true;
@@ -583,11 +590,9 @@
         <div class="select-tab">
             <b> Applied to: </b>
             {#if nbChars(getRuleNamesTransformed(allRules[selectedElemIndex])) > 30}
-                <select onchange={(e) => selectRule(e.target.value)}>
+                <select value={selectedRuleIndex} onchange={(e) => selectRule(e.target.value)}>
                     {#each getRuleNames(allRules[selectedElemIndex]) as ruleName, ruleIndex}
-                        <option selected={selectedRuleIndex === ruleIndex} value={ruleIndex}
-                            >{getCssRuleName(ruleName, clickedElement)}</option
-                        >
+                        <option value={ruleIndex}>{getCssRuleName(ruleName, clickedElement)}</option>
                     {/each}
                 </select>
             {:else}