inline-style-editor 1.3.1 → 1.3.2

package/dist/inline-style-editor.mjs

@@ -1984,23 +1984,18 @@ class ColorPicker extends SvelteComponent {
 
 var ColorPicker$1 = ColorPicker;
 
-const fontCheck = new Set([
-    // Windows 10
-    'Arial', 'Arial Black', 'Bahnschrift', 'Calibri', 'Cambria', 'Cambria Math', 'Candara', 'Comic Sans MS', 'Consolas', 'Constantia', 'Corbel', 'Courier New', 'Ebrima', 'Franklin Gothic Medium', 'Gabriola', 'Gadugi', 'Georgia', 'HoloLens MDL2 Assets', 'Impact', 'Ink Free', 'Javanese Text', 'Leelawadee UI', 'Lucida Console', 'Lucida Sans Unicode', 'Malgun Gothic', 'Marlett', 'Microsoft Himalaya', 'Microsoft JhengHei', 'Microsoft New Tai Lue', 'Microsoft PhagsPa', 'Microsoft Sans Serif', 'Microsoft Tai Le', 'Microsoft YaHei', 'Microsoft Yi Baiti', 'MingLiU-ExtB', 'Mongolian Baiti', 'MS Gothic', 'MV Boli', 'Myanmar Text', 'Nirmala UI', 'Palatino Linotype', 'Segoe MDL2 Assets', 'Segoe Print', 'Segoe Script', 'Segoe UI', 'Segoe UI Historic', 'Segoe UI Emoji', 'Segoe UI Symbol', 'SimSun', 'Sitka', 'Sylfaen', 'Symbol', 'Tahoma', 'Times New Roman', 'Trebuchet MS', 'Verdana', 'Webdings', 'Wingdings', 'Yu Gothic',
-    // macOS
-    'American Typewriter', 'Andale Mono', 'Arial', 'Arial Black', 'Arial Narrow', 'Arial Rounded MT Bold', 'Arial Unicode MS', 'Avenir', 'Avenir Next', 'Avenir Next Condensed', 'Baskerville', 'Big Caslon', 'Bodoni 72', 'Bodoni 72 Oldstyle', 'Bodoni 72 Smallcaps', 'Bradley Hand', 'Brush Script MT', 'Chalkboard', 'Chalkboard SE', 'Chalkduster', 'Charter', 'Cochin', 'Comic Sans MS', 'Copperplate', 'Courier', 'Courier New', 'Didot', 'DIN Alternate', 'DIN Condensed', 'Futura', 'Geneva', 'Georgia', 'Gill Sans', 'Helvetica', 'Helvetica Neue', 'Herculanum', 'Hoefler Text', 'Impact', 'Lucida Grande', 'Luminari', 'Marker Felt', 'Menlo', 'Microsoft Sans Serif', 'Monaco', 'Noteworthy', 'Optima', 'Palatino', 'Papyrus', 'Phosphate', 'Rockwell', 'Savoye LET', 'SignPainter', 'Skia', 'Snell Roundhand', 'Tahoma', 'Times', 'Times New Roman', 'Trattatello', 'Trebuchet MS', 'Verdana', 'Zapfino',
-].sort());
+const detector = new FontDetector();
 
 function getFonts() {
-    const availableFonts = new Set();
+    // const availableFonts = new Set();
 
-    for (const font of fontCheck.values()) {
-        if (document.fonts.check(`12px "${font}"`)) {
-            availableFonts.add(font);
-        }
-    }
+    // for (const font of fontCheck.values()) {
+    //     if (document.fonts.check(`12px "${font}"`)) {
+    //         availableFonts.add(font);
+    //     }
+    // }
 
-    return [...listFonts(), ...availableFonts.values()]
+    return [...listFonts(), ...detector.availableFonts]
 }
 
 function listFonts() {
@@ -2023,6 +2018,72 @@ function listFonts() {
     return [...new Set(arr)];
 }
 
+// https://stackoverflow.com/a/3368855
+class FontDetector {
+    constructor() {
+        this.fontsToCheck = new Set([
+            'Arial', 'Arial Black', 'Bahnschrift', 'Calibri', 'Cambria', 'Cambria Math', 'Candara', 'Comic Sans MS', 'Consolas', 'Constantia', 'Corbel', 'Courier New', 'Ebrima', 'Franklin Gothic Medium', 'Gabriola', 'Gadugi', 'Georgia', 'HoloLens MDL2 Assets', 'Impact', 'Ink Free', 'Javanese Text', 'Leelawadee UI', 'Lucida Console', 'Lucida Sans Unicode', 'Malgun Gothic', 'Marlett', 'Microsoft Himalaya', 'Microsoft JhengHei', 'Microsoft New Tai Lue', 'Microsoft PhagsPa', 'Microsoft Sans Serif', 'Microsoft Tai Le', 'Microsoft YaHei', 'Microsoft Yi Baiti', 'MingLiU-ExtB', 'Mongolian Baiti', 'MS Gothic', 'MV Boli', 'Myanmar Text', 'Nirmala UI', 'Palatino Linotype', 'Segoe MDL2 Assets', 'Segoe Print', 'Segoe Script', 'Segoe UI', 'Segoe UI Historic', 'Segoe UI Emoji', 'Segoe UI Symbol', 'SimSun', 'Sitka', 'Sylfaen', 'Symbol', 'Tahoma', 'Times New Roman', 'Trebuchet MS', 'Verdana', 'Webdings', 'Wingdings', 'Yu Gothic',
+            'American Typewriter', 'Andale Mono', 'Arial', 'Arial Black', 'Arial Narrow', 'Arial Rounded MT Bold', 'Arial Unicode MS', 'Avenir', 'Avenir Next', 'Avenir Next Condensed', 'Baskerville', 'Big Caslon', 'Bodoni 72', 'Bodoni 72 Oldstyle', 'Bodoni 72 Smallcaps', 'Bradley Hand', 'Brush Script MT', 'Chalkboard', 'Chalkboard SE', 'Chalkduster', 'Charter', 'Cochin', 'Comic Sans MS', 'Copperplate', 'Courier', 'Courier New', 'Didot', 'DIN Alternate', 'DIN Condensed', 'Futura', 'Geneva', 'Georgia', 'Gill Sans', 'Helvetica', 'Helvetica Neue', 'Herculanum', 'Hoefler Text', 'Impact', 'Lucida Grande', 'Luminari', 'Marker Felt', 'Menlo', 'Microsoft Sans Serif', 'Monaco', 'Noteworthy', 'Optima', 'Palatino', 'Papyrus', 'Phosphate', 'Rockwell', 'Savoye LET', 'SignPainter', 'Skia', 'Snell Roundhand', 'Tahoma', 'Times', 'Times New Roman', 'Trattatello', 'Trebuchet MS', 'Verdana', 'Zapfino',
+            'Comic Sans MS', 'Comic Sans', 'Apple Chancery', 'Bradley Hand', 'Brush Script MT', 'Brush Script Std', 'Snell Roundhand', 'URW Chancery L'
+        ].sort());
+        this.init();
+    }
+    
+    init() {
+        this.defaultWidth = {};
+        this.defaultHeight = {};
+        // a font will be compared against all the three default fonts.
+        // and if it doesn't match all 3 then that font is not available.
+        this.baseFonts = ['monospace', 'sans-serif', 'serif', 'cursive'];
+    
+        // we use m or w because these two characters take up the maximum width.
+        // And we use a LLi so that the same matching fonts can get separated
+        const testString = "mmmmmmmmmmlli";
+    
+        // we test using 72px font size, we may use any size. I guess larger the better.
+        const testSize = '72px';
+    
+        this.container = document.getElementsByTagName("body")[0];
+    
+        // create a SPAN in the document to get the width of the text we use to test
+        this.spanTester = document.createElement("span");
+        this.spanTester.style.fontSize = testSize;
+        this.spanTester.innerHTML = testString;
+        this.baseFonts.forEach(font => {
+            //get the default width for the three base fonts
+            this.spanTester.style.fontFamily = font;
+            this.container.appendChild(this.spanTester);
+            this.defaultWidth[font] = this.spanTester.offsetWidth; // width for the default font
+            this.defaultHeight[font] = this.spanTester.offsetHeight; // height for the default font
+            this.container.removeChild(this.spanTester);
+        });
+        this.detectFonts();
+    }
+
+    fontExists(fontName) {
+        let detected = false;
+        for (const font of this.baseFonts) {
+            this.spanTester.style.fontFamily = fontName + ',' + font; // name of the font along with the base font for fallback.
+            this.container.appendChild(this.spanTester);
+            const matched = (this.spanTester.offsetWidth != this.defaultWidth[font] || this.spanTester.offsetHeight != this.defaultHeight[font]);
+            this.container.removeChild(this.spanTester);
+            detected = detected || matched;
+        }
+        return detected;
+    }
+
+    detectFonts() {
+        this.availableFonts = [];
+        for (const font of this.fontsToCheck.values()) {
+            if (this.fontExists(font)) {
+                this.availableFonts.push(font);
+            }
+        }
+        this.availableFonts.sort();
+    }
+
+}
+
 /* src/components/InlineStyleEditor.svelte generated by Svelte v3.49.0 */
 
 function get_each_context(ctx, list, i) {
@@ -2077,7 +2138,7 @@ function get_each_context_5(ctx, list, i) {
 	return child_ctx;
 }
 
-// (416:4) {#if targetsToSearch.length > 1}
+// (415:4) {#if targetsToSearch.length > 1}
 function create_if_block_9(ctx) {
 	let div;
 	let b;
@@ -2142,7 +2203,7 @@ function create_if_block_9(ctx) {
 	};
 }
 
-// (419:8) {#each targetsToSearch as [_, name], elemIndex}
+// (418:8) {#each targetsToSearch as [_, name], elemIndex}
 function create_each_block_5(ctx) {
 	let span;
 	let t0_value = /*name*/ ctx[82] + "";
@@ -2188,7 +2249,7 @@ function create_each_block_5(ctx) {
 	};
 }
 
-// (428:8) {#each getRuleNames(allRules[selectedElemIndex]) as ruleName, ruleIndex}
+// (427:8) {#each getRuleNames(allRules[selectedElemIndex]) as ruleName, ruleIndex}
 function create_each_block_4(ctx) {
 	let span;
 	let t_value = /*ruleName*/ ctx[78] + "";
@@ -2237,7 +2298,7 @@ function create_each_block_4(ctx) {
 	};
 }
 
-// (439:12) {#if type !== 'custom' || (currentRule === 'inline' && type === 'custom' && hasDisplayedCustom )}
+// (438:12) {#if type !== 'custom' || (currentRule === 'inline' && type === 'custom' && hasDisplayedCustom )}
 function create_if_block_8(ctx) {
 	let span;
 	let t0_value = /*type*/ ctx[75] + "";
@@ -2283,7 +2344,7 @@ function create_if_block_8(ctx) {
 	};
 }
 
-// (437:8) {#each allTypes[selectedElemIndex] || [] as type, typeIndex}
+// (436:8) {#each allTypes[selectedElemIndex] || [] as type, typeIndex}
 function create_each_block_3(ctx) {
 	let if_block_anchor;
 	let if_block = (/*type*/ ctx[75] !== 'custom' || /*currentRule*/ ctx[17] === 'inline' && /*type*/ ctx[75] === 'custom' && /*hasDisplayedCustom*/ ctx[16]) && create_if_block_8(ctx);
@@ -2318,7 +2379,7 @@ function create_each_block_3(ctx) {
 	};
 }
 
-// (444:4) {#if allTypes[selectedElemIndex]}
+// (443:4) {#if allTypes[selectedElemIndex]}
 function create_if_block(ctx) {
 	let div;
 	let t0;
@@ -2449,7 +2510,7 @@ function create_if_block(ctx) {
 	};
 }
 
-// (455:16) {:else}
+// (454:16) {:else}
 function create_else_block(ctx) {
 	let span;
 	let t_value = /*selectedName*/ ctx[66] + "";
@@ -2473,7 +2534,7 @@ function create_else_block(ctx) {
 	};
 }
 
-// (449:16) {#if choices.props.length > 1}
+// (448:16) {#if choices.props.length > 1}
 function create_if_block_7(ctx) {
 	let div;
 	let select;
@@ -2547,7 +2608,7 @@ function create_if_block_7(ctx) {
 	};
 }
 
-// (451:24) {#each choices.props as propName, i}
+// (450:24) {#each choices.props as propName, i}
 function create_each_block_2(ctx) {
 	let option;
 	let t0_value = /*propName*/ ctx[72] + "";
@@ -2582,7 +2643,7 @@ function create_each_block_2(ctx) {
 	};
 }
 
-// (478:50) 
+// (477:50) 
 function create_if_block_6(ctx) {
 	let colorpicker;
 	let current;
@@ -2628,7 +2689,7 @@ function create_if_block_6(ctx) {
 	};
 }
 
-// (468:51) 
+// (467:51) 
 function create_if_block_4(ctx) {
 	let select;
 	let show_if = !/*choices*/ ctx[65].includes(/*allCurrentPropDefs*/ ctx[14][/*selectedName*/ ctx[66]].value);
@@ -2721,7 +2782,7 @@ function create_if_block_4(ctx) {
 	};
 }
 
-// (459:16) {#if choices.type === 'slider'}
+// (458:16) {#if choices.type === 'slider'}
 function create_if_block_3(ctx) {
 	let input;
 	let input_min_value;
@@ -2796,7 +2857,7 @@ function create_if_block_3(ctx) {
 	};
 }
 
-// (471:24) {#if !choices.includes(allCurrentPropDefs[selectedName].value)}
+// (470:24) {#if !choices.includes(allCurrentPropDefs[selectedName].value)}
 function create_if_block_5(ctx) {
 	let option;
 
@@ -2817,7 +2878,7 @@ function create_if_block_5(ctx) {
 	};
 }
 
-// (474:24) {#each choices as choice}
+// (473:24) {#each choices as choice}
 function create_each_block_1(ctx) {
 	let option;
 	let t_value = /*choice*/ ctx[69] + "";
@@ -2855,7 +2916,7 @@ function create_each_block_1(ctx) {
 	};
 }
 
-// (446:8) {#each propsByType as choices}
+// (445:8) {#each propsByType as choices}
 function create_each_block(ctx) {
 	let div;
 	let t0;
@@ -3001,7 +3062,7 @@ function create_each_block(ctx) {
 	};
 }
 
-// (486:8) {#if currentRule === 'inline' && bringableToFront[selectedElemIndex] !== null}
+// (485:8) {#if currentRule === 'inline' && bringableToFront[selectedElemIndex] !== null}
 function create_if_block_2(ctx) {
 	let div;
 	let mounted;
@@ -3035,7 +3096,7 @@ function create_if_block_2(ctx) {
 	};
 }
 
-// (491:8) {#if currentRule === 'inline' && inlineDeletable(currentElement)}
+// (490:8) {#if currentRule === 'inline' && inlineDeletable(currentElement)}
 function create_if_block_1(ctx) {
 	let div;
 	let mounted;
@@ -3615,7 +3676,7 @@ function instance($$self, $$props, $$invalidate) {
 						}
 					} catch(err) {
 						if (!warningDisplayed.has(i)) {
-							console.log('Style editor: Not able to access', sheets[i].ownerNode, 'sheet. Try CORS loading the sheet if you want to edit it.');
+							console.warn('Style editor: Not able to access', sheets[i].ownerNode, 'sheet. Try CORS loading the sheet if you want to edit it.');
 							warningDisplayed.add(i);
 						}
 					}
@@ -3654,7 +3715,6 @@ function instance($$self, $$props, $$invalidate) {
 					types.push(typeBackground);
 				}
 
-				console.log(types);
 				if (bringable) bringableToFront.push(true); else bringableToFront.push(null);
 				typesByElem.push(types);
 				return typesByElem;