Not able to delete custom node using backspace

1

Greetings! I am using ProseMirror to build an editor. In the process, I am creating a custom node to support social embeds. Seek some advise from correct approach Here is the minimal code.


{
    attrs: {
      url: {
        default: ""
      }
    },
    content: "inline*",
    group: "block",
    atom: true,
    selectable: false,
    parseDOM: [
      {
        tag: this.name,
        getAttrs: dom => {
          return {
            url: dom.getAttribute("url")
          };
        }
      }
    ],
    toDOM: node => ["embed", node.attrs, 0]
}

I added NodeView for node using VueJs and passed node, getPos, view as props.

<template><div><div v-html="node.textContent"></div></div></template>

I made editor instance using following json


{
  type: 'doc',
  content: [
    {
      type: 'paragraph',
      content: [{
          type: 'text'
          text: 'Test backspace'
      }]
    }
    {
     type: 'embed',
     attrs: {
        url: 'https://example.com",
     },
     content: [ {
        type: 'text'
        text: 'some html'
      }]
    } ,
  ]
}

Now when I try to delete embed node using backspace, editor loses focus. Thanks in Advance.

2

Why are you disabling selectable? Selecting and then using backspace/delete is the straightforward way of deleting such leaf nodes.

I suspect the focus issue is a result of A) none of the commands bound to backspace applying in the situation where the cursor is after the node and B) the browser’s default behavior being buggy (browsers are pretty terrible with native editing behavior around uneditable nodes) and just giving up, unfocusing the editor.

1 Like