Highlighted selection - not to lose focus when focusing on other element on the page

[demiro]

I know it sounds a bit confusing...

but inherently the selection get lost when you focus on another element

imagine this scenario:
user selects some text
clicks on a chatbot window and ask the bot something related to the selection

obviously as soon as you click into checkbox window, the editor's selection gets lost.... but, is it possible to wrap the whole selection in a special ..., and when I select something else, it gets unwrapped?

I saw some other editors do it, not sure how would I go about it in tiptap? Is there an extension or command that would do that?

[abecirovic3]

I'm interested in this as well. I have a similar use case, how I want to solve it for now is that I apply a mark extension (like highlight) to the selection and I make sure to remove it when I'm done with these other steps. But I'm not very happy with this approach because it has a lot of pitfalls, like preserving these marks to the db, not removing them correctly, etc.

[kobrynovych]

@demiro @abecirovic3 Hi, Is there a solution to this problem?

[abecirovic3]

I would recommend that you do some research on prosemirror decorations. I implemented a search highlight for my editor using decorations.

[kobrynovych]

found this code and updated it a bit and it seems to work fine

import { Extension } from '@tiptap/core'
import { Plugin, PluginKey } from '@tiptap/pm/state'
import { Decoration, DecorationSet } from '@tiptap/pm/view'

const DECO_NAME = 'onBlurHighlight'
const ACTION_TYPES = {
    BLUR: 'blur',
    FOCUS: 'focus',
}
export const OnBlurHighlight = Extension.create({
    name: DECO_NAME,

    addProseMirrorPlugins() {
        return [
            new Plugin({
                key: new PluginKey(DECO_NAME),

                state: {
                    init(_config) {
                        return DecorationSet.empty
                    },

                    apply: (transaction, oldState) => {
                        const { selection, doc } = transaction
                        const decoTransform = transaction.getMeta(DECO_NAME)
                        const hasSelection = selection && selection.from !== selection.to

                        if (!hasSelection || decoTransform?.action === ACTION_TYPES.FOCUS) {
                            return DecorationSet.empty
                        }

                        if (hasSelection && decoTransform?.action === ACTION_TYPES.BLUR) {
                            const decoration = Decoration.inline(selection.from, selection.to, {
                                class: 'blur-highlight',
                            })

                            return DecorationSet.create(doc, [decoration])
                        }

                        return oldState
                    },
                },
            
    props: {
                    decorations(state) {
                        return this.getState(state)
                    },
                    handleDOMEvents: {
                        blur: view => {
                            const { tr } = view.state

                            const transaction = tr.setMeta(DECO_NAME, {
                                from: tr.selection.from,
                                to: tr.selection.to,
                                action: ACTION_TYPES.BLUR,
                            })

                            view.dispatch(transaction)
                        },

                        focus: view => {
                            const { tr } = view.state

                            const transaction = tr.setMeta(DECO_NAME, {
                                from: tr.selection.from,
                                to: tr.selection.to,
                                action: ACTION_TYPES.FOCUS,
                            })

                            view.dispatch(transaction)
                        },
                    },
                },
            }),
        ]
    },
})

[abecirovic3]

Great, thanks for sharing

[bilalafzal01]

Thanks for sharing 💯