Choosing color before entering text does not update the swatch (Fixes #1897) (#1915)

Co-authored-by: dwelle <luzar.david@gmail.com>

src/components/App.tsx

@@ -1514,20 +1514,13 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       isExistingElement?: boolean;
     },
   ) {
-    const resetSelection = () => {
-      this.setState({
-        draggingElement: null,
-        editingElement: null,
-      });
-    };
-
-    const updateElement = (text: string) => {
+    const updateElement = (text: string, isDeleted = false) => {
       globalSceneState.replaceAllElements([
         ...globalSceneState.getElementsIncludingDeleted().map((_element) => {
           if (_element.id === element.id && isTextElement(_element)) {
             return updateTextElement(_element, {
               text,
-              isDeleted: !text.trim(),
+              isDeleted,
             });
           }
           return _element;
@@ -1551,25 +1544,27 @@ class App extends React.Component<ExcalidrawProps, AppState> {
         updateElement(text);
       }),
       onSubmit: withBatchedUpdates((text) => {
-        updateElement(text);
-        this.setState((prevState) => ({
-          selectedElementIds: {
-            ...prevState.selectedElementIds,
-            [element.id]: true,
-          },
-        }));
-        if (this.state.elementLocked) {
-          setCursorForShape(this.state.elementType);
+        const isDeleted = !text.trim();
+        updateElement(text, isDeleted);
+        if (!isDeleted) {
+          this.setState((prevState) => ({
+            selectedElementIds: {
+              ...prevState.selectedElementIds,
+              [element.id]: true,
+            },
+          }));
         }
-        history.resumeRecording();
-        resetSelection();
-      }),
-      onCancel: withBatchedUpdates(() => {
-        updateElement("");
-        if (isExistingElement) {
+        if (!isDeleted || isExistingElement) {
           history.resumeRecording();
         }
-        resetSelection();
+
+        this.setState({
+          draggingElement: null,
+          editingElement: null,
+        });
+        if (this.state.elementLocked) {
+          setCursorForShape(this.state.elementType);
+        }
       }),
     });
     // deselect all other elements when inserting text

src/element/textWysiwyg.tsx

@@ -32,14 +32,12 @@ export const textWysiwyg = ({
   zoom,
   onChange,
   onSubmit,
-  onCancel,
   getViewportCoords,
 }: {
   id: ExcalidrawElement["id"];
   zoom: number;
   onChange?: (text: string) => void;
   onSubmit: (text: string) => void;
-  onCancel: () => void;
   getViewportCoords: (x: number, y: number) => [number, number];
 }) => {
   function updateWysiwygStyle() {
@@ -129,11 +127,7 @@ export const textWysiwyg = ({
   };
 
   const handleSubmit = () => {
-    if (editable.value) {
-      onSubmit(normalizeText(editable.value));
-    } else {
-      onCancel();
-    }
+    onSubmit(normalizeText(editable.value));
     cleanup();
   };