1- import { Editable , useEditableContext } from "@ark-ui/react" ;
1+ import { Tooltip } from "#components/tooltip" ;
2+ import { css , cx } from "#styled-system/css" ;
3+ import { styled } from "#styled-system/jsx" ;
4+ import { Editable , Portal , useEditableContext } from "@ark-ui/react" ;
25import { useSelector } from "@xstate/store/react" ;
36import { TrashIcon , Undo2 } from "lucide-react" ;
47import { useRef , useState } from "react" ;
5- import { css } from "#styled-system/css" ;
6- import { styled } from "#styled-system/jsx" ;
7- import { Tooltip } from "#components/tooltip" ;
8+ import { useDevtoolsContext } from "./devtools-context" ;
89import { HighlightMatch } from "./highlight-match" ;
910import { hypenateProperty } from "./lib/hyphenate-proprety" ;
1011import { symbols } from "./lib/symbols" ;
1112import { store } from "./store" ;
12- import { useDevtoolsContext } from "./devtools-context" ;
1313
1414export interface EditableValueProps {
1515index :number ;
@@ -109,9 +109,19 @@ export const EditableValue = (props: EditableValueProps) => {
109109}
110110} ;
111111
112+ const parentRef = useRef < HTMLDivElement > ( null ) ;
113+
112114return (
113115< Editable . Root
114- className = { css ( { display :"flex" , alignItems :"center" } ) }
116+ ref = { parentRef }
117+ className = { cx (
118+ "group" ,
119+ css ( {
120+ display :"flex" ,
121+ justifyContent :"flex-start" ,
122+ alignItems :"center" ,
123+ } ) ,
124+ ) }
115125key = { key }
116126autoResize
117127selectOnFocus
@@ -122,7 +132,7 @@ export const EditableValue = (props: EditableValueProps) => {
122132overrideValue ( update . value ) ;
123133} }
124134>
125- < Editable . Area ref = { ref } >
135+ < Editable . Area ref = { ref } className = { css ( { display : "flex" } ) } >
126136< Editable . Input
127137className = { css ( {
128138margin :"0 -2px -1px!" ,
@@ -141,7 +151,7 @@ export const EditableValue = (props: EditableValueProps) => {
141151onBlur = { ( ) => setKey ( ( key ) => key + 1 ) }
142152aria-label = "Property value"
143153/>
144- < EditablePreview />
154+ < EditablePreview parentRef = { parentRef } />
145155</ Editable . Area >
146156{ isRemovable && (
147157< Tooltip
@@ -188,12 +198,15 @@ export const EditableValue = (props: EditableValueProps) => {
188198/>
189199</ Tooltip >
190200) }
191- < span > ;</ span >
192201</ Editable . Root >
193202) ;
194203} ;
195204
196- const EditablePreview = ( ) => {
205+ const EditablePreview = ( {
206+ parentRef,
207+ } :{
208+ parentRef :React . RefObject < HTMLSpanElement > ;
209+ } ) => {
197210const ctx = useEditableContext ( ) ;
198211const filter = useSelector ( store , ( s ) => s . context . filter ) ;
199212
@@ -202,6 +215,12 @@ const EditablePreview = () => {
202215< HighlightMatch highlight = { filter } >
203216{ ctx . previewProps . children }
204217</ HighlightMatch >
218+ < Portal container = { parentRef } >
219+ < span className = { css ( { display :ctx . isEditing ?"contents" :"none" } ) } >
220+ ;
221+ </ span >
222+ </ Portal >
223+ { ctx . isEditing ?null :< span > ;</ span > }
205224</ span >
206225) ;
207226} ;