Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update block-selection.mdx #3787

Merged
merged 1 commit into from
Nov 18, 2024
Merged

Update block-selection.mdx #3787

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions apps/www/content/docs/block-selection.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ To control the scrollable container, configure the `boundaries` and `container`

For this to work effectively:

1. Add an `id` or `className` to your scroll container. If you not sure about the container, you can add it to the `<Editor />` component. We recommend using `id={editor.uid}`.
1. Add an `id` or `className` to your scroll container. If you're not sure about the container, you can add it to the `<Editor />` component. We recommend using `id={editor.uid}`.
2. Use the appropriate selector in your configuration.
3. Don't forget to set `position: relative` to the container.

Expand All @@ -90,9 +90,9 @@ BlockSelectionPlugin.configure({

### Set scroll speed

useing `options.areaOptions.behaviour.scrolling.speedDivider` to set the scroll speed.
Use `options.areaOptions.behaviour.scrolling.speedDivider` to set the scroll speed.

The value of `0.8` is our recommended speed since it's near the browser-native speed.
The value `0.8` is our recommended speed since it's near the browser-native speed.


```ts
Expand Down Expand Up @@ -160,7 +160,7 @@ const handleClickOutside = (event: MouseEvent) => {

### Selection area

Style the selection area using `.slate-selection-area` class to your editor container component. For example:
Style the selection area by adding the `.slate-selection-area` class to your editor container component. For example:

```js
'[&_.slate-selection-area]:border [&_.slate-selection-area]:border-primary [&_.slate-selection-area]:bg-primary/10'
Expand Down Expand Up @@ -375,4 +375,4 @@ Returns fragment prop for the currently selected blocks.

### useSelectionArea

A hook that initializes and manages the selection area functionality.
A hook that initializes and manages the selection area functionality.