Skip to content

feat(editor): double-click rows to rename in explorer panels #49

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DavidBabinec merged 1 commit into from
Jun 12, 2026
Merged

feat(editor): double-click rows to rename in explorer panels #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Add double-click rename shortcuts
  • Loading branch information
@DavidBabinec
DavidBabinec committed Jun 12, 2026
commit 388a14d774307e015f1884377629d51fcf438d39
12 changes: 12 additions & 0 deletions src/__tests__/panels/domPanel.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -601,6 +601,18 @@ describe('DomPanel — tree keyboard navigation', () => {
expect(screen.getByRole('treeitem', { name: /hero group/i })).toBeDefined()
})

it('opens inline tree rename from a double-clicked layer row', () => {
loadContainerSite()
render(<DomPanel />)

const containerItem = screen.getByRole('treeitem', { name: /container/i })
fireEvent.doubleClick(containerItem)

expect(screen.getByRole('textbox', {
name: /rename (base\.container|container)/i,
})).toBeDefined()
})

it('keeps hidden nodes in the tree and marks them with a hidden badge', () => {
loadContainerSite()
act(() => {
Expand Down
9 changes: 9 additions & 0 deletions src/__tests__/site-explorer/siteExplorerPanel.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -920,6 +920,15 @@ describe('SiteExplorerPanel', () => {
expect(renamed).toBeUndefined()
})

it('opens inline page rename from a double-clicked site row', () => {
loadSite()
render(<SiteExplorerPanel variant="docked" />)

fireEvent.doubleClick(screen.getByRole('button', { name: /open page pricing/i }))

expect(screen.getByRole('textbox', { name: 'Rename Pricing' })).toBeDefined()
})

it('renames and deletes components from the site row context menu', () => {
loadSite()
render(<SiteExplorerPanel variant="docked" />)
Expand Down
5 changes: 5 additions & 0 deletions src/admin/pages/site/panels/DomPanel/TreeNode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -289,6 +289,11 @@ export const TreeNode = memo(function TreeNode({ nodeId, depth, editable = true
selectNode(nodeId)
if (hasChildren && !isRoot) store.toggle(nodeId)
}}
onDoubleClick={(e) => {
e.preventDefault()
e.stopPropagation()
openRename()
}}
onKeyDown={handleKeyDown}
onContextMenu={(e) => {
e.preventDefault(); e.stopPropagation()
Expand Down
10 changes: 10 additions & 0 deletions src/admin/pages/site/panels/SiteExplorerPanel/SiteExplorerTreeRows.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,11 @@ export function ExplorerFolderRow({
aria-label={folder.name}
onClick={onToggle}
onContextMenu={(event) => onContextMenu(folder, event)}
onDoubleClick={(event) => {
event.preventDefault()
event.stopPropagation()
onRename(folder)
}}
onKeyDown={(event) => {
if (event.key === 'F2') {
event.preventDefault()
Expand Down Expand Up @@ -248,6 +253,11 @@ export function ExplorerItemRow<TTarget>({
aria-current={item.active ? 'page' : undefined}
onClick={(event) => onOpen(item, event)}
onContextMenu={(event) => onContextMenu(item, event)}
onDoubleClick={(event) => {
event.preventDefault()
event.stopPropagation()
onRename(item)
}}
onKeyDown={(event) => {
if (event.key === 'F2') {
event.preventDefault()
Expand Down