Skip to content

Selection Decoration NPM version

Add decoration to selection when editor is blur.

Installation

shell
pnpm add @yiitap/extension-selection-decoration

Usage

Yiitap

SelectionDecoration is enabled by default in Yiitap.

Tiptap

vue
<script setup lang="ts">
import { useEditor, EditorContent } from '@tiptap/vue-3'
import SelectionDecoration from '@yiitap/extension-selection-decoration'

const editor = useEditor({
    extensions: [
      SelectionDecoration
    ],
})
</script>

Style

After SelectionDecoration extension enabled, A '.selection-decoration-blur' class will apply to the selected content when editor is blur, so you can use this to stylize:

css
.ProseMirror .selection-decoration-blur {
    background: #ACCEF7;
}

More

View Source

MIT Licensed.