Restore codeit-inline-color.js

Author: benhatsor

lib/plugins/codeit-inline-color.js

@@ -10,51 +10,6 @@
 	// a regex to validate hexadecimal colors
 	var HEX_COLOR = /^#?((?:[\da-f]){3,4}|(?:[\da-f]{2}){3,4})$/i;
 
-	/**
-	 * Parses the given hexadecimal representation and returns the parsed RGBA color.
-	 *
-	 * If the format of the given string is invalid, `undefined` will be returned.
-	 * Valid formats are: `RGB`, `RGBA`, `RRGGBB`, and `RRGGBBAA`.
-	 *
-	 * Hexadecimal colors are parsed because they are not fully supported by older browsers, so converting them to
-	 * `rgba` functions improves browser compatibility.
-	 *
-	 * @param {string} hex
-	 * @returns {string | undefined}
-	 */
-	function parseHexColor(hex) {
-		var match = HEX_COLOR.exec(hex);
-		if (!match) {
-			return undefined;
-		}
-		hex = match[1]; // removes the leading "#"
-
-		// the width and number of channels
-		var channelWidth = hex.length >= 6 ? 2 : 1;
-		var channelCount = hex.length / channelWidth;
-
-		// the scale used to normalize 4bit and 8bit values
-		var scale = channelWidth == 1 ? 1 / 15 : 1 / 255;
-
-		// normalized RGBA channels
-		var channels = [];
-		for (var i = 0; i < channelCount; i++) {
-			var int = parseInt(hex.substr(i * channelWidth, channelWidth), 16);
-			channels.push(int * scale);
-		}
-		if (channelCount == 3) {
-			channels.push(1); // add alpha of 100%
-		}
-
-		// output
-		var rgb = channels.slice(0, 3).map(function (x) {
-			return String(Math.round(x * 255));
-		}).join(',');
-		var alpha = String(Number(channels[3].toFixed(3))); // easy way to round 3 decimal places
-
-		return 'rgba(' + rgb + ',' + alpha + ')';
-	}
-
 	/**
 	 * Validates the given Color using the current browser's internal implementation.
 	 *
@@ -66,39 +21,66 @@
 		s.color = color;
 		return s.color ? color : undefined;
 	}
-
+	
+	var isMobile = navigator.userAgent.match('Mobile') ?? false;
+	
 	/**
-	 * An array of function which parse a given string representation of a color.
-	 *
-	 * These parser serve as validators and as a layer of compatibility to support color formats which the browser
-	 * might not support natively.
-	 *
-	 * @type {((value: string) => (string|undefined))[]}
+	 * Global exports
 	 */
-	var parsers = [
-		parseHexColor,
-		validateColor
-	];
+	Prism.plugins.inlineColor = {
+		
+		/**
+		 * Opens color picker for given element.
+		 */
+		openPicker: (el, event) => {
+			
+			// if on desktop
+			if (!isMobile) {
+				
+				// create eye dropper
+				var eyeDropper = new EyeDropper();
+				
+				// open eye dropper
+				eyeDropper.open()
+					.then(colorSelectionResult => {
+						
+						// hex color value (#RRGGBB)
+						var result = colorSelectionResult.sRGBHex;
+						
+						el.children[0].style.backgroundColor = result;
+						el.nextSibling.textContent = result;
+					
+						document.querySelector('cd-el').dispatchEvent(new Event('type'));
+						
+					}).catch(error => {});
+
+			}
+			
+		}
+		
+	};
 
 
 	Prism.hooks.add('wrap', function (env) {
 		if (env.type === 'color' || env.classes.indexOf('color') >= 0) {
 			var content = env.content;
-
-			// remove all HTML tags inside
-			var rawText = content.split(HTML_TAG).join('');
-
-			var color;
-			for (var i = 0, l = parsers.length; i < l && !color; i++) {
-				color = parsers[i](rawText);
+			
+			// if token dosen't already have an inline color element
+			if (!env.content.includes('inline-color-wrapper')) {
+				
+				// remove all HTML tags inside
+				var rawText = content.split(HTML_TAG).join('');
+
+				var color = validateColor(rawText);
+
+				if (!color) {
+					return;
+				}
+				
+				var previewElement = '<span class="inline-color-wrapper" onclick="Prism.plugins.inlineColor.openPicker(this, event)" aria-hidden="true" contenteditable="false"><span class="inline-color" style="background-color:' + color + ';"></span></span>';
+				env.content = previewElement + content;
+				
 			}
-
-			if (!color) {
-				return;
-			}
-
-			var previewElement = '<span class="inline-color-wrapper"><span class="inline-color" style="background-color:' + color + ';"></span></span>';
-			env.content = previewElement + content;
 		}
 	});