The component breaks if you remove the last character or remove all the content

[lexgp]

Hello. I really like the component, but a small bug is confusing.

1. Opening your demo: https://motla.github.io/vue-document-editor/
2. Creating a new clean document
3. Press Backspace
4. The component is broken

It seems that deleting the container in which the editing is taking place leads to an error

[motla]

Hi! Thanks for reporting. That's weird, I think it's a recent bug due to newer browser updates, I'm pretty sure it didn't happen the last time I released this package. I'll try to find a workaround to fix this. Thanks

[motla]

Hi @lexgp Fixed in v2.0.4 and v1.2.7. Please let me know if you still have issues.

[lexgp]

@motla Thank you, it has become much better. But I think the next problem has the same roots:

1. Opening your demo: https://motla.github.io/vue-document-editor/
2. Press Ctrl + a (select all)
3. Press "delete" or "Cut" in context menu.
4. Breaks down as before It looks like we need to somehow prohibit deleting the main container. Should I create new issue?

[motla]

Thanks for reporting again!

On macOS it seems to have different behaviors with different browsers:

• Google Chrome:
  • Doing Cmd+A (select all) + Cmd+X (cut) works :heavy_check_mark:
  • Doing Cmd+A (select all) + Backspace works :heavy_check_mark:
  • Doing Cmd+A (select all) + Fn+Backspace (Delete) works :heavy_check_mark:
• Safari:
  • Doing Cmd+A (select all) + Cmd+X (cut) works :heavy_check_mark:
  • Doing Cmd+A (select all) + Backspace fails :heavy_multiplication_x:
  • Doing Cmd+A (select all) + Fn+Backspace (Delete) fails :heavy_multiplication_x:
• Firefox
  • Doing Cmd+A (select all) + Cmd+X (cut) fails :heavy_multiplication_x:
  • Doing Cmd+A (select all) + Backspace fails :heavy_multiplication_x:
  • Doing Cmd+A (select all) + Fn+Backspace (Delete) fails :heavy_multiplication_x:

I can't work on this before September because I'm on holidays... In the meantime if you want to help and patch it yourself, you juste have to prevent the default browser action depending of the user input in the keydown event, like I did for the original issue you mentioned. Just add some more conditions on e.keyCode. It should be pretty easy but I have no time to test it and release a patch properly right now.

https://github.com/motla/vue-document-editor/blob/d12eec84a23071ac39912516244fd18513e43730/src/DocumentEditor/DocumentEditor.vue#L262-L270

I hope that helps!

[motla]

Actually this is a bit more complicated than I thought because we have to detect if all the document is selected or not... We should also set this.content = [] manually as the default action will be prevented.

[motla]

Hi @lexgp I just released v1.3.0 for Vue2 and v2.1.0 for Vue3 which should correct your problem. Please let me know this if you still have issues.