npm:slate-autocomplete

README

`slate-autocomplete`

A Slate plugin to suggestion replacements or actions based on input. Useful for implementing autocomplete suggestions by node type.

Install

With npm:

npm install --save slate-autocomplete

With yarn:

yarn add slate-autocomplete

You will need to have installed slate as a dependency already.

Usage

Define your custom plugin:

With static suggestions:

import autoCompletePlugin from 'slate-autocomplete'

const suggestions = [
  "Afganistán",
  "Albania",
  "Argentina",
  ...
]

export default autoCompletePlugin({
  suggestions,
  resultSize: 5,
  totalText: true,
  shouldHandleNode: (editor, currentNode) => true,
  onEnter: (suggestion, editor) => {
    replaceCurrentText(editor, suggestion)
  }
})

With dynamic suggestions:

import autoCompletePlugin from 'slate-autocomplete'

export default autoCompletePlugin({
  renderPortal: (Portal, props) => (
    <YourDynamicComp>
      {names => (<Portal {...props} suggestions={names} />)}
    </YourDynamicComp>
  ),
  shouldHandleNode: (editor, currentNode) => true,
  totalText: false,
  onEnter: (suggestion, editor) => {
    replaceCurrentText(editor, suggestion)
  }
})

In this case, you need define `renderPortal` instead of `suggestions`.

import customPlugin from 'your_plugin_path'
import { Editor } from 'slate-react'

const Example = ({ value, onChange, renderNode }) => (
  <React.Fragment>
    <Editor
      value={value}
      plugins={[customPlugin]}
      onChange={onChange}
      renderNode={renderNode}
    />
    {plugins.filter(({ component }) => !!component).map(({ component: Comp }, index) => <Comp key={index} />)}
  </React.Fragment>
)

Option	Type	Optional	Description
`suggestions`	`Array`	Yes	An array of suggestions.
`totalText`	`Boolean`	Yes	A boolean used to kwow if the suggestions should be applied to complete node text or only to the current word.
`resultSize`	`Number`	Yes	An optional number use to set size of suggestion result.
`renderPortal`	`Function`	Yes	A function use to wrap the portal component with dynamics suggestions.
`onEnter`	`Function`	No	A function use to handle return/enter keypress to append suggestion into editor.
`shouldHandleNode`	`Function`	No	A function use to know if the current slate node should be handled.

Development

Clone the repository and then run:

yarn
yarn storybook

You should see something like:

Collaboration

If you have some idea/suggestion or you found an error, please, let me know sending me an email: federico.lochbaum@gmail.com or creating a new issue.

Usage no npm install needed!