‚̧Nutritious Polygonal Meatball
    Have ideas to improve npm?Join in the discussion! ¬Ľ

    @wonism/react-milkdown

    1.1.3¬†‚Äʬ†Public¬†‚Äʬ†Published

    react-milkdown · Travis npm version license

    Powerful Markdown editor as React components.

    Check live demo here!

    śü•Áúčšł≠śĖáŤĮīśėé


    Installing

    npm install --save react-milkdown
    yarn add react-milkdown

    Basic usage

    import React, { Component } from 'react';
    import Milk from 'react-milkdown';
     
    import 'font-awesome/css/font-awesome.min.css'; // milkdown uses font-awesome, you can ignore this if your project already import font-awesome
     
    class Milkdown extends Component {
      state = {
        value: ""
      }
     
      onChange = value => {
        this.setState({ value });
        return value;
      }
     
      render() {
        const { value } = this.state
        return (
          <Milk
            value={value}
            onChange={this.onChange}
            style={{margin: "0 auto"}}
          />
        )
      }
    }

    Features

    • Highlight
    • Multi-line edit
    • Drag Upload Image(support multiple image)
    • Medium editor style control bar
    • Preview
    • Full screen edit
    • Paste mode (auto convert newline when paste)

    Props

    • value: the context of editor
    • onChange: the only argument of onChange is value. IMPORTANT!!! at the end of this function, you MUST return value
    • style: change the style of milkdown's container

    Decorator

    Milkdown provide a function (essentially is a decorator) to let you change method of upload file (change to base64 by default), you can use it like this:

    import React, { Component } from 'react';
    import { milkFileReader } from 'react-milkdown';
     
    import 'font-awesome/css/font-awesome.min.css'; // milkdown uses font-awesome, you can ignore this if your project already import font-awesome
     
    const blobReader = file => (
      new Promise((res, rej) => {
        const reader = new FileReader();
        reader.onload = () => {
          res(file.preview);
        }
        reader.onerror = reader.onabort = rej;
        reader.readAsDataURL(file);
      })
    );
     
    const Milk = milkFileReader(blobReader);
     
    class Milkdown extends Component {
      state = {
        value: ""
      }
     
      onChange = value => {
        this.setState({ value });
        return value;
      }
     
      render() {
        const { value } = this.state
        return (
          <Milk
            value={value}
            onChange={this.onChange}
            style={{margin: "0 auto"}}
          />
        )
      }
    }

    License

    MIT-licensed. See LICENSE.

    Install

    npm i @wonism/react-milkdown

    DownloadsWeekly Downloads

    2

    Version

    1.1.3

    License

    MIT

    Unpacked Size

    7.41 MB

    Total Files

    55

    Last publish

    Collaborators

    • avatar