From eadf073ae4fb3d154ee453b11de5dc769a76e954 Mon Sep 17 00:00:00 2001 From: Felix Feng Date: Fri, 8 Nov 2024 09:52:16 +0800 Subject: [PATCH] docs --- apps/www/content/docs/block-selection.mdx | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) 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 `` 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 + +``` + +### 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 ``. + +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