Fix stale decorations

[nemanja-tosic]

Description

Given that all relevant functions used to memoize an element do not change, when the editor re-renders no new decorations will be applied unless the entire tree from root to element contains a change. This leads to "decorate" being called only on the top elements, not any nested ones.

This PR resolves that by generating all decorations upfront instead of lazily as the tree is walked.

Context

The decorations prior to this PR are generated lazily, as the tree is walked. First we generate decoration for the editor, then the children of editor, then the children of children etc... Traversal is stopped however unless the following memo is invalidated:

const MemoizedElement = React.memo(Element, (prev, next) => {
  return (
    prev.element === next.element &&
    prev.renderElement === next.renderElement &&
    prev.renderLeaf === next.renderLeaf &&
    isDecoratorRangeListEqual(prev.decorations, next.decorations) &&
    (prev.selection === next.selection ||
      (!!prev.selection &&
        !!next.selection &&
        Range.equals(prev.selection, next.selection)))
  )
})

If only looking at the decorations of the current node, and not the children, the memo will not be invalidated and decorations will not be updated. This is resolved by generating everything upfront. The memo is then invalidated by providing the decorations for the intersection for the current range, as follows:

const ds = decorations.filter(dec => Range.intersection(dec, range))

which contain both the current element and children.

Checks

• 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 fix.)
• The relevant examples still work. (Run examples with yarn start.)
• You've added a changeset if changing functionality. (Add one with yarn changeset add.)

[changeset-bot]

🦋 Changeset detected

Latest commit: ad1b94f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
slate-react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR