DraftJS Plugins - High quality plugins with great UX

The documentation currently represents the 4.0.0 release.
For troubleshooting please checkout theFAQ

Hashtag

Highlighting words starting with a number sign (#).

Usage in combination with Linkify Plugin

When used in combination with the linkify plugin make sure the hashtag plugin is listed afterwards in the plugins list to avoid URL hashes being styled as hashtags e.g. [linkifyPlugin, hashtagPlugin]

Supported Environment

Desktop: Yes
Mobile: Yes
Screen-reader: Yes

Getting Started

npm install @draft-js-plugins/editor

npm install @draft-js-plugins/hashtag

gettingStarted.js

// It is important to import the Editor which accepts plugins.
import Editor from '@draft-js-plugins/editor';
import createHashtagPlugin from '@draft-js-plugins/hashtag';
import React from 'react';

// Creates an Instance. At this step, a configuration object can be passed in
// as an argument.
const hashtagPlugin = createHashtagPlugin();

// The Editor accepts an array of plugins. In this case, only the hashtagPlugin
// is passed in, although it is possible to pass in multiple plugins.
const MyEditor = ({ editorState, onChange }) => (
  <Editor
    editorState={editorState}
    onChange={onChange}
    plugins={[hashtagPlugin]}
  />
);

export default MyEditor;

Importing the default styles

The plugin ships with a default styling available at this location in the installed package: node_modules/@draft-js-plugins/hashtag/lib/plugin.css

Webpack Usage

1. Install Webpack loaders: npm i style-loader css-loader --save-dev

2. Add the below section to Webpack config (if your config already has a loaders array, simply add the below loader object to your existing list.

module.exports = {
  module: {
    loaders: [
      {
        test: /plugin\.css$/,
        loaders: ['style-loader', 'css'],
      },
    ],
  },
};

3. Add the below import line to your component to tell Webpack to inject the style to your component.
```
import '@draft-js-plugins/hashtag/lib/plugin.css';
```
4. Restart Webpack.

Configuration Parameters

themeObject of CSS classes with the following keys.

hashtag: CSS class to be applied to hashtag text

hashtagComponentIf provided the passed component is used to render a Mention. It receives the following props: children, theme & decoratedText

Additional Exports

In addition to the plugin the module exports extractHashtagsWithIndices. As first argument it takes the text string. The function returns a list of hashtags with start and end positions.

function extractHashtagsWithIndices(text: string): Array<{hashtag: string; indices: [number, number];}>;

It can be imported by:

import { extractHashtagsWithIndices } from '@draft-js-plugins/hashtag';

Simple Example

#TIL: This editor can have all sorts of #hashtags. Pretty #cool :)
Try it yourself by starting a word with a # (hash character) …

SimpleHashtagEditor.js

import React, { Component } from 'react';
import Editor, { createEditorStateWithText } from '@draft-js-plugins/editor';
import createHashtagPlugin from '@draft-js-plugins/hashtag';
import editorStyles from './editorStyles.module.css';

const hashtagPlugin = createHashtagPlugin();
const plugins = [hashtagPlugin];
const text = `#TIL: This editor can have all sorts of #hashtags. Pretty #cool :)
Try it yourself by starting a word with a # (hash character) …
`;

export default class SimpleHashtagEditor extends Component {
  state = {
    editorState: createEditorStateWithText(text),
  };

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

  focus = () => {
    this.editor.focus();
  };

  render() {
    return (
      <div className={editorStyles.editor} onClick={this.focus}>
        <Editor
          editorState={this.state.editorState}
          onChange={this.onChange}
          plugins={plugins}
          ref={(element) => {
            this.editor = element;
          }}
        />
      </div>
    );
  }
}

editorStyles.css

.editor {
  box-sizing: border-box;
  border: 1px solid #ddd;
  cursor: text;
  padding: 16px;
  border-radius: 2px;
  margin-bottom: 2em;
  box-shadow: inset 0px 1px 8px -3px #ABABAB;
  background: #fefefe;
}

.editor :global(.public-DraftEditor-content) {
  min-height: 140px;
}

Themed Hashtag Example

In this editor, we can even apply our own styles … #design #theme

CustomHashtagEditor.js

import React, { Component } from 'react';
import Editor, { createEditorStateWithText } from '@draft-js-plugins/editor';
import createHashtagPlugin from '@draft-js-plugins/hashtag';
import editorStyles from './editorStyles.module.css';
import hashtagStyles from './hashtagStyles.module.css';

const hashtagPlugin = createHashtagPlugin({ theme: hashtagStyles });
const plugins = [hashtagPlugin];
const text =
  'In this editor, we can even apply our own styles … #design #theme';

export default class CustomHashtagEditor extends Component {
  state = {
    editorState: createEditorStateWithText(text),
  };

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

  focus = () => {
    this.editor.focus();
  };

  render() {
    return (
      <div className={editorStyles.editor} onClick={this.focus}>
        <Editor
          editorState={this.state.editorState}
          onChange={this.onChange}
          plugins={plugins}
          ref={(element) => {
            this.editor = element;
          }}
        />
      </div>
    );
  }
}

hashtagStyles.css

.hashtag {
  color: #1CA782;
  font-family: cursive;
}

editorStyles.css

.editor {
  box-sizing: border-box;
  border: 1px solid #ddd;
  cursor: text;
  padding: 16px;
  border-radius: 2px;
  margin-bottom: 2em;
  box-shadow: inset 0px 1px 8px -3px #ABABAB;
  background: #fefefe;
}

.editor :global(.public-DraftEditor-content) {
  min-height: 140px;
}

Edit this page on GitHub

Github