Shiki settings preview (#297)
This commit is contained in:
parent
49b45d8262
commit
2d08dd8a9c
@ -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>
|
||||
|
@ -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;
|
||||
|
@ -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,
|
||||
};
|
||||
}
|
||||
|
@ -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
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
|
13
src/plugins/shikiCodeblocks/previewExample.tsx
Normal file
13
src/plugins/shikiCodeblocks/previewExample.tsx
Normal 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>
|
||||
</>;
|
@ -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 {
|
||||
|
Loading…
x
Reference in New Issue
Block a user