Add caption and ring content

apps/web/src/components/ui/report/elements/MetricElement/MetricContent.tsx

@@ -5,6 +5,8 @@ import { useChatLayoutContextSelector } from '@/layouts/ChatLayout';
 import { assetParamsToRoute } from '@/lib/assets/assetParamsToRoute';
 import React, { useMemo, useRef } from 'react';
 import { useMetricContentThreeDotMenuItems } from './useMetricContentThreeDotMenuItems';
+import { useFocused, useSelected } from 'platejs/react';
+import { cn } from '@/lib/utils';
 
 export const MetricContent = React.memo(
   ({
@@ -22,6 +24,8 @@ export const MetricContent = React.memo(
     const reportId = useChatLayoutContextSelector((x) => x.reportId) || '';
     const reportVersionNumber = useChatLayoutContextSelector((x) => x.reportVersionNumber);
     const ref = useRef<HTMLDivElement>(null);
+    const isSelected = useSelected();
+    const isFocused = useFocused();
 
     const [inViewport] = useInViewport(ref, {
       threshold: 0.33
@@ -72,6 +76,9 @@ export const MetricContent = React.memo(
 
     return (
       <MetricCard
+        className={cn('transition-all duration-200', {
+          'ring-ring ring-1 ring-offset-3': isSelected && isFocused
+        })}
         ref={ref}
         metricLink={link}
         animate={!isExportMode}

apps/web/src/components/ui/report/elements/MetricElement/MetricToolbar.tsx

@@ -1,15 +1,30 @@
 import * as React from 'react';
 
-import { useEditorRef, useEditorSelector, useElement, useReadOnly, useRemoveNodeButton, useSelected } from 'platejs/react';
+import {
+  useEditorRef,
+  useEditorSelector,
+  useElement,
+  useReadOnly,
+  useRemoveNodeButton,
+  useSelected
+} from 'platejs/react';
 
 import { Button } from '@/components/ui/buttons';
 import { PopoverBase, PopoverAnchor, PopoverContent } from '@/components/ui/popover';
 import { NodeTypeIcons } from '../../config/icons';
 import { NodeTypeLabels } from '../../config/labels';
 import { AddMetricModal } from '@/components/features/modal/AddMetricModal';
-import { MetricPlugin, type TMetricElement } from '../../plugins/metric-plugin';
+import { MetricPlugin, type TMetricElement } from '../../plugins/metric-kit';
+import { Separator } from '@/components/ui/separator';
+import { CaptionButton } from '../CaptionNode';
 
-export function MetricToolbar({ children, selectedMetricId }: { children: React.ReactNode; selectedMetricId?: string }) {
+export function MetricToolbar({
+  children,
+  selectedMetricId
+}: {
+  children: React.ReactNode;
+  selectedMetricId?: string;
+}) {
   const editor = useEditorRef();
   const readOnly = useReadOnly();
   const selected = useSelected();
@@ -58,6 +73,10 @@ export function MetricToolbar({ children, selectedMetricId }: { children: React.
             {NodeTypeLabels.editMetric?.label ?? 'Edit metric'}
           </Button>
 
+          <CaptionButton variant="ghost">{NodeTypeLabels.caption.label}</CaptionButton>
+
+          <Separator orientation="vertical" className="mx-1 h-6" />
+
           <Button prefix={<NodeTypeIcons.trash />} variant="ghost" {...removeButtonProps}></Button>
         </div>
       </PopoverContent>
@@ -73,4 +92,4 @@ export function MetricToolbar({ children, selectedMetricId }: { children: React.
       />
     </PopoverBase>
   );
-}
+}

apps/web/src/components/ui/report/hooks/downloadFile.ts

@@ -17,5 +17,3 @@ export const downloadFile = async (url: string, filename: string) => {
 };
 
 export default downloadFile;
-
-

apps/web/src/components/ui/report/hooks/exportToImage.ts

@@ -29,5 +29,3 @@ export const exportToImage = async ({
 };
 
 export default exportToImage;
-
-

apps/web/src/components/ui/report/hooks/getCanvas.ts

@@ -54,5 +54,3 @@ export const getCanvas = async (editor: PlateEditor) => {
 };
 
 export default getCanvas;
-
-