feat: add undo/redo in metadata key-pair inspector

Author: julien-moreau

editor/src/editor/layout/inspector/camera/editor.tsx

@@ -9,8 +9,6 @@ import { IEditorInspectorImplementationProps } from "../inspector";
 import { EditorInspectorNumberField } from "../fields/number";
 import { EditorInspectorSectionField } from "../fields/section";
 
-import { CustomMetadataInspector } from "../metadata/custom-metadata";
-
 import { FocalLengthInspector } from "./utils/focal";
 
 export class EditorCameraInspector extends Component<IEditorInspectorImplementationProps<EditorCamera>> {
@@ -56,8 +54,6 @@ export class EditorCameraInspector extends Component<IEditorInspectorImplementat
 						Configure in preferences...
 					</Button>
 				</EditorInspectorSectionField>
-
-				<CustomMetadataInspector object={this.props.object} />
 			</>
 		);
 	}

editor/src/editor/layout/inspector/metadata/custom-metadata.tsx

@@ -4,8 +4,10 @@ import { IoAddSharp, IoCloseOutline } from "react-icons/io5";
 
 import { Node } from "babylonjs";
 
-import { showAlert, showPrompt } from "../../../../ui/dialog";
 import { Button } from "../../../../ui/shadcn/ui/button";
+import { showAlert, showPrompt } from "../../../../ui/dialog";
+
+import { registerUndoRedo } from "../../../../tools/undoredo";
 
 import { EditorInspectorStringField } from "../fields/string";
 import { EditorInspectorSectionField } from "../fields/section";
@@ -20,50 +22,32 @@ export interface ICustomMetadataInspectorProps {
  */
 export class CustomMetadataInspector extends Component<ICustomMetadataInspectorProps> {
 	public render(): ReactNode {
-		
 		const keys = Object.keys(this.props.object.metadata?.customMetadata ?? {});
 
 		return (
 			<EditorInspectorSectionField title="Metadata">
-				{keys.length === 0 && (
-					<div className="text-center text-white/50 py-2">
-						No metadata found. Click "Add" to create a new key-value pair.
-					</div>
-				)}
+				{!keys.length && <div className="text-center text-white/50 py-2">No metadata found. Click "Add" to create a new key-value pair.</div>}
 
 				{keys.map((key, index) => (
-					<div key={index} className="flex items-center gap-2">
+					<div key={index} className="flex items-center">
 						<div className="w-full">
-							<EditorInspectorStringField
-								label={key}
-								object={this.props.object.metadata?.customMetadata ?? {}}
-								property={key}
-								onChange={() => this.forceUpdate()}
-							/>
+							<EditorInspectorStringField label={key} object={this.props.object.metadata?.customMetadata ?? {}} property={key} onChange={() => this.forceUpdate()} />
 						</div>
 
-						<Button
-							variant="secondary"
-							className="p-2"
-							onClick={() => this._handleRemoveKey(key)}
-						>
+						<Button variant="ghost" className="p-2" onClick={() => this._handleRemoveKey(key)}>
 							<IoCloseOutline className="w-4 h-4" />
 						</Button>
 					</div>
 				))}
 
-				<Button
-					variant="secondary"
-					className="flex items-center gap-2 w-full"
-					onClick={() => this._handleAddKey()}
-				>
+				<Button variant="secondary" className="flex items-center gap-2 w-full" onClick={() => this._handleAddKey()}>
 					<IoAddSharp className="w-6 h-6" /> Add
 				</Button>
 			</EditorInspectorSectionField>
 		);
 	}
 
-	private async _handleAddKey(): Promise<void> {
+	private async _handleAddKey(): Promise<unknown> {
 		const key = await showPrompt("Add Custom Metadata", "Enter the key name for the new metadata:");
 
 		if (!key) {
@@ -72,28 +56,23 @@ export class CustomMetadataInspector extends Component<ICustomMetadataInspectorP
 
 		// Validate key name
 		if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(key)) {
-			showAlert("Invalid Key Name", "Key must start with a letter or underscore and contain only letters, numbers, and underscores.");
-			return;
+			return showAlert("Invalid Key Name", "Key must start with a letter or underscore and contain only letters, numbers, and underscores.");
 		}
 
 		// Ensure metadata exists
-		if (!this.props.object.metadata) {
-			this.props.object.metadata = {};
-		}
-
-		// Ensure customMetadata exists
-		if (!this.props.object.metadata.customMetadata) {
-			this.props.object.metadata.customMetadata = {};
-		}
+		this.props.object.metadata ??= {};
+		this.props.object.metadata.customMetadata ??= {};
 
 		// Check if key already exists
 		if (key in this.props.object.metadata.customMetadata) {
-			showAlert("Duplicate Key", `Key "${key}" already exists.`);
-			return;
+			return showAlert("Duplicate Key", `Key "${key}" already exists.`);
 		}
 
-		// Add new key with empty string value
-		this.props.object.metadata.customMetadata[key] = "";
+		registerUndoRedo({
+			executeRedo: true,
+			undo: () => delete this.props.object.metadata.customMetadata[key],
+			redo: () => (this.props.object.metadata.customMetadata[key] = ""),
+		});
 
 		this.forceUpdate();
 	}
@@ -103,12 +82,21 @@ export class CustomMetadataInspector extends Component<ICustomMetadataInspectorP
 			return;
 		}
 
-		delete this.props.object.metadata.customMetadata[key];
-
-		// Clean up empty customMetadata object
-		if (Object.keys(this.props.object.metadata.customMetadata).length === 0) {
-			delete this.props.object.metadata.customMetadata;
-		}
+		const oldValue = this.props.object.metadata.customMetadata[key];
+
+		registerUndoRedo({
+			executeRedo: true,
+			undo: () => {
+				this.props.object.metadata.customMetadata ??= {};
+				this.props.object.metadata.customMetadata[key] = oldValue;
+			},
+			redo: () => {
+				delete this.props.object.metadata.customMetadata[key];
+				if (Object.keys(this.props.object.metadata.customMetadata).length === 0) {
+					delete this.props.object.metadata.customMetadata;
+				}
+			},
+		});
 
 		this.forceUpdate();
 	}