Shiki settings preview (#297)

This commit is contained in:
Justice Almanzar 2022-12-07 09:33:40 -05:00 committed by GitHub
parent 49b45d8262
commit 2d08dd8a9c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 48 additions and 6 deletions

View file

@ -196,7 +196,7 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
<div style={{ marginBottom: 8 }}> <div style={{ marginBottom: 8 }}>
<Forms.FormSection> <Forms.FormSection>
<ErrorBoundary message="An error occurred while rendering this plugin's custom InfoComponent"> <ErrorBoundary message="An error occurred while rendering this plugin's custom InfoComponent">
<plugin.settingsAboutComponent /> <plugin.settingsAboutComponent tempSettings={tempSettings} />
</ErrorBoundary> </ErrorBoundary>
</Forms.FormSection> </Forms.FormSection>
</div> </div>

View file

@ -42,6 +42,7 @@ export interface HighlighterProps {
lang?: string; lang?: string;
content: string; content: string;
isPreview: boolean; isPreview: boolean;
tempSettings?: Record<string, any>;
} }
export const createHighlighter = (props: HighlighterProps) => ( export const createHighlighter = (props: HighlighterProps) => (
@ -53,8 +54,13 @@ export const Highlighter = ({
lang, lang,
content, content,
isPreview, isPreview,
tempSettings,
}: HighlighterProps) => { }: 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 { id: currentThemeId, theme: currentTheme } = useTheme();
const shikiLang = lang ? resolveLang(lang) : null; const shikiLang = lang ? resolveLang(lang) : null;

View file

@ -18,8 +18,19 @@
import { useSettings } from "@api/settings"; import { useSettings } from "@api/settings";
import { shiki } from "../api/shiki";
import { ShikiSettings } from "../types"; import { ShikiSettings } from "../types";
export function useShikiSettings(settings: (keyof ShikiSettings)[]) { export function useShikiSettings(settingKeys: (keyof ShikiSettings)[], overrides?: Record<string, any>) {
return useSettings(settings.map(setting => `plugins.ShikiCodeblocks.${setting}`)).plugins.ShikiCodeblocks as ShikiSettings; 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,
};
} }

View file

@ -21,6 +21,7 @@ import { parseUrl } from "@utils/misc";
import { wordsFromPascal, wordsToTitle } from "@utils/text"; import { wordsFromPascal, wordsToTitle } from "@utils/text";
import definePlugin, { OptionType } from "@utils/types"; import definePlugin, { OptionType } from "@utils/types";
import previewExampleText from "~fileContent/previewExample.tsx";
import cssText from "~fileContent/style.css"; import cssText from "~fileContent/style.css";
import { Settings } from "../../Vencord"; import { Settings } from "../../Vencord";
@ -59,6 +60,12 @@ export default definePlugin({
shiki.destroy(); shiki.destroy();
clearStyles(); clearStyles();
}, },
settingsAboutComponent: ({ tempSettings }) => createHighlighter({
lang: "tsx",
content: previewExampleText,
isPreview: true,
tempSettings,
}),
options: { options: {
theme: { theme: {
type: OptionType.SELECT, type: OptionType.SELECT,
@ -137,7 +144,10 @@ export default definePlugin({
description: "Background opacity", description: "Background opacity",
markers: [0, 20, 40, 60, 80, 100], markers: [0, 20, 40, 60, 80, 100],
default: 100, default: 100,
stickToMarkers: false, componentProps: {
stickToMarkers: false,
onValueRender: null, // Defaults to percentage
},
}, },
}, },

View file

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

View file

@ -89,7 +89,9 @@ export interface PluginDef {
* Allows you to specify a custom Component that will be rendered in your * Allows you to specify a custom Component that will be rendered in your
* plugin's settings page * plugin's settings page
*/ */
settingsAboutComponent?: React.ComponentType; settingsAboutComponent?: React.ComponentType<{
tempSettings?: Record<string, any>;
}>;
} }
export enum OptionType { export enum OptionType {