Editor container fix

apps/web/src/components/features/sidebars/SidebarPrimary.tsx

@@ -13,6 +13,7 @@ import {
   COLLAPSED_JUSTIFY_CENTER,
   COLLAPSED_VISIBLE,
   type ISidebarGroup,
+  type ISidebarItem,
   type ISidebarList,
   type SidebarProps
 } from '@/components/ui/sidebar';
@@ -89,15 +90,15 @@ const yourStuff = (
         route: createBusterRoute({ route: BusterRoutes.APP_COLLECTIONS }),
         id: BusterRoutes.APP_COLLECTIONS,
         active: isActiveCheck('collection', BusterRoutes.APP_COLLECTIONS)
+      },
+      process.env.NEXT_PUBLIC_ENABLE_REPORTS === 'true' && {
+        label: 'Reports',
+        icon: <ASSET_ICONS.reports />,
+        route: createBusterRoute({ route: BusterRoutes.APP_REPORTS }),
+        id: BusterRoutes.APP_REPORTS,
+        active: isActiveCheck('report', BusterRoutes.APP_REPORTS)
       }
-      // {
+    ].filter(Boolean) as ISidebarItem[]
-      //   label: 'Reports',
-      //   icon: <ASSET_ICONS.reports />,
-      //   route: createBusterRoute({ route: BusterRoutes.APP_REPORTS }),
-      //   id: BusterRoutes.APP_REPORTS,
-      //   active: isActiveCheck('report', BusterRoutes.APP_REPORTS)
-      // }
-    ]
   };
 };
 

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

