Fix delete on Android with a deep document

[gracicot]

Is this adding or improving a feature or fixing a bug?

Fixing a bug

What's the new behavior?

Deleting correctly when operating on a document with a deep structure.

Consider this document:

  document: {
    object: "document",
    data: {},
    nodes: [
      {
        object: "block",
        type: "depth1",
        data: {},
        nodes: [
          {
            object: "block",
            type: "depth2",
            data: {},
            nodes: [
              {
                object: "block",
                type: "depth3",
                data: {},
                nodes: [
                  {
                    object: "text",
                    text: "T",
                    marks: []
                  },
                  {
                    object: "text",
                    text: " ",
                    marks: [
                      {
                        object: "mark",
                        type: "style1",
                        data: {}
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }

Video: Crash when deleting a parent node with swipe delete
Video: Crash when pressing backspace

Video: Editor with the patches

How does this change work?

When pressing a single backspace, the node with the style gets deleted. This is a single mutation that is removing the node. The composition manager catches that and match on single mutation that removes nodes.

When pressing backspace on the last character, the node get deleted, the browser also adds a <br /> node. This screws the matching, since it's two mutations instead of one.

The solution for that was to filter out <br /> additions.

There was another problem with the swipe delete. Swipe delete removed the parent span containing the text node.

The problem with that is that reconcileDOMNode expect to alway find the span node where the focused text node is, but none is there, instead a nearby block is found:

function reconcileDOMNode(editor, domNode) {
  // finds a block, there is no span anymore!
  const domElement = domNode.parentElement.closest('[data-key]') 
  const node = editor.findNode(domElement)
  // ...
}

My solution was to take the block and call reconcileNode on each on its text nodes. I'm unsure if this is necessary or if only calling reconcileNode on the first one is enough.

Have you checked that...?

• The new code matches the existing patterns and styles.
• The tests pass with yarn test.
• The linter passes with yarn lint. (Fix errors with yarn prettier.)
• The relevant examples still work. (Run examples with yarn watch.)

Does this fix any issues or need any specific reviewers?

Reviewers: @ianstormtaylor @thesunny

[ianstormtaylor]

Hey, there are lots of open Android-related issues that are out of date with the latest 0.50 release because the codebase was completely rearchitected. We'll need to figure out how to have proper support for Android going forward based on beforeinput events somehow. I'm tracking this in #3112, so I'm going to close this in favor of that one.

If it cannot be implemented simply in core with beforeinput we'll likely need to have a separate plugin for android support be created, because it's too much of a departure from all of the other simpler logic in core and very hard for me to test or respond to issues. Using a separate plugin should be possible now as the newest version simplifies a lot of the internals.

Thank you for understanding.