summaryrefslogtreecommitdiffstats
path: root/src/components/MDX/CodeBlock
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/MDX/CodeBlock')
-rw-r--r--src/components/MDX/CodeBlock/CodeBlock.tsx115
1 files changed, 0 insertions, 115 deletions
diff --git a/src/components/MDX/CodeBlock/CodeBlock.tsx b/src/components/MDX/CodeBlock/CodeBlock.tsx
deleted file mode 100644
index c330063..0000000
--- a/src/components/MDX/CodeBlock/CodeBlock.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import {
- PrismDefaultPlugins,
- PrismLanguages,
- PrismPlugins,
-} from '@ts/types/prism';
-import { usePrismTheme } from '@utils/providers/prism-theme';
-import { useRouter } from 'next/router';
-import Prism from 'prismjs';
-import { useCallback, useEffect, useMemo } from 'react';
-import { useIntl } from 'react-intl';
-
-const CodeBlock = ({
- code,
- language,
- plugins,
-}: {
- code: string;
- language: PrismLanguages;
- plugins: PrismPlugins[];
-}) => {
- const intl = useIntl();
- const router = useRouter();
- const { setCodeBlocks } = usePrismTheme();
-
- useEffect(() => {
- const allPre: NodeListOf<HTMLPreElement> = document.querySelectorAll(
- 'pre[data-prismjs-color-scheme-current]'
- );
- setCodeBlocks(allPre);
- }, [setCodeBlocks, router.asPath]);
-
- const defaultPlugins: PrismDefaultPlugins[] = useMemo(
- () => [
- 'autoloader',
- 'toolbar',
- 'show-language',
- 'copy-to-clipboard',
- 'color-scheme',
- 'match-braces',
- 'normalize-whitespace',
- ],
- []
- );
-
- const loadPrismPlugins = useCallback(
- async (prismPlugins: (PrismDefaultPlugins | PrismPlugins)[]) => {
- for (const plugin of prismPlugins) {
- try {
- if (plugin === 'color-scheme') {
- await import(`@utils/plugins/prism-${plugin}`);
- } else {
- await import(`prismjs/plugins/${plugin}/prism-${plugin}.min.js`);
-
- if (plugin === 'autoloader')
- Prism.plugins.autoloader.languages_path = '/prism/';
- }
- } catch (error) {
- console.error('CodeBlock: an error occurred with Prism.');
- console.error(error);
- }
- }
- },
- []
- );
-
- useEffect(() => {
- loadPrismPlugins([...defaultPlugins, ...plugins]).then(() => {
- Prism.highlightAll();
- });
- }, [loadPrismPlugins, defaultPlugins, plugins]);
-
- const copyText = intl.formatMessage({
- defaultMessage: 'Copy',
- description: 'Prism: copy button text (no clicked)',
- id: '/ly3AC',
- });
- const copiedText = intl.formatMessage({
- defaultMessage: 'Copied!',
- description: 'Prism: copy button text (clicked)',
- id: 'OV9r1K',
- });
- const errorText = intl.formatMessage({
- defaultMessage: 'Use Ctrl+c to copy',
- description: 'Prism: error text',
- id: 'z9qkcQ',
- });
- const darkTheme = intl.formatMessage({
- defaultMessage: 'Dark Theme 🌙',
- description: 'Prism: toggle dark theme button text',
- id: 'nFMdWI',
- });
- const lightTheme = intl.formatMessage({
- defaultMessage: 'Light Theme 🌞',
- description: 'Prism: toggle light theme button text',
- id: 'Ua2g2p',
- });
-
- const defaultPluginsClasses = 'match-braces';
- const pluginsClasses = plugins.join(' ');
-
- return (
- <pre
- className={`language-${language} ${defaultPluginsClasses} ${pluginsClasses}`}
- data-prismjs-copy={copyText}
- data-prismjs-copy-success={copiedText}
- data-prismjs-copy-error={errorText}
- data-prismjs-color-scheme-dark={darkTheme}
- data-prismjs-color-scheme-light={lightTheme}
- >
- <code className={`language-${language}`}>{code}</code>
- </pre>
- );
-};
-
-export default CodeBlock;