[Plugin] Message Colors

src/plugins/messageColors/README.md

@@ -0,0 +1,15 @@
+### MessageColors
+
+Displays color codes like #cba6f7 or rgb(255,0,0) inside of messages
+
+#### Block Display
+
+![](https://github.com/Vendicated/Vencord/assets/68553709/c72c82a7-cec0-471f-a52a-2f28cee6ec00)
+
+#### Colored Text
+
+![](https://github.com/Vendicated/Vencord/assets/68553709/f1d545a5-aa54-42af-bdcf-8e8b30e9b91d)
+
+#### Colored Background
+
+![](https://github.com/Vendicated/Vencord/assets/68553709/032b0d50-bbcd-4572-a08a-b69593ed3322)

src/plugins/messageColors/constants.ts

@@ -0,0 +1,95 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { definePluginSettings } from "@api/Settings";
+import { OptionType } from "@utils/types";
+
+export const enum RenderType {
+    BLOCK,
+    FOREGROUND,
+    BACKGROUND,
+}
+
+export const enum BlockDisplayType {
+    LEFT,
+    RIGHT,
+    BOTH
+}
+
+export const settings = definePluginSettings({
+    renderType: {
+        type: OptionType.SELECT,
+        description: "How to render colors",
+        options: [
+            {
+                label: "Text color",
+                value: RenderType.FOREGROUND,
+                default: true,
+            },
+            {
+                label: "Block nearby",
+                value: RenderType.BLOCK,
+            },
+            {
+                label: "Background color",
+                value: RenderType.BACKGROUND
+            },
+        ]
+    },
+    enableShortHexCodes: {
+        type: OptionType.BOOLEAN,
+        description: "Enable 3 char hex-code like #39f",
+        default: true,
+        // Regex are created on the start, so without restart nothing would change
+        restartNeeded: true
+    },
+    blockView: {
+        type: OptionType.SELECT,
+        disabled: () => settings.store.renderType !== RenderType.BLOCK,
+        description: "Where to display colored block",
+        options: [
+            {
+                label: "Right side",
+                value: BlockDisplayType.RIGHT,
+                default: true
+            },
+            {
+                label: "Left side",
+                value: BlockDisplayType.LEFT
+            },
+            {
+                label: "Both sides",
+                value: BlockDisplayType.BOTH
+            }
+        ]
+    }
+});
+
+export const enum ColorType {
+    RGB,
+    RGBA,
+    HEX,
+    HSL
+}
+
+// It's sooo hard to read regex without this, it makes it at least somewhat bearable
+export const replaceRegexp = (reg: string) => {
+    const n = new RegExp(reg
+        // \c - 'comma'
+        // \v - 'value'
+        // \f - 'float'
+        .replaceAll("\\f", "[+-]?([0-9]*[.])?[0-9]+")
+        .replaceAll("\\c", "(?:,|\\s)")
+        .replaceAll("\\v", "\\s*?\\d+?\\s*?"), "g");
+
+    return n;
+};
+
+export const regex = [
+    { reg: /rgb\(\v\c\v\c\v\)/g, type: ColorType.RGB },
+    { reg: /rgba\(\v\c\v\c\v(\c|\/?)\s*\f\)/g, type: ColorType.RGBA },
+    { reg: /hsl\(\v°?\c\s*?\d+%?\s*?\c\s*?\d+%?\s*?\)/g, type: ColorType.HSL },
+].map(v => { v.reg = replaceRegexp(v.reg.source); return v; });

src/plugins/messageColors/index.tsx

@@ -0,0 +1,229 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import "./styles.css";
+
+import ErrorBoundary from "@components/ErrorBoundary";
+import { Devs } from "@utils/constants";
+import definePlugin, { StartAt } from "@utils/types";
+import { React } from "@webpack/common";
+import type { ReactElement } from "react";
+
+import { BlockDisplayType, ColorType, regex, RenderType, replaceRegexp, settings } from "./constants";
+
+
+interface ParsedColorInfo {
+    type: "color";
+    color: string;
+    colorType: ColorType;
+    text: string;
+}
+
+const requiredFirstCharacters = ["r", "h", "#"].flatMap(v => [v, v.toUpperCase()]);
+
+export default definePlugin({
+    authors: [Devs.hen],
+    name: "MessageColors",
+    description: "Displays color codes like #FF0042 inside of messages",
+    settings,
+    patches: [
+        // Create a new markdown rule, so it parses just like any other features
+        // Like bolding, spoilers, mentions, etc
+        {
+            find: "roleMention:{order:",
+            group: true,
+            replacement: {
+                match: /roleMention:\{order:(\i\.\i\.order)/,
+                replace: "color:$self.getColor($1),$&"
+            }
+        },
+        // Changes text md rule regex, so it stops right before hsl( | rgb(
+        // Without it discord will try to pass a string without those to color rule
+        {
+            find: ".defaultRules.text,match:",
+            group: true,
+            replacement: {
+                // $)/)
+                match: /\$\)\//,
+                // hsl(|rgb(|$&
+                replace: requiredFirstCharacters.join("|") + "|$&"
+            }
+        },
+        // Fix the issue with [#123](https://example.com) rendered as plain text
+        {
+            find: "parseInlineCodeChildContent:",
+            replacement: {
+                match: /parseInlineCodeChildContent:/,
+                replace: "isInsideOfLink:true,$&"
+            }
+        },
+        // Discord just requires it to be here
+        // Or it explodes (bad)
+        {
+            find: "Unknown markdown rule:",
+            group: true,
+            replacement: {
+                match: /roleMention:{type:/,
+                replace: "color:{type:\"inlineObject\"},$&",
+            }
+        },
+    ],
+    start() {
+        const amount = settings.store.enableShortHexCodes ? "{1,2}" : "{2}";
+        regex.push({
+            reg: new RegExp("#(?:[0-9a-fA-F]{3})" + amount, "g"),
+            type: ColorType.HEX
+        });
+    },
+    // Needed to load all regex before patching
+    startAt: StartAt.Init,
+    getColor(order: number) {
+        const source = regex.map(r => r.reg.source).join("|");
+        const matchAllRegExp = new RegExp(`^(${source})`, "i");
+
+        return {
+            order,
+            // Don't even try to match if the message chunk doesn't start with...
+            requiredFirstCharacters,
+            // Match -> Parse -> React
+            // Result of previous action is dropped as a first argument of the next one
+            match(content: string) {
+                return matchAllRegExp.exec(content);
+            },
+            parse(matchedContent: RegExpExecArray, _, parseProps: Record<string, any>):
+                ParsedColorInfo | ({ type: "text", content: string; }) {
+                // This check makes sure that it doesn't try to parse color
+                // When typing/editing message
+                //
+                // Discord doesn't know how to deal with color and crashes
+                if (!parseProps.messageId || parseProps.isInsideOfLink) return {
+                    type: "text",
+                    content: matchedContent[0]
+                };
+
+                const content = matchedContent[0];
+                try {
+                    const type = getColorType(content);
+
+                    return {
+                        type: "color",
+                        colorType: type,
+                        color: parseColor(content, type),
+                        text: content
+                    };
+                } catch (e) {
+                    console.error(e);
+                    return {
+                        type: "text",
+                        content: matchedContent[0]
+                    };
+                }
+            },
+            react: ErrorBoundary.wrap(({ text, colorType, color }: ParsedColorInfo) => {
+                if (settings.store.renderType === RenderType.FOREGROUND) {
+                    return <span style={{ color: color }}>{text}</span>;
+                }
+                const styles = {
+                    "--color": color
+                } as React.CSSProperties;
+
+                if (settings.store.renderType === RenderType.BACKGROUND) {
+                    const isDark = isColorDark(color, colorType);
+                    const className = `vc-color-bg ${!isDark ? "vc-color-bg-invert" : ""}`;
+                    return <span className={className} style={styles}>{text}</span>;
+                }
+
+                // Only block display left
+                const margin = "2px";
+
+                switch (settings.store.blockView) {
+                    case BlockDisplayType.LEFT:
+                        styles.marginRight = margin;
+                        return <><span className="vc-color-block" style={styles} />{text}</>;
+
+                    case BlockDisplayType.RIGHT:
+                        styles.marginLeft = margin;
+                        return <>{text}<span className="vc-color-block" style={styles} /></>;
+
+                    case BlockDisplayType.BOTH:
+                        styles.marginLeft = margin;
+                        styles.marginRight = margin;
+                        return <>
+                            <span className="vc-color-block" style={styles} />
+                            {text}
+                            <span className="vc-color-block" style={styles} />
+                        </>;
+                }
+            }, {
+                fallback: data => {
+                    const child = data.children as ReactElement<any>;
+                    return <>{child.props?.text}</>;
+                }
+            })
+        };
+    }
+});
+
+// https://en.wikipedia.org/wiki/Relative_luminance
+const calcRGBLightness = (r: number, g: number, b: number) => {
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+const isColorDark = (color: string, type: ColorType): boolean => {
+    const border = 115;
+    switch (type) {
+        case ColorType.RGBA:
+        case ColorType.RGB: {
+            const match = color.match(/\d+/g)!;
+            const lightness = calcRGBLightness(+match[0], +match[1], +match[2]);
+            return lightness < border;
+        }
+        case ColorType.HEX: {
+            color = color.substring(1);
+            if (color.length === 3) {
+                color = color.split("").flatMap(v => [v, v]).join("");
+            }
+
+            const rgb = parseInt(color, 16);
+            const r = (rgb >> 16) & 0xff;
+            const g = (rgb >> 8) & 0xff;
+            const b = (rgb >> 0) & 0xff;
+
+            const lightness = calcRGBLightness(r, g, b);
+            return lightness < border;
+        }
+        case ColorType.HSL: {
+            const match = color.match(/\d+/g)!;
+            const lightness = +match[2];
+            return lightness < (border / 255 * 100);
+        }
+    }
+};
+
+const getColorType = (color: string): ColorType => {
+    color = color.toLowerCase().trim();
+    if (color.startsWith("#")) return ColorType.HEX;
+    if (color.startsWith("hsl")) return ColorType.HSL;
+    if (color.startsWith("rgba")) return ColorType.RGBA;
+    if (color.startsWith("rgb")) return ColorType.RGB;
+
+    throw new Error(`Can't resolve color type of ${color}`);
+};
+
+function parseColor(str: string, type: ColorType): string {
+    str = str.toLowerCase().trim().replaceAll(/(\s|,)+/g, " ");
+    switch (type) {
+        case ColorType.RGB:
+            return str;
+        case ColorType.RGBA:
+            if (!str.includes("/"))
+                return str.replaceAll(replaceRegexp(/\f(?=\s*?\))/.source), "/$&");
+            return str;
+        case ColorType.HEX:
+            return str[0] === "#" ? str : `#${str}`;
+        case ColorType.HSL:
+            return str.replace("°", "");
+    }
+}

src/plugins/messageColors/styles.css

@@ -0,0 +1,21 @@
+.vc-color-block {
+    aspect-ratio: 1/1;
+    background: var(--color);
+    height: 1rem;
+    vertical-align: middle;
+    margin-bottom: 0.2rem;
+    border-radius: 4px;
+    display: inline-block;
+    user-select: none;
+    box-sizing: border-box;
+}
+
+.vc-color-bg {
+    background: var(--color);
+}
+
+/* Light color in dark theme */
+.theme-dark .vc-color-bg.vc-color-bg-invert,
+.theme-light .vc-color-bg:not(.vc-color-bg-invert) {
+    color: var(--background-secondary);
+}

src/utils/constants.ts

@@ -519,6 +519,10 @@ export const Devs = /* #__PURE__*/ Object.freeze({
         name: "verticalsync.",
         id: 1207087393929171095n
     },
+    hen: {
+        id: 279266228151779329n,
+        name: "Hen"
+    },
     nekohaxx: {
         name: "nekohaxx",
         id: 1176270221628153886n