search

ckeditor / ckeditor4

The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.
https://ckeditor.com/ckeditor-4
Other
5.79k stars 2.47k forks source link

Dragging block widgets throws errors #4515

Open 7c00-oracle opened 3 years ago

7c00-oracle commented 3 years ago

Type of report

Bug

Steps to reproduce

1) Follow the Widget Tutorial https://ckeditor.com/docs/ckeditor4/latest/guide/widget_sdk_tutorial_1.html 2) Type some text in the editor 3) Create a widget instance in the editor 4) Drag the widget using the "move" icon inside the same editor and drop it.

Expected result

Block level widgets can be dragged and dropped without errors.

Actual result

Dropping block level widgets results in error. Uncaught TypeError: Cannot read property 'endContainer' of undefined at Object.isDropRangeAffectedByDragRange (ckeditor.js:16871) at Object.internalDrop (ckeditor.js:16884) at ckeditor.js:16707

Other details

isBlockWidgetDrop@widget/plugin.js does not set the dragRange unlike the drag-drop handler for inline widgets which results in this error.

Dumluregn commented 3 years ago

Hello, I wasn't able to reproduce this issue using our demo with Simple Box widget: https://ckeditor.com/docs/ckeditor4/latest/examples/simplebox.html. Could you compare your code with the one in sample and tell if you can find the error in your implementation?

7c00-oracle commented 3 years ago

Downloaded the example linked above and dropped in CKEditor 4.16.0 plugins (4.14.0 used when the issue was wrriten as mentioned above) I don't see the original error but now dragging the plugin removes existing lines of text. This is what I see now.

https://user-images.githubusercontent.com/55756984/106418378-2e461800-647c-11eb-8fdb-e51f551a5cc5.mp4

Dumluregn commented 3 years ago

Hello, I've used the code from this folder and still wasn't able to reproduce your issue. Please, provide a demo using one of the templates below:

Without it we can't find the potential problem.

7c00-oracle commented 3 years ago

Try this pen: https://codepen.io/7c00-oracle/pen/ExNjYYX?editors=1010 Forked it from the pen in previous thread. It should show the same behaviour as I pointed out in the video linked above.

Dumluregn commented 3 years ago

Thank you for demo.

I see the problem is caused by enterMode: CKEDITOR.ENTER_DIV config option - without it everything works fine. However with this option active, all the block widgets (including e.g. Enhanced Image) are misbehaving.