✨ feat: Add wrap to highlihter props

lobehub · Jul 26, 2024 · 1dd8ff6 · 1dd8ff6
1 parent 5a94c8c
commit 1dd8ff6
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 27 deletions.
diff --git a/src/Highlighter/demos/index.tsx b/src/Highlighter/demos/index.tsx
@@ -27,6 +27,7 @@ export default () => {
         options: ['ghost', 'block', 'pure'],
         value: 'block',
       },
+      wrap: false,
     },
     { store },
   );

diff --git a/src/Highlighter/index.tsx b/src/Highlighter/index.tsx
@@ -45,6 +45,7 @@ export interface HighlighterProps extends DivProps {
    * @default 'block'
    */
   type?: 'ghost' | 'block' | 'pure';
+  wrap?: boolean;
 }
 
 export const Highlighter = memo<HighlighterProps>(
@@ -62,10 +63,11 @@ export const Highlighter = memo<HighlighterProps>(
     allowChangeLanguage = true,
     fileName,
     icon,
+    wrap,
     ...rest
   }) => {
     const { styles, cx } = useStyles(type);
-    const container = cx(styles.container, className);
+    const container = cx(styles.container, !wrap && styles.nowrap, className);
 
     if (fullFeatured)
       return (

diff --git a/src/Highlighter/style.ts b/src/Highlighter/style.ts
@@ -63,7 +63,6 @@ export const useStyles = createStyles(
           }
 
           code {
-            text-wrap: nowrap !important;
             background: transparent !important;
           }
         `,
@@ -90,6 +89,11 @@ export const useStyles = createStyles(
           transition: opacity 0.1s;
         `,
       ),
+      nowrap: css`
+        code {
+          text-wrap: nowrap !important;
+        }
+      `,
       scroller: css`
         overflow: auto;
         width: 100%;

diff --git a/src/Markdown/utils.test.ts b/src/Markdown/utils.test.ts