5

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.

coolsaint
  • 1,291
  • 2
  • 16
  • 27

2 Answers2

3

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.

lovelikelando
  • 7,593
  • 6
  • 32
  • 50
  • first of all thanks for answering. Will you please set up a working demo of the program in sandbox. That would be great. – coolsaint Oct 04 '18 at 06:38
0

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

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

LM555
  • 26
  • 1
  • 3
  • At first I also thought that and added /* ReactDOM.render( , 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 , or explicitly pass "store" as a prop to "Connect(MyEditor)". looks like the problem is with redux now. – coolsaint Sep 27 '18 at 22:01
  • @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` – evgeni fotia Sep 30 '18 at 16:57
  • @evgeni fotia No I haven't changed anything in package.json – coolsaint Oct 01 '18 at 07:21
  • 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. – leonprou Oct 02 '18 at 08:48