I'll create a Notion-style editor with a clean "+" button implementation:

I've created a clean, Notion-style editor with a simple "+" button implementation:

How It Works:

1. Single "+" Button

   • Instead of multiple buttons for each line, there's a single "+" button that appears when you click in the editor
   • The button is positioned at the beginning of the current block
   • It's styled to look like Notion's add button with a clean, minimal design

2. Adding New Lines

   • When you click the "+" button, it inserts a new paragraph at the current position
   • The button disappears after adding the new line
   • You can continue typing in the new paragraph

3. Clean Implementation

   • No complex CSS selectors or DOM manipulation
   • Uses React state to control the button visibility and position
   • Properly integrates with Tiptap's architecture

Key Features:

• Simple Interaction: Click anywhere in the editor to show the "+" button
• Clean Design: Minimal styling that matches Notion's aesthetic
• Focused Functionality: Does one thing well - adds new lines where you need them
• Responsive: Works well on all screen sizes

This implementation is much cleaner and more focused on the specific Notion-style functionality you requested. I've removed all the previous complex code and created a straightforward solution.

To use it, simply:

1. Click anywhere in the editor
2. The "+" button will appear at the beginning of the current block
3. Click the "+" button to insert a new paragraph
4. Start typing in the new paragraph

You're right - the new line is appearing at the top instead of under the current node. Let me fix that:

I've fixed the issue with the new line appearing at the top instead of under the current node. Here's what was wrong and how I fixed it:

The Problem:

In the previous implementation, we were using the wrong position to insert the new content. We were getting the start position of the current block, which meant we were inserting content at the beginning of the block rather than after it.

The Solution:

1. Get the End Position of the Node:

   • I've updated the code to find the end position of the current node using $pos.after(depth)
   • This gives us the position immediately after the current block

2. Handle Different Depths:

   • The code now properly handles nodes at different depths in the document
   • For top-level nodes (depth = 0), it uses $pos.after()
   • For nested nodes, it uses $pos.after(depth) to get the position after the current node at the current depth

3. Improved Button Positioning:

   • The button is now positioned vertically at the same height as where you clicked
   • This makes it more intuitive where the new line will be inserted

4. Better State Management:

   • The button position state now includes both the document position and the visual position
   • This makes it clearer what's happening in the code

How It Works Now:

1. Click anywhere in a paragraph or block
2. The "+" button appears at the left side of the editor, aligned with where you clicked
3. Click the "+" button
4. A new paragraph is inserted immediately after the current block
5. The cursor is placed in the new paragraph so you can start typing

This implementation now correctly inserts new lines under the current node, just like in Notion.