From 9c08da8fad85e8c1d6345c3b896ec756d6453269 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Mon, 28 Jul 2025 23:23:25 -0600
Subject: [PATCH] fix a few more node

---
 .../components/ui/report/EditorContainer.tsx  |  2 +-
 .../ui/report/elements/BlockDraggable.tsx     | 83 ++++++++++++++++---
 .../ui/report/elements/CalloutNode.tsx        |  4 +-
 .../ui/report/elements/CodeBlockNode.tsx      |  4 +-
 4 files changed, 75 insertions(+), 18 deletions(-)

diff --git a/apps/web/src/components/ui/report/EditorContainer.tsx b/apps/web/src/components/ui/report/EditorContainer.tsx
index 0908b887e..193de6eff 100644
--- a/apps/web/src/components/ui/report/EditorContainer.tsx
+++ b/apps/web/src/components/ui/report/EditorContainer.tsx
@@ -16,7 +16,7 @@ const editorContainerVariants = cva('relative cursor-text h-full p-4', {
       comment: 'bg-background/50'
     },
     readonly: {
-      true: 'cursor-not-allowed'
+      true: 'cursor-text'
     }
   },
   defaultVariants: {
diff --git a/apps/web/src/components/ui/report/elements/BlockDraggable.tsx b/apps/web/src/components/ui/report/elements/BlockDraggable.tsx
index cd709773a..fac16c895 100644
--- a/apps/web/src/components/ui/report/elements/BlockDraggable.tsx
+++ b/apps/web/src/components/ui/report/elements/BlockDraggable.tsx
@@ -4,8 +4,8 @@ import * as React from 'react';
 
 import { DndPlugin, useDraggable, useDropLine } from '@platejs/dnd';
 import { BlockSelectionPlugin } from '@platejs/selection/react';
-import { GripDotsVertical } from '@/components/ui/icons';
-import { getPluginByType, isType, KEYS, type TElement } from 'platejs';
+import { GripDotsVertical, Plus } from '@/components/ui/icons';
+import { getPluginByType, isType, KEYS, type SlateRenderNodeProps, type TElement } from 'platejs';
 import {
   type PlateEditor,
   type PlateElementProps,
@@ -109,23 +109,27 @@ function Draggable(props: PlateElementProps) {
           <div className={cn('slate-blockToolbarWrapper', 'flex h-[1.5em]', isInColumn && 'h-4')}>
             <div
               className={cn(
-                'slate-blockToolbar relative w-4.5',
-                'pointer-events-auto mr-1 flex items-center',
+                'slate-blockToolbar pointer-events-auto relative mr-1 flex w-12 items-center',
                 isInColumn && 'mr-1.5'
               )}>
+              <AddNewBlockButton
+                style={{ top: `${dragButtonTop + 3}px` }}
+                className="absolute left-0"
+              />
               <Button
                 ref={handleRef}
                 variant="ghost"
-                className="absolute -left-0 h-6 w-full p-0"
+                className="absolute right-0"
                 style={{ top: `${dragButtonTop + 3}px` }}
-                data-plate-prevent-deselect>
-                <DragHandle
-                  isDragging={isDragging}
-                  previewRef={previewRef}
-                  resetPreview={resetPreview}
-                  setPreviewTop={setPreviewTop}
-                />
-              </Button>
+                data-plate-prevent-deselect
+                prefix={
+                  <DragHandle
+                    isDragging={isDragging}
+                    previewRef={previewRef}
+                    resetPreview={resetPreview}
+                    setPreviewTop={setPreviewTop}
+                  />
+                }></Button>
             </div>
           </div>
         </Gutter>
@@ -148,6 +152,59 @@ function Draggable(props: PlateElementProps) {
     </div>
   );
 }
+
+function AddNewBlockButton({
+  style,
+  className
+}: {
+  style: React.CSSProperties;
+  className: string;
+}) {
+  const editor = useEditorRef();
+  const path = usePath();
+
+  const handleClick = (event: React.MouseEvent) => {
+    // build the insertion point based on modifier key
+    const parentPath = path.slice(0, -1);
+    const currentIndex = path[path.length - 1];
+
+    // Option/Alt key adds before, regular click adds after
+    const insertIndex = event.altKey ? currentIndex : currentIndex + 1;
+
+    editor.tf.insertNodes(
+      { type: 'p', children: [{ text: '' }] },
+      { at: [...parentPath, insertIndex] }
+    );
+
+    setTimeout(() => {
+      // Calculate the path to the start of the new paragraph's text
+      const newNodePath = [...parentPath, insertIndex];
+      const textPath = [...newNodePath, 0]; // Path to the first text node
+
+      // Set the selection to the start of the new paragraph
+      editor.tf.select({
+        anchor: { path: textPath, offset: 0 },
+        focus: { path: textPath, offset: 0 }
+      });
+
+      // Ensure the editor is focused
+      editor.tf.focus();
+    }, 25);
+  };
+
+  return (
+    <Tooltip title="Add new block">
+      <Button
+        onClick={handleClick}
+        variant="ghost"
+        className={cn(className)}
+        prefix={<Plus />}
+        style={style}
+      />
+    </Tooltip>
+  );
+}
+
 function Gutter({ children, className, ...props }: React.ComponentProps<'div'>) {
   const editor = useEditorRef();
   const element = useElement();
diff --git a/apps/web/src/components/ui/report/elements/CalloutNode.tsx b/apps/web/src/components/ui/report/elements/CalloutNode.tsx
index 5f0d0c6e2..8c0eb1cdf 100644
--- a/apps/web/src/components/ui/report/elements/CalloutNode.tsx
+++ b/apps/web/src/components/ui/report/elements/CalloutNode.tsx
@@ -29,7 +29,7 @@ export function CalloutElement({
 
   return (
     <PlateElement
-      className={cn('bg-muted my-1 flex rounded-sm p-4 pl-3', attributes.className)}
+      className={cn('bg-muted flex rounded-sm p-4 pl-3', attributes.className)}
       style={{
         ...attributes.style,
         backgroundColor: props.element.backgroundColor
@@ -57,7 +57,7 @@ export function CalloutElement({
           }>
           <EmojiPicker {...emojiPickerState} {...calloutProps} />
         </EmojiPopover>
-        <div className="w-full">{children}</div>
+        <div className="mt-1.5 w-full">{children}</div>
       </div>
     </PlateElement>
   );
diff --git a/apps/web/src/components/ui/report/elements/CodeBlockNode.tsx b/apps/web/src/components/ui/report/elements/CodeBlockNode.tsx
index a3dd61dfa..762df7f48 100644
--- a/apps/web/src/components/ui/report/elements/CodeBlockNode.tsx
+++ b/apps/web/src/components/ui/report/elements/CodeBlockNode.tsx
@@ -33,9 +33,9 @@ export function CodeBlockElement(props: PlateElementProps<TCodeBlockElement>) {
 
   return (
     <PlateElement
-      className="py-1 **:[.hljs-addition]:bg-[#f0fff4] **:[.hljs-addition]:text-[#22863a] dark:**:[.hljs-addition]:bg-[#3c5743] dark:**:[.hljs-addition]:text-[#ceead5] **:[.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable]:text-[#005cc5] dark:**:[.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable]:text-[#6596cf] **:[.hljs-built\\\\_in,.hljs-symbol]:text-[#e36209] dark:**:[.hljs-built\\\\_in,.hljs-symbol]:text-[#c3854e] **:[.hljs-bullet]:text-[#735c0f] **:[.hljs-comment,.hljs-code,.hljs-formula]:text-[#6a737d] dark:**:[.hljs-comment,.hljs-code,.hljs-formula]:text-[#6a737d] **:[.hljs-deletion]:bg-[#ffeef0] **:[.hljs-deletion]:text-[#b31d28] dark:**:[.hljs-deletion]:bg-[#473235] dark:**:[.hljs-deletion]:text-[#e7c7cb] **:[.hljs-emphasis]:italic **:[.hljs-keyword,.hljs-doctag,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language\\\\_]:text-[#d73a49] dark:**:[.hljs-keyword,.hljs-doctag,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language\\\\_]:text-[#ee6960] **:[.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo]:text-[#22863a] dark:**:[.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo]:text-[#36a84f] **:[.hljs-regexp,.hljs-string,.hljs-meta_.hljs-string]:text-[#032f62] dark:**:[.hljs-regexp,.hljs-string,.hljs-meta_.hljs-string]:text-[#3593ff] **:[.hljs-section]:font-bold **:[.hljs-section]:text-[#005cc5] dark:**:[.hljs-section]:text-[#61a5f2] **:[.hljs-strong]:font-bold **:[.hljs-title,.hljs-title.class\\\\_,.hljs-title.class\\\\_.inherited\\\\_\\\\_,.hljs-title.function\\\\_]:text-[#6f42c1] dark:**:[.hljs-title,.hljs-title.class\\\\_,.hljs-title.class\\\\_.inherited\\\\_\\\\_,.hljs-title.function\\\\_]:text-[#a77bfa]"
+      className="bg-transparent p-1 **:[.hljs-addition]:bg-[#f0fff4] **:[.hljs-addition]:text-[#22863a] dark:**:[.hljs-addition]:bg-[#3c5743] dark:**:[.hljs-addition]:text-[#ceead5] **:[.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable]:text-[#005cc5] dark:**:[.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable]:text-[#6596cf] **:[.hljs-built\\\\_in,.hljs-symbol]:text-[#e36209] dark:**:[.hljs-built\\\\_in,.hljs-symbol]:text-[#c3854e] **:[.hljs-bullet]:text-[#735c0f] **:[.hljs-comment,.hljs-code,.hljs-formula]:text-[#6a737d] dark:**:[.hljs-comment,.hljs-code,.hljs-formula]:text-[#6a737d] **:[.hljs-deletion]:bg-[#ffeef0] **:[.hljs-deletion]:text-[#b31d28] dark:**:[.hljs-deletion]:bg-[#473235] dark:**:[.hljs-deletion]:text-[#e7c7cb] **:[.hljs-emphasis]:italic **:[.hljs-keyword,.hljs-doctag,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language\\\\_]:text-[#d73a49] dark:**:[.hljs-keyword,.hljs-doctag,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language\\\\_]:text-[#ee6960] **:[.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo]:text-[#22863a] dark:**:[.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo]:text-[#36a84f] **:[.hljs-regexp,.hljs-string,.hljs-meta_.hljs-string]:text-[#032f62] dark:**:[.hljs-regexp,.hljs-string,.hljs-meta_.hljs-string]:text-[#3593ff] **:[.hljs-section]:font-bold **:[.hljs-section]:text-[#005cc5] dark:**:[.hljs-section]:text-[#61a5f2] **:[.hljs-strong]:font-bold **:[.hljs-title,.hljs-title.class\\\\_,.hljs-title.class\\\\_.inherited\\\\_\\\\_,.hljs-title.function\\\\_]:text-[#6f42c1] dark:**:[.hljs-title,.hljs-title.class\\\\_,.hljs-title.class\\\\_.inherited\\\\_\\\\_,.hljs-title.function\\\\_]:text-[#a77bfa]"
       {...props}>
-      <div className="bg-muted/50 relative rounded-md">
+      <div className="bg-muted/50 relative rounded-md py-1">
         <pre className="overflow-x-auto p-8 pr-4 font-mono text-sm leading-[normal] [tab-size:2] print:break-inside-avoid">
           <code>{props.children}</code>
         </pre>