From 2d08dd8a9c289bcdb6395e8bdf28b6b729946ab1 Mon Sep 17 00:00:00 2001
From: Justice Almanzar <superdash993@gmail.com>
Date: Wed, 7 Dec 2022 09:33:40 -0500
Subject: [PATCH] Shiki settings preview (#297)

---
 src/components/PluginSettings/PluginModal.tsx     |  2 +-
 .../shikiCodeblocks/components/Highlighter.tsx    |  8 +++++++-
 .../shikiCodeblocks/hooks/useShikiSettings.ts     | 15 +++++++++++++--
 src/plugins/shikiCodeblocks/index.ts              | 12 +++++++++++-
 src/plugins/shikiCodeblocks/previewExample.tsx    | 13 +++++++++++++
 src/utils/types.ts                                |  4 +++-
 6 files changed, 48 insertions(+), 6 deletions(-)
 create mode 100644 src/plugins/shikiCodeblocks/previewExample.tsx

diff --git a/src/components/PluginSettings/PluginModal.tsx b/src/components/PluginSettings/PluginModal.tsx
index d1916673c..7cff58f77 100644
--- a/src/components/PluginSettings/PluginModal.tsx
+++ b/src/components/PluginSettings/PluginModal.tsx
@@ -196,7 +196,7 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
                     <div style={{ marginBottom: 8 }}>
                         <Forms.FormSection>
                             <ErrorBoundary message="An error occurred while rendering this plugin's custom InfoComponent">
-                                <plugin.settingsAboutComponent />
+                                <plugin.settingsAboutComponent tempSettings={tempSettings} />
                             </ErrorBoundary>
                         </Forms.FormSection>
                     </div>
diff --git a/src/plugins/shikiCodeblocks/components/Highlighter.tsx b/src/plugins/shikiCodeblocks/components/Highlighter.tsx
index 6067fd836..d86e7727c 100644
--- a/src/plugins/shikiCodeblocks/components/Highlighter.tsx
+++ b/src/plugins/shikiCodeblocks/components/Highlighter.tsx
@@ -42,6 +42,7 @@ export interface HighlighterProps {
     lang?: string;
     content: string;
     isPreview: boolean;
+    tempSettings?: Record<string, any>;
 }
 
 export const createHighlighter = (props: HighlighterProps) => (
@@ -53,8 +54,13 @@ export const Highlighter = ({
     lang,
     content,
     isPreview,
+    tempSettings,
 }: HighlighterProps) => {
-    const { tryHljs, useDevIcon, bgOpacity } = useShikiSettings(["tryHljs", "useDevIcon", "bgOpacity"]);
+    const {
+        tryHljs,
+        useDevIcon,
+        bgOpacity,
+    } = useShikiSettings(["tryHljs", "useDevIcon", "bgOpacity"], tempSettings);
     const { id: currentThemeId, theme: currentTheme } = useTheme();
 
     const shikiLang = lang ? resolveLang(lang) : null;
diff --git a/src/plugins/shikiCodeblocks/hooks/useShikiSettings.ts b/src/plugins/shikiCodeblocks/hooks/useShikiSettings.ts
index 416f8e9ba..0d92f8095 100644
--- a/src/plugins/shikiCodeblocks/hooks/useShikiSettings.ts
+++ b/src/plugins/shikiCodeblocks/hooks/useShikiSettings.ts
@@ -18,8 +18,19 @@
 
 import { useSettings } from "@api/settings";
 
+import { shiki } from "../api/shiki";
 import { ShikiSettings } from "../types";
 
-export function useShikiSettings(settings: (keyof ShikiSettings)[]) {
-    return useSettings(settings.map(setting => `plugins.ShikiCodeblocks.${setting}`)).plugins.ShikiCodeblocks as ShikiSettings;
+export function useShikiSettings(settingKeys: (keyof ShikiSettings)[], overrides?: Record<string, any>) {
+    const settings = useSettings(settingKeys.map(key => `plugins.ShikiCodeblocks.${key}`)).plugins.ShikiCodeblocks as ShikiSettings;
+
+    const withOverrides = { ...settings, ...overrides };
+
+    const themeUrl = withOverrides.customTheme || withOverrides.theme;
+    if (themeUrl !== shiki.currentThemeUrl) shiki.setTheme(themeUrl);
+
+    return {
+        ...withOverrides,
+        isThemeLoading: themeUrl !== shiki.currentThemeUrl,
+    };
 }
diff --git a/src/plugins/shikiCodeblocks/index.ts b/src/plugins/shikiCodeblocks/index.ts
index a8be92af4..fd6b04bf7 100644
--- a/src/plugins/shikiCodeblocks/index.ts
+++ b/src/plugins/shikiCodeblocks/index.ts
@@ -21,6 +21,7 @@ import { parseUrl } from "@utils/misc";
 import { wordsFromPascal, wordsToTitle } from "@utils/text";
 import definePlugin, { OptionType } from "@utils/types";
 
+import previewExampleText from "~fileContent/previewExample.tsx";
 import cssText from "~fileContent/style.css";
 
 import { Settings } from "../../Vencord";
@@ -59,6 +60,12 @@ export default definePlugin({
         shiki.destroy();
         clearStyles();
     },
+    settingsAboutComponent: ({ tempSettings }) => createHighlighter({
+        lang: "tsx",
+        content: previewExampleText,
+        isPreview: true,
+        tempSettings,
+    }),
     options: {
         theme: {
             type: OptionType.SELECT,
@@ -137,7 +144,10 @@ export default definePlugin({
             description: "Background opacity",
             markers: [0, 20, 40, 60, 80, 100],
             default: 100,
-            stickToMarkers: false,
+            componentProps: {
+                stickToMarkers: false,
+                onValueRender: null, // Defaults to percentage
+            },
         },
     },
 
diff --git a/src/plugins/shikiCodeblocks/previewExample.tsx b/src/plugins/shikiCodeblocks/previewExample.tsx
new file mode 100644
index 000000000..971d01670
--- /dev/null
+++ b/src/plugins/shikiCodeblocks/previewExample.tsx
@@ -0,0 +1,13 @@
+/* eslint-disable header/header */
+import React from "react";
+
+const handleClick = async () =>
+    console.log((await import("@webpack/common")).Clipboard.copy("\u200b"));
+
+export const Example: React.FC<{
+    real: boolean,
+    shigged?: number,
+}> = ({ real, shigged }) => <>
+    <p>{`Shigg${real ? `ies${shigged === 0x1B ? "t" : ""}` : "y"}`}</p>
+    <button onClick={handleClick}>Click Me</button>
+</>;
diff --git a/src/utils/types.ts b/src/utils/types.ts
index 310fbea08..4e230fedc 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -89,7 +89,9 @@ export interface PluginDef {
      * Allows you to specify a custom Component that will be rendered in your
      * plugin's settings page
      */
-    settingsAboutComponent?: React.ComponentType;
+    settingsAboutComponent?: React.ComponentType<{
+        tempSettings?: Record<string, any>;
+    }>;
 }
 
 export enum OptionType {