Void component that doesn't propagate events

I am trying to create a custom Widget block component which renders an inline form allowing users to configure the Widget they selected. It uses the Void component that you provide to allow for it’s rendering within the Editor.

I have it rendering within the Editor at the moment, however I am having loads of issues with the editor responding to events based within my Widget block component. I’ve tried to put event listeners in my component and fire the e.stopPropagation() in hope that the events won’t reach the editor - but I am not having much luck.

Do you think there would be a way to isolate a Void component so that the Editor doesn’t respond to events from within it? Typically you are only after the clicked/selected event for Void components right?

[ianstormtaylor]

Okay, thanks for that test case it was great!

I investigated, and realized that we should probably be not responding to events in the editor by default if they come from inside contenteditable="false" elements, whether they are in voids or not. So I’ve released 0.8.2 which has that.

I also added an embeds example which shows an editable Youtube embed, so that we can make sure it keeps working in the future!

Let me know if you still run into issues with this. Thanks for the report!

[gnestor]

It looks like this example stopped working: https://www.slatejs.org/#/embeds

I’m trying to embed a monaco editor for editing code blocks. I’ve recently migrated from draft.js and my solution with draft was to set the editor to read-only when the code block is focused. It looks like slate had this working without that hack but there may have been a regression recently…