diff --git a/src/appState.ts b/src/appState.ts index c7fb8a62d..36eb4a475 100644 --- a/src/appState.ts +++ b/src/appState.ts @@ -7,6 +7,7 @@ export function getDefaultAppState(): AppState { return { draggingElement: null, resizingElement: null, + editingElement: null, elementType: "selection", exportBackground: true, currentItemStrokeColor: "#000000", diff --git a/src/index.tsx b/src/index.tsx index 7b9eb061c..4d117351a 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -344,12 +344,18 @@ export class App extends React.Component<{}, AppState> { }; private renderSelectedShapeActions(elements: readonly ExcalidrawElement[]) { - const { elementType } = this.state; + const { elementType, editingElement } = this.state; const selectedElements = elements.filter(el => el.isSelected); const hasSelectedElements = selectedElements.length > 0; const isTextToolSelected = elementType === "text"; const isShapeToolSelected = elementType !== "selection"; - if (!(hasSelectedElements || isShapeToolSelected || isTextToolSelected)) { + const isEditingText = editingElement && editingElement.type === "text"; + if ( + !hasSelectedElements && + !isShapeToolSelected && + !isTextToolSelected && + !isEditingText + ) { return null; } @@ -403,7 +409,7 @@ export class App extends React.Component<{}, AppState> { )} - {(hasText(elements) || isTextToolSelected) && ( + {(hasText(elements) || isTextToolSelected || isEditingText) && ( <> {this.actionManager.renderAction( "changeFontSize", @@ -800,11 +806,15 @@ export class App extends React.Component<{}, AppState> { elements = [...elements, { ...element, isSelected: true }]; this.setState({ draggingElement: null, + editingElement: null, elementType: "selection" }); } }); - this.setState({ elementType: "selection" }); + this.setState({ + elementType: "selection", + editingElement: element + }); return; } @@ -1095,6 +1105,8 @@ export class App extends React.Component<{}, AppState> { 100 ) as ExcalidrawTextElement; + this.setState({ editingElement: element }); + let initText = ""; let textX = e.clientX; let textY = e.clientY; @@ -1149,6 +1161,7 @@ export class App extends React.Component<{}, AppState> { elements = [...elements, { ...element, isSelected: true }]; this.setState({ draggingElement: null, + editingElement: null, elementType: "selection" }); } diff --git a/src/types.ts b/src/types.ts index 02a0c0e29..e9e3558cf 100644 --- a/src/types.ts +++ b/src/types.ts @@ -3,6 +3,9 @@ import { ExcalidrawElement } from "./element/types"; export type AppState = { draggingElement: ExcalidrawElement | null; resizingElement: ExcalidrawElement | null; + // element being edited, but not necessarily added to elements array yet + // (e.g. text element when typing into the input) + editingElement: ExcalidrawElement | null; elementType: string; exportBackground: boolean; currentItemStrokeColor: string;