Inserting the Removed Slice

Oct 13, 2025 by talynt.org 67 views

Introduction

When working with Prosemirror, a popular JavaScript library for building rich text editors, developers may encounter issues with delete suggestions being wrapped in a new block. This problem can be particularly puzzling, especially when trying to insert a slice that is open-ended. In this article, we will delve into the issue, explore the root cause, and provide a solution to insert the removed slice without the extra wrapping.

Replicating the Issue

To replicate the issue, follow these steps:

Go to the demo provided by Prosemirror: https://prosemirror-suggestion-mode.netlify.app/examples/basic/
Highlight the text "functionality.\nProsemirror"
Hit enter to create a new block

As shown in the screenshot below, the suggestion_deleted text is wrapped in a new block.

Understanding the Problem

When you create a new block by hitting enter, Prosemirror adds a new block around the suggestion_deleted text. This is evident from the log, where the removedSlice.content.size is 2 larger than the to and from. The removedSlice object has openStart = 1 and openEnd = 1, indicating that it is an open-ended slice.

Getting the Removed Slice

To get the removed slice, you can use the following code:

const removedSlice = oldState.doc.slice(step.from, step.to, false);

This code creates a slice of the document from the step.from position to the step.to position, excluding the end marker.

Inserting the Removed Slice

When reinserting the removed slice, you may encounter issues with the extra wrapping. To insert the removed slice without the extra wrapping, you need to understand how to handle open-ended slices.

The Issue with Open-Ended Slices

When a slice is open-ended, it means that it does not have a closing marker. In this case, when you insert the removed slice, Prosemirror adds an extra wrapping block to close the slice. This is why you see the extra 2 characters in the removedSlice.content.size.

Solving the Issue

To insert the removed slice without the extra wrapping, you need to remove the extra wrapping block before inserting the slice. You can do this by using the tr.delete() method to remove the extra wrapping block.

Here is an example of how to do this:

tr.delete(step.from + 1, step.from + 2);
tr.insert(step.from, removedSlice.content);

In this code, we first delete the extra wrapping block by calling tr.delete() with the correct positions. Then, we insert the removed slice using tr.insert().

Alternative Solution: Using `tr.replaceWith()`

Another way to insert the removed slice without the extra wrapping is to use the tr.replaceWith() method. This method allows you to replace a range of text with a new text, including the end marker.

Here is an example of how to use tr.replaceWith():

tr.replaceWith(step.from, step.to, removedSlice.content);

In this code, we replace the range of text from step.from to step.to with the removedSlice.content.

Conclusion

In conclusion, when working with Prosemirror, you may encounter issues with delete suggestions being wrapped in a new block. By understanding the root cause of the issue and using the correct methods to insert the removed slice, you can solve the problem and insert the slice without the extra wrapping.

Best Practices

To avoid this issue in the future, follow these best practices:

Always check the removedSlice object for openStart and openEnd properties.
Use the correct methods to insert the removed slice, such as tr.insert() or tr.replaceWith().
Remove any extra wrapping blocks before inserting the slice.

Q: What is the root cause of the issue with delete suggestions being wrapped in a new block?

A: The root cause of the issue is that Prosemirror adds a new block around the suggestion_deleted text when you create a new block by hitting enter. This is evident from the log, where the removedSlice.content.size is 2 larger than the to and from.

Q: How can I replicate the issue?

A: To replicate the issue, follow these steps:

Go to the demo provided by Prosemirror: https://prosemirror-suggestion-mode.netlify.app/examples/basic/
Highlight the text "functionality.\nProsemirror"
Hit enter to create a new block

Q: What is the difference between `tr.insert()` and `tr.replaceWith()`?

A: tr.insert() inserts a new text at a specific position, while tr.replaceWith() replaces a range of text with a new text. When working with open-ended slices, tr.replaceWith() is a better option as it allows you to replace the range of text with the end marker.

Q: How can I remove the extra wrapping block before inserting the removed slice?

A: You can remove the extra wrapping block by using the tr.delete() method. Here is an example of how to do this:

tr.delete(step.from + 1, step.from + 2);
tr.insert(step.from, removedSlice.content);

Q: What are the best practices to avoid this issue in the future?

A: To avoid this issue in the future, follow these best practices:

Always check the removedSlice object for openStart and openEnd properties.
Use the correct methods to insert the removed slice, such as tr.insert() or tr.replaceWith().
Remove any extra wrapping blocks before inserting the slice.

Q: Can I use `tr.replaceWith()` to insert the removed slice without the extra wrapping?

A: Yes, you can use tr.replaceWith() to insert the removed slice without the extra wrapping. Here is an example of how to do this:

tr.replaceWith(step.from, step.to, removedSlice.content);

Q: What is the difference between `tr.replaceWith()` and `tr.delete()`?

A: tr.replaceWith() replaces a range of text with a new text, while tr.delete() removes a range of text. When working with open-ended slices, tr.replaceWith() is a better option as it allows you to replace the range of text with the end marker.

Q: Can I use `tr.insert()` to insert the removed slice without the extra wrapping?

A: Yes, you can use tr.insert() to insert the removed slice without the extra wrapping. However, you need to remove the extra wrapping block before inserting the slice. Here is an example of how to do this:

tr.delete(step.from + 1, step.from + 2);
tr.insert(step.from, removedSlice.content);

Q: What are the common mistakes that can lead to this issue?

A: The common mistakes that can lead to this issue are:

Not checking the removedSlice object for openStart and openEnd properties.
Not using the correct methods to insert the removed slice.
Not removing any extra wrapping blocks before inserting the slice.

By following these best practices and avoiding these common mistakes, you can ensure that your Prosemirror editor works correctly and efficiently.