simplified insert

This commit is contained in:
Nate Kelley 2025-08-01 23:10:29 -06:00
parent c1e33fb1d2
commit 677859e389
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
1 changed files with 26 additions and 34 deletions

View File

@ -6,7 +6,7 @@ import { DndPlugin, useDraggable, useDropLine } from '@platejs/dnd';
import { expandListItemsWithChildren } from '@platejs/list'; import { expandListItemsWithChildren } from '@platejs/list';
import { BlockSelectionPlugin } from '@platejs/selection/react'; import { BlockSelectionPlugin } from '@platejs/selection/react';
import { GripDots, Plus } from '@/components/ui/icons'; import { GripDots, Plus } from '@/components/ui/icons';
import { type TElement, getPluginByType, isType, KEYS } from 'platejs'; import { type Path, type TElement, getPluginByType, isType, KEYS } from 'platejs';
import { import {
type PlateEditor, type PlateEditor,
type PlateElementProps, type PlateElementProps,
@ -22,6 +22,8 @@ import { useSelected } from 'platejs/react';
import { Button } from '@/components/ui/buttons'; import { Button } from '@/components/ui/buttons';
import { Tooltip } from '@/components/ui/tooltip'; import { Tooltip } from '@/components/ui/tooltip';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import { useMemoizedFn } from '@/hooks/useMemoizedFn';
import { insertBlock } from './transforms';
const UNDRAGGABLE_KEYS = [KEYS.column, KEYS.tr, KEYS.td]; const UNDRAGGABLE_KEYS = [KEYS.column, KEYS.tr, KEYS.td];
@ -135,7 +137,12 @@ function Draggable(props: PlateElementProps) {
'mr-1 flex items-center' 'mr-1 flex items-center'
)}> )}>
<div className="absolute top-0 left-0" style={{ top: `${dragButtonTop + 6}px` }}> <div className="absolute top-0 left-0" style={{ top: `${dragButtonTop + 6}px` }}>
<AddNewBlockButton isDragging={isDragging} /> <AddNewBlockButton
isDragging={isDragging}
path={path}
element={element}
editor={editor}
/>
<Button <Button
ref={handleRef} ref={handleRef}
variant="ghost" variant="ghost"
@ -465,46 +472,31 @@ const calcDragButtonTop = (editor: PlateEditor, element: TElement): number => {
return currentMarginTop; return currentMarginTop;
}; };
const AddNewBlockButton = React.memo(function AddNewBlockButton({ const AddNewBlockButton = function AddNewBlockButton({
style, style,
className, className,
isDragging isDragging,
path,
element,
editor
}: { }: {
style?: React.CSSProperties; style?: React.CSSProperties;
className?: string; className?: string;
isDragging: boolean; isDragging: boolean;
path: Path;
element: TElement;
editor: PlateEditor;
}) { }) {
const editor = useEditorRef(); const handleClick = useMemoizedFn((event: React.MouseEvent) => {
const path = usePath(); // Focus the editor first
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(); editor.tf.focus();
}, 25);
}; // Select the current block to ensure proper context
editor.tf.select(path);
// Use the insertBlock function which handles positioning automatically
insertBlock(editor, KEYS.p);
});
return ( return (
<Tooltip title={isDragging ? '' : 'Add new block'}> <Tooltip title={isDragging ? '' : 'Add new block'}>
@ -517,6 +509,6 @@ const AddNewBlockButton = React.memo(function AddNewBlockButton({
/> />
</Tooltip> </Tooltip>
); );
}); };
AddNewBlockButton.displayName = 'AddNewBlockButton'; AddNewBlockButton.displayName = 'AddNewBlockButton';