From c42ba1fa1d1520091794cd6d51bb985664450a76 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 25 Oct 2021 13:04:15 +0200
Subject: [PATCH 1/2] fix(hooks/keypress): check if document is defined

---
 src/hooks/useKeyPress.ts | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/hooks/useKeyPress.ts b/src/hooks/useKeyPress.ts
index 3b1b94d0..4095af3f 100644
--- a/src/hooks/useKeyPress.ts
+++ b/src/hooks/useKeyPress.ts
@@ -6,14 +6,16 @@ type Keys = Array<string>;
 type PressedKeys = Set<string>;
 type KeyOrCode = 'key' | 'code';
 export interface UseKeyPressOptions {
-  target: Document | HTMLElement | ShadowRoot;
+  target: Document | HTMLElement | ShadowRoot | null;
 }
 
+const doc = typeof document !== 'undefined' ? document : null;
+
 // the keycode can be a string 'a' or an array of strings ['a', 'a+d']
 // a string means a single key 'a' or a combination when '+' is used 'a+d'
 // an array means different possibilites. Explainer: ['a', 'd+s'] here the
 // user can use the single key 'a' or the combination 'd' + 's'
-export default (keyCode: KeyCode | null = null, options: UseKeyPressOptions = { target: document }): boolean => {
+export default (keyCode: KeyCode | null = null, options: UseKeyPressOptions = { target: doc }): boolean => {
   const [keyPressed, setKeyPressed] = useState(false);
 
   // we need to remember the pressed keys in order to support combinations
@@ -64,16 +66,16 @@ export default (keyCode: KeyCode | null = null, options: UseKeyPressOptions = {
         setKeyPressed(false);
       };
 
-      options.target.addEventListener('keydown', downHandler as EventListenerOrEventListenerObject);
-      options.target.addEventListener('keyup', upHandler as EventListenerOrEventListenerObject);
-      options.target.addEventListener('blur', resetHandler);
+      options?.target?.addEventListener('keydown', downHandler as EventListenerOrEventListenerObject);
+      options?.target?.addEventListener('keyup', upHandler as EventListenerOrEventListenerObject);
+      options?.target?.addEventListener('blur', resetHandler);
 
       return () => {
         pressedKeys.current.clear();
 
-        options.target.removeEventListener('keydown', downHandler as EventListenerOrEventListenerObject);
-        options.target.removeEventListener('keyup', upHandler as EventListenerOrEventListenerObject);
-        options.target.removeEventListener('blur', resetHandler);
+        options?.target?.removeEventListener('keydown', downHandler as EventListenerOrEventListenerObject);
+        options?.target?.removeEventListener('keyup', upHandler as EventListenerOrEventListenerObject);
+        options?.target?.removeEventListener('blur', resetHandler);
       };
     }
   }, [keyCode, setKeyPressed]);

From e8d26002a11103fad7f2be28743ff0178d75d548 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 25 Oct 2021 16:56:54 +0200
Subject: [PATCH 2/2] refactor(node-renderer): do not mutate node styles

---
 src/container/NodeRenderer/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/container/NodeRenderer/index.tsx b/src/container/NodeRenderer/index.tsx
index 002b015a..40ebb906 100644
--- a/src/container/NodeRenderer/index.tsx
+++ b/src/container/NodeRenderer/index.tsx
@@ -83,14 +83,14 @@ function Node({
   const childRect = useMemo(() => getRectOfNodes(childNodes), [childNodes]);
   const isParentNode = !!childNodes.length;
 
-  node.style = useMemo(() => {
+  const style = useMemo(() => {
     if (isParentNode) {
       return {
         ...node.style,
         width: Math.floor(childRect.width) + 20,
         height: Math.floor(childRect.height) + 20,
         boxSizing: 'border-box',
-      };
+      } as React.CSSProperties;
     }
     return node.style;
   }, [childRect.width, childRect.height, isParentNode, node.style]);
@@ -111,7 +111,7 @@ function Node({
     <NodeComponent
       id={node.id}
       className={node.className}
-      style={node.style}
+      style={style}
       type={nodeType}
       data={node.data}
       sourcePosition={node.sourcePosition}