From 68eaacea67bb933d68763ea2efc620fd2bd0d805 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Tue, 9 Sep 2025 21:43:08 -0600
Subject: [PATCH] Update toggle kit

---
 .../src/components/ui/report/elements/ParagraphNode.tsx  | 2 +-
 .../web/src/components/ui/report/elements/ToggleNode.tsx | 9 ++++-----
 .../src/components/ui/report/plugins/toggle-base-kit.tsx | 9 ++++++---
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/components/ui/report/elements/ParagraphNode.tsx b/apps/web/src/components/ui/report/elements/ParagraphNode.tsx
index 76c99c01f..92725c2e4 100644
--- a/apps/web/src/components/ui/report/elements/ParagraphNode.tsx
+++ b/apps/web/src/components/ui/report/elements/ParagraphNode.tsx
@@ -8,7 +8,7 @@ export function ParagraphElement(props: PlateElementProps) {
   return (
     <PlateElement
       {...props}
-      className={cn('mb-2 text-base text-gray-dark  [&_strong]:font-semibold')}
+      className={cn('mb-2 text-base text-gray-dark [&_strong]:font-semibold')}
     >
       {props.children}
     </PlateElement>
diff --git a/apps/web/src/components/ui/report/elements/ToggleNode.tsx b/apps/web/src/components/ui/report/elements/ToggleNode.tsx
index 06db7343c..da6df98b1 100644
--- a/apps/web/src/components/ui/report/elements/ToggleNode.tsx
+++ b/apps/web/src/components/ui/report/elements/ToggleNode.tsx
@@ -1,8 +1,6 @@
 import { useToggleButton, useToggleButtonState } from '@platejs/toggle/react';
-
 import type { PlateElementProps } from 'platejs/react';
 import { PlateElement } from 'platejs/react';
-import * as React from 'react';
 import { Button } from '@/components/ui/buttons';
 import { ChevronRight } from '@/components/ui/icons';
 import { cn } from '@/lib/classMerge';
@@ -15,16 +13,17 @@ export function ToggleElement(props: PlateElementProps) {
   return (
     <PlateElement {...props} className="pl-6">
       <Button
+        size="small"
         variant="ghost"
-        className="text-muted-foreground hover:bg-accent absolute top-0 -left-0.5 size-6 cursor-pointer items-center justify-center rounded-md p-px transition-colors select-none [&_svg]:size-4"
+        className="absolute top-0 -left-0.5 size-6 cursor-pointer items-center justify-center rounded-md p-px text-muted-foreground transition-colors select-none hover:bg-accent [&_svg]:size-4"
         contentEditable={false}
         {...buttonProps}
         prefix={
-          <div className={cn('transition-transform duration-75', open ? 'rotate-90' : 'rotate-0')}>
+          <div className={cn('transition-transform duration-100', open ? 'rotate-90' : 'rotate-0')}>
             <ChevronRight />
           </div>
         }
-      ></Button>
+      />
       {props.children}
     </PlateElement>
   );
diff --git a/apps/web/src/components/ui/report/plugins/toggle-base-kit.tsx b/apps/web/src/components/ui/report/plugins/toggle-base-kit.tsx
index 0765be814..77bed0395 100644
--- a/apps/web/src/components/ui/report/plugins/toggle-base-kit.tsx
+++ b/apps/web/src/components/ui/report/plugins/toggle-base-kit.tsx
@@ -1,5 +1,8 @@
-import { BaseTogglePlugin } from '@platejs/toggle';
+'use client';
 
-import { ToggleElementStatic } from '../elements/ToggleNodeStatic';
+import { TogglePlugin } from '@platejs/toggle/react';
 
-export const BaseToggleKit = [BaseTogglePlugin.withComponent(ToggleElementStatic)];
+import { ToggleElement } from '@/components/ui/report/elements/ToggleNode';
+import { IndentKit } from './indent-kit';
+
+export const ToggleKit = [...IndentKit, TogglePlugin.withComponent(ToggleElement)];