Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/platzidev/pulse-editor

Tha Platzi Flavored Markdown extensible and customizable editor.
https://github.com/platzidev/pulse-editor

customizable extensible markdown platzi pulse pulse-editor react react-components

Last synced: about 2 months ago
JSON representation

Tha Platzi Flavored Markdown extensible and customizable editor.

Awesome Lists containing this project

README 

        
# Pulse Editor

A React markdown editor, extensible and fully customizable



## Installation

To install this editor just run:



```bash

yarn add pulse-editor

```



Or with npm:



```bash

npm i -S pulse-editor

```



## Usage example

```javascript

import React, { Component } from 'react'

import { Editor, ButtonBar, ButtonGroup, Field, Preview, EmojiBar } from 'pulse-editor'

import {

  Base,

  Bold,

  Italic,

  Underline,

  Code,

  Link,

  Image,

  OrderedList,

  UnorderedList,

  Quote,

  Heading,

  Youtube,

} from 'pulse-editor/buttons'



class MyEditor extends Component {

  handleChange = ({ selected, selection, markdown, html, native }) => {

    console.group('Editor special change event')

    console.log('With this event you can get the `selected` text.')

    console.log('Along with the `selection` position inside the full value.')

    console.log('Of course, you also get the original `markdown` and the parsed `html`.')

    console.log('And since the changes are also triggered from a button click, text input, etc.')

    console.log('You will also get the `native` DOM event.')

    console.groupEnd('Editor special change event')

  }



  handleDrop = event => {

    console.group('Editor custom (drop) event')

    console.log('The editor is extensible!')

    console.log('This event is not actually used by the editor.')

    console.log('But you can use it to extend the editor features.')

    console.log('And create your own custom editor on top of this one.')

    console.groupEnd('Editor custom (drop) event')

  }



  handleSubmit = event => {

    event.preventDefault()

    console.group('Form submit')

    console.log('Because the editor is just a textarea at the end of the day.')

    console.log('You can wrap it in a HTML `` tag and use it as part of a common form')

    console.log('If you submit it, the editor field name it\'s `value`.')

    console.log('That name can be customized if you set it as a prop of the `Field` component.')

    console.groupEnd('Form submit')

  }



  setRef = editor => {

    console.group('Editor ref')

    console.log('We can also get the editor instance ref.');

    console.log('This can allow us to call editor methods to update the internal value.');

    console.log('That way we can extend our editor.');

    console.log('And implement features like Drag&Drop of images.');

    console.groupEnd('Editor ref')

    this.editor = editor;

  }



  render() {

    return (

      

        

          

            

              B

              I

              U

            



            

              Insert code

              Link

              Image

            



            

              OL

              UL

              Q

              H

              Y

            

          



          {/* you can use any DOM element or event custom components */}

          


            

            {/* you can force an initial height for the field if it's server rendered */}

            

          



          

        

        Send form

      

    )

  }

}



export default MyEditor

```



## Authors

- Sergio Daniel Xalambrí ([@sergiodxa](https://twitter.com/sergiodxa)) - Platzi