Rich Text: Apply attributes properly

[technote-space]

Description

This PR fixes #14858

How has this been tested?

• I added a test case
  • Both current and future include node which
    • is same node name
    • is not text node
    • has multiple attributes

const cases = [

...

	{
		current: 'test1 <span data-current-attribute1="current1" data-current-attribute2="current2">test2</span> <span>test3</span>',
		future: 'test1 test2 <span data-future-attribute1="future1" data-future-attribute2="future2">test3</span>',
		movedCount: 1,
		description: 'should apply attributes',
	},
];

This test will cover this section
https://github.com/WordPress/gutenberg/blob/release/5.5/packages/rich-text/src/to-dom.js#L206-L230

before fix:

    Difference:

    - Expected
    + Received

    - test1 test2 <span data-future-attribute1="future1" data-future-attribute2="future2">test3</span>
    + test1 test2 <span data-current-attribute2="current2" data-future-attribute1="future1" data-future-attribute2="future2">test3</span>

after fix:

  applyValue
    ✓ should remove nodes (1ms)
    ✓ should add nodes (1ms)
    ✓ should not modify (1ms)
    ✓ should apply attributes (4ms)

Screenshots

before

after

Types of changes

Bug fix

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[ellatrix]

In case anyone was wondering, this test case would fail in master. Added a comment: https://github.com/WordPress/gutenberg/pull/15070/files#diff-829f9f4e942450ee8c33f082c016b173R212.

[ellatrix]

Thanks @technote-space! I cleaned up the tests a bit so it's easier to see what is happening. I also swapped out the reverse for loop for a simpler while loop.

[ellatrix]

Alternatively we could have copied the attributes to an array, but the reverse loop is faster. :)