- {/* Empty div as trigger so it's stretched 100% due to different button sizes */}
{
- e.preventDefault();
- onTrigger?.(e);
- }}
- onClick={(e) => {
- e.preventDefault();
- e.stopPropagation();
+ // Prevent default behavior that might dismiss keyboard on mobile when editing text
+ if (appState.editingTextElement) {
+ e.preventDefault();
+ }
}}
>
{
- e.preventDefault();
- e.stopPropagation();
- }}
+ active={isTriggerActive || isOpened}
+ onClick={() => {}} // Let Radix handle the toggle
style={{
border: "none",
}}
diff --git a/packages/excalidraw/hooks/useTextEditorFocus.ts b/packages/excalidraw/hooks/useTextEditorFocus.ts
new file mode 100644
index 0000000000..25c6147d4a
--- /dev/null
+++ b/packages/excalidraw/hooks/useTextEditorFocus.ts
@@ -0,0 +1,112 @@
+import { useState, useCallback } from "react";
+
+// Utility type for caret position
+export type CaretPosition = {
+ start: number;
+ end: number;
+};
+
+// Utility function to get text editor element
+const getTextEditor = (): HTMLTextAreaElement | null => {
+ return document.querySelector(".excalidraw-wysiwyg") as HTMLTextAreaElement;
+};
+
+// Utility functions for caret position management
+export const saveCaretPosition = (): CaretPosition | null => {
+ const textEditor = getTextEditor();
+ if (textEditor) {
+ return {
+ start: textEditor.selectionStart,
+ end: textEditor.selectionEnd,
+ };
+ }
+ return null;
+};
+
+export const restoreCaretPosition = (position: CaretPosition | null): void => {
+ setTimeout(() => {
+ const textEditor = getTextEditor();
+ if (textEditor) {
+ textEditor.focus();
+ if (position) {
+ textEditor.selectionStart = position.start;
+ textEditor.selectionEnd = position.end;
+ }
+ }
+ }, 0);
+};
+
+export const withCaretPositionPreservation = (
+ callback: () => void,
+ isCompactMode: boolean,
+ isEditingText: boolean,
+ onPreventClose?: () => void,
+): void => {
+ // Prevent popover from closing in compact mode
+ if (isCompactMode && onPreventClose) {
+ onPreventClose();
+ }
+
+ // Save caret position if editing text
+ const savedPosition =
+ isCompactMode && isEditingText ? saveCaretPosition() : null;
+
+ // Execute the callback
+ callback();
+
+ // Restore caret position if needed
+ if (isCompactMode && isEditingText) {
+ restoreCaretPosition(savedPosition);
+ }
+};
+
+// Hook for managing text editor caret position with state
+export const useTextEditorFocus = () => {
+ const [savedCaretPosition, setSavedCaretPosition] =
+ useState(null);
+
+ const saveCaretPositionToState = useCallback(() => {
+ const position = saveCaretPosition();
+ setSavedCaretPosition(position);
+ }, []);
+
+ const restoreCaretPositionFromState = useCallback(() => {
+ setTimeout(() => {
+ const textEditor = getTextEditor();
+ if (textEditor) {
+ textEditor.focus();
+ if (savedCaretPosition) {
+ textEditor.selectionStart = savedCaretPosition.start;
+ textEditor.selectionEnd = savedCaretPosition.end;
+ setSavedCaretPosition(null);
+ }
+ }
+ }, 0);
+ }, [savedCaretPosition]);
+
+ const clearSavedPosition = useCallback(() => {
+ setSavedCaretPosition(null);
+ }, []);
+
+ return {
+ saveCaretPosition: saveCaretPositionToState,
+ restoreCaretPosition: restoreCaretPositionFromState,
+ clearSavedPosition,
+ hasSavedPosition: !!savedCaretPosition,
+ };
+};
+
+// Utility function to temporarily disable text editor blur
+export const temporarilyDisableTextEditorBlur = (
+ duration: number = 100,
+): void => {
+ const textEditor = getTextEditor();
+ if (textEditor) {
+ const originalOnBlur = textEditor.onblur;
+ textEditor.onblur = null;
+
+ setTimeout(() => {
+ textEditor.onblur = originalOnBlur;
+ }, duration);
+ }
+};
diff --git a/packages/excalidraw/wysiwyg/textWysiwyg.tsx b/packages/excalidraw/wysiwyg/textWysiwyg.tsx
index 2255d8a5a2..13e7965a90 100644
--- a/packages/excalidraw/wysiwyg/textWysiwyg.tsx
+++ b/packages/excalidraw/wysiwyg/textWysiwyg.tsx
@@ -538,6 +538,7 @@ export const textWysiwyg = ({
if (isDestroyed) {
return;
}
+
isDestroyed = true;
// cleanup must be run before onSubmit otherwise when app blurs the wysiwyg
// it'd get stuck in an infinite loop of blur→onSubmit after we re-focus the
@@ -621,14 +622,24 @@ export const textWysiwyg = ({
const isPropertiesTrigger =
target instanceof HTMLElement &&
target.classList.contains("properties-trigger");
+ const isPropertiesContent =
+ (target instanceof HTMLElement || target instanceof SVGElement) &&
+ !!(target as Element).closest(".properties-content");
+ const inShapeActionsMenu =
+ (target instanceof HTMLElement || target instanceof SVGElement) &&
+ (!!(target as Element).closest(`.${CLASSES.SHAPE_ACTIONS_MENU}`) ||
+ !!(target as Element).closest(".compact-shape-actions-island"));
setTimeout(() => {
- editable.onblur = handleSubmit;
-
- // case: clicking on the same property → no change → no update → no focus
- if (!isPropertiesTrigger) {
- editable.focus();
+ // If we interacted within shape actions menu or its popovers/triggers,
+ // keep submit disabled and don't steal focus back to textarea.
+ if (inShapeActionsMenu || isPropertiesTrigger || isPropertiesContent) {
+ return;
}
+
+ // Otherwise, re-enable submit on blur and refocus the editor.
+ editable.onblur = handleSubmit;
+ editable.focus();
});
};
@@ -651,6 +662,7 @@ export const textWysiwyg = ({
event.preventDefault();
app.handleCanvasPanUsingWheelOrSpaceDrag(event);
}
+
temporarilyDisableSubmit();
return;
}
@@ -658,15 +670,20 @@ export const textWysiwyg = ({
const isPropertiesTrigger =
target instanceof HTMLElement &&
target.classList.contains("properties-trigger");
+ const isPropertiesContent =
+ (target instanceof HTMLElement || target instanceof SVGElement) &&
+ !!(target as Element).closest(".properties-content");
if (
((event.target instanceof HTMLElement ||
event.target instanceof SVGElement) &&
- event.target.closest(
+ (event.target.closest(
`.${CLASSES.SHAPE_ACTIONS_MENU}, .${CLASSES.ZOOM_ACTIONS}`,
- ) &&
+ ) ||
+ event.target.closest(".compact-shape-actions-island")) &&
!isWritableElement(event.target)) ||
- isPropertiesTrigger
+ isPropertiesTrigger ||
+ isPropertiesContent
) {
temporarilyDisableSubmit();
} else if (