feat(wigglyText): Updates

* feat(wigglyText): upsert

* Fix Import Formatting

---------

Co-authored-by: thororen <78185467+thororen1234@users.noreply.github.com>

src/equicordplugins/wigglyText/index.tsx

@@ -8,8 +8,11 @@ import { definePluginSettings } from "@api/Settings";
 import { makeRange } from "@components/PluginSettings/components";
 import { EquicordDevs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
+import { Text } from "@webpack/common";
 import { ReactNode } from "react";
 
+import ExampleWiggle from "./ui/components/ExampleWiggle";
+
 const settings = definePluginSettings({
     intensity: {
         type: OptionType.SLIDER,
@@ -18,22 +21,6 @@ const settings = definePluginSettings({
         default: 4,
         stickToMarkers: true,
         onChange: () => updateStyles()
-    },
-    direction: {
-        type: OptionType.SELECT,
-        description: "Swing direction",
-        options: [{
-            label: "Circle",
-            value: "xy",
-            default: true
-        }, {
-            label: "Horizontal",
-            value: "x",
-        }, {
-            label: "Vertical",
-            value: "y"
-        }],
-        onChange: () => updateStyles()
     }
 });
 
@@ -42,56 +29,103 @@ const dirMap = {
     y: "1.2s wiggle-wavy-y linear infinite"
 };
 
+const classMap = [
+    {
+        chars: ["<", ">"],
+        className: "wiggle-inner-x",
+    },
+    {
+        chars: ["^", "^"],
+        className: "wiggle-inner-y",
+    },
+    {
+        chars: [")", "("],
+        className: "wiggle-inner-xy"
+    }
+];
+
 let styles: HTMLStyleElement;
 const updateStyles = () => {
     const inten = Vencord.Settings.plugins.WigglyText.intensity + "px";
-    const dir = Vencord.Settings.plugins.WigglyText.direction as string;
     styles.textContent = `
-        .wiggly-inner {
-            animation: ${dir.split("").map(dir => dirMap[dir]).join(", ")};
-            position: relative;
-            top: 0;
-            left: 0;
-        }
+.wiggle-example {
+    list-style-type: disc;
+    list-style-position: outside;
+    margin: 4px 0 0 16px;
+}
 
-        @keyframes wiggle-wavy-x {
-            from {
-                left: -${inten};
-            }
+.wiggle-example li {
+    white-space: break-spaces;
+    margin-bottom: 4px;
+}
 
-            to {
-                left: ${inten};
-            }
-        }
+.wiggle-inner {
+    position: relative;
+    top: 0;
+    left: 0;
 
-        @keyframes wiggle-wavy-y {
-            0% {
-                top: 0;
-                animation-timing-function: ease-out;
-            }
+    &.wiggle-inner-x {
+        animation: ${dirMap.x};
+    }
 
-            25% {
-                top: -${inten};
-                animation-timing-function: ease-in;
-            }
+    &.wiggle-inner-y {
+        animation: ${dirMap.y};
+    }
 
-            50% {
-                top: 0;
-                animation-timing-function: ease-out;
-            }
+    &.wiggle-inner-xy {
+        animation: ${dirMap.x}, ${dirMap.y};
+    }
+}
 
-            75% {
-                top: ${inten};
-                animation-timing-function: ease-in;
-            }
-        }`;
+@keyframes wiggle-wavy-x {
+    from {
+        left: -${inten};
+    }
+
+    to {
+        left: ${inten};
+    }
+}
+
+@keyframes wiggle-wavy-y {
+    0% {
+        top: 0;
+        animation-timing-function: ease-out;
+    }
+
+    25% {
+        top: -${inten};
+        animation-timing-function: ease-in;
+    }
+
+    50% {
+        top: 0;
+        animation-timing-function: ease-out;
+    }
+
+    75% {
+        top: ${inten};
+        animation-timing-function: ease-in;
+    }
+}`;
 };
 
 export default definePlugin({
     name: "WigglyText",
-    description: "Adds a new markdown formatting that makes text ~wiggly~",
+    description: "Adds a new markdown formatting that makes text wiggly.",
     authors: [EquicordDevs.nexpid],
     settings,
+    settingsAboutComponent: () => (
+        <Text>
+            You can make text wiggle with the following:<br />
+            <ul className="wiggle-example">
+                <li><ExampleWiggle wiggle="x">left and right</ExampleWiggle> by typing <code>&lt;~text~&gt;</code></li>
+                <li><ExampleWiggle wiggle="y">up and down</ExampleWiggle> by typing <code>^~text~^</code></li>
+                <li><ExampleWiggle wiggle="xy">in a circle</ExampleWiggle> by typing <code>)~text~(</code></li>
+            </ul>
+        </Text>
+    ),
+
     patches: [
         {
             find: "parseToAST:",
@@ -104,16 +138,21 @@ export default definePlugin({
 
     wigglyRule: {
         order: 24,
-        match: (source: string) => source.match(/^~([\s\S]+?)~(?!_)/),
+        match: (source: string) => classMap.map(({ chars }) => source.match(new RegExp(`^(\\${chars[0]})~([\\s\\S]+?)~(\\${chars[1]})(?!_)`))).find(x => x !== null),
         parse: (
             capture: RegExpMatchArray,
             transform: (...args: any[]) => any,
             state: any
-        ) => ({
-            content: transform(capture[1], state),
-        }),
+        ) => {
+            const className = classMap.find(({ chars }) => chars[0] === capture[1] && chars[1] === capture[3])?.className ?? "";
+
+            return {
+                content: transform(capture[2], state),
+                className
+            };
+        },
         react: (
-            data: { content: any[]; },
+            data: { content: any[]; className: string; },
             output: (...args: any[]) => ReactNode[]
         ) => {
             let offset = 0;
@@ -129,7 +168,7 @@ export default definePlugin({
                         children[j] = child.split("").map((x, i) => (
                             <span key={i}>
                                 <span
-                                    className="wiggly-inner"
+                                    className={`wiggle-inner ${data.className}`}
                                     style={{
                                         animationDelay: `${((offset++) * 25) % 1200}ms`,
                                     }}

src/equicordplugins/wigglyText/ui/components/ExampleWiggle.tsx

@@ -0,0 +1,20 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+export default function ExampleWiggle({ wiggle, children }: { wiggle: "x" | "y" | "xy", children: string; }) {
+    return children.split("").map((x, i) => (
+        <span key={i}>
+            <span
+                className={`wiggle-inner wiggle-inner-${wiggle}`}
+                style={{
+                    animationDelay: `${(i * 25) % 1200}ms`,
+                }}
+            >
+                {x}
+            </span>
+        </span>
+    ));
+}