feat: use enter to edit line points & update hints (#9630)

feat: use enter to edit line points & update hints

packages/element/tests/linearElementEditor.test.tsx

@@ -256,6 +256,38 @@ describe("Test Linear Elements", () => {
     expect(h.state.editingLinearElement?.elementId).toEqual(h.elements[0].id);
   });
 
+  it("should enter line editor via enter (line)", () => {
+    createTwoPointerLinearElement("line");
+    expect(h.state.editingLinearElement?.elementId).toBeUndefined();
+
+    mouse.clickAt(midpoint[0], midpoint[1]);
+    Keyboard.keyPress(KEYS.ENTER);
+    expect(h.state.editingLinearElement?.elementId).toEqual(h.elements[0].id);
+  });
+
+  // ctrl+enter alias (to align with arrows)
+  it("should enter line editor via ctrl+enter (line)", () => {
+    createTwoPointerLinearElement("line");
+    expect(h.state.editingLinearElement?.elementId).toBeUndefined();
+
+    mouse.clickAt(midpoint[0], midpoint[1]);
+    Keyboard.withModifierKeys({ ctrl: true }, () => {
+      Keyboard.keyPress(KEYS.ENTER);
+    });
+    expect(h.state.editingLinearElement?.elementId).toEqual(h.elements[0].id);
+  });
+
+  it("should enter line editor via ctrl+enter (arrow)", () => {
+    createTwoPointerLinearElement("arrow");
+    expect(h.state.editingLinearElement?.elementId).toBeUndefined();
+
+    mouse.clickAt(midpoint[0], midpoint[1]);
+    Keyboard.withModifierKeys({ ctrl: true }, () => {
+      Keyboard.keyPress(KEYS.ENTER);
+    });
+    expect(h.state.editingLinearElement?.elementId).toEqual(h.elements[0].id);
+  });
+
   it("should enter line editor on ctrl+dblclick (simple arrow)", () => {
     createTwoPointerLinearElement("arrow");
     expect(h.state.editingLinearElement?.elementId).toBeUndefined();

packages/excalidraw/components/App.tsx

@@ -4430,12 +4430,11 @@ class App extends React.Component<AppProps, AppState> {
         const selectedElements = this.scene.getSelectedElements(this.state);
         if (selectedElements.length === 1) {
           const selectedElement = selectedElements[0];
-          if (event[KEYS.CTRL_OR_CMD]) {
+          if (event[KEYS.CTRL_OR_CMD] || isLineElement(selectedElement)) {
             if (isLinearElement(selectedElement)) {
               if (
                 !this.state.editingLinearElement ||
-                this.state.editingLinearElement.elementId !==
+                this.state.editingLinearElement.elementId !== selectedElement.id
-                  selectedElements[0].id
               ) {
                 this.store.scheduleCapture();
                 if (!isElbowArrow(selectedElement)) {

packages/excalidraw/components/HintViewer.tsx

@@ -4,6 +4,7 @@ import {
   isFlowchartNodeElement,
   isImageElement,
   isLinearElement,
+  isLineElement,
   isTextBindableContainer,
   isTextElement,
 } from "@excalidraw/element";
@@ -138,7 +139,9 @@ const getHints = ({
             ? t("hints.lineEditor_pointSelected")
             : t("hints.lineEditor_nothingSelected");
         }
-        return t("hints.lineEditor_info");
+        return isLineElement(selectedElements[0])
+          ? t("hints.lineEditor_line_info")
+          : t("hints.lineEditor_info");
       }
       if (
         !appState.newElement &&

packages/excalidraw/locales/en.json

@@ -344,6 +344,7 @@
     "resizeImage": "You can resize freely by holding SHIFT,\nhold ALT to resize from the center",
     "rotate": "You can constrain angles by holding SHIFT while rotating",
     "lineEditor_info": "Hold CtrlOrCmd and Double-click or press CtrlOrCmd + Enter to edit points",
+    "lineEditor_line_info": "Double-click or press Enter to edit points",
     "lineEditor_pointSelected": "Press Delete to remove point(s),\nCtrlOrCmd+D to duplicate, or drag to move",
     "lineEditor_nothingSelected": "Select a point to edit (hold SHIFT to select multiple),\nor hold Alt and click to add new points",
     "placeImage": "Click to place the image, or click and drag to set its size manually",