ReactJS markdown editor component fails to render - reactjs

Question

I'm learning React at the moment, and I am currently trying out the Slate Markdown Editor in CodeSandbox. I am trying to initialize a Slate Editor instance like this:
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import Editor from "slate-md-editor";
const MdEditor = Editor();
<MdEditor />;
However, CodeSandbox displays the following error when I attempt to compile my code:
at evaluate (https://oxxbg.csb.app/node_modules/canner/slate-icon-codeblock/lib/index.js:80:45z
https://codesandbox.io/static/js/sandbox.cddc3c052.js:1:98419
X.evaluate
https://codesandbox.io/static/js/sandbox.cddc3c052.js:1:110543
ye.evaluateTranspiledModule
https://codesandbox.io/static/js/sandbox.cddc3c052.js:1:120123
c
https://codesandbox.io/static/js/sandbox.cddc3c052.js:1:110289
evaluate
https://oxxbg.csb.app/node_modules/slate-md-editor/lib/index.js:34:27
z
https://codesandbox.io/static/js/sandbox.cddc3c052.js:1:98419
X.evaluate
https://codesandbox.io/static/js/sandbox.cddc3c052.js:1:110543
ye.evaluateTranspiledModule
https://codesandbox.io/static/js/sandbox.cddc3c052.js:1:120123
c
https://codesandbox.io/static/js/sandbox.cddc3c052.js:1:110289
evaluate
/src/index.js:5
2 | import ReactDOM from "react-dom";
3 | import "./styles.css";
4 |
> 5 | import Editor from "slate-md-editor";
6 | const MdEditor = Editor();
7 |
8 | <MdEditor />;
I have not experienced this previously, and I am at a loss of knowing what to do.
I would greatly appreciate it if someone more experienced has some idea of this issue. Thank you in advance.
Link to the Sandbox
This is my package.json:
{
"name": "slate-editor",
"version": "1.0.0",
"description": "React testing project",
"keywords": [
"react",
"starter"
],
"main": "src/index.js",
"dependencies": {
"antd": "4.10.2",
"immutable": "4.0.0-rc.12",
"react": "17.0.0",
"react-dom": "17.0.0",
"react-scripts": "3.4.3",
"slate": "0.59.0",
"slate-md-editor": "1.5.4",
"slate-react": "0.59.0",
"slate-schema-violations": "0.1.39"
},
"devDependencies": {
"typescript": "3.8.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}

Answer 1

Here is what I found out later:
Step 1
Setup a basic React project like so:
npx create-react-app slate-editor-demo
cd slate-editor-demo
Step 2
Delete the App.js, App.testing.js, and App.css in the src/ folder. You should now only have five files in that folder:
index.css
index.js
logo.svg
reportWebVitals.js
setupTests.js
Step 3
Install dependencies for slate-md-editor. Here they are:
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"antd": "^3.8.4",
"immutable": "^3.8.2",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-scripts": "1.1.5",
"slate": "^0.40.2",
"slate-react": "^0.12.0",
"slate-schema-violations": "^0.1.39",
"slate-md-editor": "1.5.4",
"web-vitals": "^1.0.1"
You can simply copy these dependencies into your package.json, and then run npm install to update the deps.
Step 4
Edit your src/index.js to look something like this:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Editor from "./slateMDEditor";
import reportWebVitals from './reportWebVitals';
const options = {
// default settings
prismOption: {
// https://github.com/GitbookIO/slate-prism
onlyIn: node => node.type === 'code_block',
getSyntax: node => node.data.get('syntax')
},
codeOption: {
// https://github.com/GitbookIO/slate-edit-code
onlyIn: node => node.type === 'code_block'
},
blockquoteOption: {
// https://github.com/GitbookIO/slate-edit-blockquote
},
listOption: {
// https://github.com/GitbookIO/slate-edit-list
types: ['ordered_list', 'unordered_list'],
typeItem: 'list_item',
typeDefault: 'paragraph'
}
}
const MdEditor = Editor(options);
ReactDOM.render(
<MdEditor onChange={this.onChange} />,
document.getElementById('root')
);
// Start measuring performance in app
reportWebVitals();
Step 5
Last step: run npm run start (if you use NPM), or yarn start (if you use yarn). You should see slate markdown editor running smoothly in your browser on localhost.