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/components/molecules/layout/code.tsx | 69 --------------------------------
 1 file changed, 69 deletions(-)
 delete mode 100644 src/components/molecules/layout/code.tsx

(limited to 'src/components/molecules/layout/code.tsx')

diff --git a/src/components/molecules/layout/code.tsx b/src/components/molecules/layout/code.tsx
deleted file mode 100644
index a1aadd8..0000000
--- a/src/components/molecules/layout/code.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { FC, useRef } from 'react';
-import {
-  type OptionalPrismPlugin,
-  type PrismLanguage,
-  usePrism,
-} from '../../../utils/hooks';
-import styles from './code.module.scss';
-
-export type CodeProps = {
-  /**
-   * An accessible name.
-   */
-  'aria-label'?: string;
-  /**
-   * The code to highlight.
-   */
-  children: string;
-  /**
-   * Filter command line output. Default: false.
-   */
-  filterOutput?: boolean;
-  /**
-   * The code language.
-   */
-  language: PrismLanguage;
-  /**
-   * The optional Prism plugins.
-   */
-  plugins?: OptionalPrismPlugin[];
-  /**
-   * Filter command line output using the given string. Default: #output#
-   */
-  outputPattern?: string;
-};
-
-/**
- * Code component
- *
- * Render a code block with syntax highlighting.
- */
-export const Code: FC<CodeProps> = ({
-  children,
-  filterOutput = false,
-  language,
-  plugins = [],
-  outputPattern = '#output#',
-  ...props
-}) => {
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const { attributes, className } = usePrism({ language, plugins });
-
-  const outputAttribute = filterOutput
-    ? { 'data-filter-output': outputPattern }
-    : {};
-
-  return (
-    <div className={styles.wrapper} ref={wrapperRef}>
-      <pre
-        {...props}
-        {...attributes}
-        {...outputAttribute}
-        className={className}
-        tabIndex={0}
-      >
-        <code className={`language-${language}`}>{children}</code>
-      </pre>
-    </div>
-  );
-};
-- 
cgit v1.2.3