From 006b15b467a5cd835a6eab1b49023100bdc8f2e6 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 13 Oct 2023 19:32:56 +0200
Subject: refactor(components): rewrite Code component and usePrism hook

* move Prism styles to Sass placeholders to avoid repeats
* let usePrism consumer define its plugins (remove default ones)
* remove `plugins` prop from Code component
* add new props to Code component to let consumer configure plugins
(and handle plugin list from the given options)

However there are some problems with Prism plugins: line-highlight and
treeview does not seems to be loaded. I don't want to use Babel instead
of SWC so I have no solution for now.
---
 src/utils/hooks/use-prism.tsx | 183 ------------------------------------------
 1 file changed, 183 deletions(-)
 delete mode 100644 src/utils/hooks/use-prism.tsx

(limited to 'src/utils/hooks/use-prism.tsx')

diff --git a/src/utils/hooks/use-prism.tsx b/src/utils/hooks/use-prism.tsx
deleted file mode 100644
index 429808f..0000000
--- a/src/utils/hooks/use-prism.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-import Prism from 'prismjs';
-import { useEffect, useMemo } from 'react';
-import { useIntl } from 'react-intl';
-
-const PRISM_PLUGINS = [
-  'autoloader',
-  'color-scheme',
-  'command-line',
-  'copy-to-clipboard',
-  'diff-highlight',
-  'inline-color',
-  'line-highlight',
-  'line-numbers',
-  'match-braces',
-  'normalize-whitespace',
-  'show-language',
-  'toolbar',
-] as const;
-
-export type PrismPlugin = (typeof PRISM_PLUGINS)[number];
-
-export type DefaultPrismPlugin = Extract<
-  PrismPlugin,
-  | 'autoloader'
-  | 'color-scheme'
-  | 'copy-to-clipboard'
-  | 'match-braces'
-  | 'normalize-whitespace'
-  | 'show-language'
-  | 'toolbar'
->;
-
-export type OptionalPrismPlugin = Exclude<PrismPlugin, DefaultPrismPlugin>;
-
-export type PrismLanguage =
-  | 'apacheconf'
-  | 'bash'
-  | 'css'
-  | 'diff'
-  | 'docker'
-  | 'editorconfig'
-  | 'ejs'
-  | 'git'
-  | 'graphql'
-  | 'html'
-  | 'ignore'
-  | 'ini'
-  | 'javascript'
-  | 'jsdoc'
-  | 'json'
-  | 'jsx'
-  | 'makefile'
-  | 'markup'
-  | 'php'
-  | 'phpdoc'
-  | 'regex'
-  | 'scss'
-  | 'shell-session'
-  | 'smarty'
-  | 'tcl'
-  | 'toml'
-  | 'tsx'
-  | 'twig'
-  | 'yaml';
-
-export type PrismAttributes = {
-  'data-prismjs-copy': string;
-  'data-prismjs-copy-success': string;
-  'data-prismjs-copy-error': string;
-  'data-prismjs-color-scheme-dark': string;
-  'data-prismjs-color-scheme-light': string;
-};
-
-export type UsePrismProps = {
-  language?: PrismLanguage;
-  plugins: OptionalPrismPlugin[];
-};
-
-export type UsePrismReturn = {
-  attributes: PrismAttributes;
-  className: string;
-};
-
-/**
- * Import and configure all given Prism plugins.
- *
- * @param {PrismPlugin[]} plugins - The Prism plugins to activate.
- */
-const loadPrismPlugins = async (plugins: PrismPlugin[]) => {
-  for (const plugin of plugins) {
-    try {
-      if (plugin === 'color-scheme') {
-        await import(`../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('usePrism: an error occurred while loading Prism plugins.');
-      console.error(error);
-    }
-  }
-};
-
-/**
- * Use Prism and its plugins.
- *
- * @param {UsePrismProps} props - An object of options.
- * @returns {UsePrismReturn} An object of data.
- */
-export const usePrism = ({
-  language,
-  plugins,
-}: UsePrismProps): UsePrismReturn => {
-  /**
-   * The order matter. Toolbar must be loaded before some other plugins.
-   */
-  const defaultPlugins: DefaultPrismPlugin[] = useMemo(
-    () => [
-      'toolbar',
-      'autoloader',
-      'show-language',
-      'copy-to-clipboard',
-      'color-scheme',
-      'match-braces',
-      'normalize-whitespace',
-    ],
-    []
-  );
-
-  useEffect(() => {
-    loadPrismPlugins([...defaultPlugins, ...plugins]).then(() => {
-      Prism.highlightAll();
-    });
-  }, [defaultPlugins, plugins]);
-
-  const defaultClassName = 'match-braces';
-  const languageClassName = language ? `language-${language}` : '';
-  const pluginsClassName = plugins.join(' ');
-  const className = `${defaultClassName} ${pluginsClassName} ${languageClassName}`;
-
-  const intl = useIntl();
-  const copyText = intl.formatMessage({
-    defaultMessage: 'Copy',
-    description: 'usePrism: copy button text (not clicked)',
-    id: '6GySNl',
-  });
-  const copiedText = intl.formatMessage({
-    defaultMessage: 'Copied!',
-    description: 'usePrism: copy button text (clicked)',
-    id: 'nsw6Th',
-  });
-  const errorText = intl.formatMessage({
-    defaultMessage: 'Use Ctrl+c to copy',
-    description: 'usePrism: copy button error text',
-    id: 'lKhTGM',
-  });
-  const darkTheme = intl.formatMessage({
-    defaultMessage: 'Dark Theme 🌙',
-    description: 'usePrism: toggle dark theme button text',
-    id: 'QLisK6',
-  });
-  const lightTheme = intl.formatMessage({
-    defaultMessage: 'Light Theme 🌞',
-    description: 'usePrism: toggle light theme button text',
-    id: 'hHVgW3',
-  });
-  const attributes = {
-    '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,
-  };
-
-  return {
-    attributes,
-    className,
-  };
-};
-- 
cgit v1.2.3