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