slate.js based reactjs rich text editor reverse engineering

Question

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

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.

vadersfather · Accepted Answer · 2018-10-02 20:52:05Z

3

+25

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.

answered Oct 2, 2018 at 20:52

vadersfather

9,6698 gold badges38 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

coolsaint Over a year ago

first of all thanks for answering. Will you please set up a working demo of the program in sandbox. That would be great.

LM555 · Accepted Answer · 2018-09-27 21:54:30Z

0

I'm no expert in react, but maybe component have to be mounted?

render(<MyEditor />, document.getElementById("root"));

answered Sep 27, 2018 at 21:54

LM555

261 silver badge3 bronze badges

4 Comments

coolsaint Over a year ago

At first I also thought that and added /* ReactDOM.render( <MyEditor />, document.getElementById('root') ); */ But I have found this error now "Could not find "store" in either the context or props of "Connect(MyEditor)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(MyEditor)". looks like the problem is with redux now.

evgeni fotia Over a year ago

@coolsaint for me it give Cannot read property 'deserialize' of undefined in line 300 let editorState = Raw.deserialize(initialState, { terse: true }); have you changed something? by any chance the version of slate in package.json

coolsaint Over a year ago

@evgeni fotia No I haven't changed anything in package.json

leonprou Over a year ago

This error means that the Raw component is undefined. Maybe the video is outdated and this component isn't exist anymore or moved to another place.

Collectives™ on Stack Overflow

slate.js based reactjs rich text editor reverse engineering

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related