open-index/open-npm huggingface dataset:
npm package: @slata/test-lib
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.11.
Author: darilldev
Latest version: 0.0.2

# TestLib

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.11.

## Code scaffolding

Run `ng generate component component-name --project test-lib` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project test-lib`.
> Note: Don't forget to add `--project test-lib` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build test-lib` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build test-lib`, go to the dist folder `cd dist/test-lib` and run `npm publish`.

## Running unit tests

Run `ng test test-lib` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @slatable/slate
Description: slatable slate
Latest version: 1.0.17

# `slate`

  > slate编辑器的封装
  
## Usage
  
```tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { BoldFunction, BoldToolbar } from '@slatable/bold';
import { UnderlineFunction, UnderlineToolbar } from '@slatable/underline';
import {
  CreateNewProvider,
  Editor,
  CreateNewToolbar,
} from '@slatable/slate';
const formater = `${BoldToolbar.namespace}-${UnderlineToolbar.namespace}`;
const container = new SlateContainer();
const ToolBar = CreateNewToolbar(container);
const [content, Provider, onChange] = CreateNewProvider(container, [
  type: 'P',
  children: [
    { text: 'some text ...' }
  ]
]);

// do some register for functions...
container.register(BoldFunction);
container.register(UnderlineFunction);

// do some register for toolbars...
container.toolbar.register(BoldToolbar);
container.toolbar.register(UnderlineToolbar);

// then render App
ReactDOM.redner(<APP />, document.getElementById('root'));

function App = () => {
  return (
    <Provider>
      <div className="editor-header"><ToolBar format={formater} /></div>
      <div className="editor-content">
        <Editor spellCheck autoFocus placeholder="请输入文章内容..." />
      </div>
    </Provider>
  );
}
```
npm package: @slate-editor/bold-plugin
Description: SlateJS bold mark plugin.
Author: Nossas
Latest version: 5.1.0

<div align="center">
  <a href="https://www.en.nossas.org" rel="noopener" target="_blank">
    <img
      width="200"
      src="https://s3.amazonaws.com/hub-central/uploads/logo-nossas-20170517185909.svg"
      alt="Nossas logo"
      title="Nossas"
    />
  </a>
</div>
<div align="center">
  <img
    src="https://www.psdmockups.com/wp-content/uploads/2016/07/slatejs-520x292.jpg"
    alt="Nossas Cidades logo"
    title="Nossas Cidades"
    height="50"
  />
</div>

<h1 align="center">@slate-editor/bold-plugin</h1>

<div align="center">

[SlateJS](https://github.com/ianstormtaylor/slate) bold plugin.

[![npm package](https://img.shields.io/npm/v/@slate-editor/bold-plugin.svg?maxAge=60)](https://www.npmjs.com/package/@slate-editor/bold-plugin)
[![npm downloads](https://img.shields.io/npm/dt/@slate-editor/bold-plugin.svg?maxAge=60)](https://www.npmjs.com/package/@slate-editor/bold-plugin)

</div>

## Installation
The **@slate-editor/bold-plugin** is available as an [npm package](https://www.npmjs.com/package/@slate-editor/bold-plugin).

```
yarn add @slate-editor/bold-plugin
```

## Usage
Here is a quick example to get you started:

```js
import React from 'react'
import { SlateEditor, SlateToolbar, SlateContent } from 'slate-editor'
import { BoldPlugin, BoldButtonBar } from '@slate-editor/bold-plugin'

const plugins = [
  BoldPlugin()
]

const SlateRichTextEditor = () => (
  <SlateEditor plugins={plugins}>
    <SlateToolbar>
      <BoldButtonBar />
    </SlateToolbar>

    <SlateContent />
  </SlateEditor>
)

