react-medixtor
MDX-based Editor, Previewer and Renderer for React.
⚠️ This is a work in progress.
Features
- Editor-only, Previewer-only or both either horizontally or vertically.
- React component output (may be safely used to render the output natively within React).
- Markdown output (not sanitized yet !).
- HTML output (not sanitized yet !).
- Browser spell-checking.
- Fully customizable styles.
Planned Features
- MDX output.
- Per-block comments.
- Rich editor buttons.
- Sanitized HTML output.
- Sanitized Markdown output.
Get Started
npm i react-medixtor
;; Component { console; } { return <Medixtor defaultValue="## Hi @SocialGouv!" onChange=thisonEdit />; }
Properties
className: String // CSS classes. Default: "". defaultValue: String // Initial Markdown source. Default: "". disabled: Boolean // Disable editor. Default: false. editorStyle: Object // Overwrite editor style. headersOffset: Number // Headers offset for HTML & JSX outputs. Default: 1. onChange: Function // Triggered after each editor change. Default: undefined. noEditor: Boolean // Hide editor. Default: false. noPreview: Boolean // Hide preview. Default: false. previewStyle: Object // Overwrite preview style. noSpellCheck: Boolean // Disable editor spell-check. Default: false. style: Object // Overwrite container style.
onChange(output)
output: html: String // Non-sanitized HTML source (converted via Showdown). jsx: Function // Integrable React component. source: String // Normalized Markdown source. rawSource: String // Raw Markdown source.
Contribute
Getting started
Just install the dependencies
yarn
Development
This will watch your changes and live-reload the browser:
yarn dev
You can now open Medixtor in http://localhost:10001.
📝 Note: You still need to manually refresh when changing index.html
or index.css
files.
Test
- All Tests:
yarn test
- Lint Tests:
yarn test:lint
- Unit Tests:
yarn test:unit
- Unit Tests (watch):
yarn test:watch
Publish
npm version [major|minor|patch|preversion]
This will automatically build, tag and publish into Github.
VSCode Settings
License
This package and its sources are distributed under Apache 2.0.