From 44f6b778deef24a0ef14fa650dae3a2f55088384 Mon Sep 17 00:00:00 2001
From: Ivan Starkov <istarkov@gmail.com>
Date: Tue, 5 Nov 2024 16:43:15 +0400
Subject: [PATCH] fix: Show hover outlines during text editing (#4368)

## Description

fix for

When you click into an instance to edit it, such as a paragraph, the
hover outline no longer shows when you hover over other instances. Only
in the navigator does the hover show.

Hover outlines now display on all elements except those that have been
edited.

https://github.com/webstudio-is/webstudio/issues/4095

## Steps for reproduction

Start editing the text, hover outlines are now shown for all elements
except edited.

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
---
 .../canvas-tools/outline/hovered-instance-outline.tsx  | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/builder/app/builder/features/workspace/canvas-tools/outline/hovered-instance-outline.tsx b/apps/builder/app/builder/features/workspace/canvas-tools/outline/hovered-instance-outline.tsx
index 3f82235203..9387e2ccd9 100644
--- a/apps/builder/app/builder/features/workspace/canvas-tools/outline/hovered-instance-outline.tsx
+++ b/apps/builder/app/builder/features/workspace/canvas-tools/outline/hovered-instance-outline.tsx
@@ -10,6 +10,7 @@ import { Label } from "./label";
 import { applyScale } from "./apply-scale";
 import { $scale } from "~/builder/shared/nano-states";
 import { findClosestSlot } from "~/shared/instance-utils";
+import deepEqual from "fast-deep-equal";
 
 export const HoveredInstanceOutline = () => {
   const instances = useStore($instances);
@@ -17,12 +18,13 @@ export const HoveredInstanceOutline = () => {
   const outline = useStore($hoveredInstanceOutlineAndInstance);
   const scale = useStore($scale);
   const textEditingInstanceSelector = useStore($textEditingInstanceSelector);
-  const isEditingText = textEditingInstanceSelector !== undefined;
+
+  if (outline === undefined || hoveredInstanceSelector === undefined) {
+    return;
+  }
 
   if (
-    outline === undefined ||
-    isEditingText ||
-    hoveredInstanceSelector === undefined
+    deepEqual(hoveredInstanceSelector, textEditingInstanceSelector?.selector)
   ) {
     return;
   }