Unknown 'Enter' event triggered when 'Backspace' is pressed

1

I want to create a node to handle html input and preview, so I created three nodes: html, html_preview and html_input, the schema is:

const spec = {
  // ignore others
  html: {
    group: "block",
    content: "html_preview html_input",
    toDOM(node) {
      return ["div", 0];
    },
  },
  html_preview: {
    toDom() {
      // ignore other code
      return ["iframe", { contentEditable: false, style: "width: 100%" }];
    },
  },
  html_input: {
    content: "text*",
    code: true,
    toDOM(node) {
      return ["pre", ["code", 0]];
    },
  },
};

Then I create an input rule for this, everything works fine for now. The problem is that when I type some words in the html_input node, then press Backspace to delete it, the first letter cannot be deleted! But if I change return ["iframe"... to return ["div"... it works fine. Is this a bug?

Here is a minimal setup for this situation, prosemirror-demo

2

I’m not sure what’s going on, but seeing how the issue happens on Chrome but not Firefox, I’d say that this is likely a browser bug, most likely caused by poor handling of iframes inside editable content. Sometimes styling or wrapping such elements can sidestep the bug, but if not, you may be forced to use a non-iframe representation (if possible).

3

Thanks for your reply, I’ll try to find another way.