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
This commit is contained in:
Ivan Starkov authored and GitHub committed 2024-11-05 16:43:15 +04:00
1 parent 47668a36db
commit 44f6b778de
1 file changed
+6 -4
@@ -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;
}