diff --git a/src/visualBuilder/utils/handleIndividualFields.ts b/src/visualBuilder/utils/handleIndividualFields.ts index 06da97d1..74dee2bd 100644 --- a/src/visualBuilder/utils/handleIndividualFields.ts +++ b/src/visualBuilder/utils/handleIndividualFields.ts @@ -23,6 +23,7 @@ import { VisualBuilderPostMessageEvents } from "./types/postMessage.types"; import { updateFocussedState } from "./updateFocussedState"; import { FieldDataType } from "./types/index.types"; import { getMultilinePlaintext } from "./getMultilinePlaintext"; +import { addFocusOverlay } from "../generators/generateOverlay"; /** * It handles all the fields based on their data type and its "multiple" property. @@ -184,6 +185,23 @@ export async function handleIndividualFields( } else if (elementComputedDisplay === "inline") { // if the editable field is inline const onInlineElementInput = throttle(() => { + const overlayWrapper = visualBuilderContainer.querySelector( + ".visual-builder__overlay__wrapper" + ) as HTMLDivElement; + const previousSelectedEditableDOM = + VisualBuilder.VisualBuilderGlobalState.value + .previousSelectedEditableDOM; + if(!previousSelectedEditableDOM){ + return + } + addFocusOverlay(previousSelectedEditableDOM, overlayWrapper); + }, 200); + actualEditableField.addEventListener( + "input", + onInlineElementInput + ); + + const updateFocussedStateOnInput = debounce(() => { const overlayWrapper = visualBuilderContainer.querySelector( ".visual-builder__overlay__wrapper" ) as HTMLDivElement; @@ -197,10 +215,10 @@ export async function handleIndividualFields( resizeObserver, focusedToolbar, }); - }, 200); + }, 800); actualEditableField.addEventListener( "input", - onInlineElementInput + updateFocussedStateOnInput ); }