Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/SocialGouv/react-medixtor
MDX-based Editor, Previewer & Renderer for React.
https://github.com/SocialGouv/react-medixtor
Last synced: 4 months ago
JSON representation
MDX-based Editor, Previewer & Renderer for React.
- Host: GitHub
- URL: https://github.com/SocialGouv/react-medixtor
- Owner: SocialGouv
- License: apache-2.0
- Archived: true
- Created: 2019-08-02T15:03:54.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T20:54:02.000Z (about 2 years ago)
- Last Synced: 2024-08-11T23:25:27.074Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 941 KB
- Stars: 7
- Watchers: 4
- Forks: 0
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-medixtor
[![License][img-license]][link-license] [![NPM Version][img-npm]][link-npm]
[![Build Status][img-travis]][link-travis] [![Code Coverage][img-coveralls]][link-coveralls]
[MDX][link-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
```bash
npm i react-medixtor
```
```js
import React from "react";
import Medixtor from "react-medixtor";
export default class MyApp extends React.Component {
onEdit(output) {
console.log(output.source);
}
render() {
return ;
}
}
```
## Properties
```js
{
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)`
```js
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
```bash
yarn
```
### Development
This will watch your changes and live-reload the browser:
```bash
yarn dev
```
You can now open Medixtor in [http://localhost:10001](http://localhost:10001).
_:memo: **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
```bash
npm version [major|minor|patch|preversion]
```
This will automatically build, tag and publish into Github.
### VSCode Settings
```json
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.formatOnSaveTimeout": 2000,
"editor.formatOnPaste": true,
"editor.rulers": [100]
}
```
## License
This package and its sources are distributed under [Apache 2.0][link-license].
---
[img-coveralls]:
https://img.shields.io/coveralls/github/SocialGouv/react-medixtor/master?style=flat-square
[img-license]: https://img.shields.io/badge/License-MIT-blue?style=flat-square
[img-npm]: https://img.shields.io/npm/v/react-medixtor?style=flat-square
[img-travis]: https://img.shields.io/travis/com/SocialGouv/react-medixtor?style=flat-square
[link-coveralls]: https://coveralls.io/github/SocialGouv/react-medixtor
[link-license]: https://github.com/SocialGouv/react-medixtor/blob/master/LICENSE
[link-mdx]: https://mdxjs.com
[link-npm]: https://www.npmjs.com/package/react-medixtor
[link-travis]: https://travis-ci.com/SocialGouv/react-medixtor