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: [email protected] or creating a new issue.