Selection extension

The Selection extension adds a CSS class to the current selection when the editor is blurred. By default it adds .selection, 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 { Selection } from '@tiptap/extensions'

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

Settings

className

The class that is applied to the focused element.

Default: 'has-focus'

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

Source code

packages/extensions/selection/

Minimal Install

import { Editor } from '@tiptap/core'
import { Selection } from '@tiptap/extensions/selection'

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