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);