feat(Highlighter): support wrap props

yuntijs · Aug 12, 2024 · 17b6edd · 17b6edd
1 parent ce8141b
commit 17b6edd
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/src/Highlighter/demos/index.tsx b/src/Highlighter/demos/index.tsx
@@ -34,6 +34,7 @@ export default () => {
         value: 'block',
       },
       fullFeatured: false,
+      wrap: false,
     },
     { store }
   );

diff --git a/src/Highlighter/index.tsx b/src/Highlighter/index.tsx
@@ -47,6 +47,11 @@ export interface HighlighterProps extends DivProps {
    * @description The style of the code content
    */
   contentStyle?: React.CSSProperties;
+  /**
+   * @description Control text wrap
+   * @default false
+   */
+  wrap?: boolean;
 }
 
 export const Highlighter = memo<HighlighterProps>(
@@ -65,10 +70,11 @@ export const Highlighter = memo<HighlighterProps>(
     fileName,
     icon,
     contentStyle,
+    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%;