feat(CharacterCounter): Add Selected Text Option

src/plugins/characterCounter/index.tsx

@@ -11,7 +11,8 @@ import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
 import { classNameFactory } from "@utils/css";
 import definePlugin, { OptionType } from "@utils/types";
-import { UserStore } from "@webpack/common";
+import { useEffect, UserStore, useState } from "@webpack/common";
+import EventEmitter from "events";
 
 const cl = classNameFactory("vc-charCounter-");
 
@@ -20,7 +21,12 @@ const settings = definePluginSettings({
         type: OptionType.BOOLEAN,
         description: "Enable yellow/red colouring as you get closer to the character limit",
         default: true,
-    }
+    },
+    selectedText: {
+        type: OptionType.BOOLEAN,
+        description: "Show the character count of your current text selection",
+        default: false,
+    },
 });
 
 function getCounterColor(percentage: number) {
@@ -34,16 +40,16 @@ function getCounterColor(percentage: number) {
 export default definePlugin({
     name: "CharacterCounter",
     description: "Adds a character counter to the chat input",
-    authors: [Devs.thororen],
+    authors: [Devs.thororen, Devs.creations],
     tags: ["Utility"],
     settings,
     patches: [
         {
             find: ".CREATE_FORUM_POST||",
             replacement: [
                 {
-                    match: /(?<=textValue:(\i),editorHeight:\i,channelId:\i\.id\}\)),\i/,
-                    replace: ",$self.renderCharCounter({text:$1})"
+                    match: /(?<=(\i)\.emit\("submit-failure".*?textValue:(\i),editorHeight:\i,channelId:\i\.id\}\)),\i/,
+                    replace: ",$self.renderCharCounter({text:$2,eventEmitter:$1})"
                 }
             ]
         },
@@ -56,16 +62,37 @@ export default definePlugin({
         }
     ],
 
-    renderCharCounter: ErrorBoundary.wrap(({ text }: { text: string; }) => {
+    renderCharCounter: ErrorBoundary.wrap(({ text, eventEmitter }: { text: string; eventEmitter: EventEmitter; }) => {
         if (!text.length) return null;
 
+        const [selectedCount, setSelectedCount] = useState(0);
+        const showSelected = selectedCount > 0;
         const premiumType = UserStore.getCurrentUser().premiumType ?? 0;
         const charMax = premiumType === 2 ? 4000 : 2000;
-
         const color = getCounterColor((text.length / charMax) * 100);
 
+        useEffect(() => {
+            function onSelectionChange() {
+                const selection = window.getSelection();
+                if (!selection || selection.isCollapsed) {
+                    setSelectedCount(0);
+                    return;
+                }
+                setSelectedCount(selection.toString().length);
+            }
+
+            eventEmitter.on("selection-changed", onSelectionChange);
+            return () => void eventEmitter.off("selection-changed", onSelectionChange);
+        }, [eventEmitter]);
+
         return (
             <div className={cl("counter")} style={{ color }}>
+                {showSelected && (
+                    <>
+                        <span className={cl("selected")}>{selectedCount}</span>
+                        /
+                    </>
+                )}
                 <span className={cl("count")}>{text.length}</span>
                 /
                 <span className={cl("max")}>{charMax}</span>

src/plugins/characterCounter/style.css

@@ -12,4 +12,8 @@
 
 .vc-charCounter-count {
     transition: color 0.3s ease;
+}
+
+.vc-charCounter-selected {
+    color: #4285F4
 }

src/utils/constants.ts

@@ -629,6 +629,10 @@ export const Devs = /* #__PURE__*/ Object.freeze({
         name: "prism",
         id: 390884143749136386n,
     },
+    creations: {
+        name: "creations",
+        id: 209830981060788225n
+    },
 } satisfies Record<string, Dev>);
 
 // iife so #__PURE__ works correctly