feat: stop autoselecting text on text edit on mobile (#8076)

packages/excalidraw/components/App.tsx

@@ -4421,6 +4421,11 @@ class App extends React.Component<AppProps, AppState> {
       element,
       excalidrawContainer: this.excalidrawContainerRef.current,
       app: this,
+      // when text is selected, it's hard (at least on iOS) to re-position the
+      // caret (i.e. deselect). There's not much use for always selecting
+      // the text on edit anyway (and users can select-all from contextmenu
+      // if needed)
+      autoSelect: !this.device.isTouchScreen,
     });
     // deselect all other elements when inserting text
     this.deselectElements();

packages/excalidraw/element/textWysiwyg.tsx

@@ -77,6 +77,7 @@ export const textWysiwyg = ({
   canvas,
   excalidrawContainer,
   app,
+  autoSelect = true,
 }: {
   id: ExcalidrawElement["id"];
   /**
@@ -92,6 +93,7 @@ export const textWysiwyg = ({
   canvas: HTMLCanvasElement;
   excalidrawContainer: HTMLDivElement | null;
   app: App;
+  autoSelect?: boolean;
 }) => {
   const textPropertiesUpdated = (
     updatedTextElement: ExcalidrawTextElement,
@@ -657,9 +659,11 @@ export const textWysiwyg = ({
 
   let isDestroyed = false;
 
-  // select on init (focusing is done separately inside the bindBlurEvent()
-  // because we need it to happen *after* the blur event from `pointerdown`)
-  editable.select();
+  if (autoSelect) {
+    // select on init (focusing is done separately inside the bindBlurEvent()
+    // because we need it to happen *after* the blur event from `pointerdown`)
+    editable.select();
+  }
   bindBlurEvent();
 
   // reposition wysiwyg in case of canvas is resized. Using ResizeObserver