diff --git a/apps/www/content/docs/block-selection.mdx b/apps/www/content/docs/block-selection.mdx index b7f3ea831c..553020507d 100644 --- a/apps/www/content/docs/block-selection.mdx +++ b/apps/www/content/docs/block-selection.mdx @@ -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 `` 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 `` 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. @@ -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 @@ -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' @@ -375,4 +375,4 @@ Returns fragment prop for the currently selected blocks. ### useSelectionArea -A hook that initializes and manages the selection area functionality. \ No newline at end of file +A hook that initializes and manages the selection area functionality.