niuware / mui-rte

Material-UI Rich Text Editor and Viewer
MIT License
432 stars 168 forks source link

Method to set editor state programmatically #274

Open carlfranciscastillo opened 2 years ago

carlfranciscastillo commented 2 years ago

Checklist

Description

I plan to override the handleReturn prop of the editor since I have implemented custom block alignment logic. The problem is I cannot directly set the editor state using the ref. Any pointers on how should I go about it? I already tried the keyCommands prop but it would be odd to press CTRL+space just to keep the alignment of the current block

carlfranciscastillo commented 2 years ago

I did not utilize the custom block component since it cannot combine two block states e.g. header and alignment. So instead I dug around draftjs repo and found a solution utilizing block metadeta to encode alignment information. I used this gist which extends RichUtils and added custom callbacks for alignment. I also provided a custom blockStyleFn to handle this. Everything works except for the fact that since pressing enter would split the block, the alignment is lost since the default splitBlock only preservers block type. @niuware your thoughts on this please