export default SlateRichTextEditor
```

## Keyboard Shortcut

| OS                       | Shortcut |
|--------------------------|----------|
| ![Apple Logo][apple]     | `⌘`+`b`  |
| ![Windows Logo][windows] | `^`+`b`  |

## API

| Name                 | Description                                                               |
|----------------------|---------------------------------------------------------------------------|
| BoldMark             | Component that holds the html that will wrap the content with bold style. |
| BoldUtils            | Generic file that holds the util common functions.                        |
| BoldButton           | Button component that have behaviour to wrap content with bold style.     |
| BoldKeyboardShortcut | Keyboard shortcut file that manipulates `onKeyDown` event inside SlateJS. |

## TODO

- Make keyboard shortcut accepts customization

[apple]: https://cdn2.iconfinder.com/data/icons/designer-skills/128/apple-ios-system-platform-os-mac-linux-48.png
[windows]: https://cdn2.iconfinder.com/data/icons/designer-skills/128/windows-48.png
npm package: @slate-editor/embed-plugin
Description: SlateJS embed node plugin.
Author: Nossas
Latest version: 5.1.0

<div align="center">
  <a href="https://www.en.nossas.org" rel="noopener" target="_blank">
    <img
      width="200"
      src="https://s3.amazonaws.com/hub-central/uploads/logo-nossas-20170517185909.svg"
      alt="Nossas logo"
      title="Nossas"
    />
  </a>
</div>
<div align="center">
  <img
    src="https://www.psdmockups.com/wp-content/uploads/2016/07/slatejs-520x292.jpg"
    alt="Nossas Cidades logo"
    title="Nossas Cidades"
    height="50"
  />
</div>

<h1 align="center">@slate-editor/embed-plugin</h1>

<div align="center">

[SlateJS](https://github.com/ianstormtaylor/slate) embed plugin.

[![npm package](https://img.shields.io/npm/v/@slate-editor/embed-plugin.svg?maxAge=60)](https://www.npmjs.com/package/@slate-editor/embed-plugin)
[![npm downloads](https://img.shields.io/npm/dt/@slate-editor/embed-plugin.svg?maxAge=60)](https://www.npmjs.com/package/@slate-editor/embed-plugin)

</div>

## Installation
The **@slate-editor/embed-plugin** is available as an [npm package](https://www.npmjs.com/package/@slate-editor/embed-plugin).

```
yarn add @slate-editor/embed-plugin
```

## Usage
Here is a quick example to get you started:

```js
import React from 'react'
import { SlateEditor, SlateToolbar, SlateContent } from 'slate-editor'
import { EmbedPlugin, EmbedButton } from '@slate-editor/embed-plugin'

const plugins = [
  EmbedPlugin()
]

const SlateRichTextEditor = () => (
  <SlateEditor plugins={plugins}>
    <SlateToolbar>
      <EmbedButton />
    </SlateToolbar>

    <SlateContent />
  </SlateEditor>
)

export default SlateRichTextEditor
```

# Keyboard Shortcut

| OS                       | Shortcut |
|--------------------------|----------|
| ![Apple Logo][apple]     | `⌘`+`e`  |
| ![Windows Logo][windows] | `^`+`e`  |

# API

| Name                  | Description                                                                |
|-----------------------|----------------------------------------------------------------------------|
| EmbedNode             | Component that holds the html that will wrap the content with embed style. |
| EmbedKeyboardShortcut | Keyboard shortcut file that manipulates `onKeyDown` event inside SlateJS.  |
| EmbedUtils            | Generic file that holds the util common functions.                         |
| EmbedButton           | Button component that have behaviour to wrap content with embed style.     |

# TODO

- Make keyboard shortcut accepts customization

[apple]: https://cdn2.iconfinder.com/data/icons/designer-skills/128/apple-ios-system-platform-os-mac-linux-48.png
[windows]: https://cdn2.iconfinder.com/data/icons/designer-skills/128/windows-48.png
npm package: @slate-editor/image-plugin
Description: SlateJS image node plugin.
Author: Nossas
Latest version: 5.1.1

<div align="center">
  <a href="https://www.en.nossas.org" rel="noopener" target="_blank">
    <img
      width="200"
      src="https://s3.amazonaws.com/hub-central/uploads/logo-nossas-20170517185909.svg"
      alt="Nossas logo"
      title="Nossas"
    />
  </a>
</div>
<div align="center">
  <img
    src="https://www.psdmockups.com/wp-content/uploads/2016/07/slatejs-520x292.jpg"
    alt="Nossas Cidades logo"
    title="Nossas Cidades"
    height="50"
  />
</div>

<h1 align="center">@slate-editor/image-plugin</h1>

<div align="center">

[SlateJS](https://github.com/ianstormtaylor/slate) image plugin.

[![npm package](https://img.shields.io/npm/v/@slate-editor/image-plugin.svg?maxAge=60)](https://www.npmjs.com/package/@slate-editor/image-plugin)
[![npm downloads](https://img.shields.io/npm/dt/@slate-editor/image-plugin.svg?maxAge=60)](https://www.npmjs.com/package/@slate-editor/image-plugin)

</div>

## Installation
The **@slate-editor/image-plugin** is available as an [npm package](https://www.npmjs.com/package/@slate-editor/image-plugin).

```
yarn add @slate-editor/image-plugin
```

## Usage
Here is a quick example to get you started:

```js
import React from 'react'
import { SlateEditor, SlateToolbar, SlateContent } from 'slate-editor'
import { ImagePlugin, ImageButton } from '@slate-editor/image-plugin'

