insert and change placeholder

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

@@ -22,7 +22,7 @@ import { Tooltip } from '@/components/ui/tooltip';
 import { useMemoizedFn } from '@/hooks/useMemoizedFn';
 import { cn } from '@/lib/utils';
 import { NodeTypeIcons } from '../config/icons';
-import { insertBlock } from './transforms';
+import { insertSlashBelow } from '../helpers/slash';
 
 const UNDRAGGABLE_KEYS = [KEYS.column, KEYS.tr, KEYS.td];
 
@@ -498,7 +498,7 @@ const AddNewBlockButton = function AddNewBlockButton({
   editor: PlateEditor;
 }) {
   const handleClick = useMemoizedFn((_event: React.MouseEvent) => {
-    // Find the current path of this element dynamically at click time
+    // // Find the current path of this element dynamically at click time
     const currentPath = editor.api.findPath(element);
 
     if (!currentPath) {
@@ -506,16 +506,11 @@ const AddNewBlockButton = function AddNewBlockButton({
       return;
     }
 
-    // Focus the editor first
+    // // Focus the editor first
     editor.tf.focus();
-
-    // Select the current block to ensure proper context - use dynamically found path
     editor.tf.select(currentPath);
 
-    // Use the insertBlock function which handles positioning automatically
-    insertBlock(editor, KEYS.p);
-    
-    editor.tf.insertText('/');
+    insertSlashBelow(editor, 'Type to filter...', currentPath);
   });
 
   return (

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

@@ -4,11 +4,6 @@ import { PlateElement, usePluginOption } from 'platejs/react';
 import { getSlashGroups } from '../config/addMenuItems';
 import { SlashInputPlugin } from '../plugins/slash-kit';
 
-interface TSlashInputElement extends TElement {
-  value: string;
-  placeholder: string;
-}
-
 import {
   InlineCombobox,
   InlineComboboxContent,
@@ -19,12 +14,18 @@ import {
   InlineComboboxItem,
 } from './InlineCombobox';
 
+interface TSlashInputElement extends TElement {
+  value: string;
+  placeholder: string;
+}
+
 const groups = getSlashGroups();
 
 export function SlashInputElement(props: PlateElementProps<TSlashInputElement>) {
   const { editor, element } = props;
 
-  const placeholder = usePluginOption(SlashInputPlugin, 'placeholder') || 'Filter...';
+  const placeholderGlobal = usePluginOption(SlashInputPlugin, 'placeholder') || 'Filter...';
+  const placeholder = element.placeholder || placeholderGlobal;
 
   return (
     <PlateElement {...props} as="span" data-slate-value={element.value}>

apps/web/src/components/ui/report/helpers/slash.ts

@@ -0,0 +1,42 @@
+import { KEYS, type Path, PathApi } from 'platejs';
+import type { PlateEditor } from 'platejs/react';
+
+export function insertSlashBelow(editor: PlateEditor, placeholder: string, currentPath: Path) {
+  const slashType = editor.getType(KEYS.slashInput);
+  if (!slashType) return; // plugin not registered, bail. :contentReference[oaicite:1]{index=1}
+
+  // 1) Resolve the block at currentPath (works whether or not there's a selection)
+  const blockEntry = editor.api.block({ at: currentPath });
+  if (!blockEntry) return;
+  const [, blockPath] = blockEntry;
+
+  // 2) Compute the insertion path reliably (even if it's the last sibling)
+  const insertPath = PathApi.next(blockPath); // safe “after” path. :contentReference[oaicite:2]{index=2}
+
+  // 3) Insert a fresh default block and place the caret at its start
+  const newBlock = editor.api.create.block(); // empty paragraph (or your default)
+  editor.tf.insertNodes(newBlock, { at: insertPath }); // :contentReference[oaicite:3]{index=3}
+  const startPoint = editor.api.start(insertPath);
+  if (startPoint) editor.tf.select(startPoint);
+
+  // 4) Trigger the slash combobox; this will create the slash input (type = KEYS.slashInput)
+  editor.tf.focus();
+  editor.tf.insertText('/'); // :contentReference[oaicite:4]{index=4}
+
+  // 5) Set a per-node placeholder on the just-created SlashInput
+  const inputEntry = editor.api.above({
+    at: editor.selection ?? insertPath,
+    match: { type: slashType },
+  });
+
+  if (inputEntry) {
+    const [, inputPath] = inputEntry;
+    editor.tf.setNodes({ placeholder }, { at: inputPath }); // :contentReference[oaicite:5]{index=5}
+  } else {
+    // Fallback: explicitly insert the input with the placeholder
+    editor.tf.insertNodes(
+      { type: slashType, placeholder, children: [{ text: '' }] },
+      { at: editor.selection ?? editor.api.start(insertPath) }
+    ); // :contentReference[oaicite:6]{index=6}
+  }
+}