Selection Decoration

当编辑器失去焦点时，为所选内容添加装饰。

安装

pnpm add @yiitap/extension-selection-decoration

使用

Yiitap

在 Yiitap 中 SelectionDecoration 默认启用。

Tiptap

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

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

样式设置

SelectionDecoration 扩展起启用后，当编辑器失去焦点时，selection-decoration-blur 类将会应用到所选内容上，所以你可以利用这一点来进行样式设置：

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

更多

查看源码