From 41f5d71e38f785786656e111cf2ea1200e45886d Mon Sep 17 00:00:00 2001 From: V Date: Tue, 19 Sep 2023 04:07:24 +0200 Subject: Bundle dependencies with extensions for webstore rule compliance (#1740) --- .../components/ButtonRow.tsx | 46 ++++++++ .../shikiCodeblocks.desktop/components/Code.tsx | 93 +++++++++++++++ .../components/CopyButton.tsx | 41 +++++++ .../shikiCodeblocks.desktop/components/Header.tsx | 42 +++++++ .../components/Highlighter.tsx | 126 +++++++++++++++++++++ 5 files changed, 348 insertions(+) create mode 100644 src/plugins/shikiCodeblocks.desktop/components/ButtonRow.tsx create mode 100644 src/plugins/shikiCodeblocks.desktop/components/Code.tsx create mode 100644 src/plugins/shikiCodeblocks.desktop/components/CopyButton.tsx create mode 100644 src/plugins/shikiCodeblocks.desktop/components/Header.tsx create mode 100644 src/plugins/shikiCodeblocks.desktop/components/Highlighter.tsx (limited to 'src/plugins/shikiCodeblocks.desktop/components') 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 . +*/ + +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( + + ); + } + + return
{buttons}
; +} 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 . +*/ + +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) => ); + } catch { + lines = content.split("\n").map(line => {line}); + } + } 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 {"\n"}; + } + + return ( + <> + {line.map(({ content, color, fontStyle }, i) => ( + + {content} + + ))} + + ); + }); + } + + const codeTableRows = lines.map((line, i) => ( + + {i + 1} + {line} + + )); + + return {...codeTableRows}
; +}; 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 . +*/ + +import { useCopyCooldown } from "../hooks/useCopyCooldown"; + +export interface CopyButtonProps extends React.DetailedHTMLProps, HTMLButtonElement> { + content: string; +} + +export function CopyButton({ content, ...props }: CopyButtonProps) { + const [copyCooldown, copy] = useCopyCooldown(1000); + + return ( + + + ); +} 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 . +*/ + +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 ( +
+ {useDevIcon !== DeviconSetting.Disabled && shikiLang?.devicon && ( + + )} + {langName} +
+ ); +} 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 . +*/ + +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; +} + +export const createHighlighter = (props: HighlighterProps) => ( + 
+        
+            
+        
+
+); +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 ( +
+ +
+ + {!isPreview && } + +
+ ); +}; + -- cgit