Build a responsive Typescript React text editor with JSON output base off Slate.js (working code example given)
Budget: $100 – $250 USD
PLEASE READ THE REQUIREMENTS CAREFULLY SO YOU DO NOT WASTE YOUR TIME!
Thank you!
---
* Tech requirements:
- Minimal dependencies: Please try to minimize the dependencies as much as possible. You can use "emotion" for styling.
- Use Slate.js: https://github.com/ianstormtaylor/slate
- Write in Typescript with Create React app: https://create-react-app.dev/docs/adding-typescript/
- Storybook >=v6 for component demo
- Node version should be >=16
- All libraries used must be MIT, Apache or permissive license
- Use https://react-icons.github.io/react-icons/ for icons
- You can either deploy the work somewhere so I can see, it or share a private Github repo to "thetdecoy" so that I can checkout can see locally.
* The document itself should have these attributes
- Id
- Title
- Metadata
* The JSON output should include "blocks" to form a document. Each block must have several attributes:
- id: uuid()
- content: for holding text, think about List and Table content structure as well. This should consist of HTML element e.g. <b />, <small />, <a /> tags for styling.
* Features requirements
- At minimal, the editor should be functional as this one: - https://canner.github.io/canner-slate-editor/?selectedKind=slate-md-editor&selectedStory=Simple%20demo&full=0&addons=1&stories=1&panelRight=0
- When you show the component in Storybook, please show JSON on the sidebar on changes.
- No tests are required, but Storybook use cases are needed.
- Each block must be draggable to adjust the positions, the JSON output should listen to the changes and update the data.
```
Markdown
Blockquote
Code block (inline)
Code block (triple backticks, with language selection)
Header
Bold
Italic
Bold + Italic
Strikethrough
Hr
Link
Image
File upload
Unordered List
Ordered List
```
* Resources:
There are many Slate editors out there that you can take inspiration from:
- https://github.com/Canner/canner-slate-editor
- https://canner.github.io/canner-slate-editor/?selectedKind=slate-md-editor&selectedStory=Simple%20demo&full=0&addons=1&stories=1&panelRight=0
PLEASE ASK MORE QUESTIONS IF ANY ARE NOT CLEAR
Thank you!
---
* Tech requirements:
- Minimal dependencies: Please try to minimize the dependencies as much as possible. You can use "emotion" for styling.
- Use Slate.js: https://github.com/ianstormtaylor/slate
- Write in Typescript with Create React app: https://create-react-app.dev/docs/adding-typescript/
- Storybook >=v6 for component demo
- Node version should be >=16
- All libraries used must be MIT, Apache or permissive license
- Use https://react-icons.github.io/react-icons/ for icons
- You can either deploy the work somewhere so I can see, it or share a private Github repo to "thetdecoy" so that I can checkout can see locally.
* The document itself should have these attributes
- Id
- Title
- Metadata
* The JSON output should include "blocks" to form a document. Each block must have several attributes:
- id: uuid()
- content: for holding text, think about List and Table content structure as well. This should consist of HTML element e.g. <b />, <small />, <a /> tags for styling.
* Features requirements
- At minimal, the editor should be functional as this one: - https://canner.github.io/canner-slate-editor/?selectedKind=slate-md-editor&selectedStory=Simple%20demo&full=0&addons=1&stories=1&panelRight=0
- When you show the component in Storybook, please show JSON on the sidebar on changes.
- No tests are required, but Storybook use cases are needed.
- Each block must be draggable to adjust the positions, the JSON output should listen to the changes and update the data.
```
Markdown
Blockquote
Code block (inline)
Code block (triple backticks, with language selection)
Header
Bold
Italic
Bold + Italic
Strikethrough
Hr
Link
Image
File upload
Unordered List
Ordered List
```
* Resources:
There are many Slate editors out there that you can take inspiration from:
- https://github.com/Canner/canner-slate-editor
- https://canner.github.io/canner-slate-editor/?selectedKind=slate-md-editor&selectedStory=Simple%20demo&full=0&addons=1&stories=1&panelRight=0
PLEASE ASK MORE QUESTIONS IF ANY ARE NOT CLEAR