diff options
| -rw-r--r-- | src/components/PluginSettings/PluginModal.tsx | 2 | ||||
| -rw-r--r-- | src/plugins/shikiCodeblocks/components/Highlighter.tsx | 8 | ||||
| -rw-r--r-- | src/plugins/shikiCodeblocks/hooks/useShikiSettings.ts | 15 | ||||
| -rw-r--r-- | src/plugins/shikiCodeblocks/index.ts | 12 | ||||
| -rw-r--r-- | src/plugins/shikiCodeblocks/previewExample.tsx | 13 | ||||
| -rw-r--r-- | src/utils/types.ts | 4 |
6 files changed, 48 insertions, 6 deletions
diff --git a/src/components/PluginSettings/PluginModal.tsx b/src/components/PluginSettings/PluginModal.tsx index d191667..7cff58f 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 6067fd8..d86e772 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 416f8e9..0d92f80 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 a8be92a..fd6b04b 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 0000000..971d016 --- /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 310fbea..4e230fe 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 { |