Allow more color formats in !post_embed / !edit_embed -color

backend/src/plugins/Post/commands/EditEmbedCmd.ts

@@ -4,6 +4,8 @@ import { sendErrorMessage, sendSuccessMessage } from "src/pluginUtils";
 import { Embed } from "eris";
 import { trimLines } from "src/utils";
 import { formatContent } from "../util/formatContent";
+import { parseColor } from "../../../utils/parseColor";
+import { rgbToInt } from "../../../utils/rgbToInt";
 
 const COLOR_MATCH_REGEX = /^#?([0-9a-f]{6})$/;
 
@@ -31,13 +33,13 @@ export const EditEmbedCmd = postCmd({
 
     let color = null;
     if (args.color) {
-      const colorMatch = args.color.match(COLOR_MATCH_REGEX);
-      if (!colorMatch) {
-        sendErrorMessage(pluginData, msg.channel, "Invalid color specified, use hex colors");
+      const colorRgb = parseColor(args.color);
+      if (colorRgb) {
+        color = rgbToInt(colorRgb);
+      } else {
+        sendErrorMessage(pluginData, msg.channel, "Invalid color specified");
         return;
       }
-
-      color = parseInt(colorMatch[1], 16);
     }
 
     const embed: Embed = savedMessage.data.embeds[0] as Embed;

backend/src/plugins/Post/commands/PostEmbedCmd.ts

@@ -5,8 +5,8 @@ import { sendErrorMessage } from "src/pluginUtils";
 import { Embed } from "eris";
 import { isValidEmbed, trimLines } from "src/utils";
 import { formatContent } from "../util/formatContent";
-
-const COLOR_MATCH_REGEX = /^#?([0-9a-f]{6})$/;
+import { parseColor } from "../../../utils/parseColor";
+import { rgbToInt } from "../../../utils/rgbToInt";
 
 export const PostEmbedCmd = postCmd({
   trigger: "post_embed",
@@ -37,13 +37,13 @@ export const PostEmbedCmd = postCmd({
 
     let color = null;
     if (args.color) {
-      const colorMatch = args.color.toLowerCase().match(COLOR_MATCH_REGEX);
-      if (!colorMatch) {
-        sendErrorMessage(pluginData, msg.channel, "Invalid color specified, use hex colors");
+      const colorRgb = parseColor(args.color);
+      if (colorRgb) {
+        color = rgbToInt(colorRgb);
+      } else {
+        sendErrorMessage(pluginData, msg.channel, "Invalid color specified");
         return;
       }
-
-      color = parseInt(colorMatch[1], 16);
     }
 
     let embed: Embed = { type: "rich" };

backend/src/utils/parseColor.ts

@@ -0,0 +1,39 @@
+import _parseColor from "parse-color";
+
+// Accepts 100,100,100 and 100 100 100
+const isRgb = /^(\d{1,3})\D+(\d{1,3})\D+(\d{1,3})$/;
+
+const isPartialHex = /^([0-9a-f]{3}|[0-9a-f]{6})$/i;
+
+/**
+ * Parses a color from the input string. The following formats are accepted:
+ * - any CSS color format (hex, rgb(), color names, etc.)
+ * - rrr, ggg, bbb
+ * - rrr ggg bbb
+ * @return Parsed color as `[r, g, b]` or `null` if no color could be parsed
+ */
+export function parseColor(input: string): null | [number, number, number] {
+  const rgbMatch = input.match(isRgb);
+  if (rgbMatch) {
+    const r = parseInt(rgbMatch[1], 10);
+    const g = parseInt(rgbMatch[2], 10);
+    const b = parseInt(rgbMatch[3], 10);
+
+    if (r > 255 || g > 255 || b > 255) {
+      return null;
+    }
+
+    return [r, g, b];
+  }
+
+  if (input.match(isPartialHex)) {
+    input = `#${input}`;
+  }
+
+  const cssColorMatch = _parseColor(input);
+  if (cssColorMatch.rgb) {
+    return cssColorMatch.rgb;
+  }
+
+  return null;
+}

backend/src/utils/rgbToInt.ts

@@ -0,0 +1,3 @@
+export function rgbToInt(rgb: [number, number, number]) {
+  return (rgb[0] << 16) + (rgb[1] << 8) + rgb[2];
+}