smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-04-14 16:40:58 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
David Luzar 2024-05-28 16:17:52 +02:00 • committed by GitHub
parent 860308eb27
commit 69f4cc70cb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 12 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/excalidraw/components/App.tsx
View file

@ -4421,6 +4421,11 @@ class App extends React.Component<AppProps, AppState> {
element, element,
excalidrawContainer: this.excalidrawContainerRef.current, excalidrawContainer: this.excalidrawContainerRef.current,
app: this, 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 // deselect all other elements when inserting text
this.deselectElements(); this.deselectElements();

10
packages/excalidraw/element/textWysiwyg.tsx
View file

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