How to move cursor after a custom block?

1

I’m implementing a custom image uploader/view for my text editor.

The image view is a block node that occupies an entire row (the red area in the pic). While it works, one problem I have is not being able to move the cursor behind the block. So that it is impossible to add new lines after the image block, nor can I delete the image block by typing backspace.

I don’t know how to solve this?

Screenshot 2023-02-06 at 9.41.51 PM
Screenshot 2023-02-06 at 9.41.51 PM2372×648 15.3 KB

2

Possibly prosemirror-gapcursor is what you want.

3

Thank you. I tried it, but it doesn’t seem to work

here is my schema. I tried setting allowGapCursor for doc and gallery, but they won’t work either.

    image: {
      attrs: {
        file: { default: '' },
        description: { default: '' },
        source: { default: '' }
      },
      toDOM() {
        return ["img", {
          "file": node.attrs.file,
          src: "/img/" + node.attrs.file + ".png",
          description: node.attrs.description,
          source: node.attrs.source
        }]
      },
      parseDOM: [{ tag: "img" }]
    },
    gallery: {
      group: "block",
      content: "image*",
      toDOM() { return ["gallery", 0] },
      parseDOM: [{ tag: "gallery" }]
    },
4

Adding atom: true to the gallery node spec might help.

5

Thank you so much! yes, adding atom:true solves my problem.