From 6b39d6aa43776eb86e1e66c357670d373350ae3d Mon Sep 17 00:00:00 2001
From: Jeremy Ruston <jeremy@jermolene.com>
Date: Wed, 8 Jan 2025 09:59:04 +0000
Subject: [PATCH] Fix editing colours that are not in 6 digit hex format

See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color#value
---
 core/modules/editor/engines/simple.js |  7 ++++++-
 core/modules/utils/dom/color-utils.js | 16 ++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/core/modules/editor/engines/simple.js b/core/modules/editor/engines/simple.js
index 809dc58ea..1f46505f7 100644
--- a/core/modules/editor/engines/simple.js
+++ b/core/modules/editor/engines/simple.js
@@ -31,7 +31,12 @@ function SimpleEngine(options) {
 	if(this.widget.editTag === "textarea") {
 		this.domNode.appendChild(this.widget.document.createTextNode(this.value));
 	} else {
-		this.domNode.value = this.value;
+		if(this.widget.editType === "color") {
+			// The <input type="color"> element requires a six digit hex value
+			this.domNode.value = $tw.utils.convertColorToCSSRGBString(this.value);
+		} else {
+			this.domNode.value = this.value;
+		}
 	}
 	// Set the attributes
 	if(this.widget.editType && this.widget.editTag !== "textarea") {
diff --git a/core/modules/utils/dom/color-utils.js b/core/modules/utils/dom/color-utils.js
index 475632418..5e4c481fb 100644
--- a/core/modules/utils/dom/color-utils.js
+++ b/core/modules/utils/dom/color-utils.js
@@ -41,4 +41,20 @@ exports.parseCSSColorObject = function(colourString) {
 	return c;
 };
 
+/*
+Convert a Color.js colour to a CSS RGB string suitable for use with the <input type="color"> element
+*/
+exports.convertColorToCSSRGBString = function(colourString) {
+	var c = exports.parseCSSColorObject(colourString);
+	if(c) {
+		var hex = c.toString({format: "hex"});
+		if(hex.length === 4) {
+			hex = "#" + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3];
+		}
+		return hex;
+	} else {
+		return null;
+	}
+};
+
 })();