https://github.com/FedeLochbaum/slate-autocomplete

Slate autocomplete custom plugin
https://github.com/FedeLochbaum/slate-autocomplete

autocomplete autosuggest slate slate-editor suggestions

Last synced: about 2 months ago
JSON representation

Slate autocomplete custom plugin

• Host: GitHub
• URL: https://github.com/FedeLochbaum/slate-autocomplete
• Owner: FedeLochbaum
• Fork: true (oozou/slate-suggestions)
• Created: 2019-05-30T19:23:59.000Z (over 5 years ago)
• Default Branch: dev
• Last Pushed: 2023-01-26T07:43:29.000Z (over 1 year ago)
• Last Synced: 2024-07-22T21:30:01.141Z (about 2 months ago)
• Topics: autocomplete, autosuggest, slate, slate-editor, suggestions
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/slate-autocomplete
• Size: 2.18 MB
• Stars: 11
• Watchers: 1
• Forks: 4
• Open Issues: 27
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

        

slate-autocomplete


A [**Slate**](https://github.com/ianstormtaylor/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:

```js

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:

```js

import autoCompletePlugin from 'slate-autocomplete'

export default autoCompletePlugin({

  renderPortal: (Portal, props) => (

    

      {names => ()}

    

  ),

  shouldHandleNode: (editor, currentNode) => true,

  totalText: false,

  onEnter: (suggestion, editor) => {

    replaceCurrentText(editor, suggestion)

  }

})

```

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

```js

import customPlugin from 'your_plugin_path'

import { Editor } from 'slate-react'

const Example = ({ value, onChange, renderNode }) => (

  

    

    {plugins.filter(({ component }) => !!component).map(({ component: Comp }, index) => )}

  

)

```

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.