Skip to content

Latest commit

 

History

History
85 lines (60 loc) · 2.05 KB

README.md

File metadata and controls

85 lines (60 loc) · 2.05 KB
Raw

React Markdown Table Generator

Easily create Markdown Tables without having to be an Ascii Art professional.

Deployed in Vercel: https://react-md-table-generator.vercel.app/

react_md_table

To Run

yarn install
yarn start

Or

npm install
npm start

The server will be running 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

  • deploy to Vercel
  • 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 <- seems like this is impossible
  • Copy to clipboard

Formatting

Layout

  • Fixed toolbar (fullscreen mode)
  • Add zoom in/out

CSS

  • [-] Add SASS color constants <- remove because it should just be CSS vars
  • Move to CSS Modules ?
  • Add dark mode

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