|
1 |
| -# Getting Started with Create React App |
| 1 | +# Rich Text Editor in React using Material UI |
2 | 2 |
|
3 |
| -This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). |
| 3 | +_👀 Medium like text editor in React |
4 | 4 |
|
5 |
| -## Available Scripts |
| 5 | + |
| 6 | + |
| 7 | + |
6 | 8 |
|
7 |
| -In the project directory, you can run: |
| 9 | +## Introduction |
8 | 10 |
|
9 |
| -### `npm start` |
| 11 | +I was facing issues with implementing a Text Editor in React, previously I had a hassle-free implementation in Vue for one of the projects I have on Github. Many things did not work for me. I tried packages like React Slate, React-draft-wysiwyg and more. But, they had dependency related issues. Many of them lacked concrete examples. This package called **'mui-rte'** did work for me at last in this project bootstrapped with create-react-app. |
10 | 12 |
|
11 |
| -Runs the app in the development mode.\ |
12 |
| -Open [http://localhost:3000](http://localhost:3000) to view it in your browser. |
| 13 | +This also has some warnings though which I might address in the future, but I needed a quick solution for the time being. |
13 | 14 |
|
14 |
| -The page will reload when you make changes.\ |
15 |
| -You may also see any lint errors in the console. |
| 15 | +## Requirements 🏃 |
16 | 16 |
|
17 |
| -### `npm test` |
| 17 | +- Node |
| 18 | +- React |
| 19 | +- Material UI |
| 20 | +- Draft JS |
18 | 21 |
|
19 |
| -Launches the test runner in the interactive watch mode.\ |
20 |
| -See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. |
| 22 | +## Install 💥 |
21 | 23 |
|
22 |
| -### `npm run build` |
| 24 | +``` |
| 25 | +npm install |
| 26 | +npm start |
| 27 | +``` |
23 | 28 |
|
24 |
| -Builds the app for production to the `build` folder.\ |
25 |
| -It correctly bundles React in production mode and optimizes the build for the best performance. |
| 29 | +The React app is configured to run by default on port 3000. |
26 | 30 |
|
27 |
| -The build is minified and the filenames include the hashes.\ |
28 |
| -Your app is ready to be deployed! |
| 31 | +## Features |
29 | 32 |
|
30 |
| -See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. |
| 33 | +- Text Editor |
| 34 | +- Can have hyperlinks and images. |
| 35 | +- Can parse HTML output from the editor to send to the back-end server. |
31 | 36 |
|
32 |
| -### `npm run eject` |
| 37 | +## Deployment |
33 | 38 |
|
34 |
| -**Note: this is a one-way operation. Once you `eject`, you can't go back!** |
| 39 | +Docker deployment using Nginx to be added in the future. |
35 | 40 |
|
36 |
| -If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. |
| 41 | +## Development |
37 | 42 |
|
38 |
| -Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. |
| 43 | +_Easily set up a local development environment!_ |
39 | 44 |
|
40 |
| -You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. |
| 45 | +- clone |
| 46 | +- `npm install` |
| 47 | +- `npm start` |
41 | 48 |
|
42 |
| -## Learn More |
| 49 | +**Start coding!** 🎉 |
43 | 50 |
|
44 |
| -You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). |
| 51 | +Clone this repo on your machine, navigate to its location in the terminal and run: |
45 | 52 |
|
46 |
| -To learn React, check out the [React documentation](https://reactjs.org/). |
| 53 | +## Contributing |
47 | 54 |
|
48 |
| -### Code Splitting |
49 |
| - |
50 |
| -This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) |
51 |
| - |
52 |
| -### Analyzing the Bundle Size |
53 |
| - |
54 |
| -This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) |
55 |
| - |
56 |
| -### Making a Progressive Web App |
57 |
| - |
58 |
| -This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) |
59 |
| - |
60 |
| -### Advanced Configuration |
61 |
| - |
62 |
| -This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) |
63 |
| - |
64 |
| -### Deployment |
65 |
| - |
66 |
| -This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) |
67 |
| - |
68 |
| -### `npm run build` fails to minify |
69 |
| - |
70 |
| -This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) |
| 55 | +All contributions are welcome! |
0 commit comments