Fix an issue with a stale editor reference in shape utils (#2295)

Fixes an issue where the editor reference in shape utils was not up to
date with the editor returned from `useEditor`. Actually, the whole util
was the incorrect one and was holding a reference to the previous
instantiation of the editor.

This only occurred in dev mode, but could also happen in other cases
where editor is created multiple times. To see the kinds of issues this
causes in dev mode you can do the following:
1. Create an image, crop it.
2. Refresh the page.
3. Select the image, then double click it to enter crop mode.
4. You will not see the cropped area of the image. You need to change
the crop slightly and then it suddenly appears. This is because this
changes props, which reruns the memoized function.

Fixes https://github.com/tldraw/tldraw/issues/2284

### Change Type

- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Release Notes

- Fix an issue where the shape utils could have a stale reference to the
editor.
This commit is contained in:
Mitja Bezenšek 2023-12-06 17:19:57 +01:00 committed by GitHub
parent ea83e45942
commit 0cf6a1e464
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -146,7 +146,10 @@ const InnerShape = React.memo(
function InnerShape<T extends TLShape>({ shape, util }: { shape: T; util: ShapeUtil<T> }) {
return useStateTracking('InnerShape:' + shape.type, () => util.component(shape))
},
(prev, next) => prev.shape.props === next.shape.props && prev.shape.meta === next.shape.meta
(prev, next) =>
prev.shape.props === next.shape.props &&
prev.shape.meta === next.shape.meta &&
prev.util === next.util
)
const InnerShapeBackground = React.memo(