feat(plugin): ShikiCodeblocks (#267)
Co-authored-by: ArjixWasTaken <53124886+ArjixWasTaken@users.noreply.github.com> Co-authored-by: Ven <vendicated@riseup.net>main
Justice Almanzar
2 years ago
committed by
GitHub
parent
4760af7f0e
commit
41dddc9eee
@ -0,0 +1,74 @@
|
|||||||
|
/*
|
||||||
|
* Vencord, a modification for Discord's desktop app
|
||||||
|
* Copyright (c) 2022 Vendicated and contributors
|
||||||
|
*
|
||||||
|
* This program is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU General Public License as published by
|
||||||
|
* the Free Software Foundation, either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU General Public License
|
||||||
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { ILanguageRegistration } from "@vap/shiki";
|
||||||
|
|
||||||
|
export const VPC_REPO = "Vap0r1ze/vapcord";
|
||||||
|
export const VPC_REPO_COMMIT = "88a7032a59cca40da170926651b08201ea3b965a";
|
||||||
|
export const vpcRepoAssets = `https://raw.githubusercontent.com/${VPC_REPO}/${VPC_REPO_COMMIT}/assets/shiki-codeblocks`;
|
||||||
|
export const vpcRepoGrammar = (fileName: string) => `${vpcRepoAssets}/${fileName}`;
|
||||||
|
export const vpcRepoLanguages = `${vpcRepoAssets}/languages.json`;
|
||||||
|
|
||||||
|
export interface Language {
|
||||||
|
name: string;
|
||||||
|
id: string;
|
||||||
|
devicon?: string;
|
||||||
|
grammarUrl: string,
|
||||||
|
grammar?: ILanguageRegistration["grammar"];
|
||||||
|
scopeName: string;
|
||||||
|
aliases?: string[];
|
||||||
|
custom?: boolean;
|
||||||
|
}
|
||||||
|
export interface LanguageJson {
|
||||||
|
name: string;
|
||||||
|
id: string;
|
||||||
|
fileName: string;
|
||||||
|
devicon?: string;
|
||||||
|
scopeName: string;
|
||||||
|
aliases?: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export const languages: Record<string, Language> = {};
|
||||||
|
|
||||||
|
export const loadLanguages = async () => {
|
||||||
|
const langsJson: LanguageJson[] = await fetch(vpcRepoLanguages).then(res => res.json());
|
||||||
|
const loadedLanguages = Object.fromEntries(
|
||||||
|
langsJson.map(lang => [lang.id, {
|
||||||
|
...lang,
|
||||||
|
grammarUrl: vpcRepoGrammar(lang.fileName),
|
||||||
|
}])
|
||||||
|
);
|
||||||
|
Object.assign(languages, loadedLanguages);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getGrammar = (lang: Language): Promise<NonNullable<ILanguageRegistration["grammar"]>> => {
|
||||||
|
if (lang.grammar) return Promise.resolve(lang.grammar);
|
||||||
|
return fetch(lang.grammarUrl).then(res => res.json());
|
||||||
|
};
|
||||||
|
|
||||||
|
const aliasCache = new Map<string, Language>();
|
||||||
|
export function resolveLang(idOrAlias: string) {
|
||||||
|
if (Object.prototype.hasOwnProperty.call(languages, idOrAlias)) return languages[idOrAlias];
|
||||||
|
|
||||||
|
const lang = Object.values(languages).find(lang => lang.aliases?.includes(idOrAlias));
|
||||||
|
|
||||||
|
if (!lang) return null;
|
||||||
|
|
||||||
|
aliasCache.set(idOrAlias, lang);
|
||||||
|
return lang;
|
||||||
|
}
|
||||||
@ -0,0 +1,119 @@
|
|||||||
|
/*
|
||||||
|
* Vencord, a modification for Discord's desktop app
|
||||||
|
* Copyright (c) 2022 Vendicated and contributors
|
||||||
|
*
|
||||||
|
* This program is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU General Public License as published by
|
||||||
|
* the Free Software Foundation, either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU General Public License
|
||||||
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
import { shikiOnigasmSrc, shikiWorkerSrc } from "@utils/dependencies";
|
||||||
|
import { WorkerClient } from "@vap/core/ipc";
|
||||||
|
import type { IShikiTheme, IThemedToken } from "@vap/shiki";
|
||||||
|
|
||||||
|
import { dispatchTheme } from "../hooks/useTheme";
|
||||||
|
import type { ShikiSpec } from "../types";
|
||||||
|
import { getGrammar, languages, loadLanguages, resolveLang } from "./languages";
|
||||||
|
import { themes } from "./themes";
|
||||||
|
|
||||||
|
const themeUrls = Object.values(themes);
|
||||||
|
|
||||||
|
let resolveClient: (client: WorkerClient<ShikiSpec>) => void;
|
||||||
|
|
||||||
|
export const shiki = {
|
||||||
|
client: null as WorkerClient<ShikiSpec> | null,
|
||||||
|
currentTheme: null as IShikiTheme | null,
|
||||||
|
currentThemeUrl: null as string | null,
|
||||||
|
timeoutMs: 10000,
|
||||||
|
languages,
|
||||||
|
themes,
|
||||||
|
loadedThemes: new Set<string>(),
|
||||||
|
loadedLangs: new Set<string>(),
|
||||||
|
clientPromise: new Promise<WorkerClient<ShikiSpec>>(resolve => resolveClient = resolve),
|
||||||
|
|
||||||
|
init: async (initThemeUrl: string | undefined) => {
|
||||||
|
/** https://stackoverflow.com/q/58098143 */
|
||||||
|
const workerBlob = await fetch(shikiWorkerSrc).then(res => res.blob());
|
||||||
|
|
||||||
|
const client = shiki.client = new WorkerClient<ShikiSpec>(
|
||||||
|
"shiki-client",
|
||||||
|
"shiki-host",
|
||||||
|
workerBlob,
|
||||||
|
{ name: "ShikiWorker" },
|
||||||
|
);
|
||||||
|
await client.init();
|
||||||
|
|
||||||
|
const themeUrl = initThemeUrl || themeUrls[0];
|
||||||
|
|
||||||
|
await loadLanguages();
|
||||||
|
await client.run("setOnigasm", { wasm: shikiOnigasmSrc });
|
||||||
|
await client.run("setHighlighter", { theme: themeUrl, langs: [] });
|
||||||
|
shiki.loadedThemes.add(themeUrl);
|
||||||
|
await shiki._setTheme(themeUrl);
|
||||||
|
resolveClient(client);
|
||||||
|
},
|
||||||
|
_setTheme: async (themeUrl: string) => {
|
||||||
|
shiki.currentThemeUrl = themeUrl;
|
||||||
|
const { themeData } = await shiki.client!.run("getTheme", { theme: themeUrl });
|
||||||
|
shiki.currentTheme = JSON.parse(themeData);
|
||||||
|
dispatchTheme({ id: themeUrl, theme: shiki.currentTheme });
|
||||||
|
},
|
||||||
|
loadTheme: async (themeUrl: string) => {
|
||||||
|
const client = await shiki.clientPromise;
|
||||||
|
if (shiki.loadedThemes.has(themeUrl)) return;
|
||||||
|
|
||||||
|
await client.run("loadTheme", { theme: themeUrl });
|
||||||
|
|
||||||
|
shiki.loadedThemes.add(themeUrl);
|
||||||
|
},
|
||||||
|
setTheme: async (themeUrl: string) => {
|
||||||
|
await shiki.clientPromise;
|
||||||
|
themeUrl ||= themeUrls[0];
|
||||||
|
if (!shiki.loadedThemes.has(themeUrl)) await shiki.loadTheme(themeUrl);
|
||||||
|
|
||||||
|
await shiki._setTheme(themeUrl);
|
||||||
|
},
|
||||||
|
loadLang: async (langId: string) => {
|
||||||
|
const client = await shiki.clientPromise;
|
||||||
|
const lang = resolveLang(langId);
|
||||||
|
|
||||||
|
if (!lang || shiki.loadedLangs.has(lang.id)) return;
|
||||||
|
|
||||||
|
await client.run("loadLanguage", {
|
||||||
|
lang: {
|
||||||
|
...lang,
|
||||||
|
grammar: lang.grammar ?? await getGrammar(lang),
|
||||||
|
}
|
||||||
|
});
|
||||||
|
shiki.loadedLangs.add(lang.id);
|
||||||
|
},
|
||||||
|
tokenizeCode: async (code: string, langId: string): Promise<IThemedToken[][]> => {
|
||||||
|
const client = await shiki.clientPromise;
|
||||||
|
const lang = resolveLang(langId);
|
||||||
|
if (!lang) return [];
|
||||||
|
|
||||||
|
if (!shiki.loadedLangs.has(lang.id)) await shiki.loadLang(lang.id);
|
||||||
|
|
||||||
|
return await client.run("codeToThemedTokens", {
|
||||||
|
code,
|
||||||
|
lang: langId,
|
||||||
|
theme: shiki.currentThemeUrl ?? themeUrls[0],
|
||||||
|
});
|
||||||
|
},
|
||||||
|
destroy() {
|
||||||
|
shiki.currentTheme = null;
|
||||||
|
shiki.currentThemeUrl = null;
|
||||||
|
dispatchTheme({ id: null, theme: null });
|
||||||
|
shiki.client?.destroy();
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,67 @@
|
|||||||
|
/*
|
||||||
|
* Vencord, a modification for Discord's desktop app
|
||||||
|
* Copyright (c) 2022 Vendicated and contributors
|
||||||
|
*
|
||||||
|
* This program is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU General Public License as published by
|
||||||
|
* the Free Software Foundation, either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU General Public License
|
||||||
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { IShikiTheme } from "@vap/shiki";
|
||||||
|
|
||||||
|
export const SHIKI_REPO = "shikijs/shiki";
|
||||||
|
export const SHIKI_REPO_COMMIT = "0b28ad8ccfbf2615f2d9d38ea8255416b8ac3043";
|
||||||
|
export const shikiRepoTheme = (name: string) => `https://raw.githubusercontent.com/${SHIKI_REPO}/${SHIKI_REPO_COMMIT}/packages/shiki/themes/${name}.json`;
|
||||||
|
|
||||||
|
export const themes = {
|
||||||
|
// Default
|
||||||
|
DarkPlus: shikiRepoTheme("dark-plus"),
|
||||||
|
|
||||||
|
// Dev Choices
|
||||||
|
MaterialCandy: "https://raw.githubusercontent.com/millsp/material-candy/master/material-candy.json",
|
||||||
|
|
||||||
|
// More from Shiki repo
|
||||||
|
DraculaSoft: shikiRepoTheme("dracula-soft"),
|
||||||
|
Dracula: shikiRepoTheme("dracula"),
|
||||||
|
GithubDarkDimmed: shikiRepoTheme("github-dark-dimmed"),
|
||||||
|
GithubDark: shikiRepoTheme("github-dark"),
|
||||||
|
GithubLight: shikiRepoTheme("github-light"),
|
||||||
|
LightPlus: shikiRepoTheme("light-plus"),
|
||||||
|
MaterialDarker: shikiRepoTheme("material-darker"),
|
||||||
|
MaterialDefault: shikiRepoTheme("material-default"),
|
||||||
|
MaterialLighter: shikiRepoTheme("material-lighter"),
|
||||||
|
MaterialOcean: shikiRepoTheme("material-ocean"),
|
||||||
|
MaterialPalenight: shikiRepoTheme("material-palenight"),
|
||||||
|
MinDark: shikiRepoTheme("min-dark"),
|
||||||
|
MinLight: shikiRepoTheme("min-light"),
|
||||||
|
Monokai: shikiRepoTheme("monokai"),
|
||||||
|
Nord: shikiRepoTheme("nord"),
|
||||||
|
OneDarkPro: shikiRepoTheme("one-dark-pro"),
|
||||||
|
Poimandres: shikiRepoTheme("poimandres"),
|
||||||
|
RosePineDawn: shikiRepoTheme("rose-pine-dawn"),
|
||||||
|
RosePineMoon: shikiRepoTheme("rose-pine-moon"),
|
||||||
|
RosePine: shikiRepoTheme("rose-pine"),
|
||||||
|
SlackDark: shikiRepoTheme("slack-dark"),
|
||||||
|
SlackOchin: shikiRepoTheme("slack-ochin"),
|
||||||
|
SolarizedDark: shikiRepoTheme("solarized-dark"),
|
||||||
|
SolarizedLight: shikiRepoTheme("solarized-light"),
|
||||||
|
VitesseDark: shikiRepoTheme("vitesse-dark"),
|
||||||
|
VitesseLight: shikiRepoTheme("vitesse-light"),
|
||||||
|
CssVariables: shikiRepoTheme("css-variables"),
|
||||||
|
};
|
||||||
|
|
||||||
|
export const themeCache = new Map<string, IShikiTheme>();
|
||||||
|
|
||||||
|
export const getTheme = (url: string): Promise<IShikiTheme> => {
|
||||||
|
if (themeCache.has(url)) return Promise.resolve(themeCache.get(url)!);
|
||||||
|
return fetch(url).then(res => res.json());
|
||||||
|
};
|
||||||
@ -0,0 +1,46 @@
|
|||||||
|
/*
|
||||||
|
* Vencord, a modification for Discord's desktop app
|
||||||
|
* Copyright (c) 2022 Vendicated and contributors
|
||||||
|
*
|
||||||
|
* This program is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU General Public License as published by
|
||||||
|
* the Free Software Foundation, either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU General Public License
|
||||||
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { Clipboard } from "@webpack/common";
|
||||||
|
|
||||||
|
import { cl } from "../utils/misc";
|
||||||
|
import { CopyButton } from "./CopyButton";
|
||||||
|
|
||||||
|
export interface ButtonRowProps {
|
||||||
|
theme: import("./Highlighter").ThemeBase;
|
||||||
|
content: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ButtonRow({ content, theme }: ButtonRowProps) {
|
||||||
|
const buttons: JSX.Element[] = [];
|
||||||
|
|
||||||
|
if (Clipboard.SUPPORTS_COPY) {
|
||||||
|
buttons.push(
|
||||||
|
<CopyButton
|
||||||
|
content={content}
|
||||||
|
className={cl("btn")}
|
||||||
|
style={{
|
||||||
|
backgroundColor: theme.accentBgColor,
|
||||||
|
color: theme.accentFgColor,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return <div className={cl("btns")}>{buttons}</div>;
|
||||||
|
}
|
||||||
@ -0,0 +1,92 @@
|
|||||||
|
/*
|
||||||
|
* Vencord, a modification for Discord's desktop app
|
||||||
|
* Copyright (c) 2022 Vendicated and contributors
|
||||||
|
*
|
||||||
|
* This program is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU General Public License as published by
|
||||||
|
* the Free Software Foundation, either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU General Public License
|
||||||
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import type { IThemedToken } from "@vap/shiki";
|
||||||
|
|
||||||
|
import { cl } from "../utils/misc";
|
||||||
|
import { ThemeBase } from "./Highlighter";
|
||||||
|
|
||||||
|
export interface CodeProps {
|
||||||
|
theme: ThemeBase;
|
||||||
|
useHljs: boolean;
|
||||||
|
lang?: string;
|
||||||
|
content: string;
|
||||||
|
tokens: IThemedToken[][] | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Code = ({
|
||||||
|
theme,
|
||||||
|
useHljs,
|
||||||
|
lang,
|
||||||
|
content,
|
||||||
|
tokens,
|
||||||
|
}: CodeProps) => {
|
||||||
|
let lines!: JSX.Element[];
|
||||||
|
|
||||||
|
if (useHljs) {
|
||||||
|
try {
|
||||||
|
const { value: hljsHtml } = hljs.highlight(lang!, content, true);
|
||||||
|
lines = hljsHtml
|
||||||
|
.split("\n")
|
||||||
|
.map((line, i) => <span key={i} dangerouslySetInnerHTML={{ __html: line }} />);
|
||||||
|
} catch {
|
||||||
|
lines = content.split("\n").map(line => <span>{line}</span>);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const renderTokens =
|
||||||
|
tokens ??
|
||||||
|
content
|
||||||
|
.split("\n")
|
||||||
|
.map(line => [{ color: theme.plainColor, content: line } as IThemedToken]);
|
||||||
|
|
||||||
|
lines = renderTokens.map(line => {
|
||||||
|
// [Cynthia] this makes it so when you highlight the codeblock
|
||||||
|
// empty lines are also selected and copied when you Ctrl+C.
|
||||||
|
if (line.length === 0) {
|
||||||
|
return <span>{"\n"}</span>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{line.map(({ content, color, fontStyle }, i) => (
|
||||||
|
<span
|
||||||
|
key={i}
|
||||||
|
style={{
|
||||||
|
color,
|
||||||
|
fontStyle: (fontStyle ?? 0) & 1 ? "italic" : undefined,
|
||||||
|
fontWeight: (fontStyle ?? 0) & 2 ? "bold" : undefined,
|
||||||
|
textDecoration: (fontStyle ?? 0) & 4 ? "underline" : undefined,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{content}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const codeTableRows = lines.map((line, i) => (
|
||||||
|
<tr key={i}>
|
||||||
|
<td style={{ color: theme.plainColor }}>{i + 1}</td>
|
||||||
|
<td>{line}</td>
|
||||||
|
</tr>
|
||||||
|
));
|
||||||
|
|
||||||
|
return <table className={cl("table")}>{...codeTableRows}</table>;
|
||||||
|
};
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
/*
|
||||||
|
* Vencord, a modification for Discord's desktop app
|
||||||
|
* Copyright (c) 2022 Vendicated and contributors
|
||||||
|
*
|
||||||
|
* This program is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU General Public License as published by
|
||||||
|
* the Free Software Foundation, either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU General Public License
|
||||||
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useCopyCooldown } from "../hooks/useCopyCooldown";
|
||||||
|
|
||||||
|
export interface CopyButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
|
||||||
|
content: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CopyButton({ content, ...props }: CopyButtonProps) {
|
||||||
|
const [copyCooldown, copy] = useCopyCooldown(1000);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
{...props}
|
||||||
|
style={{
|
||||||
|
...props.style,
|
||||||
|
cursor: copyCooldown ? "default" : undefined,
|
||||||
|
}}
|
||||||
|
onClick={() => copy(content)}
|
||||||
|
>
|
||||||
|
{copyCooldown ? "Copied!" : "Copy"}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
/*
|
||||||
|
* Vencord, a modification for Discord's desktop app
|
||||||
|
* Copyright (c) 2022 Vendicated and contributors
|
||||||
|
*
|
||||||
|
* This program is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU General Public License as published by
|
||||||
|
* the Free Software Foundation, either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU General Public License
|
||||||
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { Language } from "../api/languages";
|
||||||
|
import { DeviconSetting } from "../types";
|
||||||
|
import { cl } from "../utils/misc";
|
||||||
|
|
||||||
|
export interface HeaderProps {
|
||||||
|
langName?: string;
|
||||||
|
useDevIcon: DeviconSetting;
|
||||||
|
shikiLang: Language | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Header({ langName, useDevIcon, shikiLang }: HeaderProps) {
|
||||||
|
if (!langName) return <></>;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={cl("lang")}>
|
||||||
|
{useDevIcon !== DeviconSetting.Disabled && shikiLang?.devicon && (
|
||||||
|
<i
|
||||||
|
className={`devicon-${shikiLang.devicon}${useDevIcon === DeviconSetting.Color ? " colored" : ""}`}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{langName}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,123 @@
|
|||||||
|
/*
|
||||||
|
* Vencord, a modification for Discord's desktop app
|
||||||
|
* Copyright (c) 2022 Vendicated and contributors
|
||||||
|
*
|
||||||
|
* This program is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU General Public License as published by
|
||||||
|
* the Free Software Foundation, either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU General Public License
|
||||||
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import ErrorBoundary from "@components/ErrorBoundary";
|
||||||
|
import { useAwaiter } from "@utils/misc";
|
||||||
|
import { useIntersection } from "@utils/react";
|
||||||
|
import { hljs, React } from "@webpack/common";
|
||||||
|
|
||||||
|
import { resolveLang } from "../api/languages";
|
||||||
|
import { shiki } from "../api/shiki";
|
||||||
|
import { useShikiSettings } from "../hooks/useShikiSettings";
|
||||||
|
import { useTheme } from "../hooks/useTheme";
|
||||||
|
import { hex2Rgb } from "../utils/color";
|
||||||
|
import { cl, shouldUseHljs } from "../utils/misc";
|
||||||
|
import { ButtonRow } from "./ButtonRow";
|
||||||
|
import { Code } from "./Code";
|
||||||
|
import { Header } from "./Header";
|
||||||
|
|
||||||
|
export interface ThemeBase {
|
||||||
|
plainColor: string;
|
||||||
|
accentBgColor: string;
|
||||||
|
accentFgColor: string;
|
||||||
|
backgroundColor: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface HighlighterProps {
|
||||||
|
lang?: string;
|
||||||
|
content: string;
|
||||||
|
isPreview: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const createHighlighter = (props: HighlighterProps) => (
|
||||||
|
<ErrorBoundary>
|
||||||
|
<Highlighter {...props} />
|
||||||
|
</ErrorBoundary>
|
||||||
|
);
|
||||||
|
export const Highlighter = ({
|
||||||
|
lang,
|
||||||
|
content,
|
||||||
|
isPreview,
|
||||||
|
}: HighlighterProps) => {
|
||||||
|
const { tryHljs, useDevIcon, bgOpacity } = useShikiSettings(["tryHljs", "useDevIcon", "bgOpacity"]);
|
||||||
|
const { id: currentThemeId, theme: currentTheme } = useTheme();
|
||||||
|
|
||||||
|
const shikiLang = lang ? resolveLang(lang) : null;
|
||||||
|
const useHljs = shouldUseHljs({ lang, tryHljs });
|
||||||
|
|
||||||
|
const [preRef, isIntersecting] = useIntersection(true);
|
||||||
|
|
||||||
|
const [tokens] = useAwaiter(async () => {
|
||||||
|
if (!shikiLang || useHljs || !isIntersecting) return null;
|
||||||
|
return await shiki.tokenizeCode(content, lang!);
|
||||||
|
}, {
|
||||||
|
fallbackValue: null,
|
||||||
|
deps: [lang, content, currentThemeId, isIntersecting],
|
||||||
|
});
|
||||||
|
|
||||||
|
const themeBase: ThemeBase = {
|
||||||
|
plainColor: currentTheme?.fg || "var(--text-normal)",
|
||||||
|
accentBgColor:
|
||||||
|
currentTheme?.colors?.["statusBar.background"] || (useHljs ? "#7289da" : "#007BC8"),
|
||||||
|
accentFgColor: currentTheme?.colors?.["statusBar.foreground"] || "#FFF",
|
||||||
|
backgroundColor:
|
||||||
|
currentTheme?.colors?.["editor.background"] || "var(--background-secondary)",
|
||||||
|
};
|
||||||
|
|
||||||
|
let langName;
|
||||||
|
if (lang) langName = useHljs ? hljs?.getLanguage?.(lang)?.name : shikiLang?.name;
|
||||||
|
|
||||||
|
const preClasses = [cl("root")];
|
||||||
|
if (!langName) preClasses.push(cl("plain"));
|
||||||
|
if (isPreview) preClasses.push(cl("preview"));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<pre
|
||||||
|
ref={preRef}
|
||||||
|
className={preClasses.join(" ")}
|
||||||
|
style={{
|
||||||
|
backgroundColor: useHljs
|
||||||
|
? themeBase.backgroundColor
|
||||||
|
: `rgba(${hex2Rgb(themeBase.backgroundColor)
|
||||||
|
.concat(bgOpacity / 100)
|
||||||
|
.join(", ")})`,
|
||||||
|
color: themeBase.plainColor,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<code>
|
||||||
|
<Header
|
||||||
|
langName={langName}
|
||||||
|
useDevIcon={useDevIcon}
|
||||||
|
shikiLang={shikiLang}
|
||||||
|
/>
|
||||||
|
<Code
|
||||||
|
theme={themeBase}
|
||||||
|
useHljs={useHljs}
|
||||||
|
lang={lang}
|
||||||
|
content={content}
|
||||||
|
tokens={tokens}
|
||||||
|
/>
|
||||||
|
{!isPreview && <ButtonRow
|
||||||
|
content={content}
|
||||||
|
theme={themeBase}
|
||||||
|
/>}
|
||||||
|
</code>
|
||||||
|
</pre>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
/*
|
||||||
|
* Vencord, a modification for Discord's desktop app
|
||||||
|
* Copyright (c) 2022 Vendicated and contributors
|
||||||
|
*
|
||||||
|
* This program is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU General Public License as published by
|
||||||
|
* the Free Software Foundation, either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU General Public License
|
||||||
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { Clipboard, React } from "@webpack/common";
|
||||||
|
|
||||||
|
export function useCopyCooldown(cooldown: number) {
|
||||||
|
const [copyCooldown, setCopyCooldown] = React.useState(false);
|
||||||
|
|
||||||
|
function copy(text: string) {
|
||||||
|
Clipboard.copy(text);
|
||||||
|
setCopyCooldown(true);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
setCopyCooldown(false);
|
||||||
|
}, cooldown);
|
||||||
|
}
|
||||||
|
|
||||||
|
return [copyCooldown, copy] as const;
|
||||||
|
}
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
/*
|
||||||
|
* Vencord, a modification for Discord's desktop app
|
||||||
|
* Copyright (c) 2022 Vendicated and contributors
|
||||||
|
*
|
||||||
|
* This program is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU General Public License as published by
|
||||||
|
* the Free Software Foundation, either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU General Public License
|
||||||
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useSettings } from "@api/settings";
|
||||||
|
|
||||||
|
import { ShikiSettings } from "../types";
|
||||||
|
|
||||||
|
export function useShikiSettings(settings: (keyof ShikiSettings)[]) {
|
||||||
|
return useSettings(settings.map(setting => `plugins.ShikiCodeblocks.${setting}`)).plugins.ShikiCodeblocks as ShikiSettings;
|
||||||
|
}
|
||||||
@ -0,0 +1,49 @@
|
|||||||
|
/*
|
||||||
|
* Vencord, a modification for Discord's desktop app
|
||||||
|
* Copyright (c) 2022 Vendicated and contributors
|
||||||
|
*
|
||||||
|
* This program is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU General Public License as published by
|
||||||
|
* the Free Software Foundation, either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU General Public License
|
||||||
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { React } from "@webpack/common";
|
||||||
|
|
||||||
|
type Shiki = typeof import("../api/shiki").shiki;
|
||||||
|
interface ThemeState {
|
||||||
|
id: Shiki["currentThemeUrl"],
|
||||||
|
theme: Shiki["currentTheme"],
|
||||||
|
}
|
||||||
|
|
||||||
|
const currentTheme: ThemeState = {
|
||||||
|
id: null,
|
||||||
|
theme: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
const themeSetters = new Set<React.Dispatch<React.SetStateAction<ThemeState>>>();
|
||||||
|
|
||||||
|
export const useTheme = (): ThemeState => {
|
||||||
|
const [, setTheme] = React.useState<ThemeState>(currentTheme);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
themeSetters.add(setTheme);
|
||||||
|
return () => void themeSetters.delete(setTheme);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return currentTheme;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function dispatchTheme(state: ThemeState) {
|
||||||
|
if (currentTheme.id === state.id) return;
|
||||||
|
Object.assign(currentTheme, state);
|
||||||
|
themeSetters.forEach(setTheme => setTheme(state));
|
||||||
|
}
|
||||||
@ -0,0 +1,154 @@
|
|||||||
|
/*
|
||||||
|
* Vencord, a modification for Discord's desktop app
|
||||||
|
* Copyright (c) 2022 Vendicated and contributors
|
||||||
|
*
|
||||||
|
* This program is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU General Public License as published by
|
||||||
|
* the Free Software Foundation, either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU General Public License
|
||||||
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { Devs } from "@utils/constants";
|
||||||
|
import { parseUrl } from "@utils/misc";
|
||||||
|
import { wordsFromPascal, wordsToTitle } from "@utils/text";
|
||||||
|
import definePlugin, { OptionType } from "@utils/types";
|
||||||
|
|
||||||
|
import cssText from "~fileContent/style.css";
|
||||||
|
|
||||||
|
import { Settings } from "../../Vencord";
|
||||||
|
import { shiki } from "./api/shiki";
|
||||||
|
import { themes } from "./api/themes";
|
||||||
|
import { createHighlighter } from "./components/Highlighter";
|
||||||
|
import { DeviconSetting, HljsSetting, ShikiSettings, StyleSheets } from "./types";
|
||||||
|
import { clearStyles, removeStyle, setStyle } from "./utils/createStyle";
|
||||||
|
|
||||||
|
const themeNames = Object.keys(themes);
|
||||||
|
const devIconCss = "@import url('https://cdn.jsdelivr.net/gh/devicons/devicon@v2.10.1/devicon.min.css');";
|
||||||
|
|
||||||
|
const getSettings = () => Settings.plugins.ShikiCodeblocks as ShikiSettings;
|
||||||
|
|
||||||
|
export default definePlugin({
|
||||||
|
name: "ShikiCodeblocks",
|
||||||
|
description: "Brings vscode-style codeblocks into Discord, powered by Shiki",
|
||||||
|
authors: [Devs.Vap],
|
||||||
|
patches: [
|
||||||
|
{
|
||||||
|
find: "codeBlock:{react:function",
|
||||||
|
replacement: {
|
||||||
|
match: /codeBlock:\{react:function\((.),(.),(.)\)\{/,
|
||||||
|
replace: "$&return Vencord.Plugins.plugins.ShikiCodeblocks.renderHighlighter($1,$2,$3);",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
start: async () => {
|
||||||
|
setStyle(cssText, StyleSheets.Main);
|
||||||
|
if (getSettings().useDevIcon !== DeviconSetting.Disabled)
|
||||||
|
setStyle(devIconCss, StyleSheets.DevIcons);
|
||||||
|
|
||||||
|
await shiki.init(getSettings().customTheme || getSettings().theme);
|
||||||
|
},
|
||||||
|
stop: () => {
|
||||||
|
shiki.destroy();
|
||||||
|
clearStyles();
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
theme: {
|
||||||
|
type: OptionType.SELECT,
|
||||||
|
description: "Default themes",
|
||||||
|
options: themeNames.map(themeName => ({
|
||||||
|
label: wordsToTitle(wordsFromPascal(themeName)),
|
||||||
|
value: themes[themeName],
|
||||||
|
default: themes[themeName] === themes.DarkPlus,
|
||||||
|
})),
|
||||||
|
disabled: () => !!getSettings().customTheme,
|
||||||
|
onChange: shiki.setTheme,
|
||||||
|
},
|
||||||
|
customTheme: {
|
||||||
|
type: OptionType.STRING,
|
||||||
|
description: "A link to a custom vscode theme",
|
||||||
|
placeholder: themes.MaterialCandy,
|
||||||
|
isValid: value => {
|
||||||
|
if (!value) return true;
|
||||||
|
const url = parseUrl(value);
|
||||||
|
if (!url) return "Must be a valid URL";
|
||||||
|
|
||||||
|
if (!url.pathname.endsWith(".json")) return "Must be a json file";
|
||||||
|
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
onChange: value => shiki.setTheme(value || getSettings().theme),
|
||||||
|
},
|
||||||
|
tryHljs: {
|
||||||
|
type: OptionType.SELECT,
|
||||||
|
description: "Use the more lightweight default Discord highlighter and theme.",
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: "Never",
|
||||||
|
value: HljsSetting.Never,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Prefer Shiki instead of Highlight.js",
|
||||||
|
value: HljsSetting.Secondary,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Prefer Highlight.js instead of Shiki",
|
||||||
|
value: HljsSetting.Primary,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Always",
|
||||||
|
value: HljsSetting.Always,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
useDevIcon: {
|
||||||
|
type: OptionType.SELECT,
|
||||||
|
description: "How to show language icons on codeblocks",
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: "Disabled",
|
||||||
|
value: DeviconSetting.Disabled,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Colorless",
|
||||||
|
value: DeviconSetting.Greyscale,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Colored",
|
||||||
|
value: DeviconSetting.Color,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
onChange: (newValue: DeviconSetting) => {
|
||||||
|
if (newValue === DeviconSetting.Disabled) removeStyle(StyleSheets.DevIcons);
|
||||||
|
else setStyle(devIconCss, StyleSheets.DevIcons);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
bgOpacity: {
|
||||||
|
type: OptionType.SLIDER,
|
||||||
|
description: "Background opacity",
|
||||||
|
markers: [0, 20, 40, 60, 80, 100],
|
||||||
|
default: 100,
|
||||||
|
stickToMarkers: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
// exports
|
||||||
|
shiki,
|
||||||
|
createHighlighter,
|
||||||
|
renderHighlighter: ({ lang, content }: { lang: string; content: string; }) => {
|
||||||
|
return createHighlighter({
|
||||||
|
lang,
|
||||||
|
content,
|
||||||
|
isPreview: false,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
@ -0,0 +1,100 @@
|
|||||||
|
.shiki-root {
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shiki-root code {
|
||||||
|
display: block;
|
||||||
|
overflow-x: auto;
|
||||||
|
padding: 0.5em;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1.125rem;
|
||||||
|
text-indent: 0;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shiki-root [class^='devicon-'],
|
||||||
|
.shiki-root [class*=' devicon-'] {
|
||||||
|
margin-right: 8px;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shiki-plain code {
|
||||||
|
padding-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shiki-btns {
|
||||||
|
font-size: 1em;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shiki-root:hover .shiki-btns {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shiki-btn {
|
||||||
|
border-radius: 4px 4px 0 0;
|
||||||
|
padding: 4px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shiki-btn~.shiki-btn {
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shiki-btn:last-child {
|
||||||
|
border-radius: 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shiki-spinner-container {
|
||||||
|
align-items: center;
|
||||||
|
background-color: rgba(0, 0, 0, 0.6);
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
justify-content: center;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shiki-preview {
|
||||||
|
margin-bottom: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shiki-lang {
|
||||||
|
padding: 0 5px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-transform: capitalize;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shiki-table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shiki-table tr {
|
||||||
|
height: 19px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shiki-root td:first-child {
|
||||||
|
border-right: 1px solid transparent;
|
||||||
|
padding-left: 5px;
|
||||||
|
padding-right: 8px;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shiki-root td:last-child {
|
||||||
|
padding-left: 8px;
|
||||||
|
word-break: break-word;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
@ -0,0 +1,78 @@
|
|||||||
|
/*
|
||||||
|
* Vencord, a modification for Discord's desktop app
|
||||||
|
* Copyright (c) 2022 Vendicated and contributors
|
||||||
|
*
|
||||||
|
* This program is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU General Public License as published by
|
||||||
|
* the Free Software Foundation, either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU General Public License
|
||||||
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import type {
|
||||||
|
ILanguageRegistration,
|
||||||
|
IShikiTheme,
|
||||||
|
IThemedToken,
|
||||||
|
IThemeRegistration,
|
||||||
|
} from "@vap/shiki";
|
||||||
|
|
||||||
|
import type { Settings } from "../../Vencord";
|
||||||
|
|
||||||
|
/** This must be atleast a subset of the `@vap/shiki-worker` spec */
|
||||||
|
export type ShikiSpec = {
|
||||||
|
setOnigasm: ({ wasm }: { wasm: string; }) => Promise<void>;
|
||||||
|
setHighlighter: ({ theme, langs }: {
|
||||||
|
theme: IThemeRegistration | void;
|
||||||
|
langs: ILanguageRegistration[];
|
||||||
|
}) => Promise<void>;
|
||||||
|
loadTheme: ({ theme }: {
|
||||||
|
theme: string | IShikiTheme;
|
||||||
|
}) => Promise<void>;
|
||||||
|
getTheme: ({ theme }: { theme: string; }) => Promise<{ themeData: string; }>;
|
||||||
|
loadLanguage: ({ lang }: { lang: ILanguageRegistration; }) => Promise<void>;
|
||||||
|
codeToThemedTokens: ({
|
||||||
|
code,
|
||||||
|
lang,
|
||||||
|
theme,
|
||||||
|
}: {
|
||||||
|
code: string;
|
||||||
|
lang?: string;
|
||||||
|
theme?: string;
|
||||||
|
}) => Promise<IThemedToken[][]>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export enum StyleSheets {
|
||||||
|
Main = "MAIN",
|
||||||
|
DevIcons = "DEVICONS",
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum HljsSetting {
|
||||||
|
Never = "NEVER",
|
||||||
|
Secondary = "SECONDARY",
|
||||||
|
Primary = "PRIMARY",
|
||||||
|
Always = "ALWAYS",
|
||||||
|
}
|
||||||
|
export enum DeviconSetting {
|
||||||
|
Disabled = "DISABLED",
|
||||||
|
Greyscale = "GREYSCALE",
|
||||||
|
Color = "COLOR"
|
||||||
|
}
|
||||||
|
|
||||||
|
type CommonSettings = {
|
||||||
|
[K in keyof Settings["plugins"][string]as K extends `${infer V}` ? K : never]: Settings["plugins"][string][K];
|
||||||
|
};
|
||||||
|
|
||||||
|
export interface ShikiSettings extends CommonSettings {
|
||||||
|
theme: string;
|
||||||
|
customTheme: string;
|
||||||
|
tryHljs: HljsSetting;
|
||||||
|
useDevIcon: DeviconSetting;
|
||||||
|
bgOpacity: number;
|
||||||
|
}
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
/*
|
||||||
|
* Vencord, a modification for Discord's desktop app
|
||||||
|
* Copyright (c) 2022 Vendicated and contributors
|
||||||
|
*
|
||||||
|
* This program is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU General Public License as published by
|
||||||
|
* the Free Software Foundation, either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU General Public License
|
||||||
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
export function hex2Rgb(hex: string) {
|
||||||
|
hex = hex.slice(1);
|
||||||
|
if (hex.length < 6)
|
||||||
|
hex = hex
|
||||||
|
.split("")
|
||||||
|
.map(c => c + c)
|
||||||
|
.join("");
|
||||||
|
if (hex.length === 6) hex += "ff";
|
||||||
|
if (hex.length > 6) hex = hex.slice(0, 6);
|
||||||
|
return hex
|
||||||
|
.split(/(..)/)
|
||||||
|
.filter(Boolean)
|
||||||
|
.map(c => parseInt(c, 16));
|
||||||
|
}
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
/*
|
||||||
|
* Vencord, a modification for Discord's desktop app
|
||||||
|
* Copyright (c) 2022 Vendicated and contributors
|
||||||
|
*
|
||||||
|
* This program is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU General Public License as published by
|
||||||
|
* the Free Software Foundation, either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU General Public License
|
||||||
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
const styles = new Map<string, HTMLStyleElement>();
|
||||||
|
|
||||||
|
export function setStyle(css: string, id: string) {
|
||||||
|
const style = document.createElement("style");
|
||||||
|
style.innerText = css;
|
||||||
|
document.head.appendChild(style);
|
||||||
|
styles.set(id, style);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function removeStyle(id: string) {
|
||||||
|
styles.get(id)?.remove();
|
||||||
|
return styles.delete(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
export const clearStyles = () => {
|
||||||
|
styles.forEach(style => style.remove());
|
||||||
|
styles.clear();
|
||||||
|
};
|
||||||
@ -0,0 +1,50 @@
|
|||||||
|
/*
|
||||||
|
* Vencord, a modification for Discord's desktop app
|
||||||
|
* Copyright (c) 2022 Vendicated and contributors
|
||||||
|
*
|
||||||
|
* This program is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU General Public License as published by
|
||||||
|
* the Free Software Foundation, either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU General Public License
|
||||||
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { hljs } from "@webpack/common";
|
||||||
|
|
||||||
|
import { resolveLang } from "../api/languages";
|
||||||
|
import { HighlighterProps } from "../components/Highlighter";
|
||||||
|
import { HljsSetting, ShikiSettings } from "../types";
|
||||||
|
|
||||||
|
export const cl = (className: string) => `shiki-${className}`;
|
||||||
|
|
||||||
|
export const shouldUseHljs = ({
|
||||||
|
lang,
|
||||||
|
tryHljs,
|
||||||
|
}: {
|
||||||
|
lang: HighlighterProps["lang"],
|
||||||
|
tryHljs: ShikiSettings["tryHljs"],
|
||||||
|
}) => {
|
||||||
|
const hljsLang = lang ? hljs?.getLanguage?.(lang) : null;
|
||||||
|
const shikiLang = lang ? resolveLang(lang) : null;
|
||||||
|
const langName = shikiLang?.name;
|
||||||
|
|
||||||
|
switch (tryHljs) {
|
||||||
|
case HljsSetting.Always:
|
||||||
|
return true;
|
||||||
|
case HljsSetting.Primary:
|
||||||
|
return !!hljsLang || lang === "";
|
||||||
|
case HljsSetting.Secondary:
|
||||||
|
return !langName && !!hljsLang;
|
||||||
|
case HljsSetting.Never:
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
};
|
||||||
@ -0,0 +1,62 @@
|
|||||||
|
/*
|
||||||
|
* Vencord, a modification for Discord's desktop app
|
||||||
|
* Copyright (c) 2022 Vendicated and contributors
|
||||||
|
*
|
||||||
|
* This program is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU General Public License as published by
|
||||||
|
* the Free Software Foundation, either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU General Public License
|
||||||
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { React } from "@webpack/common";
|
||||||
|
|
||||||
|
import { checkIntersecting } from "./misc";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if an element is on screen
|
||||||
|
* @param intersectOnly If `true`, will only update the state when the element comes into view
|
||||||
|
* @returns [refCallback, isIntersecting]
|
||||||
|
*/
|
||||||
|
export const useIntersection = (intersectOnly = false): [
|
||||||
|
refCallback: React.RefCallback<Element>,
|
||||||
|
isIntersecting: boolean,
|
||||||
|
] => {
|
||||||
|
const observerRef = React.useRef<IntersectionObserver | null>(null);
|
||||||
|
const [isIntersecting, setIntersecting] = React.useState(false);
|
||||||
|
|
||||||
|
const refCallback = (element: Element | null) => {
|
||||||
|
observerRef.current?.disconnect();
|
||||||
|
observerRef.current = null;
|
||||||
|
|
||||||
|
if (!element) return;
|
||||||
|
|
||||||
|
if (checkIntersecting(element)) {
|
||||||
|
setIntersecting(true);
|
||||||
|
if (intersectOnly) return;
|
||||||
|
}
|
||||||
|
|
||||||
|
observerRef.current = new IntersectionObserver(entries => {
|
||||||
|
for (const entry of entries) {
|
||||||
|
if (entry.target !== element) continue;
|
||||||
|
if (entry.isIntersecting && intersectOnly) {
|
||||||
|
setIntersecting(true);
|
||||||
|
observerRef.current?.disconnect();
|
||||||
|
observerRef.current = null;
|
||||||
|
} else {
|
||||||
|
setIntersecting(entry.isIntersecting);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
observerRef.current.observe(element);
|
||||||
|
};
|
||||||
|
|
||||||
|
return [refCallback, isIntersecting];
|
||||||
|
};
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
/*
|
||||||
|
* Vencord, a modification for Discord's desktop app
|
||||||
|
* Copyright (c) 2022 Vendicated and contributors
|
||||||
|
*
|
||||||
|
* This program is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU General Public License as published by
|
||||||
|
* the Free Software Foundation, either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU General Public License
|
||||||
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Utils for readable text transformations eg: `toTitle(fromKebab())`
|
||||||
|
|
||||||
|
// Case style to words
|
||||||
|
export const wordsFromCamel = (text: string) => text.split(/(?=[A-Z])/).map(w => w.toLowerCase());
|
||||||
|
export const wordsFromSnake = (text: string) => text.toLowerCase().split("_");
|
||||||
|
export const wordsFromKebab = (text: string) => text.toLowerCase().split("-");
|
||||||
|
export const wordsFromPascal = (text: string) => text.split(/(?=[A-Z])/).map(w => w.toLowerCase());
|
||||||
|
export const wordsFromTitle = (text: string) => text.toLowerCase().split(" ");
|
||||||
|
|
||||||
|
// Words to case style
|
||||||
|
export const wordsToCamel = (words: string[]) =>
|
||||||
|
words.map((w, i) => (i ? w[0].toUpperCase() + w.slice(1) : w)).join("");
|
||||||
|
export const wordsToSnake = (words: string[]) => words.join("_").toUpperCase();
|
||||||
|
export const wordsToKebab = (words: string[]) => words.join("-").toLowerCase();
|
||||||
|
export const wordsToPascal = (words: string[]) =>
|
||||||
|
words.map(w => w[0].toUpperCase() + w.slice(1)).join("");
|
||||||
|
export const wordsToTitle = (words: string[]) =>
|
||||||
|
words.map(w => w[0].toUpperCase() + w.slice(1)).join(" ");
|
||||||
Loading…
Reference in new issue