tiptap/docs/api/extensions/focus.md

description	icon
Keep track of where the cursor is, and let the user know you know it.	focus-line

Focus

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.

Installation

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',
})

Source code

packages/extension-focus/

Usage

https://embed.tiptap.dev/preview/Extensions/Focus