I'll add the ability to move images by dragging them across the editor, just like in Notion. Let's implement this feature:

Image Dragging Feature Added

I've added the ability to move images by dragging them across the editor, making it even more Notion-like. Now you can both resize and reposition your images with ease.

How Image Dragging Works

1. Drag to Move

   • When you select an image, the cursor changes to a "move" cursor
   • A small "Drag to move" tooltip appears above the image
   • Simply click and drag the image to reposition it within your document

2. Visual Feedback

   • While dragging, the image becomes semi-transparent (50% opacity)
   • This provides visual feedback that you're moving the image
   • The editor automatically determines valid drop positions

3. Smart Positioning

   • The image will be inserted at the nearest valid position in the document
   • This allows for precise placement between paragraphs, headings, or other content

4. Seamless Integration with Resizing

   • You can still resize images using the handle in the bottom-right corner
   • The resize handle takes precedence when you interact with it
   • This prevents accidental dragging when you're trying to resize

How to Use Image Dragging

1. Select an image by clicking on it

   • You'll see the blue border and resize handle appear
   • You'll also see a "Drag to move" tooltip above the image

2. Click and drag anywhere on the image (except the resize handle)

   • The cursor will change to a "move" cursor
   • The image will become semi-transparent while being dragged

3. Release the mouse at the desired position

   • The image will be inserted at that position in the document
   • The editor will automatically adjust the document structure
4. To resize instead of move, use the resize handle in the bottom-right corner

Technical Implementation Details

The dragging functionality is implemented through:

1. A custom drag handler in the ResizableImageView component
2. Setting the draggable: true property in the ResizableImage extension
3. Using the TipTap editor's transaction system to remove the image from its current position and insert it at the new position
4. Visual feedback through CSS changes during the drag operation

This implementation provides a smooth, intuitive experience similar to what you'd find in Notion, making it easy to organize your content by repositioning images directly within the editor.

Combined with Resizing

With both resizing and dragging capabilities, your editor now offers a complete Notion-like image manipulation experience:

1. Insert images through multiple methods (drag and drop, file selection, URL)
2. Resize images by dragging the handle in the bottom-right corner
3. Reposition images by dragging them to a new location in the document

These features work together seamlessly to provide a rich, intuitive editing experience that matches what users expect from modern document editors like Notion.

I'll fix the "Position out of range" error in the image dragging functionality. This error occurs when trying to insert content at an invalid position in the document.

Fixed Image Dragging Functionality

I've fixed the "Position out of range" error that occurred when dragging images. The updated code now properly handles image positioning and prevents errors when moving images around the editor.

What Was Fixed

1. Improved Position Validation

   • Added a findValidInsertPosition helper function that ensures we only insert images at valid positions
   • This function checks if a node type can be inserted at a given position and finds the nearest valid position

2. Better Error Handling

   • Added try/catch blocks to prevent uncaught exceptions
   • Added position boundary checks to ensure we never try to insert at invalid positions
   • Added fallback logic to find a valid insertion point when the initial position isn't valid

3. Improved Drag Behavior

   • Added a custom drag handler in the editor props to prevent conflicts with the browser's default drag behavior
   • This ensures our custom drag implementation works correctly without interference

4. Enhanced Node Selection

   • Added selectable: true to the ResizableImage extension to ensure proper selection behavior
   • This helps with both dragging and resizing operations

How the Fixed Dragging Works

The improved dragging functionality now:

1. Validates positions before attempting to insert the image
2. Finds alternative positions if the initial position isn't valid
3. Prevents errors by checking boundaries and node compatibility
4. Provides visual feedback during the drag operation
5. Gracefully handles edge cases like dragging to the beginning or end of the document

Technical Details of the Fix

The main issue was that we were trying to insert the image at positions where it wasn't allowed in the document structure. The fix involves:

1. Using ProseMirror's node resolution system to find valid positions
2. Checking if a node type can be inserted at a specific position
3. Finding alternative positions when the initial position isn't valid
4. Adding proper error handling to prevent crashes

This approach ensures that images can be dragged and repositioned anywhere in the document where it's structurally valid to place them, providing a smooth and error-free experience.

How to Use the Fixed Dragging

The usage remains the same:

1. Select an image by clicking on it
2. Click and drag anywhere on the image (except the resize handle)
3. Release the mouse at the desired position

The difference is that now the operation will work reliably without errors, and the image will be placed at the nearest valid position if you drop it somewhere that wouldn't normally accept an image.