Shiki settings preview (#297)

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>

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;

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,
+    };
 }

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
+            },
         },
     },
 

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>
+</>;

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 {