React-medixtor NPM

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

import React from "react";
import Medixtor from "react-medixtor";

export default class MyApp extends React.Component {
  onEdit(output) {
    console.log(output.source);
  }

  render() {
    return <Medixtor defaultValue="## Hi @SocialGouv!" onChange={this.onEdit.bind(this)} />;
  }
}

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.

: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

npm version [major|minor|patch|preversion]

This will automatically build, tag and publish into Github.

VSCode Settings

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnSaveTimeout": 2000,
  "editor.formatOnPaste": true,
  "editor.rulers": [100]
}