aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/molecules/layout/code.tsx
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2023-10-13 19:32:56 +0200
committerArmand Philippot <git@armandphilippot.com>2023-11-11 18:14:41 +0100
commit006b15b467a5cd835a6eab1b49023100bdc8f2e6 (patch)
tree949c7295c2e206f42357f135bab4696ddf6576ec /src/components/molecules/layout/code.tsx
parent00f147a7a687d5772bcc538bc606cfff972178cd (diff)
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.
Diffstat (limited to 'src/components/molecules/layout/code.tsx')
-rw-r--r--src/components/molecules/layout/code.tsx69
1 files changed, 0 insertions, 69 deletions
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>
- );
-};