const plugins = [
  ImagePlugin()
]

const SlateRichTextEditor = () => (
  <SlateEditor plugins={plugins}>
    <SlateToolbar>
      <ImageButton
        signingUrl={
          process.env.REACT_APP_API_URL +
          process.env.REACT_APP_SIGNING_URL_ENDPOINT
        }
      />
    </SlateToolbar>

    <SlateContent />
  </SlateEditor>
)

export default SlateRichTextEditor
```

## Keyboard Shortcut

| OS                       | Shortcut            |
|--------------------------|---------------------|
| ![Apple Logo][apple]     | `⌘`+`shift`+`i`     |
| ![Windows Logo][windows] | `ctrl`+`shift`+`i`  |

## API

| Name                  | Description                                                                |
|-----------------------|----------------------------------------------------------------------------|
| ImageNode             | Component that holds the html that will wrap the content with image style. |
| ImageKeyboardShortcut | Keyboard shortcut file that manipulates `onKeyDown` event inside SlateJS.  |
| ImageUtils            | Generic file that holds the util common functions.                         |
| ImageButton           | Button component that have behaviour to wrap content with image style.     |

## TODO

- Make keyboard shortcut accepts customization

[apple]: https://cdn2.iconfinder.com/data/icons/designer-skills/128/apple-ios-system-platform-os-mac-linux-48.png
[windows]: https://cdn2.iconfinder.com/data/icons/designer-skills/128/windows-48.png
npm package: @slate-editor/italic-plugin
Description: SlateJS italic mark plugin.
Author: Nossas
Latest version: 5.1.0

<div align="center">
  <a href="https://www.en.nossas.org" rel="noopener" target="_blank">
    <img
      width="200"
      src="https://s3.amazonaws.com/hub-central/uploads/logo-nossas-20170517185909.svg"
      alt="Nossas logo"
      title="Nossas"
    />
  </a>
</div>
<div align="center">
  <img
    src="https://www.psdmockups.com/wp-content/uploads/2016/07/slatejs-520x292.jpg"
    alt="Nossas Cidades logo"
    title="Nossas Cidades"
    height="50"
  />
</div>

<h1 align="center">@slate-editor/italic-plugin</h1>

<div align="center">

[SlateJS](https://github.com/ianstormtaylor/slate) italic plugin.

[![npm package](https://img.shields.io/npm/v/@slate-editor/italic-plugin.svg?maxAge=60)](https://www.npmjs.com/package/@slate-editor/italic-plugin)
[![npm downloads](https://img.shields.io/npm/dt/@slate-editor/italic-plugin.svg?maxAge=60)](https://www.npmjs.com/package/@slate-editor/italic-plugin)

</div>

## Installation
The **@slate-editor/italic-plugin** is available as an [npm package](https://www.npmjs.com/package/@slate-editor/italic-plugin).

```
yarn add @slate-editor/italic-plugin
```

## Usage
Here is a quick example to get you started:

```js
import React from 'react'
import { SlateEditor, SlateToolbar, SlateContent } from 'slate-editor'
import { ItalicPlugin, ItalicButton } from '@slate-editor/italic-plugin'

const plugins = [
  ItalicPlugin()
]

const SlateRichTextEditor = () => (
  <SlateEditor plugins={plugins}>
    <SlateToolbar>
      <ItalicButton />
    </SlateToolbar>

    <SlateContent />
  </SlateEditor>
)

