2020-11-02 22:54:15 +08:00
|
|
|
|
# Focus
|
2020-11-06 04:57:25 +08:00
|
|
|
|
The Focus extension adds a CSS class to focused nodes. By default it adds `.has-class`, but you can change that.
|
|
|
|
|
|
|
|
|
|
|
|
Note that it’s only a class, the styling is totally up to you. The usage example below has some CSS for that class.
|
2020-11-02 22:54:15 +08:00
|
|
|
|
|
|
|
|
|
|
## Installation
|
|
|
|
|
|
```bash
|
|
|
|
|
|
# with npm
|
|
|
|
|
|
npm install @tiptap/extension-focus
|
|
|
|
|
|
|
|
|
|
|
|
# with Yarn
|
|
|
|
|
|
yarn add @tiptap/extension-focus
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## Settings
|
2020-11-03 23:43:35 +08:00
|
|
|
|
| Option | Type | Default | Description |
|
|
|
|
|
|
| --------- | ------- | --------- | ------------------------------------------------------ |
|
|
|
|
|
|
| className | string | has-focus | The class that is applied to the focused element. |
|
|
|
|
|
|
| nested | boolean | true | When enabled nested elements get the focus class, too. |
|
2020-11-02 22:54:15 +08:00
|
|
|
|
|
|
|
|
|
|
## Source code
|
|
|
|
|
|
[packages/extension-focus/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-focus/)
|
|
|
|
|
|
|
|
|
|
|
|
## Usage
|
2020-11-03 23:43:35 +08:00
|
|
|
|
<demo name="Extensions/Focus" highlight="31-34,12" />
|
