# Focus

Adds focus classes along the selected block path without changing canonical content.

Adds focus classes along the selected block path without changing canonical content.

`@quirekit/extensions` · **MIT**

## Editor compatibility
Layer：**Shared document capability**
| Editor | Status | Assembly and boundaries |
| --- | --- | --- |
| Classic | Unverified | A complete integration and verification path for this entry has not been established for this product. A public Core export does not imply product presentation, controls or file support. |
| Block | Unverified | A complete integration and verification path for this entry has not been established for this product. A public Core export does not imply product presentation, controls or file support. |

“Supported” means the product assembly above exists; interaction, host services and file formats retain their own conditions. See [status and integration rules](/en/plugins/compatibility). Licensing is shown separately.

## Installation

```sh
pnpm add @quirekit/extensions@alpha
```

Install in Editor extensions. The host supplies a view, container and persistence; see [Quick start](/en/guide/quick-start).

```ts
import { Focus } from '@quirekit/extensions'

const focus = Focus.configure({ className: 'editor-focus', mode: 'deepest' })
```

Use compatible versions available from your distribution source. This site uses the Alpha workspace. License labels come from package metadata; see [support and licensing](/en/support).

## Integration by editor

These snippets use an existing host element named element. The host owns container sizing and persistence; call instance.destroy() on teardown. Avoid duplicating preset capabilities and supply required host ports before installation.

### Classic

A complete integration and verification path for this entry has not been established for this product. A public Core export does not imply product presentation, controls or file support.

### Block

A complete integration and verification path for this entry has not been established for this product. A public Core export does not imply product presentation, controls or file support.

## Configuration

These are extension-level defaults. Presets can override them; they are distinct from current document attributes. See [configuration](/en/plugins/configuration).

### className

Class name added to focused node decorations.

Type：`string`

Default：`"has-focus"`

### mode

How many ancestors of the active node should receive the focus class.

Type：`"all" | "deepest" | "shallowest"`

Default：`"all"`

## Commands and runtime

This entry declares no directly enumerable commands. Children supply bundle commands; product plugins use contributions or document services.

## Next steps

Return to [all plugins](/en/plugins), or read [configuration](/en/plugins/configuration) to distinguish options, attributes and commands.

See [extension development](/en/build/extension) for custom capabilities and [Build a product](/en/build) for complete hosting.