sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: support updating stroke color for text by typing in color picker input (#4415)

Browse Source 
* fix: support updating stroke color for text by typing in color picker input

* restore focus when clicked on same property unless its color picker input and submit text on color picker blur

* focus editor on color picker blur

* don't focus text editor when color picker is active
This commit is contained in:
Aakansha Doshi 2021-12-17 20:15:22 +05:30 committed by GitHub
parent 8b2b03347c
commit 8b5657e1ce
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 30 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/element/textWysiwyg.tsx
View File

@ -485,26 +485,45 @@ export const textWysiwyg = ({
editable.remove();
};
const bindBlurEvent = () => {
const bindBlurEvent = (event?: MouseEvent) => {
window.removeEventListener("pointerup", bindBlurEvent);
// Deferred so that the pointerdown that initiates the wysiwyg doesn't
// trigger the blur on ensuing pointerup.
// Also to handle cases such as picking a color which would trigger a blur
// in that same tick.
const target = event?.target;
const isTargetColorPicker =
target instanceof HTMLInputElement &&
target.closest(".color-picker-input") &&
isWritableElement(target);
setTimeout(() => {
editable.onblur = handleSubmit;
if (target && isTargetColorPicker) {
target.onblur = () => {
editable.focus();
};
}
// case: clicking on the same property → no change → no update → no focus
editable.focus();
if (!isTargetColorPicker) {
editable.focus();
}
});
};
// prevent blur when changing properties from the menu
const onPointerDown = (event: MouseEvent) => {
const isTargetColorPicker =
event.target instanceof HTMLInputElement &&
event.target.closest(".color-picker-input") &&
isWritableElement(event.target);
if (
(event.target instanceof HTMLElement ||
((event.target instanceof HTMLElement ||
event.target instanceof SVGElement) &&
event.target.closest(`.${CLASSES.SHAPE_ACTIONS_MENU}`) &&
!isWritableElement(event.target)
event.target.closest(`.${CLASSES.SHAPE_ACTIONS_MENU}`) &&
!isWritableElement(event.target)) ||
isTargetColorPicker
) {
editable.onblur = null;
window.addEventListener("pointerup", bindBlurEvent);
@ -517,7 +536,12 @@ export const textWysiwyg = ({
// handle updates of textElement properties of editing element
const unbindUpdate = Scene.getScene(element)!.addCallback(() => {
updateWysiwygStyle();
editable.focus();
const isColorPickerActive = !!document.activeElement?.closest(
".color-picker-input",
);
if (!isColorPickerActive) {
editable.focus();
}
});
// ---------------------------------------------------------------------------