🐛 fix: highlighter scroll bugs (lobehub#178)

bentwnghk · Jul 8, 2024 · 079bc9a · 079bc9a
1 parent 532c5bf
commit 079bc9a
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 4 deletions.
diff --git a/src/Highlighter/demos/FullFeatured.tsx b/src/Highlighter/demos/FullFeatured.tsx
@@ -33,7 +33,7 @@ export default () => {
 
   return (
     <StoryBook levaStore={store}>
-      <Highlighter fullFeatured {...options} />
+      <Highlighter fullFeatured {...options} style={{ ...options.style, width: '100%' }} />
     </StoryBook>
   );
 };
diff --git a/src/Highlighter/demos/index.tsx b/src/Highlighter/demos/index.tsx
@@ -33,7 +33,7 @@ export default () => {
 
   return (
     <StoryBook levaStore={store}>
-      <Highlighter {...options} />
+      <Highlighter {...options} style={{ ...options.style, width: '100%' }} />
     </StoryBook>
   );
 };
diff --git a/src/Highlighter/index.tsx b/src/Highlighter/index.tsx
@@ -94,7 +94,9 @@ export const Highlighter = memo<HighlighterProps>(
           />
         )}
         {showLanguage && language && <Tag className={styles.lang}>{language.toLowerCase()}</Tag>}
-        <SyntaxHighlighter language={language?.toLowerCase()}>{children}</SyntaxHighlighter>
+        <div className={styles.scroller}>
+          <SyntaxHighlighter language={language?.toLowerCase()}>{children}</SyntaxHighlighter>
+        </div>
       </div>
     );
   },

diff --git a/src/Highlighter/style.ts b/src/Highlighter/style.ts
@@ -33,7 +33,7 @@ export const useStyles = createStyles(
         type !== 'pure' && typeStylish,
         css`
           position: relative;
-          overflow: auto;
+          overflow: hidden;
           border-radius: ${token.borderRadius}px;
           transition: background-color 100ms ${token.motionEaseOut};
 
@@ -90,6 +90,11 @@ export const useStyles = createStyles(
           transition: opacity 0.1s;
         `,
       ),
+      scroller: css`
+        overflow: auto;
+        width: 100%;
+        height: 100%;
+      `,
       select: css`
         user-select: none;
         font-size: 14px;