ProseMirror / prosemirror

The ProseMirror WYSIWYM editor
http://prosemirror.net/
MIT License
7.61k stars 336 forks source link

Pressing Enter inside a figcaption element deletes text on iOS and Android #1361

Closed kiejo closed 1 year ago

kiejo commented 1 year ago

Steps to reproduce

  1. Go to https://harmonious-positive-tarsal.glitch.me/ on iOS Safari or Android Chrome.
  2. Place the caret right after the word "can".
  3. Press Enter.

Result: All text behind the word "can" gets deleted and the caret is placed after the word "This".

Expected behavior: The editor content should stay the same and an Enter keydown event should get dispatched.

Notes

Changing

figcaption: {
  content: "inline*",
  parseDOM: [{tag: "figcaption"}],
  toDOM() { return ["figcaption", 0] }
}

to

figcaption: {
  content: "inline*",
  parseDOM: [{tag: "figcaption"}],
  toDOM() { return ["div", 0] }
}

solves the issue (render a div tag instead of figcaption), but it would be really nice if the figcaption element could work the same way on mobile.

marijnh commented 1 year ago

Does this patch work for you? (I think I understand what is going wrong, but I don't have an iOS device handy to test.)

kiejo commented 1 year ago

The patch works for me on both Android and iOS :+1: Thanks for fixing this so quickly!

marijnh commented 1 year ago

Great. Tagged as 1.30.2

mayacoda commented 8 months ago

Sorry to bring this annoying bug up again, but we're having the same problem with codeblocks which are <pre> elements with <code> children. This is the node schema

code_block: {
  content: "text*",
  marks: "",
  group: "block",
  code: true,
  defining: true,
  draggable: false,
  parseDOM: [{ tag: "pre", preserveWhitespace: "full" }],
  toDOM: () => ["pre", { spellcheck: "false" }, ["code", 0]],
},

Because the <code> child is a native and inline element, pressing enter within our codeblock on iOS Safari also deletes all the following text. Any suggestions for a workaround or fix?