React Markdown Table Generator
Easily create Markdown Tables without having to be an Ascii Art professional.
To Run
yarn install
yarn start
Or,
npm install
npm start
The server will start on http://localhost:3003.
Rationale
This project is built using React + Redux hooks. It is my first project moving away from Class Components into Functional.
Building a good table generator is difficult because of ContentEditable's unexpected and slightly unpredictable results, especially across browsers.
TO DO LIST
Misc
- Set SSL
- Save redux to local storage (debounced)
- Try Redux Toolkit / immer
- Add bottoms links to Github, React, etc.
Main Editor
- Render markdown->html inside cells
- Add undo / redo through Redux
- Import -> clear after right import
- Import -> fallback for errors
- Render emojis/CJK characters in smaller width/size
Formatting
Layout
- Fixed toolbar (fullscreen mode)
- Add zoom in/out
CSS
- [-] Add SASS color constants
- Move to CSS Modules ?
- Add night theme
Parser
- Fall-back if parsing has errors
Tests
- Set puppeteer for E2E testing
- Util unit tests ?
- CI tests + coverage
Known Issues / Bugs
- Firefox / Chrome works differently (spaces and enters)
- Check firefox
- Check safari/opera
- Check IE
- Deleting all text inside a cell on chrome sometimes doesn't trigger onChange event
- Irregular icons such as emojis or chinese characters break the fixed-width tables
LICENSE
MIT License.
Test Table:
| Default Alignment | Center | Right |
|---|---|---|
| With | Pipe | First Row 2 | First Row 3 |
| Second Row 1 | Second Row 2 | Second Row 3 |
Code |
Italics | Bold |