Drag-and-dropable chips

[WeeJeWel]

In my search for a WYSIWYG editor that supports chips/tags/tokens, I have only found CKEditor Drag and Drop to actually do what I want. But CKEditor isn't open source.

Is this something that could be added to Plate? How hard would it be?

[zbeyens]

Yes, it is. For displaying the cursor, you could use cursor-overlay and a plugin that handles onDragOver, onDrop like https://github.com/udecode/plate/blob/22e78493fcafdfe8d82bb00f1ee18a65aef98750/apps/www/src/lib/plate/demo/plugins/dragOverCursorPlugin.ts

[zbeyens]

See https://platejs.org/docs/components/cursor-overlay

[WeeJeWel]

Thank you for the quick reply! I assume that's the thick black caret in the demo. That does seem to work as expected when dragging some piece of selected text.

Where would one start to create a custom inline widget? E.g. a chip with a round avatar and a name, that in itself isn't editable?

[zbeyens]

That does work on your end?

2024-01-06.at.17.30.45.mp4

As for the chip, you'd want to customize onDrop to control what is inserted.

You could insert text or inline nodes. See https://platejs.org/docs/plugin for plugin development.

[WeeJeWel]

Thanks! I'll play with it and see if it works!

[zbeyens]

Note the dragOverPlugin is just an example not living in our library, you'd need to fork it.