Add onCancel callback to textWysiwyg for cleanup (#555)

This commit is contained in:
Loris 2020-01-25 18:45:23 +01:00 committed by Christopher Chedeau
parent 829e827dcf
commit 413c387c7c
2 changed files with 28 additions and 10 deletions

View File

@ -8,6 +8,7 @@ type TextWysiwygParams = {
strokeColor: string;
font: string;
onSubmit: (text: string) => void;
onCancel: () => void;
};
// When WYSIWYG text ends with white spaces, the text gets vertically misaligned
@ -23,6 +24,7 @@ export function textWysiwyg({
strokeColor,
font,
onSubmit,
onCancel,
}: TextWysiwygParams) {
// Using contenteditable here as it has dynamic width.
// But this solution has an issue — it allows to paste
@ -84,6 +86,8 @@ export function textWysiwyg({
function handleSubmit() {
if (editable.innerText) {
onSubmit(trimText(editable.innerText));
} else {
onCancel();
}
cleanup();
}

View File

@ -875,6 +875,14 @@ export class App extends React.Component<any, AppState> {
}
}
const resetSelection = () => {
this.setState({
draggingElement: null,
editingElement: null,
elementType: "selection",
});
};
textWysiwyg({
initText: "",
x: textX,
@ -895,11 +903,10 @@ export class App extends React.Component<any, AppState> {
},
];
}
this.setState({
draggingElement: null,
editingElement: null,
elementType: "selection",
});
resetSelection();
},
onCancel: () => {
resetSelection();
},
});
this.setState({
@ -1271,6 +1278,14 @@ export class App extends React.Component<any, AppState> {
}
}
const resetSelection = () => {
this.setState({
draggingElement: null,
editingElement: null,
elementType: "selection",
});
};
textWysiwyg({
initText: element.text,
x: textX,
@ -1289,11 +1304,10 @@ export class App extends React.Component<any, AppState> {
},
];
}
this.setState({
draggingElement: null,
editingElement: null,
elementType: "selection",
});
resetSelection();
},
onCancel: () => {
resetSelection();
},
});
}}