# @slate-extensions/slate-autocomplete

> [Demo](https://slate-autocomplete.netlify.app/)

Latest version **0.1.3** (published 2021-05-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install @slate-extensions/slate-autocomplete
pnpm add @slate-extensions/slate-autocomplete
yarn add @slate-extensions/slate-autocomplete
bun add @slate-extensions/slate-autocomplete
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2021-05-27 |
| First published | 2021-05-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 8 |
| Unpacked size | 153.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Luke Murray |
| Maintainers | lukesmurray |

## Links

- npm: https://www.npmjs.com/package/@slate-extensions/slate-autocomplete
- npm.io page: https://npm.io/package/@slate-extensions/slate-autocomplete

## Dependencies (8)

- [slate](https://npm.io/package/slate.md) ^0.63.0
- [downshift](https://npm.io/package/downshift.md) ^6.1.3
- [is-hotkey](https://npm.io/package/is-hotkey.md) ^0.2.0
- [slate-react](https://npm.io/package/slate-react.md) ^0.63.0
- [slate-history](https://npm.io/package/slate-history.md) ^0.62.0
- [react-merge-refs](https://npm.io/package/react-merge-refs.md) ^1.1.0
- [styled-components](https://npm.io/package/styled-components.md) ^5.3.0
- [use-slate-with-extensions](https://npm.io/package/use-slate-with-extensions.md) ^0.5.0

## Recent versions

- 0.1.3 (latest) — 2021-05-27

## README

# Slate Autocomplete

[Demo](https://slate-autocomplete.netlify.app/)

Implementation of autocomplete in SlateJS built on top of [use slate with extensions](https://github.com/lukesmurray/use-slate-with-extensions). The implementation is inspired by code from [slate-plugins](https://github.com/udecode/slate-plugins).

```tsx
import {
  ComboboxContainer,
  onSearchCallback,
  useSearchAfterWordBoundaries,
  useSlateAutocompleteExtension,
} from '../.';
import { Editable, Slate } from 'slate-react';
import { Transforms } from 'slate';
import { useSlateWithExtensions } from 'use-slate-with-extensions';

const ExampleEditor = () => {
  // use this handler if you want slash command style autocomplete
  // const autocompleteOnChange = useSearchAfterTrigger({
  //   trigger: '/',
  //   maxSuggestions: 10,
  //   autocompleteOnSearch,
  // });

  // use this handler if you want autocomplete after spaces
  const autocompleteOnChange = useSearchAfterWordBoundaries({
    boundaryRegex: '^|\\s',
    farthestToCloset: true,
    maxBoundaries: 2,
    maxSuggestions: 10,
    onSearch: autocompleteOnSearch,
  });

  // handler for when an item is selected
  const autocompleteOnSelectItem = (editor, options) => {
    Transforms.insertText(editor, options.item.text, {
      at: options.targetRange,
    });
  };

  // create the extension, separate combobox props from the plugin
  const {
    getComboBoxContainerProps,
    ...plugin
  } = useSlateAutocompleteExtension({
    autocompleteOnChange: autocompleteOnChange,
    onSelectItem: autocompleteOnSelectItem,
  }

  const { getEditableProps, getSlateProps } = useSlateWithExtensions({
    extensions: [plugin],
  });

  return (
    <Slate {...getSlateProps()}>
      <Editable {...getEditableProps()} />
      {/* render the combobox */}
      <ComboboxContainer {...getComboBoxContainerProps()} />
    </Slate>
  );
};

const fakeData = [
  { text: 'Turner Hader' },
  { text: 'Hand Group' },
  { text: 'Haag Inc' },
];
```

---
_Source: https://npm.io/package/@slate-extensions/slate-autocomplete · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._