Tiptap: Setting the selection programmatically

[panayotisk]

Is there a way to set the selection programmatically? Looking at the Editor.js interface I did not spot something related to setting the selection. I need to be able to set the caret position on a double click event (not the default single click). Would I have to resort to the underlying ProseMirror?

Thank you!

[philippkuehn]

Hey,

working with selection could definitely a bit easier with prosemirror 😅
A few days ago I've changed how links works. So if you click on a link, the full link is selected so the bubble menu gets triggered and you could edit or delete your link. this looks something like that:

I've added a prosemirror plugin for doing this:

import { Mark, Plugin, TextSelection } from 'tiptap'
import { getMarkRange } from 'tiptap-utils'

export default class Link extends Mark {

  // ...

  get plugins() {
    return [
      new Plugin({
        props: {
          handleClick(view, pos) {
            const { schema, doc, tr } = view.state
            const range = getMarkRange(doc.resolve(pos), schema.marks.link)

            if (!range) {
              return
            }

            const $start = doc.resolve(range.from)
            const $end = doc.resolve(range.to)
            const transaction = tr.setSelection(new TextSelection($start, $end))

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

}

Maybe that helps you a bit. Instead of handleClick there is also a handleDoubleClick event (docs).

[panayotisk]

Yes this seems quite relevant to what I am trying to do. When I manage to make it work correctly I shall post my code here.

[philippkuehn]

There is a method now.

editor.setSelection(from, to)
editor.focus()

[usb248]

Hey,

working with selection could definitely a bit easier with prosemirror 😅
A few days ago I've changed how links works. So if you click on a link, the full link is selected so the bubble menu gets triggered and you could edit or delete your link. this looks something like that:

I've added a prosemirror plugin for doing this:

import { Mark, Plugin, TextSelection } from 'tiptap'
import { getMarkRange } from 'tiptap-utils'

export default class Link extends Mark {

  // ...

  get plugins() {
    return [
      new Plugin({
        props: {
          handleClick(view, pos) {
            const { schema, doc, tr } = view.state
            const range = getMarkRange(doc.resolve(pos), schema.marks.link)

            if (!range) {
              return
            }

            const $start = doc.resolve(range.from)
            const $end = doc.resolve(range.to)
            const transaction = tr.setSelection(new TextSelection($start, $end))

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

}

Maybe that helps you a bit. Instead of handleClick there is also a handleDoubleClick event (docs).

you save me. thank you ! But why it's not the actual behavior of link extension?