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

sqribbled-draft

v0.1.0

Published

A medium like rich text editor built upon draft-js and medium-draft specifically for me

Downloads

3

Readme

sqribbled-draft

A medium like rich text editor built upon draft-js with an emphasis on eliminating mouse usage by adding relevant keyboard shortcuts. This is a form of medium-draft that is tweaked for my personal use. Please refer to the original.

Features

  • Focus on keyboard shortcuts and auto transform of text blocks.
  • Image addition with support for rich text captioning.
  • Minimize mouse usage.
  • Autolists.
  • Proper handling of RETURN presses.
  • It also has implementations of some custom blocks like:
    • caption - Can be used as a caption for media blocks like image or video instead of nested draft-js instances for simplicity.
    • block-quote-caption - Caption for blockquotes.
    • todo - Todo text with a checkbox.
Following are the keyboard shortcuts to toggle block types (Alt and CTRL for Windows/Linux and Option and Command for OSX)
  • Alt/Option +

    • 1 - Toggle Ordered list item
    • * - Toggle Unordered list item
    • # - Toggle Header-three.
    • < - Toggle Caption block.
    • > - Toggle unstyled or paragraph block.
    • H - Highlight selection.
Other Shortcuts
  • CMD/CTRL + K -> Add Link
  • CMD/CTRL + SHIFT + K -> Remove link if cursor is inside a word with link.
Editor level commands

These commands are not a part of the core editor but have been implemented in the example code that uses the sqribbled-draft editor.

  • Command/CTRL + S - Save current data to localstorage.
  • Alt + Shift + L - Load previously saved data from localstorage.
Special characters while typing: While typing in an empty block, if the content matches one of the following, that particular block's type and look will be changed to the corresponding block specified below
  • -- - If current block is blockquote, it will be changed to block-quote-caption, else caption.
  • *. (An asterisk and a period) - unordered-list-item.
  • *<SPACE> (An asterisk and a space) - unordered-list-item.
  • -<SPACE> (A hyphen and a space) - unordered-list-item.
  • 1. (The number 1 and a period) - unordered-list-item.
  • ## - header-two.
  • [] - todo.
  • == - unstyled.

Installation

  • npm.
    • npm install sqribbled-draft.
    • import Editor from 'sqribbled-draft'
  • Browser
    • Include <link rel="stylesheet" type="text/css" href="https://unpkg.com/sqribbled-draft/dist/sqribbled-draft.css"> in <head>
    • Include <script src="https://unpkg.com/sqribbled-draft/dist/sqribbled-draft.js"></script>. sqribbled-draft is available in the global object as SqribbledDraft.

Usage

sqribbled-draft sits on top of draft-js with some built in functionalities and blocks. Its API is almost the same as that of draft-js. You can take a look at the demo editor's code to see the implementation.

CSS

Include the css that comes with the library in your HTML -

<link rel="stylesheet" type="text/css" href="https://unpkg.com/sqribbled-draft/dist/sqribbled-draft.css">

If you are using webpack for bundling, you can import the CSS like this in your JS code

import 'sqribbled-draft/lib/index.css';

If you are using sideButtons, you will also need to include the css for font-awesome -

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

or something equivalent.

JS (ES6)

At the minimum, you need to provide editorState and onChange props, the same as draft-js.


import React from 'react';
import ReactDOM from 'react-dom';

// if using webpack
// import 'sqribbled-draft/lib/index.css';

import {
  Editor,
  createEditorState,
} from 'sqribbled-draft';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      editorState: createEditorState(), // for empty content
    };

    /*
    this.state = {
      editorState: createEditorState(data), // with content
    };
    */

    this.onChange = (editorState) => {
      this.setState({ editorState });
    };
  }

  componentDidMount() {
    this.refs.editor.focus();
  }

  render() {
    const { editorState } = this.state;
    return (
      <Editor
        ref="editor"
        editorState={editorState}
        onChange={this.onChange} />
    );
  }
};

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

Customizing side buttons

sqribbled-draft's Editor accepts a prop called sideButtons. By default, there is only one (image) button, but you can add more. The sideButtons prop must be an array of objects with each object having the following signature:

{
  "title": "unique-button-name",
  "component": ButtonComponent
}

For ex:

{
  "title": "Image",
  "component": ImageSideButton
}

Example code:

