diff options
Diffstat (limited to 'src/plugins/shikiCodeblocks.desktop')
20 files changed, 1232 insertions, 0 deletions
diff --git a/src/plugins/shikiCodeblocks.desktop/api/languages.ts b/src/plugins/shikiCodeblocks.desktop/api/languages.ts new file mode 100644 index 0000000..f14a4dc --- /dev/null +++ b/src/plugins/shikiCodeblocks.desktop/api/languages.ts @@ -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; +} diff --git a/src/plugins/shikiCodeblocks.desktop/api/shiki.ts b/src/plugins/shikiCodeblocks.desktop/api/shiki.ts new file mode 100644 index 0000000..91e179b --- /dev/null +++ b/src/plugins/shikiCodeblocks.desktop/api/shiki.ts @@ -0,0 +1,118 @@ +/* + * 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(); + } +}; diff --git a/src/plugins/shikiCodeblocks.desktop/api/themes.ts b/src/plugins/shikiCodeblocks.desktop/api/themes.ts new file mode 100644 index 0000000..f31ce60 --- /dev/null +++ b/src/plugins/shikiCodeblocks.desktop/api/themes.ts @@ -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()); +}; diff --git a/src/plugins/shikiCodeblocks.desktop/components/ButtonRow.tsx b/src/plugins/shikiCodeblocks.desktop/components/ButtonRow.tsx new file mode 100644 index 0000000..e73eb72 --- /dev/null +++ b/src/plugins/shikiCodeblocks.desktop/components/ButtonRow.tsx @@ -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>; +} diff --git a/src/plugins/shikiCodeblocks.desktop/components/Code.tsx b/src/plugins/shikiCodeblocks.desktop/components/Code.tsx new file mode 100644 index 0000000..ce6a705 --- /dev/null +++ b/src/plugins/shikiCodeblocks.desktop/components/Code.tsx @@ -0,0 +1,93 @@ +/* + * 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 { hljs } from "@webpack/common"; + +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>; +}; diff --git a/src/plugins/shikiCodeblocks.desktop/components/CopyButton.tsx b/src/plugins/shikiCodeblocks.desktop/components/CopyButton.tsx new file mode 100644 index 0000000..153b3cd --- /dev/null +++ b/src/plugins/shikiCodeblocks.desktop/components/CopyButton.tsx @@ -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> + + ); +} diff --git a/src/plugins/shikiCodeblocks.desktop/components/Header.tsx b/src/plugins/shikiCodeblocks.desktop/components/Header.tsx new file mode 100644 index 0000000..320dde9 --- /dev/null +++ b/src/plugins/shikiCodeblocks.desktop/components/Header.tsx @@ -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={`${cl("devicon")} devicon-${shikiLang.devicon}${useDevIcon === DeviconSetting.Color ? " colored" : ""}`} + /> + )} + {langName} + </div> + ); +} diff --git a/src/plugins/shikiCodeblocks.desktop/components/Highlighter.tsx b/src/plugins/shikiCodeblocks.desktop/components/Highlighter.tsx new file mode 100644 index 0000000..dd14019 --- /dev/null +++ b/src/plugins/shikiCodeblocks.desktop/components/Highlighter.tsx @@ -0,0 +1,126 @@ +/* + * 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, 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; + tempSettings?: Record<string, any>; +} + +export const createHighlighter = (props: HighlighterProps) => ( + <pre className={cl("container")}> + <ErrorBoundary> + <Highlighter {...props} /> + </ErrorBoundary> + </pre> +); +export const Highlighter = ({ + lang, + content, + isPreview, + tempSettings, +}: HighlighterProps) => { + const { + tryHljs, + useDevIcon, + bgOpacity, + } = useShikiSettings(["tryHljs", "useDevIcon", "bgOpacity"], tempSettings); + const { id: currentThemeId, theme: currentTheme } = useTheme(); + + const shikiLang = lang ? resolveLang(lang) : null; + const useHljs = shouldUseHljs({ lang, tryHljs }); + + const [rootRef, 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; + + return ( + <div + ref={rootRef} + className={cl("root", { plain: !langName, preview: isPreview })} + 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> + </div> + ); +}; + diff --git a/src/plugins/shikiCodeblocks.desktop/devicon.css b/src/plugins/shikiCodeblocks.desktop/devicon.css new file mode 100644 index 0000000..ed1014e --- /dev/null +++ b/src/plugins/shikiCodeblocks.desktop/devicon.css @@ -0,0 +1 @@ +@import url("https://cdn.jsdelivr.net/gh/devicons/devicon@v2.10.1/devicon.min.css"); diff --git a/src/plugins/shikiCodeblocks.desktop/hooks/useCopyCooldown.ts b/src/plugins/shikiCodeblocks.desktop/hooks/useCopyCooldown.ts new file mode 100644 index 0000000..414500b --- /dev/null +++ b/src/plugins/shikiCodeblocks.desktop/hooks/useCopyCooldown.ts @@ -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; +} diff --git a/src/plugins/shikiCodeblocks.desktop/hooks/useShikiSettings.ts b/src/plugins/shikiCodeblocks.desktop/hooks/useShikiSettings.ts new file mode 100644 index 0000000..22954ce --- /dev/null +++ b/src/plugins/shikiCodeblocks.desktop/hooks/useShikiSettings.ts @@ -0,0 +1,47 @@ +/* + * 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 { PartialExcept } from "@utils/types"; +import { React } from "@webpack/common"; + +import { shiki } from "../api/shiki"; +import { settings as pluginSettings, ShikiSettings } from "../settings"; + +export function useShikiSettings<F extends keyof ShikiSettings>(settingKeys: F[], overrides?: Partial<ShikiSettings>) { + const settings: Partial<ShikiSettings> = pluginSettings.use(settingKeys); + const [isLoading, setLoading] = React.useState(false); + + const withOverrides = { ...settings, ...overrides } as PartialExcept<ShikiSettings, F>; + const themeUrl = withOverrides.customTheme || withOverrides.theme; + + if (overrides) { + const willChangeTheme = shiki.currentThemeUrl && themeUrl && themeUrl !== shiki.currentThemeUrl; + const noOverrides = Object.keys(overrides).length === 0; + + if (isLoading && (!willChangeTheme || noOverrides)) setLoading(false); + if (!isLoading && willChangeTheme) { + setLoading(true); + shiki.setTheme(themeUrl); + } + } + + return { + ...withOverrides, + isThemeLoading: themeUrl !== shiki.currentThemeUrl, + }; +} diff --git a/src/plugins/shikiCodeblocks.desktop/hooks/useTheme.ts b/src/plugins/shikiCodeblocks.desktop/hooks/useTheme.ts new file mode 100644 index 0000000..fae5796 --- /dev/null +++ b/src/plugins/shikiCodeblocks.desktop/hooks/useTheme.ts @@ -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)); +} diff --git a/src/plugins/shikiCodeblocks.desktop/index.ts b/src/plugins/shikiCodeblocks.desktop/index.ts new file mode 100644 index 0000000..58e55b4 --- /dev/null +++ b/src/plugins/shikiCodeblocks.desktop/index.ts @@ -0,0 +1,75 @@ +/* + * 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 "./shiki.css"; + +import { enableStyle } from "@api/Styles"; +import { Devs } from "@utils/constants"; +import definePlugin from "@utils/types"; + +import previewExampleText from "~fileContent/previewExample.tsx"; + +import { shiki } from "./api/shiki"; +import { createHighlighter } from "./components/Highlighter"; +import deviconStyle from "./devicon.css?managed"; +import { settings } from "./settings"; +import { DeviconSetting } from "./types"; +import { clearStyles } from "./utils/createStyle"; + +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\((\i),(\i),(\i)\)\{/, + replace: "$&return $self.renderHighlighter($1,$2,$3);", + }, + }, + ], + start: async () => { + if (settings.store.useDevIcon !== DeviconSetting.Disabled) + enableStyle(deviconStyle); + + await shiki.init(settings.store.customTheme || settings.store.theme); + }, + stop: () => { + shiki.destroy(); + clearStyles(); + }, + settingsAboutComponent: ({ tempSettings }) => createHighlighter({ + lang: "tsx", + content: previewExampleText, + isPreview: true, + tempSettings, + }), + settings, + + // exports + shiki, + createHighlighter, + renderHighlighter: ({ lang, content }: { lang: string; content: string; }) => { + return createHighlighter({ + lang, + content, + isPreview: false, + }); + }, +}); diff --git a/src/plugins/shikiCodeblocks.desktop/previewExample.tsx b/src/plugins/shikiCodeblocks.desktop/previewExample.tsx new file mode 100644 index 0000000..508153b --- /dev/null +++ b/src/plugins/shikiCodeblocks.desktop/previewExample.tsx @@ -0,0 +1,13 @@ +/* eslint-disable simple-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/plugins/shikiCodeblocks.desktop/settings.ts b/src/plugins/shikiCodeblocks.desktop/settings.ts new file mode 100644 index 0000000..f9fd3cc --- /dev/null +++ b/src/plugins/shikiCodeblocks.desktop/settings.ts @@ -0,0 +1,123 @@ +/* + * Vencord, a modification for Discord's desktop app + * Copyright (c) 2023 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 { definePluginSettings } from "@api/Settings"; +import { disableStyle, enableStyle } from "@api/Styles"; +import { parseUrl } from "@utils/misc"; +import { wordsFromPascal, wordsToTitle } from "@utils/text"; +import { OptionType } from "@utils/types"; + +import { shiki } from "./api/shiki"; +import { themes } from "./api/themes"; +import deviconStyle from "./devicon.css?managed"; +import { DeviconSetting, HljsSetting } from "./types"; + +const themeNames = Object.keys(themes) as (keyof typeof themes)[]; + +export type ShikiSettings = typeof settings.store; +export const settings = definePluginSettings({ + theme: { + type: OptionType.SELECT, + description: "Default themes", + options: themeNames.map(themeName => ({ + label: wordsToTitle(wordsFromPascal(themeName)), + value: themes[themeName], + default: themes[themeName] === themes.DarkPlus, + })), + onChange: shiki.setTheme, + }, + customTheme: { + type: OptionType.STRING, + description: "A link to a custom vscode theme", + placeholder: themes.MaterialCandy, + onChange: value => { + shiki.setTheme(value || settings.store.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) disableStyle(deviconStyle); + else enableStyle(deviconStyle); + }, + }, + bgOpacity: { + type: OptionType.SLIDER, + description: "Background opacity", + markers: [0, 20, 40, 60, 80, 100], + default: 100, + componentProps: { + stickToMarkers: false, + onValueRender: null, // Defaults to percentage + }, + }, +}, { + theme: { + disabled() { return !!this.store.customTheme; }, + }, + customTheme: { + 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; + }, + } +}); diff --git a/src/plugins/shikiCodeblocks.desktop/shiki.css b/src/plugins/shikiCodeblocks.desktop/shiki.css new file mode 100644 index 0000000..8674147 --- /dev/null +++ b/src/plugins/shikiCodeblocks.desktop/shiki.css @@ -0,0 +1,101 @@ +.shiki-container { + border: 4px; + background-color: var(--background-secondary); +} + +.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-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; + user-select: none; +} + +.shiki-btn ~ .shiki-btn { + margin-left: 4px; +} + +.shiki-btn:last-child { + border-radius: 4px 0; +} + +.shiki-spinner-container { + align-items: center; + background-color: rgb(0 0 0 / 60%); + display: flex; + position: absolute; + justify-content: center; + inset: 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%; +} diff --git a/src/plugins/shikiCodeblocks.desktop/types.ts b/src/plugins/shikiCodeblocks.desktop/types.ts new file mode 100644 index 0000000..fb4a821 --- /dev/null +++ b/src/plugins/shikiCodeblocks.desktop/types.ts @@ -0,0 +1,64 @@ +/* + * 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"; + +/** 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 const enum StyleSheets { + Main = "MAIN", + DevIcons = "DEVICONS", +} + +export const enum HljsSetting { + Never = "NEVER", + Secondary = "SECONDARY", + Primary = "PRIMARY", + Always = "ALWAYS", +} +export const enum DeviconSetting { + Disabled = "DISABLED", + Greyscale = "GREYSCALE", + Color = "COLOR" +} diff --git a/src/plugins/shikiCodeblocks.desktop/utils/color.ts b/src/plugins/shikiCodeblocks.desktop/utils/color.ts new file mode 100644 index 0000000..e74ec52 --- /dev/null +++ b/src/plugins/shikiCodeblocks.desktop/utils/color.ts @@ -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)); +} diff --git a/src/plugins/shikiCodeblocks.desktop/utils/createStyle.ts b/src/plugins/shikiCodeblocks.desktop/utils/createStyle.ts new file mode 100644 index 0000000..734f7dc --- /dev/null +++ b/src/plugins/shikiCodeblocks.desktop/utils/createStyle.ts @@ -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(); +}; diff --git a/src/plugins/shikiCodeblocks.desktop/utils/misc.ts b/src/plugins/shikiCodeblocks.desktop/utils/misc.ts new file mode 100644 index 0000000..e0c5263 --- /dev/null +++ b/src/plugins/shikiCodeblocks.desktop/utils/misc.ts @@ -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 { classNameFactory } from "@api/Styles"; +import { hljs } from "@webpack/common"; + +import { resolveLang } from "../api/languages"; +import { HighlighterProps } from "../components/Highlighter"; +import { HljsSetting } from "../types"; + +export const cl = classNameFactory("shiki-"); + +export const shouldUseHljs = ({ + lang, + tryHljs, +}: { + lang: HighlighterProps["lang"], + tryHljs: HljsSetting, +}) => { + 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; + default: return false; + } +}; |