feat(Highlighter): support contentStyle

src/DragPanel/index.tsx

@@ -22,6 +22,7 @@ export const DragPanel: React.FC<DragPanelProps> = memo(
     const draggleRef = useRef<HTMLDivElement>(null);
 
     const onStart = (_event: DraggableEvent, uiData: DraggableData) => {
+      // @Todo SSR
       const { clientWidth, clientHeight } = window.document.documentElement;
       const targetRect = draggleRef.current?.getBoundingClientRect();
       if (!targetRect) {

src/Highlighter/FullFeatured.tsx

@@ -22,6 +22,7 @@ export interface FullFeaturedHighlighterProps extends DivProps {
    * @description The language of the code content
    */
   language: string;
+  contentStyle?: React.CSSProperties;
 }
 
 const options: SelectProps['options'] = languageMap.map(item => ({
@@ -38,6 +39,7 @@ export const FullFeaturedHighlighter = memo<FullFeaturedHighlighterProps>(
     allowChangeLanguage = false,
     fileName,
     icon,
+    contentStyle,
     ...rest
   }) => {
     const [expand, setExpand] = useState(true);
@@ -78,7 +80,7 @@ export const FullFeaturedHighlighter = memo<FullFeaturedHighlighterProps>(
         </Flexbox>
         <SyntaxHighlighter
           language={lang?.toLowerCase()}
-          style={expand ? {} : { height: 0, overflow: 'hidden' }}
+          style={expand ? contentStyle : { ...contentStyle, height: 0, overflow: 'hidden' }}
         >
           {children}
         </SyntaxHighlighter>

src/Highlighter/SyntaxHighlighter/style.ts

@@ -25,11 +25,12 @@ export const useStyles = createStyles(({ css, token, cx, prefixCls, stylish }) =
     shiki: cx(
       `${prefix}-shiki`,
       css`
+        overflow: auto;
         margin: 0;
         padding: 0;
 
         .shiki {
-          overflow-x: auto;
+          overflow: unset;
           margin: 0;
           padding: 0;
           background: none !important;
@@ -110,6 +111,9 @@ export const useStyles = createStyles(({ css, token, cx, prefixCls, stylish }) =
       `
     ),
     unshiki: css`
+      overflow: auto;
+      margin: 0;
+      padding: 0;
       color: ${token.colorTextDescription};
     `,
   };

src/Highlighter/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { CopyButton, type CopyButtonProps, Spotlight, Tag } from '@lobehub/ui';
-import { ReactNode, memo } from 'react';
+import React, { ReactNode, memo } from 'react';
 
 import { DivProps } from '@/types';
 
@@ -43,6 +43,10 @@ export interface HighlighterProps extends DivProps {
    * @default 'block'
    */
   type?: 'ghost' | 'block' | 'pure';
+  /**
+   * @description The style of the code content
+   */
+  contentStyle?: React.CSSProperties;
 }
 
 export const Highlighter = memo<HighlighterProps>(
@@ -60,6 +64,7 @@ export const Highlighter = memo<HighlighterProps>(
     allowChangeLanguage,
     fileName,
     icon,
+    contentStyle,
     ...rest
   }) => {
     const { styles, cx } = useStyles(type);
@@ -70,6 +75,7 @@ export const Highlighter = memo<HighlighterProps>(
         <FullFeaturedHighlighter
           allowChangeLanguage={allowChangeLanguage}
           className={className}
+          contentStyle={contentStyle}
           fileName={fileName}
           icon={icon}
           language={language}
@@ -93,7 +99,9 @@ export const Highlighter = memo<HighlighterProps>(
         )}
         {showLanguage && language && <Tag className={styles.lang}>{language.toLowerCase()}</Tag>}
         <div className={styles.scroller}>
-          <SyntaxHighlighter language={language?.toLowerCase()}>{children}</SyntaxHighlighter>
+          <SyntaxHighlighter language={language?.toLowerCase()} style={contentStyle}>
+            {children}
+          </SyntaxHighlighter>
         </div>
       </div>
     );

src/Highlighter/style.ts

@@ -21,8 +21,8 @@ export const useStyles = createStyles(
         css`
           position: absolute;
           z-index: 2;
-          inset-block-start: ${type === 'pure' ? 0 : '8px'};
-          inset-inline-end: ${type === 'pure' ? 0 : '8px'};
+          inset-block-start: ${type === 'pure' ? 0 : '12px'};
+          inset-inline-end: ${type === 'pure' ? 0 : '12px'};
 
           opacity: 0;
         `
@@ -79,8 +79,8 @@ export const useStyles = createStyles(
         css`
           position: absolute;
           z-index: 2;
-          inset-block-end: 8px;
-          inset-inline-end: 0;
+          inset-block-end: 12px;
+          inset-inline-end: 4px;
 
           font-family: ${token.fontFamilyCode};
           color: ${token.colorTextSecondary};

src/MonacoEditor/index.tsx

@@ -12,6 +12,7 @@ import React, { useMemo, useState } from 'react';
 import { useCdnFn } from '../ConfigProvider';
 import { useStyles } from './style';
 
+// @Todo: Controller SSR error: https://github.com/alibaba/lowcode-plugins/blob/main/packages/base-monaco-editor/src/controller.ts#L33
 export {
   type EditorMeta,
   Controller as MonacoController,