Drop indicator for dragged elements like images

[holtwick]

It would be great to see a cursor for drag operations on where the dragged element would be inserted on release.

Example - not working: In https://tiptap.scrumpy.io/images drag the image to another place in the text.

Example- working: In https://prosemirror.net/examples/dino/ drag the dinos. A simple text cursor becomes visible.

Solution: Add dropCursor and gapCursor plugins like here: https://github.com/ProseMirror/prosemirror-example-setup/blob/master/src/index.js#L56

[holtwick]

Perfect, thanks for the quick fix.

I wondered if it the plugin configuration could become more flexible. I solved the problem in my code like this:

 class AppEditor extends Editor {

    createPlugins() {
      return [
        ...super.createPlugins(),
        new dropCursor({
          color: '#FF6347',
          width: 2
        })
      ]
    }

  }

As you can see I add some configuration. I guess having config for each plugin would making things too complicated. But on the other hand I would now have to remove the dropCursor plugin from the list, before adding mine, to avoid conflicting behaviors. But looking at createState this doesn't seem to work without overriding createState as well.

So what do you think about moving the whole plugins section from createState to createPlugins? That would give simple full control.

[Chrissi2812]

I thought it could be styled via CSS (just had a quick look and saw it had a class in the prosemirror example). But there is no dedicated class for it in neither tiptap nor prosemirror.

I added an option dropCursor to the Editor instance config. See #141 (comment)

[holtwick]

Awesome, thanks!

[philippkuehn]

Hey @holtwick. I don't think I'll merge #141 for now (see PR for why) but you can easily create a tiptap extension for it.

import { Extension, Plugin } from 'tiptap'
import { dropCursor } from 'prosemirror-dropcursor'

export default class DropCursorExtension extends Extension {

  get name() {
    return 'dropCursor'
  }

  get plugins() {
    return [
      dropCursor({
        width: 2,
        color: '#ccc',
      })
    ]
  }

}

[holtwick]

I see. @philippkuehn, the solution you propose is even better and I'm happily looking forward to it. Thanks for all the effort implementing the PR @Chrissi2812

[philippkuehn]

My fault. I merged the PR. And it's released.