diff --git a/src/excalidraw-embed/index.tsx b/src/excalidraw-embed/index.tsx index 2b1bc217..ffe826d4 100644 --- a/src/excalidraw-embed/index.tsx +++ b/src/excalidraw-embed/index.tsx @@ -9,63 +9,62 @@ import "../css/styles.scss"; import { ExcalidrawProps } from "../types"; import { IsMobileProvider } from "../is-mobile"; -const Excalidraw = React.memo( - (props: ExcalidrawProps) => { - const { - width, - height, - onChange, - initialData, - user, - onUsernameChange, - } = props; +const Excalidraw = (props: ExcalidrawProps) => { + const { + width, + height, + onChange, + initialData, + user, + onUsernameChange, + } = props; - useEffect(() => { - // Block pinch-zooming on iOS outside of the content area - const handleTouchMove = (event: TouchEvent) => { - // @ts-ignore - if (typeof event.scale === "number" && event.scale !== 1) { - event.preventDefault(); - } - }; + useEffect(() => { + // Block pinch-zooming on iOS outside of the content area + const handleTouchMove = (event: TouchEvent) => { + // @ts-ignore + if (typeof event.scale === "number" && event.scale !== 1) { + event.preventDefault(); + } + }; - document.addEventListener("touchmove", handleTouchMove, { - passive: false, - }); + document.addEventListener("touchmove", handleTouchMove, { + passive: false, + }); - return () => { - document.removeEventListener("touchmove", handleTouchMove); - }; - }, []); + return () => { + document.removeEventListener("touchmove", handleTouchMove); + }; + }, []); - return ( - - - - - - ); - }, - (prevProps: ExcalidrawProps, nextProps: ExcalidrawProps) => { - const { initialData: prevInitialData, user: prevUser, ...prev } = prevProps; - const { initialData: nextInitialData, user: nextUser, ...next } = nextProps; + return ( + + + + + + ); +}; - const prevKeys = Object.keys(prevProps) as (keyof typeof prev)[]; - const nextKeys = Object.keys(nextProps) as (keyof typeof next)[]; +const areEqual = (prevProps: ExcalidrawProps, nextProps: ExcalidrawProps) => { + const { initialData: prevInitialData, user: prevUser, ...prev } = prevProps; + const { initialData: nextInitialData, user: nextUser, ...next } = nextProps; - return ( - prevUser?.name === nextUser?.name && - prevKeys.length === nextKeys.length && - prevKeys.every((key) => prev[key] === next[key]) - ); - }, -); + const prevKeys = Object.keys(prevProps) as (keyof typeof prev)[]; + const nextKeys = Object.keys(nextProps) as (keyof typeof next)[]; -export default Excalidraw; + return ( + prevUser?.name === nextUser?.name && + prevKeys.length === nextKeys.length && + prevKeys.every((key) => prev[key] === next[key]) + ); +}; + +export default React.memo(Excalidraw, areEqual);