fix merge conflict

apps/web/src/components/ui/report/plugins/metric-plugin/MetricElement.tsx

@@ -0,0 +1,70 @@
+import type { PluginConfig, TElement } from 'platejs';
+import { PlateElement, type PlateElementProps, withHOC, useFocused, useSelected } from 'platejs/react';
+import { ResizableProvider, useResizableValue } from '@platejs/resizable';
+import { cn } from '@/lib/utils';
+import { MetricEmbedPlaceholder } from './MetricPlaceholder';
+import { Caption, CaptionTextarea } from '../../elements/CaptionNode';
+import { mediaResizeHandleVariants, Resizable, ResizeHandle } from '../../elements/ResizeHandle';
+
+type MetricElementProps = PlateElementProps<TElement, PluginConfig<'metric', { metricId: string }>>;
+
+export const MetricElement = withHOC(
+  ResizableProvider,
+  function MetricElement({ children, ...props }: MetricElementProps) {
+    const { metricId } = props.getOptions();
+    const focused = useFocused();
+    const selected = useSelected();
+    const width = useResizableValue('width');
+    const align = 'center'; // Default align for metrics
+
+    const { attributes, ...rest } = props;
+
+    const content = metricId ? (
+      <figure className="group relative m-0 w-full cursor-default" contentEditable={false}>
+        <Resizable
+          align={align}
+          options={{
+            align,
+            maxWidth: '100%',
+            minWidth: 200
+          }}>
+          <ResizeHandle
+            className={mediaResizeHandleVariants({ direction: 'left' })}
+            options={{ direction: 'left' }}
+          />
+
+          {/* Metric content placeholder - replace with actual metric rendering */}
+          <div className={cn(
+            'bg-gray-light/30 h-32 w-full overflow-hidden rounded border-2 border-dashed border-gray-300 flex items-center justify-center',
+            focused && selected && 'ring-ring ring-2 ring-offset-2'
+          )}>
+            <div className="text-gray-500 text-sm">Metric: {metricId}</div>
+          </div>
+
+          <ResizeHandle
+            className={mediaResizeHandleVariants({ direction: 'right' })}
+            options={{ direction: 'right' }}
+          />
+        </Resizable>
+
+        <Caption style={{ width }} align={align}>
+          <CaptionTextarea placeholder="Write a caption..." />
+        </Caption>
+      </figure>
+    ) : (
+      <MetricEmbedPlaceholder {...props} children={children} />
+    );
+
+    return (
+      <PlateElement
+        className="rounded-md"
+        attributes={{
+          ...attributes,
+          'data-plate-open-context-menu': true
+        }}
+        {...rest}>
+        {content}
+      </PlateElement>
+    );
+  }
+);

apps/web/src/components/ui/report/plugins/metric-plugin/metric-plugin.tsx

@@ -1,75 +1,10 @@
 import type { PluginConfig, TElement } from 'platejs';
-import { createPlatePlugin, PlateElement, type PlateElementProps } from 'platejs/react';
-import { MetricEmbedPlaceholder } from './MetricPlaceholder';
+import { createPlatePlugin } from 'platejs/react';
+import { MetricElement } from './MetricElement';
 import { CUSTOM_KEYS } from '../../config/keys';
 import { useState, useEffect } from 'react';
 import { AddMetricModal } from '@/components/features/modal/AddMetricModal';
 
-type MetricElementProps = PlateElementProps<
-  TElement,
-  PluginConfig<
-    'metric',
-    { metricId: string; openModal: boolean },
-    {
-      openAddMetricModal: () => void;
-      closeAddMetricModal: () => void;
-    }
-  >
->;
-
-const MetricElement = ({ children, ...props }: MetricElementProps) => {
-  const [openModal, setOpenModal] = useState(false);
-  const { metricId } = props.getOptions();
-  const { editor, plugin } = props;
-
-  // Subscribe to global modal state
-  useEffect(() => {
-    console.log(editor);
-    plugin.api.openAddMetricModal = () => {
-      setOpenModal(true);
-    };
-    plugin.api.closeAddMetricModal = () => {
-      setOpenModal(false);
-    };
-
-    // const unsubscribe = modalState.subscribe(() => {
-    //   setOpenModal(modalState.isOpen);
-    // });
-    // return () => {
-    //   unsubscribe();
-    // };
-  }, []);
-
-  const { attributes, ...rest } = props;
-
-  const content = metricId ? children : <MetricEmbedPlaceholder metricId={metricId} />;
-
-  return (
-    <PlateElement
-      className="rounded-md"
-      attributes={{
-        ...attributes,
-        'data-plate-open-context-menu': true
-      }}
-      {...rest}>
-      {content}
-
-      <AddMetricModal
-        open={openModal}
-        loading={false}
-        selectedMetrics={[]}
-        onClose={() => {
-          // modalState.close();
-        }}
-        onAddMetrics={async (v) => {
-          // Handle adding metrics here
-          //  modalState.close();
-        }}
-      />
-    </PlateElement>
-  );
-};
-
 export const MetricPlugin = createPlatePlugin({
   key: CUSTOM_KEYS.metric,
   options: {