feat: add hint around text editing (#3708)

src/components/HelpDialog.tsx

@@ -158,6 +158,13 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                 />
                 <Shortcut label={t("toolBar.text")} shortcuts={["T", "8"]} />
                 <Shortcut
+                  label={t("helpDialog.editSelectedShape")}
+                  shortcuts={[
+                    getShortcutKey("Enter"),
+                    t("helpDialog.doubleClick"),
+                  ]}
+                />
+                <Shortcut
                   label={t("helpDialog.textNewLine")}
                   shortcuts={[
                     getShortcutKey("Enter"),

src/components/HintViewer.tsx

@@ -5,7 +5,7 @@ import { getSelectedElements } from "../scene";
 
 import "./HintViewer.scss";
 import { AppState } from "../types";
-import { isLinearElement } from "../element/typeChecks";
+import { isLinearElement, isTextElement } from "../element/typeChecks";
 import { getShortcutKey } from "../utils";
 
 interface Hint {
@@ -57,6 +57,14 @@ const getHints = ({ appState, elements }: Hint) => {
     return t("hints.lineEditor_info");
   }
 
+  if (selectedElements.length === 1 && isTextElement(selectedElements[0])) {
+    return t("hints.text_selected");
+  }
+
+  if (appState.editingElement && isTextElement(appState.editingElement)) {
+    return t("hints.text_editing");
+  }
+
   return null;
 };
 

src/locales/en.json

@@ -180,6 +180,8 @@
     "linearElement": "Click to start multiple points, drag for single line",
     "freeDraw": "Click and drag, release when you're finished",
     "text": "Tip: you can also add text by double-clicking anywhere with the selection tool",
+    "text_selected": "Double-click or press ENTER to edit text",
+    "text_editing": "Press Escape or CtrlOrCmd+ENTER to finish editing",
     "linearElementMulti": "Click on last point or press Escape or Enter to finish",
     "lockAngle": "You can constrain angle by holding SHIFT",
     "resize": "You can constrain proportions by holding SHIFT while resizing,\nhold ALT to resize from the center",
@@ -236,16 +238,18 @@
     "curvedArrow": "Curved arrow",
     "curvedLine": "Curved line",
     "documentation": "Documentation",
+    "doubleClick": "double-click",
     "drag": "drag",
     "editor": "Editor",
+    "editSelectedShape": "Edit selected shape (text/arrow/line)",
     "github": "Found an issue? Submit",
     "howto": "Follow our guides",
     "or": "or",
     "preventBinding": "Prevent arrow binding",
     "shapes": "Shapes",
     "shortcuts": "Keyboard shortcuts",
-    "textFinish": "Finish editing (text)",
-    "textNewLine": "Add new line (text)",
+    "textFinish": "Finish editing (text editor)",
+    "textNewLine": "Add new line (text editor)",
     "title": "Help",
     "view": "View",
     "zoomToFit": "Zoom to fit all elements",