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:
const suggestions = "Afganistán" "Albania" "Argentina" ... suggestions resultSize: 5 totalText: true true { }
With dynamic suggestions:
<YourDynamicComp> <Portal ...props suggestions=names /> </YourDynamicComp> true totalText: false { }
renderPortal
instead of suggestions
.
In this case, you need define const Example = <ReactFragment> <Editor value=value plugins=customPlugin onChange=onChange renderNode=renderNode /> plugins </ReactFragment>
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.