slate.js based reactjs rich text editor reverse engineering

Question

it all started from watching two slate.js demo videos in youtube

1. https://www.youtube.com/watch?v=8K-qYdOPKT4
2. https://www.youtube.com/watch?v=BMID1FbEZSk&t=3s

His name is Andrei Fiodorov and he showed in those demos how his rich text editor works using slate.js library. In the comment section he shared a snippet of code which is a glimpse of the overall code. I have started a sandbox pen here

https://codesandbox.io/s/rvp8j5q7n

looks like he used Materialize and npgrogress in his project. I a noob in React. I am interested about the beautiful UI Mr Andrei Fiodorov created successfully. But unfortunately couldn't render the page yet. I will be grateful if anybody could help me to render the UI.

Answer 1

That sandbox specifies version 0.33.4 for Slate. However, in the Changelog for 0.24.0 the following is stated:

The Html, Plain and Raw serializers are broken into new packages. Previously you'd import them from slate. But now you'll import them from slate-html-serializer and slate-plain-serializer. And the Raw serializer that was deprecated is now removed.

The Editor and Placeholder components are broken into a new React-specific package. Previously you'd import them from slate. But now you import { Editor } from 'slate-react' instead.

Furthermore, you will need to uncomment the React.renderDOM(...) code and you'll need to configure Redux with a store and reducer before you can call the connect(...) code.