fix toc

apps/web/src/app/test/report-playground/ReportPlayground.tsx

@@ -71,7 +71,7 @@ export const ReportPlayground: React.FC = () => {
 
         <ThemePicker />
       </div>
-      <div className="bg-background h-full max-h-[calc(100vh-56px)] overflow-y-auto rounded border shadow">
+      <div className="bg-background h-full max-h-[calc(100vh-56px)] overflow-hidden rounded border shadow">
         <DynamicReportEditor value={usedValue} readOnly={false} onValueChange={logValueChanges} />
       </div>
     </div>

apps/web/src/components/ui/report/EditorContainer.tsx

@@ -50,7 +50,7 @@ export function EditorContainer({
   return (
     <PlateContainer
       className={cn(
-        'ignore-click-outside/toolbar',
+        'ignore-click-outside/toolbar overflow-y-auto',
         editorContainerVariants({ variant, readonly }),
         className
       )}

apps/web/src/components/ui/report/ThemeWrapper/ThemeWrapper.tsx

@@ -12,7 +12,9 @@ interface ThemeWrapperProps extends React.ComponentProps<'div'> {
 export function ThemeWrapper({ children, className, defaultTheme }: ThemeWrapperProps) {
   return (
     <>
-      <div style={THEME_RESET_STYLE} className={cn('themes-wrapper w-full antialiased', className)}>
+      <div
+        style={THEME_RESET_STYLE}
+        className={cn('themes-wrapper h-full w-full overflow-hidden antialiased', className)}>
         {children}
       </div>
 

apps/web/src/components/ui/report/elements/MediaEmbedNode.tsx

@@ -6,13 +6,7 @@ import LiteYouTubeEmbed from 'react-lite-youtube-embed';
 import type { TMediaEmbedElement } from 'platejs';
 import type { PlateElementProps } from 'platejs/react';
 
-import {
-  parseTwitterUrl,
-  parseVideoUrl,
-  parseIframeUrl,
-  parseMediaUrl,
-  type EmbedUrlParser
-} from '@platejs/media';
+import { parseTwitterUrl, parseVideoUrl, type EmbedUrlParser } from '@platejs/media';
 import { MediaEmbedPlugin, useMediaState } from '@platejs/media/react';
 import { ResizableProvider, useResizableValue } from '@platejs/resizable';
 import {

apps/web/src/components/ui/report/elements/TocNode.tsx

@@ -6,12 +6,10 @@ import type { PlateElementProps } from 'platejs/react';
 
 import { useTocElement, useTocElementState } from '@platejs/toc/react';
 import { cva } from 'class-variance-authority';
-import { PlateElement } from 'platejs/react';
-
-import { Button } from '@/components/ui/buttons';
+import { PlateElement, useScrollRef } from 'platejs/react';
 
 const headingItemVariants = cva(
-  'block h-auto w-full cursor-pointer truncate rounded-none px-0.5 py-1.5 text-left font-medium text-muted-foreground underline decoration-[0.5px] underline-offset-4 hover:bg-accent hover:text-muted-foreground',
+  'block! h-auto w-full cursor-pointer truncate rounded-none px-0.5 py-1 text-left font-medium text-muted-foreground underline decoration-[0.5px] underline-offset-4 hover:bg-accent hover:text-muted-foreground',
   {
     variants: {
       depth: {
@@ -28,21 +26,22 @@ export function TocElement(props: PlateElementProps) {
   const { props: btnProps } = useTocElement(state);
   const { headingList } = state;
 
+  const containerRef = useScrollRef();
+
   return (
     <PlateElement {...props} className="mb-1 p-0">
       <div contentEditable={false}>
         {headingList.length > 0 ? (
           headingList.map((item) => (
-            <Button
+            <div
               key={item.id}
-              variant="ghost"
               className={headingItemVariants({
                 depth: item.depth as 1 | 2 | 3
               })}
               onClick={(e) => btnProps.onClick(e, item, 'smooth')}
               aria-current>
               {item.title}
-            </Button>
+            </div>
           ))
         ) : (
           <div className="text-sm text-gray-500">