feat(color-picker): add format dropdown, cancel button, and cancellat… (#2240)

Author: deadlyjack

src/components/settingsPage.js

@@ -574,11 +574,18 @@ async function resolveItemInteraction(item, $target) {
 		}
 
 		if (selectColor) {
-			const color = await colorPicker(value);
-			return {
-				shouldUpdateValue: true,
-				value: color,
-			};
+			try {
+				const color = await colorPicker(value);
+				return {
+					shouldUpdateValue: true,
+					value: color,
+				};
+			} catch (_) {
+				return {
+					shouldUpdateValue: false,
+					shouldCallCallback: false,
+				};
+			}
 		}
 
 		if (link) {

src/dialogs/color.js

@@ -13,14 +13,67 @@ let lastPicked = localStorage.__picker_last_picked || "#fff";
 function color(defaultColor, onhide) {
 	defaultColor = defaultColor || lastPicked;
 	let type = checkColorType(defaultColor) || "hex";
-	return new Promise((resolve) => {
+	return new Promise((resolve, reject) => {
 		const colorModes = ["hsl", "hex", "rgb"];
 		let mode = colorModes.indexOf(type);
 		let color = null;
 
 		const parent = tag("div", {
 			className: "message color-picker",
 		});
+
+		const formatToggle = tag("span", {
+			className: "format-toggle",
+			onclick: function (e) {
+				e.preventDefault();
+				e.stopPropagation();
+				formatPopup.classList.toggle("visible");
+			},
+			children: [
+				tag("span", {
+					className: "format-toggle-text",
+					textContent: type.toUpperCase(),
+				}),
+				tag("span", {
+					className: "icon keyboard_arrow_down",
+				}),
+			],
+		});
+
+		const formatPopup = tag("div", {
+			className: "format-popup",
+			children: [
+				tag("div", {
+					className: "format-popup-backdrop",
+					onclick: function () {
+						formatPopup.classList.remove("visible");
+					},
+				}),
+				tag("div", {
+					className: "format-popup-body",
+					children: colorModes.map((m) =>
+						tag("span", {
+							className: `format-option${m === type ? " active" : ""}`,
+							textContent: m.toUpperCase(),
+							onclick: function () {
+								mode = colorModes.indexOf(m);
+								type = m;
+								formatToggle.get(".format-toggle-text").textContent =
+									m.toUpperCase();
+								formatPopup.querySelector(".active").classList.remove("active");
+								this.classList.add("active");
+								formatPopup.classList.remove("visible");
+								picker.setOptions({
+									color: color || defaultColor,
+									editorFormat: type,
+								});
+							},
+						}),
+					),
+				}),
+			],
+		});
+
 		const okBtn = tag("button", {
 			textContent: strings.ok,
 			onclick: function () {
@@ -30,39 +83,39 @@ function color(defaultColor, onhide) {
 				resolve(color);
 			},
 		});
-		const toggleMode = tag("button", {
-			textContent: type,
-			onclick: function (e) {
-				++mode;
-				if (mode >= colorModes.length) mode = 0;
-				type = colorModes[mode];
-				this.textContent = type;
-				picker.setOptions({
-					color,
-					editorFormat: type,
-				});
-				e.preventDefault();
-				e.stopPropagation();
-				e.stopImmediatePropagation();
+		const cancelBtn = tag("button", {
+			textContent: strings.cancel,
+			onclick: function () {
+				hide();
+				reject(new Error("cancelled"));
 			},
 		});
 		const box = tag("div", {
 			className: "prompt box",
 			children: [
-				tag("strong", {
+				tag("div", {
 					className: "title",
-					textContent: strings["choose color"],
+					children: [
+						tag("span", {
+							className: "title-text",
+							textContent: strings["choose color"],
+						}),
+						formatToggle,
+					],
 				}),
 				parent,
 				tag("div", {
 					className: "button-container",
-					children: [toggleMode, okBtn],
+					children: [cancelBtn, okBtn],
 				}),
 			],
 		});
 		const mask = tag("span", {
 			className: "mask",
-			onclick: hide,
+			onclick: function () {
+				hide();
+				reject(new Error("cancelled"));
+			},
 		});
 		const picker = new Picker({
 			parent,
@@ -75,10 +128,14 @@ function color(defaultColor, onhide) {
 		});
 
 		picker.show();
+		parent.append(formatPopup);
 
 		actionStack.push({
 			id: "box",
-			action: hideSelect,
+			action() {
+				hide();
+				reject(new Error("cancelled"));
+			},
 		});
 
 		document.body.append(box, mask);

src/dialogs/style.scss

@@ -139,16 +139,95 @@
       min-height: 40px;
       margin: 5px 10px 0 10px;
     }
+
+    .title-text {
+      flex: 1;
+    }
+
+    .format-toggle {
+      flex-shrink: 0;
+      display: inline-flex;
+      align-items: center;
+      font-size: 0.55em;
+      font-weight: 600;
+      padding: 2px 4px 2px 6px;
+      border: solid 1px var(--popup-border-color, #ccc);
+      border-radius: 3px;
+      color: var(--popup-text-color, #333);
+      cursor: pointer;
+      user-select: none;
+      letter-spacing: 0.5px;
+      gap: 1px;
+
+      .icon.keyboard_arrow_down {
+        font-size: 1.3em;
+        opacity: 0.5;
+        transition: opacity 0.15s;
+      }
+    }
   }
 
   .message {
     overflow: auto;
     font-size: 0.9em;
 
     &.color-picker {
+      position: relative;
+
       .button-container {
         margin: 0;
       }
+
+      .format-popup {
+        position: absolute;
+        inset: 0;
+        display: none;
+        align-items: center;
+        justify-content: center;
+        z-index: 2;
+
+        &.visible {
+          display: flex;
+        }
+
+        .format-popup-backdrop {
+          position: absolute;
+          inset: 0;
+          background: rgba(0, 0, 0, 0.5);
+        }
+
+        .format-popup-body {
+          position: relative;
+          display: flex;
+          gap: 4px;
+          padding: 6px;
+          border-radius: 8px;
+          background: var(--popup-background-color, #fff);
+          box-shadow: 0 4px 16px var(--box-shadow-color, rgba(0, 0, 0, 0.15));
+
+          .format-option {
+            padding: 6px 14px;
+            font-size: 12px;
+            font-weight: 600;
+            border-radius: 5px;
+            cursor: pointer;
+            user-select: none;
+            color: var(--popup-text-color, #333);
+            opacity: 0.5;
+            transition: opacity 0.15s, background-color 0.15s, color 0.15s;
+
+            &:hover {
+              opacity: 0.8;
+            }
+
+            &.active {
+              opacity: 1;
+              background-color: var(--button-background-color, #39f);
+              color: var(--button-text-color, #fff);
+            }
+          }
+        }
+      }
     }
 
     .picker_wrapper {

src/lib/commands.js

@@ -458,11 +458,16 @@ export default {
 
 		editor.contentDOM.blur();
 		const wasFocused = editorManager.activeFile.focused;
-		const res = await color(defaultColor, () => {
-			if (wasFocused) {
-				editor.focus();
-			}
-		});
+		let res;
+		try {
+			res = await color(defaultColor, () => {
+				if (wasFocused) {
+					editor.focus();
+				}
+			});
+		} catch (_) {
+			return;
+		}
 
 		if (range) {
 			editor.dispatch({

src/pages/customTheme/customTheme.js

@@ -97,9 +97,13 @@ export default function CustomThemeInclude() {
 								className="list-item"
 								tabindex={0}
 								onclick={async (e) => {
-									const newColor = await color(customTheme[key]);
-									customTheme[key] = newColor;
-									e.target.get(".icon").style.color = newColor;
+									try {
+										const newColor = await color(customTheme[key]);
+										customTheme[key] = newColor;
+										e.target.get(".icon").style.color = newColor;
+									} catch (_) {
+										/* cancelled */
+									}
 								}}
 							>
 								<span