npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

pulse-editor

v1.1.0

Published

A React markdown editor, extensible and fully customizable.

Downloads

21

Readme

Pulse Editor

A React markdown editor, extensible and fully customizable

Installation

To install this editor just run:

yarn add pulse-editor

Or with npm:

npm i -S pulse-editor

Usage example

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 `<form>` 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 (
      <form onSubmit={this.handleSubmit}>
        <Editor
          name="main-editor"
          defaultValue="**Initial _editor_ value**"
          onChange={this.handleChange}
          onDrop={this.handleDrop}
          editorRef={this.setRef}
        >
          <ButtonBar>
            <ButtonGroup>
              <Bold><strong>B</strong></Bold>
              <Italic><em>I</em></Italic>
              <Underline>U</Underline>
            </ButtonGroup>

            <ButtonGroup>
              <Code>Insert code</Code>
              <Link>Link</Link>
              <Image>Image</Image>
            </ButtonGroup>

            <ButtonGroup>
              <OrderedList>OL</OrderedList>
              <UnorderedList>UL</UnorderedList>
              <Quote>Q</Quote>
              <Heading>H</Heading>
              <Youtube>Y</Youtube>
            </ButtonGroup>
          </ButtonBar>

          {/* you can use any DOM element or event custom components */}
          <div>
            <Preview />
            {/* you can force an initial height for the field if it's server rendered */}
            <Field style={{ height: '39px' }} />
          </div>

          <EmojiBar />
        </Editor>
        <button type="submit">Send form</button>
      </form>
    )
  }
}

export default MyEditor

Authors