Right now, the image button simply adds an image inside the editor using URL.createObjectURL. But if you would like to first upload the image to your server and then add that image to the editor, you can follow one of the 2 methods:

  1. Either extend the default ImageSideButton component that comes with sqribbled-draft.

  2. Or create your own component with the complete functionality yourself.

For simplicity, we will follow the first method. If you study the implementation of ImageSideButton, you will see an onChange method that receives the file chooser event where the seleced files are available as event.target.files. We will simply override this method as we don't want to customize anything else. Also note that each side button component receives getEditorState function (returns the draft editorState), setEditorState(newEditorState) function (sets the new editorState) and close function which you need to call manually to close the side buttons list:

import React from 'react';
import {
  ImageSideButton,
  Block,
  addNewBlock,
  createEditorState,
  Editor,
} from 'sqribbled-draft';
import 'isomorphic-fetch';

class CustomImageSideButton extends ImageSideButton {

  /*
  We will only check for first file and also whether
  it is an image or not.
  */
  onChange(e) {
    const file = e.target.files[0];
    if (file.type.indexOf('image/') === 0) {
      // This is a post request to server endpoint with image as `image`
      const formData = new FormData();
      formData.append('image', file);
      fetch('/your-server-endpoint', {
        method: 'POST',
        body: formData,
      }).then((response) => {
        if (response.status === 200) {
          // Assuming server responds with
          // `{ "url": "http://example-cdn.com/image.jpg"}`
          return response.json().then(data => {
            if (data.url) {
              this.props.setEditorState(addNewBlock(
                this.props.getEditorState(),
                Block.IMAGE, {
                  src: data.url,
                }
              ));
            }
          });
        }
      });
    }
    this.props.close();
  }

}

// Now pass this component instead of default prop to Editor example above.
class App extends React.Component {
  constructor(props) {
    super(props);

    this.sideButtons = [{
      title: 'Image',
      component: CustomImageSideButton,
    }];

    this.state = {
      editorState: createEditorState(), // for empty content
    };

    /*
    this.state = {
      editorState: createEditorState(data), // with content
    };
    */

    this.onChange = (editorState) => {
      this.setState({ editorState });
    };
  }

  componentDidMount() {
    this.refs.editor.focus();
  }

  render() {
    const { editorState } = this.state;
    return (
      <Editor
        ref="editor"
        editorState={editorState}
        onChange={this.onChange}
        sideButtons={this.sideButtons}
      />
    );
  }
};

Render data to HTML

The feature to export HTML is available from version 0.4.1 onwards.

sqribbled-draft uses draft-convert (which in turn uses react-dom-server) to render draft-js's editorState to HTML.

The exporter is not a part of the core library. If you want to use sqribbled-draft-exporter, follow these steps -

Browserify/webpack

  • npm install draft-convert.

draft-convert is part of peerDependencies of sqribbled-draft.

Code
  import sqribbledDraftExporter from 'sqribbled-draft/lib/exporter';
  const editorState = /* your draft editorState */;
  const renderedHTML = sqribbledDraftExporter(editorState.getCurrentContent());
  /* Use renderedHTML */

Browser

  • Add the following scripts before your js code.
<script src="https://unpkg.com/[email protected]/dist/react-dom-server.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/draft-convert.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/sqribbled-draft-exporter.js"></script>

The exporter is available as SqribbledDraftExporter global;

  • JS
var sqribbledDraftExporter = SqribbledDraftExporter.default;
const editorState = /* your draft editorState */;
const renderedHTML = sqribbledDraftExporter(editorState.getCurrentContent());
/* Use renderedHTML */

The sqribbled-draft-exporter also comes with a preset CSS if you want to apply some basic styles to the rendered HTML.

  • In webpack, as part of your rendered HTML's page, use this-

    import 'sqribbled-draft/lib/basic.css'
  • In browser, in your rendered html's page, you can include this stylesheet link

    <link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/basic.css">

Issues

  • [x] Write an exporter to export draft data to HTML specifically for sqribbled-draft.
  • [ ] Figure out a way to show placeholder text for empty image captions.
  • [x] Currently, the toolbar that appears when text is selected needs to be fixed regarding its position in the viewport.

Developer

  • Clone this repo git clone https://gitlab.com/propulsions/sqribbled-draft/sqribbled-draft.git.
  • Install node packages npm install react react-dom draft-convert && npm install.
  • Start local demo npm run dev. This will start a local server on port 8080.
  • Build using npm run build.

LICENSE

MIT