mirror of
https://github.com/webstudio-is/webstudio.git
synced 2026-10-28 07:37:36 +09:00
Ivan Starkov
4f10bc26f8
## Description Removes `div style="display:contents"` arount Radix etc Components. Below in Implementation is written why SelectedInstanceConnector was moved into standalone root level hook. In short - [x] - No issues with visually hidden components. - [x] - Allows us to not use refs for the builder support. (Now our components can be without refs) - [ ] - cc @TrySound ContentEditable could also use getAllElementsBoundingBox from domUtils to get element ref this will allow to remove useRef from WebstudioDevComponent Changes from previous behavior: - Now on preview elements are not selected (now is like in webflow). - On changing marign etc we do not hide outline as before ## Implementation: having `instanceSelector` we can - Find all elements with attribute `data-ws-selector` which ends with `instanceSelector` - Then find "root/parent" elements of found elements. _(We can find few subtrees)_ - Then use that elements instead of wrapper element. This works fine with tree hovering and selections. This allows us to not use `refs` inside our WebstudioDevComponent at all. ### Below is why SelectedInstanceConnector was rewritten The issue arises when such element is duplicated by radix into VisuallyHidden element. There is no way to detect now inside `WebstudioComponentDev` does current Component is inside VisuallyHidden (We have no reference element to detect that.) So current approach makes any additional changes useless. I'm going to close this. And leave just for example ## Steps for reproduction 1. click button 2. expect xyz ## 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-builder/blob/main/apps/builder/docs/test-cases.md) document - [ ] added tests - [ ] if any new env variables are added, added them to `.env.example` and the `builder/env-check.js` if mandatory
29 lines
1.3 KiB
TypeScript
29 lines
1.3 KiB
TypeScript
/**
|
|
* Radix's VisuallyHiddenPrimitive.Root https://github.com/radix-ui/primitives/blob/main/packages/react/visually-hidden/src/VisuallyHidden.tsx
|
|
* component makes content from hidden elements accessible to screen readers.
|
|
* react-aria VisuallyHidden https://github.com/adobe/react-spectrum/blob/e4bc3269fa41aa096700445c6bfa9c8620545e6a/packages/%40react-aria/visually-hidden/src/VisuallyHidden.tsx#L32-L43
|
|
* The problem we're addressing is that the Radix and similar frameworks reuse the same Content children
|
|
* for VisuallyHiddenPrimitive.Root within the Tooltip and similar components.
|
|
* Using the same Content children, however, leads to duplicated React elements, breaking our 'isSelected' logic.
|
|
* To prevent this, we check if an instance is a descendant of VisuallyHiddenPrimitive.Root, and if so,
|
|
* we avoid rendering it.
|
|
*/
|
|
export const getIsVisuallyHidden = (currentElement: HTMLElement) => {
|
|
for (
|
|
let element: HTMLElement | null = currentElement;
|
|
element !== null;
|
|
element = element.parentElement
|
|
) {
|
|
if (
|
|
element.style.overflow === "hidden" &&
|
|
element.style.clip === "rect(0px, 0px, 0px, 0px)" &&
|
|
element.style.position === "absolute" &&
|
|
element.style.width === "1px" &&
|
|
element.style.height === "1px"
|
|
) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
};
|