finalized equation

apps/web/src/app/test/report-playground/ReportPlayground.tsx

@@ -199,6 +199,16 @@ const value: ReportElements = [
     type: 'h1',
     id: '39ZlrKsOyn'
   },
+  {
+    children: [
+      {
+        text: ''
+      }
+    ],
+    texExpression: '\\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}',
+    type: 'equation',
+    id: 'vhevwY_QDV'
+  },
   {
     children: [
       {

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

@@ -89,6 +89,7 @@ function Draggable(props: PlateElementProps) {
 
   const isInColumn = path.length === 3;
   const isInTable = path.length === 4;
+  const showAddNewBlockButton = !isInColumn && !isInTable;
 
   const [previewTop, setPreviewTop] = React.useState(0);
 
@@ -133,11 +134,13 @@ function Draggable(props: PlateElementProps) {
             <div
               className={cn(
                 'slate-blockToolbar pointer-events-auto relative mr-1 flex w-13 items-center justify-center space-x-0.5',
-                isInColumn && 'mr-1.5',
+                isInColumn && 'mr-1.5 w-8!',
                 'mr-1 flex items-center'
               )}>
               <div className="absolute top-0 left-0" style={{ top: `${dragButtonTop + 6}px` }}>
-                <AddNewBlockButton isDragging={isDragging} element={element} editor={editor} />
+                {showAddNewBlockButton && (
+                  <AddNewBlockButton isDragging={isDragging} element={element} editor={editor} />
+                )}
                 <Button
                   ref={handleRef}
                   variant="ghost"
@@ -148,6 +151,7 @@ function Draggable(props: PlateElementProps) {
                       previewRef={previewRef}
                       resetPreview={resetPreview}
                       setPreviewTop={setPreviewTop}
+                      isColumn={isInColumn}
                     />
                   }
                 />
@@ -211,10 +215,12 @@ function Gutter({ children, className, ...props }: React.ComponentProps<'div'>)
 const DragHandle = function DragHandle({
   isDragging,
   previewRef,
+  isColumn,
   resetPreview,
   setPreviewTop
 }: {
   isDragging: boolean;
+  isColumn: boolean;
   previewRef: React.RefObject<HTMLDivElement | null>;
   resetPreview: () => void;
   setPreviewTop: (top: number) => void;
@@ -223,7 +229,7 @@ const DragHandle = function DragHandle({
   const element = useElement();
 
   return (
-    <Tooltip title={isDragging ? '' : 'Drag to move'}>
+    <Tooltip title={isDragging ? '' : isColumn ? 'Drag to move column' : 'Drag to move'}>
       <div
         className="flex size-full items-center justify-center"
         onClick={() => {

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

@@ -52,7 +52,7 @@ export const ColumnElement = withHOC(
 
     return (
       <div className="group/column relative" style={{ width: width ?? '100%' }}>
-        {!readOnly && !isSelectionAreaVisible && (
+        {/* {!readOnly && !isSelectionAreaVisible && (
           <div
             ref={handleRef}
             className={cn(
@@ -62,7 +62,7 @@ export const ColumnElement = withHOC(
             )}>
             <ColumnDragHandle />
           </div>
-        )}
+        )} */}
 
         <PlateElement
           {...props}

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

@@ -23,6 +23,7 @@ import {
 import { Button } from '@/components/ui/buttons';
 import { PopoverBase, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { cn } from '@/lib/utils';
+import { Separator } from '../../separator';
 
 export function EquationElement(props: PlateElementProps<TEquationElement>) {
   const selected = useSelected();
@@ -61,7 +62,7 @@ export function EquationElement(props: PlateElementProps<TEquationElement>) {
               <span ref={katexRef} />
             ) : (
               <div className="text-muted-foreground flex h-7 w-full items-center gap-2 text-sm whitespace-nowrap">
-                <div className="text-muted-foreground/80 size-6">
+                <div className="text-muted-foreground/80 size-6 text-xl">
                   <MathFunction />
                 </div>
                 <div>Add a Tex equation</div>
@@ -197,21 +198,27 @@ const EquationPopoverContent = ({
 
   return (
     <PopoverContent
-      className="flex gap-2"
+      className="flex w-[300px] flex-col p-0 py-2"
       onEscapeKeyDown={(e) => {
         e.preventDefault();
       }}
       contentEditable={false}>
-      <EquationInput
-        className={cn('max-h-[50vh] grow resize-none p-2 text-sm', className)}
-        state={{ isInline, open, onClose }}
-        autoFocus
-        {...props}
-      />
+      <div className="px-2">
+        <EquationInput
+          className={cn('max-h-[50vh] w-full grow resize-none p-2 text-sm', className)}
+          state={{ isInline, open, onClose }}
+          autoFocus
+          {...props}
+        />
+      </div>
 
-      <Button variant="outlined" className="px-3" suffix={<RectArrowDownLeft />} onClick={onClose}>
-        Done
-      </Button>
+      <Separator className="my-2" />
+
+      <div className="px-2">
+        <Button variant="outlined" block onClick={onClose}>
+          Done
+        </Button>
+      </div>
     </PopoverContent>
   );
 };

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

@@ -235,7 +235,6 @@ export const MediaEmbedPlaceholder = (props: PlateElementProps<TMediaEmbedElemen
 
             <div className="text-muted-foreground text-sm whitespace-nowrap">Add a media embed</div>
           </div>
-          {props.children}
         </PopoverAnchor>
 
         <PopoverContent
@@ -266,6 +265,8 @@ export const MediaEmbedPlaceholder = (props: PlateElementProps<TMediaEmbedElemen
           </div>
         </PopoverContent>
       </PopoverBase>
+
+      {props.children}
     </PlateElement>
   );
 };

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

@@ -404,12 +404,12 @@ export function TableRowElement(props: PlateElementProps<TTableRowElement>) {
         ...props.attributes,
         'data-selected': selected ? 'true' : undefined
       }}>
-      {hasControls && (
+      {/* {hasControls && (
         <td className="w-2 select-none" contentEditable={false}>
           <RowDragHandle dragRef={handleRef} />
           <RowDropLine />
         </td>
-      )}
+      )} */}
 
       {props.children}
     </PlateElement>
@@ -423,19 +423,16 @@ function RowDragHandle({ dragRef }: { dragRef: React.Ref<HTMLElement | HTMLButto
   return (
     <Button
       ref={dragRef as React.Ref<HTMLButtonElement>}
-      variant="outlined"
       className={cn(
         'absolute top-1/2 left-0 z-51 h-6 w-4 -translate-y-1/2 p-0 focus-visible:ring-0 focus-visible:ring-offset-0',
-        'cursor-grab active:cursor-grabbing',
+        'cursor-grab! active:cursor-grabbing!',
         'opacity-0 transition-opacity duration-100 group-hover/row:opacity-100 group-has-data-[resizing="true"]/row:opacity-0'
       )}
       onClick={() => {
         editor.tf.select(element);
-      }}>
-      <div className="text-muted-foreground size-4">
-        <GripDotsVertical />
-      </div>
-    </Button>
+      }}
+      prefix={<GripDotsVertical />}
+    />
   );
 }
 

packages/server-shared/src/reports/report-elements.ts

@@ -335,6 +335,13 @@ export const MediaEmbedElementSchema = z.object({
   caption: z.array(z.union([TextSchema, ParagraphElementSchema])).default([]),
 });
 
+export const EquationElementSchema = z.object({
+  type: z.literal('equation'),
+  id: z.string().optional(),
+  texExpression: z.string(),
+  children: z.array(SimpleTextSchema).default([]),
+});
+
 /**
  * Composite Schemas
  * -----------------
@@ -365,6 +372,7 @@ export const ReportElementSchema = z.discriminatedUnion('type', [
   MetricElementSchema,
   ToggleElementSchema,
   MediaEmbedElementSchema,
+  EquationElementSchema,
 ]);
 
 // Array of report elements for complete documents