feat: Add label for name field and use input when editable in export dialog (#3286)

* feat: Add label for name field and use input when editable in export dialog

* fix

* review fix

* dnt allow to edit file name when view mode

* Update src/components/ProjectName.tsx

Co-authored-by: David Luzar <luzar.david@gmail.com>

Co-authored-by: David Luzar <luzar.david@gmail.com>

src/actions/actionExport.tsx

@@ -23,7 +23,9 @@ export const actionChangeProjectName = register({
       label={t("labels.fileTitle")}
       value={appState.name || "Unnamed"}
       onChange={(name: string) => updateData(name)}
-      isNameEditable={typeof appProps.name === "undefined"}
+      isNameEditable={
+        typeof appProps.name === "undefined" && !appState.viewModeEnabled
+      }
     />
   ),
 });

src/components/App.tsx

@@ -525,8 +525,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
         let zenModeEnabled = actionResult?.appState?.zenModeEnabled || false;
         let gridSize = actionResult?.appState?.gridSize || null;
         let theme = actionResult?.appState?.theme || "light";
-        let name = actionResult?.appState?.name || this.state.name;
-
+        let name = actionResult?.appState?.name ?? this.state.name;
         if (typeof this.props.viewModeEnabled !== "undefined") {
           viewModeEnabled = this.props.viewModeEnabled;
         }

src/components/ExportDialog.scss

@@ -31,12 +31,16 @@
   .ExportDialog__name {
     grid-column: project-name;
     margin: auto;
+    display: flex;
+    align-items: center;
 
     .TextInput {
       height: calc(1rem - 3px);
       width: 200px;
       overflow: hidden;
       text-align: center;
+      margin-left: 8px;
+      text-overflow: ellipsis;
 
       &--readonly {
         background: none;
@@ -44,6 +48,9 @@
         &:hover {
           background: none;
         }
+        width: auto;
+        max-width: 200px;
+        padding-left: 2px;
       }
     }
   }

src/components/ProjectName.tsx

@@ -1,7 +1,6 @@
 import "./TextInput.scss";
 
 import React, { Component } from "react";
-import { selectNode, removeSelection } from "../utils";
 
 type Props = {
   value: string;
@@ -10,17 +9,18 @@ type Props = {
   isNameEditable: boolean;
 };
 
-export class ProjectName extends Component<Props> {
-  private handleFocus = (event: React.FocusEvent<HTMLElement>) => {
-    selectNode(event.currentTarget);
+type State = {
+  fileName: string;
+};
+export class ProjectName extends Component<Props, State> {
+  state = {
+    fileName: this.props.value,
   };
-
-  private handleBlur = (event: React.FocusEvent<HTMLElement>) => {
-    const value = event.currentTarget.innerText.trim();
+  private handleBlur = (event: any) => {
+    const value = event.target.value;
     if (value !== this.props.value) {
       this.props.onChange(value);
     }
-    removeSelection();
   };
 
   private handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
@@ -32,39 +32,30 @@ export class ProjectName extends Component<Props> {
       event.currentTarget.blur();
     }
   };
-  private makeEditable = (editable: HTMLSpanElement | null) => {
-    if (!editable) {
-      return;
-    }
-    try {
-      editable.contentEditable = "plaintext-only";
-    } catch {
-      editable.contentEditable = "true";
-    }
-  };
 
   public render() {
-    return this.props.isNameEditable ? (
-      <span
-        suppressContentEditableWarning
-        ref={this.makeEditable}
-        data-type="wysiwyg"
-        className="TextInput"
-        role="textbox"
-        aria-label={this.props.label}
-        onBlur={this.handleBlur}
-        onKeyDown={this.handleKeyDown}
-        onFocus={this.handleFocus}
-      >
-        {this.props.value}
-      </span>
-    ) : (
-      <span
-        className="TextInput TextInput--readonly"
-        aria-label={this.props.label}
-      >
-        {this.props.value}
-      </span>
+    return (
+      <>
+        <label htmlFor="file-name">
+          {`${this.props.label}${this.props.isNameEditable ? "" : ":"}`}
+        </label>
+        {this.props.isNameEditable ? (
+          <input
+            className="TextInput"
+            onBlur={this.handleBlur}
+            onKeyDown={this.handleKeyDown}
+            id="file-name"
+            value={this.state.fileName}
+            onChange={(event) =>
+              this.setState({ fileName: event.target.value })
+            }
+          />
+        ) : (
+          <span className="TextInput TextInput--readonly" id="file-name">
+            {this.props.value}
+          </span>
+        )}
+      </>
     );
   }
 }

src/locales/en.json

@@ -61,7 +61,7 @@
     "architect": "Architect",
     "artist": "Artist",
     "cartoonist": "Cartoonist",
-    "fileTitle": "File title",
+    "fileTitle": "File name",
     "colorPicker": "Color picker",
     "canvasBackground": "Canvas background",
     "drawingCanvas": "Drawing canvas",

src/tests/excalidrawPackage.test.tsx

@@ -111,11 +111,11 @@ describe("<Excalidraw/>", () => {
       const { container } = await render(<Excalidraw />);
 
       fireEvent.click(queryByTestId(container, "export-button")!);
-      const textInput = document.querySelector(
+      const textInput: HTMLInputElement | null = document.querySelector(
         ".ExportDialog__name .TextInput",
       );
-      expect(textInput?.textContent).toContain(`${t("labels.untitled")}`);
-      expect(textInput?.hasAttribute("data-type")).toBe(true);
+      expect(textInput?.value).toContain(`${t("labels.untitled")}`);
+      expect(textInput?.nodeName).toBe("INPUT");
     });
 
     it('should set the name and not allow editing when the name prop is present"', async () => {
@@ -127,8 +127,7 @@ describe("<Excalidraw/>", () => {
         ".ExportDialog__name .TextInput--readonly",
       );
       expect(textInput?.textContent).toEqual(name);
-
-      expect(textInput?.hasAttribute("data-type")).toBe(false);
+      expect(textInput?.nodeName).toBe("SPAN");
     });
   });
 });