Selection Decoration
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;
}