Add onCancel callback to textWysiwyg for cleanup (#555)

src/element/textWysiwyg.tsx

@@ -8,6 +8,7 @@ type TextWysiwygParams = {
   strokeColor: string;
   font: string;
   onSubmit: (text: string) => void;
+  onCancel: () => void;
 };
 
 // When WYSIWYG text ends with white spaces, the text gets vertically misaligned
@@ -23,6 +24,7 @@ export function textWysiwyg({
   strokeColor,
   font,
   onSubmit,
+  onCancel,
 }: TextWysiwygParams) {
   // Using contenteditable here as it has dynamic width.
   // But this solution has an issue — it allows to paste
@@ -84,6 +86,8 @@ export function textWysiwyg({
   function handleSubmit() {
     if (editable.innerText) {
       onSubmit(trimText(editable.innerText));
+    } else {
+      onCancel();
     }
     cleanup();
   }

src/index.tsx

@@ -875,6 +875,14 @@ export class App extends React.Component<any, AppState> {
                 }
               }
 
+              const resetSelection = () => {
+                this.setState({
+                  draggingElement: null,
+                  editingElement: null,
+                  elementType: "selection",
+                });
+              };
+
               textWysiwyg({
                 initText: "",
                 x: textX,
@@ -895,11 +903,10 @@ export class App extends React.Component<any, AppState> {
                       },
                     ];
                   }
-                  this.setState({
-                    draggingElement: null,
-                    editingElement: null,
-                    elementType: "selection",
-                  });
+                  resetSelection();
+                },
+                onCancel: () => {
+                  resetSelection();
                 },
               });
               this.setState({
@@ -1271,6 +1278,14 @@ export class App extends React.Component<any, AppState> {
               }
             }
 
+            const resetSelection = () => {
+              this.setState({
+                draggingElement: null,
+                editingElement: null,
+                elementType: "selection",
+              });
+            };
+
             textWysiwyg({
               initText: element.text,
               x: textX,
@@ -1289,11 +1304,10 @@ export class App extends React.Component<any, AppState> {
                     },
                   ];
                 }
-                this.setState({
-                  draggingElement: null,
-                  editingElement: null,
-                  elementType: "selection",
-                });
+                resetSelection();
+              },
+              onCancel: () => {
+                resetSelection();
               },
             });
           }}