read only partial fix

- Remove readOnly prop from Plate provider to prevent re-renders
- Apply pointer-events-none and user-select-none CSS classes to EditorContainer when readonly
- Remove readOnly prop from usePlateEditor hook
- Editor becomes inert when readonly without causing re-renders

Co-Authored-By: nate@buster.so <nate@buster.so>

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

@@ -12,7 +12,7 @@ const editorVariants = cva(
   cn(
     'group/editor',
     'relative w-full cursor-text overflow-x-visible break-words whitespace-pre-wrap select-text',
-    'rounded-md ring-offset-background focus-visible:outline-none',
+    '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'
   ),
@@ -21,17 +21,16 @@ const editorVariants = cva(
       variant: 'default'
     },
     variants: {
-      disabled: {
+      readOnly: {
-        true: 'cursor-not-allowed opacity-50'
+        true: ''
       },
       focused: {
         true: 'ring-2 ring-ring ring-offset-2'
       },
       variant: {
-        ai: 'w-full px-0 text-base md:text-sm',
         comment: cn('rounded-none border-none bg-transparent text-sm'),
-        default: 'size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]',
+        default: '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',
+        fullWidth: 'px-16 pt-4 pb-72 text-base sm:px-24',
         none: ''
       }
     }
@@ -41,20 +40,20 @@ const editorVariants = cva(
 export type EditorProps = PlateContentProps & VariantProps<typeof editorVariants>;
 
 export const Editor = React.forwardRef<HTMLDivElement, EditorProps>(
-  ({ className, disabled, focused, variant, ...props }, ref) => {
+  ({ className, readOnly, focused, variant, ...props }, ref) => {
     return (
       <PlateContent
         ref={ref}
         className={cn(
           editorVariants({
-            disabled,
+            readOnly,
             focused,
             variant
           }),
           className
         )}
-        disabled={disabled}
+        readOnly={readOnly}
-        disableDefaultStyles
+        disableDefaultStyles={true}
         {...props}
       />
     );

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

@@ -5,8 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 interface EditorContainerProps {
   className?: string;
   variant?: 'default' | 'comment';
-  readonly?: boolean;
+  readOnly?: boolean;
-  disabled?: boolean;
 }
 
 const editorContainerVariants = cva(
@@ -27,13 +26,13 @@ const editorContainerVariants = cva(
           'has-data-readonly:w-fit has-data-readonly:cursor-default has-data-readonly:border-transparent has-data-readonly:focus-within:[box-shadow:none]'
         )
       },
-      readonly: {
+      readOnly: {
-        true: 'cursor-text'
+        true: 'cursor-default user-select-none '
       }
     },
     defaultVariants: {
       variant: 'default',
-      readonly: false
+      readOnly: false
     }
   }
 );
@@ -41,8 +40,7 @@ const editorContainerVariants = cva(
 export function EditorContainer({
   className,
   variant,
-  disabled,
+  readOnly,
-  readonly,
   ...props
 }: React.ComponentProps<'div'> &
   VariantProps<typeof editorContainerVariants> &
@@ -51,7 +49,7 @@ export function EditorContainer({
     <PlateContainer
       className={cn(
         'ignore-click-outside/toolbar',
-        editorContainerVariants({ variant, readonly }),
+        editorContainerVariants({ variant, readOnly }),
         className
       )}
       {...props}

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

@@ -22,7 +22,6 @@ interface ReportEditorProps {
   variant?: 'default';
   className?: string;
   containerClassName?: string;
-  disabled?: boolean;
   style?: React.CSSProperties;
   onValueChange?: (value: string) => void; //markdown
   useFixedToolbarKit?: boolean;
@@ -57,7 +56,6 @@ export const ReportEditor = React.memo(
         mode = 'default',
         useFixedToolbarKit = false,
         readOnly = false,
-        disabled = false,
         isStreaming = false,
         children
       },
@@ -66,15 +64,12 @@ export const ReportEditor = React.memo(
       // Initialize the editor instance using the custom useEditor hook
       const isReady = useRef(false);
 
-      // readOnly = true;
-      // isStreaming = true;
-
       const editor = useReportEditor({
         isStreaming,
         mode,
+        readOnly,
         value,
         initialElements,
-        disabled,
         useFixedToolbarKit
       });
 
@@ -123,22 +118,18 @@ export const ReportEditor = React.memo(
       if (!editor) return null;
 
       return (
-        <Plate
+        <Plate editor={editor} onValueChange={onValueChangeDebounced}>
-          editor={editor}
-          readOnly={readOnly || isStreaming}
-          onValueChange={onValueChangeDebounced}>
           <EditorContainer
             variant={variant}
-            readonly={readOnly}
+            readOnly={readOnly}
-            disabled={disabled}
+            className={cn('editor-container relative overflow-auto', containerClassName)}>
-            className={cn('editor-container overflow-auto', containerClassName)}>
             {children}
             <ThemeWrapper id={id}>
               <Editor
                 style={style}
                 placeholder={placeholder}
-                disabled={disabled}
                 className={cn('editor', className)}
+                readOnly={readOnly || isStreaming}
                 autoFocus
               />
             </ThemeWrapper>

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

@@ -13,15 +13,15 @@ import type { ReportElementWithId } from '@buster/server-shared/reports';
 
 export const useReportEditor = ({
   value,
-  disabled,
   isStreaming,
   mode = 'default',
+  readOnly,
   useFixedToolbarKit = false,
   initialElements
 }: {
   value: string | undefined; //markdown
   initialElements?: Value | ReportElementWithId[];
-  disabled: boolean;
+  readOnly: boolean | undefined;
   useFixedToolbarKit?: boolean;
   isStreaming: boolean;
   mode?: 'export' | 'default';
@@ -43,7 +43,7 @@ export const useReportEditor = ({
   const editor = usePlateEditor({
     plugins,
     value: initialElements,
-    readOnly: disabled || isStreaming
+    readOnly: readOnly //this is for the initial value
   });
 
   useEditorServerUpdates({ editor, value, isStreaming });

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

@@ -10,6 +10,7 @@ import { type IReportEditor } from '@/components/ui/report/ReportEditor';
 import { ReportEditorSkeleton } from '@/components/ui/report/ReportEditorSkeleton';
 import { useChatIndividualContextSelector } from '@/layouts/ChatLayout/ChatContext';
 import { useTrackAndUpdateReportChanges } from '@/api/buster-electric/reports/hooks';
+import { useHotkeys } from 'react-hotkeys-hook';
 
 export const ReportPageController: React.FC<{
   reportId: string;
@@ -20,11 +21,28 @@ export const ReportPageController: React.FC<{
 }> = React.memo(
   ({ reportId, readOnly = false, className = '', onReady: onReadyProp, mode = 'default' }) => {
     const { data: report } = useGetReport({ reportId, versionNumber: undefined });
-    const isStreamingMessage = useChatIndividualContextSelector((x) => x.isStreamingMessage);
+    let isStreamingMessage = useChatIndividualContextSelector((x) => x.isStreamingMessage);
 
     const content = report?.content || '';
     const commonClassName = 'sm:px-[max(64px,calc(50%-350px))]';
 
+    const [useOverride, setUseOverride] = React.useState(false);
+
+    useHotkeys('x', () => {
+      setUseOverride((v) => {
+        console.log('x', !v);
+        return !v;
+      });
+    });
+
+    if (useOverride) {
+      isStreamingMessage = true;
+      readOnly = true;
+    } else {
+      isStreamingMessage = false;
+      readOnly = false;
+    }
+
     const { mutate: updateReport } = useUpdateReport();
 
     const canUpdate = () => {
@@ -59,7 +77,6 @@ export const ReportPageController: React.FC<{
           <DynamicReportEditor
             value={content}
             placeholder="Start typing..."
-            disabled={false}
             className={commonClassName}
             containerClassName="pt-9"
             variant="default"