Focus

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.

Installation

# with npm
npm install @tiptap/extension-focus

# with Yarn
yarn add @tiptap/extension-focus

Option	Type	Default	Description
className	`String`	`'has-focus'`	The class that is applied to the focused element.
mode	`String`	`'all'`	Apply the class to `'all'`, the `'shallowest'` or the `'deepest'` node.