export default SlateRichTextEditor
```

## Keyboard Shortcut

| OS                       | Shortcut   |
|--------------------------|------------|
| ![Apple Logo][apple]     | `⌘`+`i`    |
| ![Windows Logo][windows] | `ctrl`+`i` |

## API

| Name                   | Description                                                                 |
|------------------------|-----------------------------------------------------------------------------|
| ItalicMark             | Component that holds the html that will wrap the content with italic style. |
| ItalicKeyboardShortcut | Keyboard shortcut file that manipulates `onKeyDown` event inside SlateJS.   |
| ItalicUtils            | Generic file that holds the util common functions.                          |
| ItalicButton           | Button component that have behaviour to wrap content with italic style.     |

## TODO

- Make keyboard shortcut accepts customization

[apple]: https://cdn2.iconfinder.com/data/icons/designer-skills/128/apple-ios-system-platform-os-mac-linux-48.png
[windows]: https://cdn2.iconfinder.com/data/icons/designer-skills/128/windows-48.png
npm package: @slate-editor/link-plugin
Description: SlateJS link node plugin.
Author: Nossas
Latest version: 5.1.0

<div align="center">
  <a href="https://www.en.nossas.org" rel="noopener" target="_blank">
    <img
      width="200"
      src="https://s3.amazonaws.com/hub-central/uploads/logo-nossas-20170517185909.svg"
      alt="Nossas logo"
      title="Nossas"
    />
  </a>
</div>
<div align="center">
  <img
    src="https://www.psdmockups.com/wp-content/uploads/2016/07/slatejs-520x292.jpg"
    alt="Nossas Cidades logo"
    title="Nossas Cidades"
    height="50"
  />
</div>

<h1 align="center">@slate-editor/link-plugin</h1>

<div align="center">

[SlateJS](https://github.com/ianstormtaylor/slate) link plugin.

[![npm package](https://img.shields.io/npm/v/@slate-editor/link-plugin.svg?maxAge=60)](https://www.npmjs.com/package/@slate-editor/link-plugin)
[![npm downloads](https://img.shields.io/npm/dt/@slate-editor/link-plugin.svg?maxAge=60)](https://www.npmjs.com/package/@slate-editor/link-plugin)

</div>

## Installation
The **@slate-editor/link-plugin** is available as an [npm package](https://www.npmjs.com/package/@slate-editor/link-plugin).

```
yarn add @slate-editor/link-plugin
```

## Usage
Here is a quick example to get you started:

```js
import React from 'react'
import { SlateEditor, SlateToolbar, SlateContent } from 'slate-editor'
import { LinkPlugin, LinkButton } from '@slate-editor/link-plugin'

const plugins = [
  LinkPlugin()
]

const SlateRichTextEditor = () => (
  <SlateEditor plugins={plugins}>
    <SlateToolbar>
      <LinkButton />
    </SlateToolbar>

    <SlateContent />
  </SlateEditor>
)

export default SlateRichTextEditor
```

## Keyboard Shortcut

| OS                       | Shortcut                    |
|--------------------------|-----------------------------|
| ![Apple Logo][apple]     | <kbd>⌘</kbd> + <kbd>k</kbd> |
| ![Windows Logo][windows] | <kbd>^</kbd> + <kbd>k</kbd> |

## API

| Name                 | Description                                                               |
|----------------------|---------------------------------------------------------------------------|
| LinkNode             | Component that holds the html that will wrap the content with link.       |
| LinkKeyboardShortcut | Keyboard shortcut file that manipulates `onKeyDown` event inside SlateJS. |
| LinkUtils            | Generic file that holds the util common functions.                        |
| LinkButton           | Button component that have behaviour to wrap content with link.           |

## TODO

- Make keyboard shortcut accepts customization;
- Add behaviour to catch onPaste command and identify if it is an url and ask if wants to link it;

[apple]: https://cdn2.iconfinder.com/data/icons/designer-skills/128/apple-ios-system-platform-os-mac-linux-48.png
[windows]: https://cdn2.iconfinder.com/data/icons/designer-skills/128/windows-48.png
npm package: @slate-editor/strikethrough-plugin
Description: SlateJS strikethrough mark plugin.
Author: Nossas
Latest version: 5.1.0

<div align="center">
  <a href="https://www.en.nossas.org" rel="noopener" target="_blank">
    <img
      width="200"
      src="https://s3.amazonaws.com/hub-central/uploads/logo-nossas-20170517185909.svg"
      alt="Nossas logo"
      title="Nossas"
    />
  </a>
</div>
<div align="center">
  <img
    src="https://www.psdmockups.com/wp-content/uploads/2016/07/slatejs-520x292.jpg"
    alt="Nossas Cidades logo"
    title="Nossas Cidades"
    height="50"
  />
</div>

<h1 align="center">@slate-editor/strikethrough-plugin</h1>

<div align="center">

[SlateJS](https://github.com/ianstormtaylor/slate) strikethrough plugin.

[![npm package](https://img.shields.io/npm/v/@slate-editor/strikethrough-plugin.svg?maxAge=60)](https://www.npmjs.com/package/@slate-editor/strikethrough-plugin)
[![npm downloads](https://img.shields.io/npm/dt/@slate-editor/strikethrough-plugin.svg?maxAge=60)](https://www.npmjs.com/package/@slate-editor/strikethrough-plugin)

</div>

## Installation
The **@slate-editor/strikethrough-plugin** is available as an [npm package](https://www.npmjs.com/package/@slate-editor/strikethrough-plugin).

```
yarn add @slate-editor/strikethrough-plugin
```

## Usage
Here is a quick example to get you started:

```js
import React from 'react'
import { SlateEditor, SlateToolbar, SlateContent } from 'slate-editor'
import { StrikethroughPlugin, StrikethroughButton } from '@slate-editor/strikethrough-plugin'

