diff --git a/apps/www/content/docs/block-selection.mdx b/apps/www/content/docs/block-selection.mdx
index da7694eaa3..643ebe5a9a 100644
--- a/apps/www/content/docs/block-selection.mdx
+++ b/apps/www/content/docs/block-selection.mdx
@@ -167,6 +167,29 @@ export function BlockSelection() {
 
 This component should be rendered inside each block element for consistent selection feedback. Plate UI is doing it in `plate-element.tsx`.
 
+## Selectable and resetable
+
+### full page selectable
+
+Like the [potion](https://potion.platejs.org/) template, you can enable block selection outside of the `<Editor />` component.
+
+Simply add the `data-plate-selectable` attribute to any component outside the editor that you want to make selectable. You can even make the entire page selectable if desired.
+
+For example:
+
+```tsx
+<Cover data-plate-selectable />
+```
+
+### full page resetable
+
+To reset the selection, you need call the `api.blockSelection.unselect();` method.
+
+If you want to make the full page resetable by click, this means you need to be able to access the editor outside of `<Editor />`.
+
+Or you can implement a click outside handler to reset the selection.
+
+
 ## Prevent unselect
 
 To prevent unselecting blocks when clicking on certain elements, add the `data-plate-prevent-unselect` attribute to those components