Skip to content

Commit

Permalink
docs
Browse files Browse the repository at this point in the history
  • Loading branch information
zbeyens committed Nov 26, 2024
1 parent 241999c commit e7127e8
Showing 1 changed file with 139 additions and 9 deletions.
148 changes: 139 additions & 9 deletions apps/www/content/docs/multi-select.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -77,20 +77,150 @@ export default function MySelectEditor() {

## Plugins

### TagPlugin

Inline void element plugin.

### MultiSelectPlugin

Handling multi-select elements in the editor. Built on top of TagPlugin.
Extension of the TagPlugin that constrains the editor to tag elements.

<APIOptions>
<APIItem name="type" type="string" optional>
The type identifier for multi-select elements.
## API

### editor.tf.insert.tag

- **Default:** `'multi-select'`
Inserts a new multi-select element at the current selection.

<APIParameters>
<APIItem name="props" type="TagLike">
Properties for the multi-select element:
<APISubList>
<APISubListItem parent="props" name="value" type="string">
The unique value of the multi-select element.
</APISubListItem>
</APISubList>
</APIItem>
</APIOptions>
</APIParameters>

### TagPlugin
## Hooks

Inline void element plugin.
### useSelectedItems

## API
Hook to get the currently selected tag items in the editor.

<APIReturns>
<APIItem type="TagLike[]">
Array of selected tag items, each containing a value and any additional properties.
</APIItem>
</APIReturns>

### getSelectedItems

Gets all tag items in the editor.

<APIParameters>
<APIItem name="editor" type="SlateEditor">
The Slate editor instance.
</APIItem>
</APIParameters>

<APIReturns>
<APIItem type="TagLike[]">
Array of tag items in the editor.
</APIItem>
</APIReturns>

### isEqualTags

Utility function to compare two sets of tags for equality, ignoring order.

<APIParameters>
<APIItem name="editor" type="SlateEditor">
The Slate editor instance.
</APIItem>
<APIItem name="newTags" type="TagLike[]" optional>
New set of tags to compare against the current editor tags.
</APIItem>
</APIParameters>

<APIReturns>
<APIItem type="boolean">
`true` if both sets contain the same values, `false` otherwise.
</APIItem>
</APIReturns>

### useSelectableItems

Hook to get the available items that can be selected, filtered by search and excluding already selected items.

<APIParameters>
<APIItem name="options" type="object">
<APISubList>
<APISubListItem parent="options" name="allowNew" type="boolean" optional>
Whether to allow creating new items.

- **Default:** `true`
</APISubListItem>
<APISubListItem parent="options" name="filter" type="(value: string, search: string) => boolean" optional>
Custom filter function for items.
</APISubListItem>
<APISubListItem parent="options" name="items" type="T[]" optional>
Array of available items.
</APISubListItem>
<APISubListItem parent="options" name="newItemFilter" type="(search: string) => boolean" optional>
Filter function for new items.
</APISubListItem>
<APISubListItem parent="options" name="newItemPosition" type="'end' | 'start'" optional>
Position of new items in the list.

- **Default:** `'end'`
</APISubListItem>
</APISubList>
</APIItem>
</APIParameters>

<APIReturns>
<APIItem type="T[]">
Filtered array of selectable items.
</APIItem>
</APIReturns>

### useSelectEditorCombobox

Hook to handle combobox behavior in the editor, including text cleanup and item selection.

<APIParameters>
<APIItem name="options" type="object">
<APISubList>
<APISubListItem parent="options" name="open" type="boolean">
Whether the combobox is open.
</APISubListItem>
<APISubListItem parent="options" name="selectFirstItem" type="() => void">
Function to select the first item in the combobox.
</APISubListItem>
<APISubListItem parent="options" name="onValueChange" type="(items: TagLike[]) => void" optional>
Callback when selected items change.
</APISubListItem>
</APISubList>
</APIItem>
</APIParameters>

## Types

### TTagElement

```ts
type TTagElement = TElement & {
value: string;
[key: string]: unknown;
};
```

### TagLike

```ts
type TagLike = {
value: string;
[key: string]: unknown;
};
```

0 comments on commit e7127e8

Please sign in to comment.