add better export settings

apps/web/src/app/app/(primary_layout)/(chat_experience)/reports/[reportId]/page.tsx

@@ -5,5 +5,5 @@ export default async function Page(props: { params: Promise<{ reportId: string }
 
   const { reportId } = params;
 
-  return <ReportPageController reportId={reportId} />;
+  return <ReportPageController reportId={reportId} mode="default" />;
 }

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

@@ -10,13 +10,13 @@ export const MetricContent = React.memo(
   ({
     metricId,
     metricVersionNumber,
-    isBaseElement = false,
+    isExportMode = false,
     readOnly = false
   }: {
     metricId: string;
     metricVersionNumber: number | undefined;
     readOnly?: boolean;
-    isBaseElement?: boolean;
+    isExportMode?: boolean;
   }) => {
     const chatId = useChatLayoutContextSelector((x) => x.chatId);
     const reportId = useChatLayoutContextSelector((x) => x.reportId) || '';
@@ -24,7 +24,7 @@ export const MetricContent = React.memo(
     const ref = useRef<HTMLDivElement>(null);
 
     const [inViewport] = useInViewport(ref, {
-      threshold: isBaseElement ? 0 : 0.33
+      threshold: isExportMode ? 0 : 0.33
     });
     const renderChart = inViewport;
 
@@ -73,7 +73,7 @@ export const MetricContent = React.memo(
     return (
       <MetricCard
         metricLink={link}
-        animate={!isBaseElement}
+        animate={!isExportMode}
         metricId={metricId}
         readOnly={readOnly}
         isDragOverlay={false}

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

@@ -30,18 +30,15 @@ export const MetricElement = withHOC(
     const metricId = props.element.metricId;
     const metricVersionNumber = props.element.metricVersionNumber;
     const readOnly = useReadOnly();
-    console.log(props.editor.getOptionsStore(GlobalVariablePlugin));
-    console.log(props.editor.getOptions(GlobalVariablePlugin));
     const mode = props.editor.getOption(GlobalVariablePlugin, 'mode');
 
-    console.log('mode', mode);
-
     const content = metricId ? (
       <MetricResizeContainer>
         <MetricContent
           metricId={metricId}
           metricVersionNumber={metricVersionNumber}
           readOnly={readOnly}
+          isExportMode={mode === 'export'}
         />
       </MetricResizeContainer>
     ) : (

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

@@ -5,13 +5,12 @@ import { useEditorRef, usePlateEditor, type TPlateEditor } from 'platejs/react';
 import { useMemo } from 'react';
 import { EditorKit } from './editor-kit';
 import { FIXED_TOOLBAR_KIT_KEY } from './plugins/fixed-toolbar-kit';
-import { CUSTOM_KEYS } from './config/keys';
 import { GlobalVariablePlugin } from './plugins/global-variable-kit';
 
 export const useReportEditor = ({
   value,
   disabled,
-  mode,
+  mode = 'default',
   useFixedToolbarKit = false
 }: {
   value: Value;
@@ -27,13 +26,11 @@ export const useReportEditor = ({
 
     return [
       ...EditorKit,
-      GlobalVariablePlugin.configurePlugin(GlobalVariablePlugin, {
+      GlobalVariablePlugin.configure({
-        options: {
+        options: { mode }
-          mode
-        }
       })
-    ];
+    ].filter((p) => !filteredKeys.includes(p.key));
-  }, []);
+  }, [useFixedToolbarKit, mode]);
 
   return usePlateEditor({
     plugins,

apps/web/src/controllers/ReportPageControllers/ReportPageController.tsx

@@ -2,7 +2,7 @@
 
 import { useGetReport, useUpdateReport } from '@/api/buster_rest/reports';
 import { cn } from '@/lib/utils';
-import React, { useEffect } from 'react';
+import React from 'react';
 import { ReportPageHeader } from './ReportPageHeader';
 import { useMemoizedFn } from '@/hooks/useMemoizedFn';
 import { useDebounceFn } from '@/hooks/useDebounce';