const plugins = [
  StrikethroughPlugin()
]

const SlateRichTextEditor = () => (
  <SlateEditor plugins={plugins}>
    <SlateToolbar>
      <StrikethroughButton />
    </SlateToolbar>

    <SlateContent />
  </SlateEditor>
)

export default SlateRichTextEditor
```

## Keyboard Shortcut

| OS                       | Shortcut                                        |
|--------------------------|-------------------------------------------------|
| ![Apple Logo][apple]     | <kbd>⌘</kbd> + <kbd>^</kbd> + <kbd>s</kbd>      |
| ![Windows Logo][windows] | <kbd>ctrl</kbd> + <kbd>alt</kbd> + <kbd>s</kbd> |

## API

| Name                          | Description                                                                        |
|-------------------------------|------------------------------------------------------------------------------------|
| StrikethroughMark             | Component that holds the html that will wrap the content with strikethrough style. |
| StrikethroughKeyboardShortcut | Keyboard shortcut file that manipulates `onKeyDown` event inside SlateJS.          |
| StrikethroughUtils            | Generic file that holds the util common functions.                                 |
| StrikethroughButton           | Button component that have behaviour to wrap content with strikethrough style.     |

## TODO

- Make keyboard shortcut accepts customization

[apple]: https://cdn2.iconfinder.com/data/icons/designer-skills/128/apple-ios-system-platform-os-mac-linux-48.png
[windows]: https://cdn2.iconfinder.com/data/icons/designer-skills/128/windows-48.png
npm package: @slate-editor/underline-plugin
Description: SlateJS underline mark plugin.
Author: Nossas
Latest version: 5.1.0

<div align="center">
  <a href="https://www.en.nossas.org" rel="noopener" target="_blank">
    <img
      width="200"
      src="https://s3.amazonaws.com/hub-central/uploads/logo-nossas-20170517185909.svg"
      alt="Nossas logo"
      title="Nossas"
    />
  </a>
</div>
<div align="center">
  <img
    src="https://www.psdmockups.com/wp-content/uploads/2016/07/slatejs-520x292.jpg"
    alt="Nossas Cidades logo"
    title="Nossas Cidades"
    height="50"
  />
</div>

<h1 align="center">@slate-editor/underline-plugin</h1>

<div align="center">

[SlateJS](https://github.com/ianstormtaylor/slate) underline plugin.

[![npm package](https://img.shields.io/npm/v/@slate-editor/underline-plugin.svg?maxAge=60)](https://www.npmjs.com/package/@slate-editor/underline-plugin)
[![npm downloads](https://img.shields.io/npm/dt/@slate-editor/underline-plugin.svg?maxAge=60)](https://www.npmjs.com/package/@slate-editor/underline-plugin)

</div>

## Installation
The **@slate-editor/underline-plugin** is available as an [npm package](https://www.npmjs.com/package/@slate-editor/underline-plugin).

```
yarn add @slate-editor/underline-plugin
```

## Usage
Here is a quick example to get you started:

```js
import React from 'react'
import { SlateEditor, SlateToolbar, SlateContent } from 'slate-editor'
import { UnderlinePlugin, UnderlineButton } from '@slate-editor/underline-plugin'

const plugins = [
  UnderlinePlugin()
]

const SlateRichTextEditor = () => (
  <SlateEditor plugins={plugins}>
    <SlateToolbar>
      <UnderlineButton />
    </SlateToolbar>

    <SlateContent />
  </SlateEditor>
)

