I'm trying to build simple slate editor in React.
I'm using create-react-app and I have made simple component for representing the editor
import React, { useState } from "react";
import { Editor } from "slate-react";
import { Value } from "slate";
const SlateEditor = () => {
const initialValue = Value.fromJSON({
document: {
nodes: [
{
object: 'block',
type: 'paragraph',
nodes: [
{
object: 'text',
leaves: [
{
text: 'A line of text in a paragraph.',
},
],
},
],
},
],
},
})
const [ value, setValue ] = useState(initialValue)
return (
<div>
<Editor className = "Editor" value={value} onChange= {(e)=>setValue(e.value)}/>
</div>
)
}
export default SlateEditor;
This is my package json file
{
"name": "slate-editor",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"immutable": "^4.0.0-rc.15",
"is-hotkey": "^0.2.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"slate": "^0.66.1",
"slate-plain-serializer": "^0.7.13",
"slate-react": "^0.66.1",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I have error Failed to compile.
./src/components/SlateEditor.js Attempted import error: 'Editor' is not exported from 'slate-react'
As you can see I exported Editor from slate-react, please any idea how to fix this? Thank you
slate-react does not export Editor, you can import Editor from 'slate', or use the Slate and Editable components as shown in the documentation https://docs.slatejs.org/walkthroughs/01-installing-slate