@@ -11,7 +11,7 @@ import React from 'react';
 const editorVariants = cva(
   cn(
     'group/editor',
-    'relative w-full cursor-text overflow-x-hidden break-words whitespace-pre-wrap select-text',
+    'relative w-full cursor-text overflow-x-visible break-words whitespace-pre-wrap select-text',
     'rounded-md ring-offset-background focus-visible:outline-none',
     'placeholder:text-muted-foreground/80 **:data-slate-placeholder:!top-1/2 **:data-slate-placeholder:-translate-y-1/2 **:data-slate-placeholder:text-muted-foreground/80 **:data-slate-placeholder:opacity-100!',
     '[&_strong]:font-bold'
@@ -42,6 +42,7 @@ export type EditorProps = PlateContentProps & VariantProps<typeof editorVariants
 
 export const Editor = React.forwardRef<HTMLDivElement, EditorProps>(
   ({ className, disabled, focused, variant, ...props }, ref) => {
+    console.log('Editor', { className, disabled, focused, variant, ...props });
     return (
       <PlateContent
         ref={ref}

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

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

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

@@ -1,49 +0,0 @@
-import * as React from 'react';
-
-import type { VariantProps } from 'class-variance-authority';
-
-import { cva } from 'class-variance-authority';
-import { type PlateStaticProps, PlateStatic } from 'platejs';
-
-import { cn } from '@/lib/utils';
-
-export const editorVariants = cva(
-  cn(
-    'group/editor',
-    'relative w-full cursor-text overflow-x-hidden break-words whitespace-pre-wrap select-text',
-    'rounded-md ring-offset-background focus-visible:outline-none',
-    'placeholder:text-muted-foreground/80 **:data-slate-placeholder:top-[auto_!important] **:data-slate-placeholder:text-muted-foreground/80 **:data-slate-placeholder:opacity-100!',
-    '[&_strong]:font-bold'
-  ),
-  {
-    defaultVariants: {
-      variant: 'none'
-    },
-    variants: {
-      disabled: {
-        true: 'cursor-not-allowed opacity-50'
-      },
-      focused: {
-        true: 'ring-2 ring-ring ring-offset-2'
-      },
-      variant: {
-        ai: 'w-full px-0 text-base md:text-sm',
-        aiChat:
-          'max-h-[min(70vh,320px)] w-full max-w-[700px] overflow-y-auto px-5 py-3 text-base md:text-sm',
-        default: 'size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]',
-        demo: 'size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]',
-        fullWidth: 'size-full px-16 pt-4 pb-72 text-base sm:px-24',
-        none: '',
-        select: 'px-3 py-2 text-base data-readonly:w-fit'
-      }
-    }
-  }
-);
-
-export function EditorStatic({
-  className,
-  variant,
-  ...props
-}: PlateStaticProps & VariantProps<typeof editorVariants>) {
-  return <PlateStatic className={cn(editorVariants({ variant }), className)} {...props} />;
-}

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

@@ -16,6 +16,7 @@ interface ReportEditorProps {
   readOnly?: boolean;
   variant?: 'default';
   className?: string;
+  containerClassName?: string;
   disabled?: boolean;
   style?: React.CSSProperties;
   onValueChange?: (value: ReportElements) => void;
@@ -41,6 +42,7 @@ export const ReportEditor = React.memo(
         onReady,
         variant = 'default',
         className,
+        containerClassName,
         style,
         useFixedToolbarKit = false,
         readOnly = false,
@@ -73,8 +75,14 @@ export const ReportEditor = React.memo(
               variant={variant}
               readonly={readOnly}
               disabled={disabled}
-              className={cn('pb-[15vh]', className)}>
+              className={containerClassName}>
-              <Editor style={style} placeholder={placeholder} disabled={disabled} autoFocus />
+              <Editor
+                style={style}
+                placeholder={placeholder}
+                disabled={disabled}
+                className={cn('pb-[20vh]', className)}
+                autoFocus
+              />
             </EditorContainer>
           </Plate>
         </ThemeWrapper>

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

@@ -49,7 +49,7 @@ export function ThemeWrapper({ children, className, defaultTheme }: ThemeWrapper
       <div
         style={EDITOR_THEME}
         className={cn(
-          'themes-wrapper h-full w-full overflow-hidden bg-transparent antialiased',
+          'themes-wrapper h-full w-full overflow-visible bg-transparent antialiased',
           className
         )}>
         {children}

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

@@ -6,7 +6,7 @@ import { useAIChatEditor } from '@platejs/ai/react';
 import { usePlateEditor } from 'platejs/react';
 
 import { BaseEditorKit } from '../editor-base-kit';
-import { EditorStatic } from '../EditorStatic';
+import { EditorStatic } from './EditorStatic';
 
 export const AIChatEditor = React.memo(function AIChatEditor({ content }: { content: string }) {
   const aiEditor = usePlateEditor({

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

@@ -45,7 +45,6 @@ export const MetricPlugin = createPlatePlugin<
       },
       updateMetric: (metricId: string, options?: SetNodesOptions<TMetricElement[]>) => {
         tf.setNodes<TMetricElement>({ metricId }, options);
-        console.log('updated metric', metricId);
       }
     };
   })

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

@@ -8,7 +8,7 @@ import { useMemoizedFn } from '@/hooks/useMemoizedFn';
 import { useDebounceFn } from '@/hooks/useDebounce';
 import type { ReportElements } from '@buster/server-shared/reports';
 import DynamicReportEditor from '@/components/ui/report/DynamicReportEditor';
-import type { AppReportRef, IReportEditor } from '@/components/ui/report/ReportEditor';
+import { ReportEditor, type AppReportRef } from '@/components/ui/report/ReportEditor';
 
 export const ReportPageController: React.FC<{
   reportId: string;
@@ -33,19 +33,19 @@ export const ReportPageController: React.FC<{
   });
 
   return (
-    <div className={cn('space-y-1.5 pt-9 pb-[15vh] sm:px-[max(64px,calc(50%-350px))]', className)}>
+    <div className={cn('space-y-1.5 pt-9 sm:px-[max(64px,calc(50%-350px))]', className)}>
       <ReportPageHeader
         name={report?.name}
         updatedAt={report?.updated_at}
         onChangeName={onChangeName}
       />
 
-      <DynamicReportEditor
+      <ReportEditor
         ref={editor}
         value={content}
         onValueChange={onChangeContent}
         readOnly={readOnly}
-        className="p-0"
+        className="swagswag px-0!"
       />
     </div>
   );

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

@@ -25,8 +25,10 @@ export const ReportPageHeader = React.forwardRef<
       <EditableTitle className="h-9" level={1} ref={ref} onChange={onChangeName}>
         {name}
       </EditableTitle>
-      <Paragraph size={'base'} variant={'tertiary'}>
+      <Paragraph size={'base'} variant={'tertiary'} className="select-none">
-        {updatedAtFormatted} • {DEFAULT_CREATED_BY}
+        <span className="select-text">{updatedAtFormatted}</span>
+        <span className="select-none"> • </span>
+        <span className="select-text">{DEFAULT_CREATED_BY}</span>
       </Paragraph>
     </div>
   );

apps/web/src/lib/url.ts

@@ -20,9 +20,7 @@ const ACCEPTED_DOMAINS = [
  */
 export function isUrlFromAcceptedDomain(url: string): boolean {
   try {
-    console.log('url', url);
     const parsedUrl = new URL(url);
-    console.log('parsedUrl', parsedUrl);
     return ACCEPTED_DOMAINS.some((accepted) => {
       try {
         // If accepted is a full URL, compare origins