fix: unable to change color while in wysiwyg

packages/excalidraw/data/restore.ts

@@ -1,6 +1,7 @@
 import type {
   ExcalidrawElement,
   ExcalidrawElementType,
+  ExcalidrawLinearElement,
   ExcalidrawSelectionElement,
   ExcalidrawTextElement,
   FontFamilyValues,
@@ -21,7 +22,11 @@ import {
   isInvisiblySmallElement,
   refreshTextDimensions,
 } from "../element";
-import { isTextElement, isUsingAdaptiveRadius } from "../element/typeChecks";
+import {
+  isLinearElement,
+  isTextElement,
+  isUsingAdaptiveRadius,
+} from "../element/typeChecks";
 import { randomId } from "../random";
 import {
   DEFAULT_FONT_FAMILY,
@@ -460,6 +465,21 @@ export const restoreElements = (
         ),
       );
     }
+
+    if (isLinearElement(element)) {
+      if (
+        element.startBinding &&
+        !restoredElementsMap.has(element.startBinding.elementId)
+      ) {
+        (element as Mutable<ExcalidrawLinearElement>).startBinding = null;
+      }
+      if (
+        element.endBinding &&
+        !restoredElementsMap.has(element.endBinding.elementId)
+      ) {
+        (element as Mutable<ExcalidrawLinearElement>).endBinding = null;
+      }
+    }
   }
 
   return restoredElements;

packages/excalidraw/element/binding.ts

@@ -188,10 +188,8 @@ const getOriginalBindingIfStillCloseOfLinearElementEdge = (
       ? linearElement.startBinding?.elementId
       : linearElement.endBinding?.elementId;
   if (elementId) {
-    const element = elementsMap.get(
-      elementId,
-    ) as NonDeleted<ExcalidrawBindableElement>;
-    if (bindingBorderTest(element, coors, app)) {
+    const element = elementsMap.get(elementId);
+    if (isBindableElement(element) && bindingBorderTest(element, coors, app)) {
       return element;
     }
   }
@@ -828,9 +826,6 @@ const bindingBorderTest = (
   { x, y }: { x: number; y: number },
   app: AppClassProperties,
 ): boolean => {
-  if (!element || !element.width || !element.height) {
-    return false;
-  }
   const threshold = maxBindingGap(element, element.width, element.height);
   const shape = app.getElementShape(element);
   return isPointOnShape([x, y], shape, threshold);

packages/excalidraw/element/textWysiwyg.tsx

@@ -562,7 +562,7 @@ export const textWysiwyg = ({
 
     window.removeEventListener("resize", updateWysiwygStyle);
     window.removeEventListener("wheel", stopEvent, true);
-    window.removeEventListener("pointerdown", onPointerDown);
+    window.removeEventListener("pointerdown", onPointerDown, { capture: true });
     window.removeEventListener("pointerup", bindBlurEvent);
     window.removeEventListener("blur", handleSubmit);
     window.removeEventListener("beforeunload", handleSubmit);
@@ -644,7 +644,7 @@ export const textWysiwyg = ({
       window.addEventListener("blur", handleSubmit);
     } else if (
       event.target instanceof HTMLElement &&
-      !event.target.contains(editable) &&
+      event.target.nodeName === "CANVAS" &&
       // Vitest simply ignores stopPropagation, capture-mode, or rAF
       // so without introducing crazier hacks, nothing we can do
       !isTestEnv()

packages/excalidraw/element/typeChecks.ts

@@ -132,7 +132,7 @@ export const isBindingElementType = (
 };
 
 export const isBindableElement = (
-  element: ExcalidrawElement | null,
+  element: ExcalidrawElement | null | undefined,
   includeLocked = true,
 ): element is ExcalidrawBindableElement => {
   return (