Focus extension
The Focus extension adds a CSS class to focused nodes. By default it adds .has-focus, 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.
Install
npm install @tiptap/extension-focus
Settings
className
The class that is applied to the focused element.
Default: 'has-focus'
Focus.configure({
className: 'focus',
})
mode
Apply the class to 'all', the 'shallowest' or the 'deepest' node.
Default: 'all'
Focus.configure({
mode: 'deepest',
})