> ## Documentation Index
> Fetch the complete documentation index at: https://vuemail.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# EditorFocusScope

> Track editor focus across portaled UI with EditorFocusScope.

Everything is accessed through a single import:

```ts theme={null}
import {
  EditorFocusScope,
} from '@vuemaildev/editor/ui';
```

The `FocusScopes` extension, included by default in `StarterKit`, keeps the
editor's focus and blur behavior in sync across registered surfaces. Wrap each
custom portaled surface that should still count as being inside the editor UI
with `EditorFocusScope`.

> [!TIP]
>
> `Inspector.Root`, built-in bubble menus, and slash commands already register
> themselves. Inside custom portaled UI, you usually only add
> `EditorFocusScope` around the portaled content.

## EditorFocusScopeProvider

`EditorFocusScopeProvider` is deprecated. Focus tracking moved to the
`FocusScopes` extension, which is included by default in `StarterKit`, but the
provider still installs the same tracking plugin for editors that do not use
`StarterKit`.

### Example

```vue theme={null}
<script setup lang="ts">
import { EditorProvider } from '@vuemaildev/editor';
import { StarterKit } from '@vuemaildev/editor/extensions';
import { EditorFocusScope } from '@vuemaildev/editor/ui';
import {
  PopoverContent,
  PopoverPortal,
  PopoverRoot,
  PopoverTrigger,
} from 'reka-ui';

const extensions = [StarterKit.configure()];
</script>

<template>
  <EditorProvider :extensions="extensions" :content="content">
    <PopoverRoot>
      <PopoverTrigger>Theme presets</PopoverTrigger>

      <PopoverPortal>
        <EditorFocusScope>
          <PopoverContent :side-offset="8">
            <button type="button">Apply preset</button>
          </PopoverContent>
        </EditorFocusScope>
      </PopoverPortal>
    </PopoverRoot>
  </EditorProvider>
</template>
```

Use `EditorFocusScope` for each portaled surface that should still count as
being inside the editor UI.

### Props

**default slot** `slot`

Rendered unchanged.

**clear-selection-on-blur** `boolean` (default: true)

Deprecated. Used only by the provider's fallback plugin. Prefer configuring
`FocusScopes` in `StarterKit` instead.

## EditorFocusScope

Use `EditorFocusScope` around portaled UI like reka-ui's `SelectContent`,
`PopoverContent`, or dialog content so moving focus into that portal is still
treated as staying inside the editor UI.

`EditorFocusScope` registers with the editor's `FocusScopes` extension. If the
extension is not present, it renders its children unchanged.

### Example

```vue theme={null}
<script setup lang="ts">
import { EditorFocusScope, Inspector } from '@vuemaildev/editor/ui';
import {
  SelectContent,
  SelectItem,
  SelectItemText,
  SelectPortal,
  SelectRoot,
  SelectTrigger,
  SelectValue,
  SelectViewport,
} from 'reka-ui';
</script>

<template>
  <Inspector.Node v-slot="{ getAttr, setAttr }">
    <SelectRoot
      :model-value="String(getAttr('alignment') ?? 'left')"
      @update:model-value="(value) => setAttr('alignment', value)"
    >
      <SelectTrigger>
        <SelectValue />
      </SelectTrigger>

      <SelectPortal>
        <EditorFocusScope>
          <SelectContent>
            <SelectViewport>
              <SelectItem value="left">
                <SelectItemText>Left</SelectItemText>
              </SelectItem>
              <SelectItem value="center">
                <SelectItemText>Center</SelectItemText>
              </SelectItem>
              <SelectItem value="right">
                <SelectItemText>Right</SelectItemText>
              </SelectItem>
            </SelectViewport>
          </SelectContent>
        </EditorFocusScope>
      </SelectPortal>
    </SelectRoot>
  </Inspector.Node>
</template>
```

If you are building a focus-aware editor shell without `StarterKit`, add the
`FocusScopes` extension and then use `EditorFocusScope` for each portaled
surface.

### Props

**default slot** `slot`

The element or subtree to register as an additional editor focus scope. Wrap
the portaled container that receives focus.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.