export default SlateRichTextEditor
```

## Keyboard Shortcut

| OS                       | Shortcut                       |
|--------------------------|--------------------------------|
| ![Apple Logo][apple]     | <kbd>⌘</kbd> + <kbd>u</kbd>    |
| ![Windows Logo][windows] | <kbd>ctrl</kbd> + <kbd>u</kbd> |

## API

| Name                      | Description                                                                    |
|---------------------------|--------------------------------------------------------------------------------|
| UnderlineMark             | Component that holds the html that will wrap the content with underline style. |
| UnderlineKeyboardShortcut | Keyboard shortcut file that manipulates `onKeyDown` event inside SlateJS.      |
| UnderlineUtils            | Generic file that holds the util common functions.                             |
| UnderlineButton           | Button component that have behaviour to wrap content with underline style.     |

## TODO

- Make keyboard shortcut accepts customization

[apple]: https://cdn2.iconfinder.com/data/icons/designer-skills/128/apple-ios-system-platform-os-mac-linux-48.png
[windows]: https://cdn2.iconfinder.com/data/icons/designer-skills/128/windows-48.png
npm package: @slate-extensions/slate-autocomplete
Description: [Demo](https://slate-autocomplete.netlify.app/)
Author: Luke Murray
Latest version: 0.1.3

# 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' },
];
```
npm package: @slate-extensions/slate-snippets
Description: This slate extension uses [vscode's snippet parser](https://github.com/microsoft/vscode/blob/main/src/vs/editor/contrib/snippet/snippetParser.ts) to enable user defined snippets in slate.
Author: Luke Murray
Latest version: 0.1.5

# Slate Snippets Extension

This slate extension uses [vscode's snippet parser](https://github.com/microsoft/vscode/blob/main/src/vs/editor/contrib/snippet/snippetParser.ts) to enable user defined snippets in slate.

![gif of the snippets in action](images/snippets-demo.gif)

Most features are supported out of the box including tab stops, variables, and variable resolution. Some features are not supported yet such as

- nested placeholders `${1:another ${2:placeholder}}`
- synced placeholders `${1:synced} ${1:synced}`
- choices `${1:one,two,three}`

Checkout the [demo](slate-snippets.netlify.app/) to see how the snippets work.
npm package: @slate-fork/slate-react
Description: A set of React components for building completely customizable rich-text editors.
Latest version: 0.22.25

This package contains the React-specific logic for Slate. It's separated further into a series of directories:

* [**Components**](./src/components) — containing the React components for rendering Slate editors.
* [**Constants**](./src/constants) — containing a few private constants modules.
* [**Plugins**](./src/plugins) — containing the React-specific plugins for Slate editors.
* [**Utils**](./src/utils) — containing a few private convenience modules.

Feel free to poke around in each of them to learn more!
npm package: @slate-legacy/slate-keymap
Description: A Slate plugin to simplify keyboard shortcuts
Latest version: 0.1.10

# Slate Keymap

![](https://img.shields.io/circleci/project/github/ConvertKit/slate-plugins/master.svg?style=flat)

[View on Github](https://github.com/ConvertKit/slate-plugins)

A plugin for simplifying keyboard shortcuts with SlateJS. `slate-keymap` uses
`is-hotkey` under the hood to check if an event matches the configured keys.

## Install

```sh
yarn add @convertkit/slate-keymap
```

## Usage

`Keymap(object: Object, options: Object)`

### Example

```javascript
import Keymap from "@convertkit/slate-keymap";

const plugins = [
  Keymap({
    "mod+a": (event, editor) => editor.selectAll(),
    // You can also pass a string and it will call the command with that name
    "shift+enter": "softBreak"
  })
];
```

### Options

- `if`: A function that is passed the `editor` instance. If it returns true,
  then the Keymap is active. Defaults to `() => true`
npm package: @slate-legacy/slate-lists
Description: A plugin for handling lists in a Slate editor
Latest version: 0.2.11

# Slate Lists

![](https://img.shields.io/circleci/project/github/ConvertKit/slate-plugins/master.svg?style=flat)

Adds ordered and unordered list editing behaviors to a SlateJS editor.

## Install

```bash
yarn add @convertkit/slate-lists
```

## [Documentation](https://convertkit-slate-plugins.netlify.com/plugins/slate-lists)
npm package: @slate-legacy/slate-react
Description: A set of React components for building completely customizable rich-text editors.
Latest version: 0.22.11

This package contains the React-specific logic for Slate. It's separated further into a series of directories:

* [**Components**](./src/components) — containing the React components for rendering Slate editors.
* [**Constants**](./src/constants) — containing a few private constants modules.
* [**Plugins**](./src/plugins) — containing the React-specific plugins for Slate editors.
* [**Utils**](./src/utils) — containing a few private convenience modules.

Feel free to poke around in each of them to learn more!