fix: manually confirm active wysiwyg on pointerdown

src/components/App.tsx

@@ -322,6 +322,8 @@ class App extends React.Component<AppProps, AppState> {
   private id: string;
   private history: History;
 
+  private activeWysiwyg: null | { handleSubmit: () => void } = null;
+
   constructor(props: AppProps) {
     super(props);
     const defaultAppState = getDefaultAppState();
@@ -1204,16 +1206,11 @@ class App extends React.Component<AppProps, AppState> {
     // event.touches.length === 1 will also prevent inserting text when user's zooming
     if (didTapTwice && event.touches.length === 1) {
       const [touch] = event.touches;
-      this.handleCanvasDoubleClick(
-        {
-          clientX: touch.clientX,
-          clientY: touch.clientY,
-          ctrlKey: false,
-          metaKey: false,
-          altKey: false,
-        },
-        false,
-      );
+      // @ts-ignore
+      this.handleCanvasDoubleClick({
+        clientX: touch.clientX,
+        clientY: touch.clientY,
+      });
       didTapTwice = false;
       clearTimeout(tappedTwiceTimer);
     }
@@ -1768,7 +1765,7 @@ class App extends React.Component<AppProps, AppState> {
       ]);
     };
 
-    textWysiwyg({
+    const { handleSubmit } = textWysiwyg({
       id: element.id,
       appState: this.state,
       canvas: this.canvas,
@@ -1792,6 +1789,7 @@ class App extends React.Component<AppProps, AppState> {
         }
       }),
       onSubmit: withBatchedUpdates(({ text, viaKeyboard }) => {
+        this.activeWysiwyg = null;
         const isDeleted = !text.trim();
         updateElement(text, isDeleted);
         // select the created text element only if submitting via keyboard
@@ -1833,6 +1831,8 @@ class App extends React.Component<AppProps, AppState> {
     // do an initial update to re-initialize element position since we were
     // modifying element's x/y for sake of editor (case: syncing to remote)
     updateElement(element.text);
+
+    this.activeWysiwyg = { handleSubmit };
   }
 
   private getTextElementAtPosition(
@@ -1885,7 +1885,6 @@ class App extends React.Component<AppProps, AppState> {
     sceneX,
     sceneY,
     insertAtParentCenter = true,
-    createTextIfNotExists = true,
   }: {
     /** X position to insert text at */
     sceneX: number;
@@ -1893,14 +1892,9 @@ class App extends React.Component<AppProps, AppState> {
     sceneY: number;
     /** whether to attempt to insert at element center if applicable */
     insertAtParentCenter?: boolean;
-    createTextIfNotExists?: boolean;
   }) => {
     const existingTextElement = this.getTextElementAtPosition(sceneX, sceneY);
 
-    // if (!existingTextElement && !createTextIfNotExists) {
-    //   return;
-    // }
-
     const parentCenterPosition =
       insertAtParentCenter &&
       this.getTextWysiwygSnappedToCenterPosition(
@@ -1972,11 +1966,7 @@ class App extends React.Component<AppProps, AppState> {
   };
 
   private handleCanvasDoubleClick = (
-    event: Pick<
-      React.PointerEvent<HTMLCanvasElement>,
-      "clientX" | "clientY" | "ctrlKey" | "metaKey" | "altKey"
-    >,
-    createTextIfNotExists = true,
+    event: React.MouseEvent<HTMLCanvasElement>,
   ) => {
     // case: double-clicking with arrow/line tool selected would both create
     // text and enter multiElement mode
@@ -2047,7 +2037,6 @@ class App extends React.Component<AppProps, AppState> {
         sceneX,
         sceneY,
         insertAtParentCenter: !event.altKey,
-        createTextIfNotExists,
       });
     }
   };
@@ -2301,6 +2290,10 @@ class App extends React.Component<AppProps, AppState> {
   ) => {
     event.persist();
 
+    if (this.activeWysiwyg) {
+      this.activeWysiwyg.handleSubmit();
+    }
+
     // remove any active selection when we start to interact with canvas
     // (mainly, we care about removing selection outside the component which
     //  would prevent our copy handling otherwise)
@@ -3206,7 +3199,7 @@ class App extends React.Component<AppProps, AppState> {
         const selectedElements = getSelectedElements(
           this.scene.getElements(),
           this.state,
-        ).filter((element) => element.id !== this.state.editingElement?.id);
+        );
         // prevent dragging even if we're no longer holding cmd/ctrl otherwise
         // it would have weird results (stuff jumping all over the screen)
         if (selectedElements.length > 0 && !pointerDownState.withCmdOrCtrl) {

src/element/textWysiwyg.test.tsx

@@ -16,7 +16,7 @@ describe("textWysiwyg", () => {
 
     const element = UI.createElement("text");
 
-    new Pointer("mouse").clickOn(element);
+    new Pointer("mouse").doubleClickOn(element);
     textarea = document.querySelector(
       ".excalidraw-textEditorContainer > textarea",
     )!;

src/element/textWysiwyg.tsx

@@ -368,4 +368,6 @@ export const textWysiwyg = ({
   excalidrawContainer
     ?.querySelector(".excalidraw-textEditorContainer")!
     .appendChild(editable);
+
+  return { handleSubmit };
 };