Add tests, update changelog and minor fixes

src/actions/actionExport.tsx

@@ -23,7 +23,7 @@ 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"}
     />
   ),
 });

src/components/App.tsx

@@ -905,7 +905,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       });
     }
 
-    if (prevProps.name !== this.props.name && this.props.name) {
+    if (this.props.name && prevProps.name !== this.props.name) {
       this.setState({
         name: this.props.name,
       });

src/components/ExportDialog.tsx

@@ -257,6 +257,7 @@ export const ExportDialog = ({
         onClick={() => {
           setModalIsShown(true);
         }}
+        data-testid="export-button"
         icon={exportFile}
         type="button"
         aria-label={t("buttons.export")}

src/components/ProjectName.tsx

@@ -45,10 +45,6 @@ export class ProjectName extends Component<Props> {
 
   public render() {
     return this.props.isNameEditable ? (
-      <span className="TextInput" aria-label={this.props.label}>
-        {this.props.value}
-      </span>
-    ) : (
       <span
         suppressContentEditableWarning
         ref={this.makeEditable}
@@ -62,6 +58,10 @@ export class ProjectName extends Component<Props> {
       >
         {this.props.value}
       </span>
+    ) : (
+      <span className="TextInput" aria-label={this.props.label}>
+        {this.props.value}
+      </span>
     );
   }
 }

src/components/ToolButton.tsx

@@ -58,6 +58,7 @@ export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
             "ToolIcon--selected": props.selected,
           },
         )}
+        data-testid={props["data-testid"]}
         hidden={props.hidden}
         title={props.title}
         aria-label={props["aria-label"]}

src/packages/excalidraw/CHANGELOG.md

@@ -18,6 +18,7 @@ Please add the latest change on the top under the correct section.
 
 ### Features
 
+- Add `name` prop which allows changing the export name. When this prop is passed, the name is fully controlled by host and will become unediable in the export modal [#3273](https://github.com/excalidraw/excalidraw/pull/3273).
 - Export API to export the drawing to canvas, svg and blob [#3258](https://github.com/excalidraw/excalidraw/pull/3258). For more info you can check the [readme](https://github.com/excalidraw/excalidraw/tree/master/src/packages/excalidraw/README.md#user-content-export-utils)
 - Add a `theme` prop to indicate Excalidraw's theme. [#3228](https://github.com/excalidraw/excalidraw/pull/3228). When this prop is passed, the theme is fully controlled by host app.
 - Support `libraryReturnUrl` prop to indicate what URL to install libraries to [#3227](https://github.com/excalidraw/excalidraw/pull/3227).

src/tests/excalidrawPackage.test.tsx

@@ -3,6 +3,7 @@ import { fireEvent, GlobalTestState, render } from "./test-utils";
 import Excalidraw from "../packages/excalidraw/index";
 import { queryByText, queryByTestId } from "@testing-library/react";
 import { GRID_SIZE } from "../constants";
+import { t } from "../i18n";
 
 const { h } = window;
 
@@ -104,4 +105,27 @@ describe("<Excalidraw/>", () => {
       expect(queryByTestId(container, "toggle-dark-mode")).toBe(null);
     });
   });
+
+  describe("Test name prop", () => {
+    it('should allow editing the export name when the name prop is "undefined"', async () => {
+      const { container } = await render(<Excalidraw />);
+      expect(h.state.name).toContain(`${t("labels.untitled")}`);
+
+      fireEvent.click(queryByTestId(container, "export-button")!);
+
+      const name = document.querySelector(".ExportDialog__name span");
+
+      expect(name?.hasAttribute("data-type")).toBe(true);
+    });
+
+    it('should not allow editing the export name when the name prop is not "undefined"', async () => {
+      const { container } = await render(<Excalidraw name="test" />);
+
+      fireEvent.click(queryByTestId(container, "export-button")!);
+
+      const name = document.querySelector(".ExportDialog__name span");
+
+      expect(name?.hasAttribute("data-type")).toBe(false);
+    });
+  });
 });