Editor container fix

2025-08-07 13:25:08 -06:00 · 2025-08-07 13:25:08 -06:00 · 409af5e02e
parent 12d060cf58
commit 409af5e02e
11 changed files with 32 additions and 72 deletions
--- a/apps/web/src/components/features/sidebars/SidebarPrimary.tsx
+++ b/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)
      }
-      // {
-      //   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[]
  };
 };

--- a/apps/web/src/components/ui/report/Editor.tsx
+++ b/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}
--- a/apps/web/src/components/ui/report/EditorContainer.tsx
+++ b/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
      )}
--- a/apps/web/src/components/ui/report/EditorStatic.tsx
+++ b/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} />;
-}
--- a/apps/web/src/components/ui/report/ReportEditor.tsx
+++ b/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)}>
-              <Editor style={style} placeholder={placeholder} disabled={disabled} autoFocus />
+              className={containerClassName}>
+              <Editor
+                style={style}
+                placeholder={placeholder}
+                disabled={disabled}
+                className={cn('pb-[20vh]', className)}
+                autoFocus
+              />
            </EditorContainer>
          </Plate>
        </ThemeWrapper>
--- a/apps/web/src/components/ui/report/ThemeWrapper/ThemeWrapper.tsx
+++ b/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}
--- a/apps/web/src/components/ui/report/elements/AIChatEditor.tsx
+++ b/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({
--- a/apps/web/src/components/ui/report/plugins/metric-plugin/metric-plugin.tsx
+++ b/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);
      }
    };
  })
--- a/apps/web/src/controllers/ReportPageControllers/ReportPageController/ReportPageController.tsx
+++ b/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>
  );
--- a/apps/web/src/controllers/ReportPageControllers/ReportPageController/ReportPageHeader.tsx
+++ b/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'}>
-        {updatedAtFormatted} • {DEFAULT_CREATED_BY}
+      <Paragraph size={'base'} variant={'tertiary'} className="select-none">
+        <span className="select-text">{updatedAtFormatted}</span>
+        <span className="select-none"> • </span>
+        <span className="select-text">{DEFAULT_CREATED_BY}</span>
      </Paragraph>
    </div>
  );
--- a/apps/web/src/lib/url.ts
+++ b/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