open-index/open-npm huggingface dataset:
npm package: @svenadlung/react-dnd-html5-mixed-backend
Description: HTML5 backend for React DnD
Author: Dan Abramov
Latest version: 2.0.3

# React DnD HTML5 Mixed Backend [![npm package](https://img.shields.io/npm/v/react-dnd-html5-mixed-backend.svg?style=flat-square)](https://www.npmjs.org/package/react-dnd-html5-mixed-backend)

This is a fork of the officially supported HTML5 backend for [React
DnD](http://gaearon.github.io/react-dnd/). This fork changes it to not abort drag-and-drop
operations that aren't through React DnD, so that it can be used on pages with other
unrelated drag-and-drop modules.

See [the docs](http://gaearon.github.io/react-dnd/docs-html5-backend.html) for usage information.

## Installation

```
npm install --save react-dnd-html5-mixed-backend
```

There is no `dist` folder on the master branch.

## License

MIT
npm package: @svenadlung/slate-mentions
Description: Add mentions like Facebook to your Slate editor.
Latest version: 0.0.8

# `slate-mentions`

**ALPHA, USE AT YOUR OWN RISK**

Add support for mentions to your Slate editor.

## Installation

```sh
npm install --save slate-mentions
```

## Usage

### TL;DR:

```JS
import { Editor } from 'slate';
import MentionsPlugin from 'slate-mentions';

const mentions = MentionsPlugin({
  Mention: (props) => <span {...props.attributes}>{props.children}</span>,
  Suggestions: (props) => (
    <div>
      {props.suggestions.map((suggestion, index) => (
        <span
          style={{
            background: index === props.selected ? 'red' : 'grey',
          }}
        >
          {suggestion}
        </span>
      ))}
    </div>
  ),
});

const suggestions = ['max', 'brian', 'bryn'];

updateSuggestions = (text) => {
  this.setState({
    suggestions: suggestions.filter(suggestion => suggestion.indexOf(text) > -1),
  });
}

<Editor
  plugins={[mentions]}
  suggestions={suggestions}
  onMentionSearch={this.updateSuggestions}
/>
```

The plugin has two required options:

- `Mention`: The component to render a mention mark in the editor. This gets two props (`attributes` and `children`), and `props.attributes` must be attached to the DOM node. (just like any other Slate mark)
- `Suggestions`: The component to render the suggestions as a list. This is already in a portal that's positioned next to the mention. This component gets three props: `suggestions` (the list of suggestions), `selected` (the index of the currently selected mention via keyboard shortcuts) and `mention`. (the search text)


After passing these two options to the plugin and adding it to the plugins array you have to pass two special props to the Slate `Editor` component:

- `suggestions`: A list of suggestions to show in the `Suggestions`. Has to be an array.
- `onMentionSearch`: A function that filters/gets the suggestions based on the input from the user.

`onMentionSearch` can be asynchronous if you need to fetch data from a server. To add a loading state set `suggestions` to `null` temporarily:

```JS
updateSuggestions = (text) => {
  // Tell slate-mentions you're currently loading suggestions
  this.setState({
    suggestions: null
  });
  // Fetch the suggestions
  fetch(`api.com/v1/people?filter=${text}`)
    .then(possibleMentions => {
      // Set the state
      this.setState({
        suggestions: possibleMentions,
      })
    })
}
```

## License

Licensed under the MIT License, Copyright ©️ 2017 Maximilian Stoiber. See [LICENSE.md](LICENSE.md) for more information.