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 }}>
<Forms.FormSection>
<ErrorBoundary message="An error occurred while rendering this plugin's custom InfoComponent">
<plugin.settingsAboutComponent />
<plugin.settingsAboutComponent tempSettings={tempSettings} />
</ErrorBoundary>
</Forms.FormSection>
</div>

View File

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

View File

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

View File

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

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
* plugin's settings page
*/
settingsAboutComponent?: React.ComponentType;
settingsAboutComponent?: React.ComponentType<{
tempSettings?: Record<string, any>;
}>;
}
export enum OptionType {