@remotion/studio: Preselect filename stem in rename dialog

packages/studio/src/components/NewComposition/RenameComposition.tsx

@@ -1,6 +1,13 @@
 import type {RecastCodemod} from '@remotion/studio-shared';
 import type {ChangeEventHandler} from 'react';
-import React, {useCallback, useContext, useMemo, useState} from 'react';
+import React, {
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
 import {Internals} from 'remotion';
 import {validateCompositionName} from '../../helpers/validate-new-comp-data';
 import {Spacing} from '../layout';
@@ -37,6 +44,13 @@ const RenameCompositionLoaded: React.FC<{}> = () => {
 	const [newId, setName] = useState(() => {
 		return resolved.result.id;
 	});
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	useEffect(() => {
+		const input = inputRef.current;
+		if (!input) return;
+		input.select();
+	}, []);
 
 	const onNameChange: ChangeEventHandler<HTMLInputElement> = useCallback(
 		(e) => {
@@ -74,6 +88,7 @@ const RenameCompositionLoaded: React.FC<{}> = () => {
 						<div style={rightRow}>
 							<div>
 								<RemotionInput
+									ref={inputRef}
 									value={newId}
 									onChange={onNameChange}
 									type="text"

packages/studio/src/components/NewComposition/RenameFolder.tsx

@@ -1,6 +1,13 @@
 import type {RecastCodemod} from '@remotion/studio-shared';
 import type {ChangeEventHandler} from 'react';
-import React, {useCallback, useContext, useMemo, useState} from 'react';
+import React, {
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
 import {Internals} from 'remotion';
 import {getFolderId} from '../../helpers/get-folder-id';
 import {validateFolderRename} from '../../helpers/validate-folder-rename';
@@ -28,6 +35,13 @@ export const RenameFolder: React.FC<{
 }> = ({folderName, parentName, stack}) => {
 	const {folders} = useContext(Internals.CompositionManager);
 	const [newName, setName] = useState(folderName);
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	useEffect(() => {
+		const input = inputRef.current;
+		if (!input) return;
+		input.select();
+	}, []);
 
 	const onNameChange: ChangeEventHandler<HTMLInputElement> = useCallback(
 		(e) => {
@@ -70,6 +84,7 @@ export const RenameFolder: React.FC<{
 						<div style={rightRow}>
 							<div>
 								<RemotionInput
+									ref={inputRef}
 									value={newName}
 									onChange={onNameChange}
 									type="text"

packages/studio/src/components/NewComposition/RenameStaticFile.tsx

@@ -1,5 +1,12 @@
 import type {ChangeEventHandler} from 'react';
-import React, {useCallback, useContext, useMemo, useState} from 'react';
+import React, {
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
 import {Internals} from 'remotion';
 import {renameStaticFile} from '../../api/rename-static-file';
 import {pushUrl} from '../../helpers/url-state';
@@ -42,6 +49,16 @@ export const RenameStaticFileModal: React.FC<{
 	const staticFiles = useStaticFiles();
 	const [newName, setNewName] = useState(() => getBaseName(relativePath));
 	const [submitting, setSubmitting] = useState(false);
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	useEffect(() => {
+		const input = inputRef.current;
+		if (!input) return;
+		const dotIndex = newName.lastIndexOf('.');
+		const stemEnd = dotIndex === -1 ? newName.length : dotIndex;
+		input.setSelectionRange(0, stemEnd);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
 
 	const parent = useMemo(() => getParent(relativePath), [relativePath]);
 	const newRelativePath = useMemo(() => {
@@ -141,6 +158,7 @@ export const RenameStaticFileModal: React.FC<{
 						<div style={rightRow}>
 							<div>
 								<RemotionInput
+									ref={inputRef}
 									value={newName}
 									onChange={onNameChange}
 									type="text"