I am trying to wrap my head around custom block components in draft.js and I am following this tutorial.
The tutorial mentions a way to detect the input and go into a custom block mode, in this case on inputting [] when a block is empty, we go into todo mode and render TodoBlock.
Now, since we are using handleBeforeInput to detect if we need to enter the todo mode, we get the live editorState as a callback and are able to avoid race conditions.
I want to achieve a custom block state with the press of an external button, in this case, divider mode to render DividerBlock but in a custom button, I only have the local component editorState to work with.
I am running into the race condition and I am not able to enter the custom block mode.
Here is a codesandbox of my exploration so far.
So, in summary, there are two custom blocks:-
TodoBlock - enter todo block mode via handleBeforeInput i.e. getting live editor state the callback and this works.
DividerBlock - enter divider block mode via external button i.e. getting editor state via local component which might be stale and this is not working