diff --git a/src/components/App.tsx b/src/components/App.tsx index f3ab968d..abcc04bc 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -259,6 +259,7 @@ import { getApproxMinLineWidth, getBoundTextElement, getContainerDims, + isValidTextContainer, } from "../element/textElement"; import { isHittingElementNotConsideringBoundingBox } from "../element/collision"; import { @@ -1974,7 +1975,9 @@ class App extends React.Component { ); if (selectedElements.length === 1) { - if (isLinearElement(selectedElements[0])) { + const selectedElement = selectedElements[0]; + + if (isLinearElement(selectedElement)) { if ( !this.state.editingLinearElement || this.state.editingLinearElement.elementId !== @@ -1983,14 +1986,15 @@ class App extends React.Component { this.history.resumeRecording(); this.setState({ editingLinearElement: new LinearElementEditor( - selectedElements[0], + selectedElement, this.scene, ), }); } - } else { - const selectedElement = selectedElements[0]; - + } else if ( + isTextElement(selectedElement) || + isValidTextContainer(selectedElement) + ) { this.startTextEditing({ sceneX: selectedElement.x + selectedElement.width / 2, sceneY: selectedElement.y + selectedElement.height / 2, @@ -2610,8 +2614,7 @@ class App extends React.Component { ); if (selectedElements.length === 1) { const selectedElement = selectedElements[0]; - const canBindText = hasBoundTextElement(selectedElement); - if (canBindText) { + if (hasBoundTextElement(selectedElement)) { sceneX = selectedElement.x + selectedElement.width / 2; sceneY = selectedElement.y + selectedElement.height / 2; } @@ -3913,8 +3916,7 @@ class App extends React.Component { includeBoundTextElement: true, }); - const canBindText = hasBoundTextElement(element); - if (canBindText) { + if (hasBoundTextElement(element)) { sceneX = element.x + element.width / 2; sceneY = element.y + element.height / 2; } diff --git a/src/element/textElement.ts b/src/element/textElement.ts index 893a172c..4c1dcb0f 100644 --- a/src/element/textElement.ts +++ b/src/element/textElement.ts @@ -12,6 +12,7 @@ import { MaybeTransformHandleType } from "./transformHandles"; import Scene from "../scene/Scene"; import { isTextElement } from "."; import { getMaxContainerHeight, getMaxContainerWidth } from "./newElement"; +import { isImageElement } from "./typeChecks"; export const redrawTextBoundingBox = ( textElement: ExcalidrawTextElement, @@ -490,3 +491,12 @@ export const getContainerElement = ( export const getContainerDims = (element: ExcalidrawElement) => { return { width: element.width, height: element.height }; }; + +export const isValidTextContainer = (element: ExcalidrawElement) => { + return ( + element.type === "rectangle" || + element.type === "ellipse" || + element.type === "diamond" || + isImageElement(element) + ); +}; diff --git a/src/element/textWysiwyg.test.tsx b/src/element/textWysiwyg.test.tsx index cae570be..033dff17 100644 --- a/src/element/textWysiwyg.test.tsx +++ b/src/element/textWysiwyg.test.tsx @@ -584,6 +584,17 @@ describe("textWysiwyg", () => { expect((h.elements[1] as ExcalidrawTextElement).containerId).toBe(null); }); + it("shouldn't create text element when pressing 'Enter' key on non text bindable container", async () => { + h.elements = []; + const freeDraw = UI.createElement("freedraw", { + width: 100, + height: 50, + }); + API.setSelectedElements([freeDraw]); + Keyboard.keyPress(KEYS.ENTER); + expect(h.elements.length).toBe(1); + }); + it("should'nt bind text to container when not double clicked on center", async () => { expect(h.elements.length).toBe(1); expect(h.elements[0].id).toBe(rectangle.id);