diff --git a/desktop/plugins/public/ui-debugger/components/Tree.tsx b/desktop/plugins/public/ui-debugger/components/Tree.tsx index bcab63b0f..3097042db 100644 --- a/desktop/plugins/public/ui-debugger/components/Tree.tsx +++ b/desktop/plugins/public/ui-debugger/components/Tree.tsx @@ -8,9 +8,17 @@ */ import {FrameworkEvent, FrameworkEventType, Id, UINode} from '../types'; -import React, {Ref, RefObject, useEffect, useMemo, useRef} from 'react'; +import React, { + ReactNode, + Ref, + RefObject, + useEffect, + useMemo, + useRef, +} from 'react'; import { Atom, + getFlipperLib, HighlightManager, HighlightProvider, styled, @@ -109,8 +117,8 @@ export function Tree2({ text={searchTerm} highlightColor={theme.searchHighlightBackground.yellow}> @@ -407,18 +415,44 @@ const renderDepthOffset = 8; const ContextMenu: React.FC<{ nodes: Map; - hoveredNode?: Id; - focusedNode?: Id; + hoveredNodeId?: Id; + focusedNodeId?: Id; onFocusNode: (id?: Id) => void; onContextMenuOpen: (open: boolean) => void; }> = ({ nodes, - hoveredNode, + hoveredNodeId, children, - focusedNode, + focusedNodeId, onFocusNode, onContextMenuOpen, }) => { + const copyItems: ReactNode[] = []; + const hoveredNode = nodes.get(hoveredNodeId ?? Number.MAX_SAFE_INTEGER); + if (hoveredNode) { + copyItems.push(); + copyItems.push( + { + getFlipperLib().writeTextToClipboard(hoveredNode.name); + }} + />, + ); + + copyItems.push( + Object.entries(hoveredNode.inlineAttributes).map(([key, value]) => ( + { + getFlipperLib().writeTextToClipboard(value); + }} + /> + )), + ); + } return ( { @@ -426,17 +460,17 @@ const ContextMenu: React.FC<{ }} overlay={() => ( - {hoveredNode != null && focusedNode !== hoveredNode && ( + {hoveredNode != null && focusedNodeId !== hoveredNodeId && ( { - onFocusNode(hoveredNode); + onFocusNode(hoveredNodeId); }} /> )} - {focusedNode && ( + {focusedNodeId && ( )} + {copyItems} )} trigger={['contextMenu']}>