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/extensions

And import it in your editor:

import { Editor } from '@tiptap/core'
import { Focus } from '@tiptap/extensions'

new Editor({
  extensions: [Focus],
})

The class that is applied to the focused element.

Default: 'has-focus'

Focus.configure({
  className: 'focus',
})

Apply the class to 'all', the 'shallowest' or the 'deepest' node.

Default: 'all'

Focus.configure({
  mode: 'deepest',
})