## Description
- [x] name category with Properties & attributes for clarity
- [x] adapt humanizeString from prop/attribute names
- [x] add description to the combobox
- [x] Class Name > Class
- [x] add validation for custom attributes
## Steps for reproduction
1. click button
4. 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/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
## Description
rename of #3609
## New
- Native Select
## Changes
- Improved detection algorithm to include invisible elements (like
`option` or `display:none`).
- Added interceptor to handle pointer down events, preventing select
from opening.
- Enhanced element selection on canvas to support `display:none` and
option selection.
- Fixed prop types generation (previously, the value property was
broken).
- Memory props has effect on canvas only
- Recreate component on Canvas in case of defaultValue has changed
## Steps for reproduction
Add `Select` see it works
## 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
## 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
## Description
Currently when you click Enter inside the builder when focused on Rich
Text nothing happens.
Here I forward enter event into the Canvas and focus RT element before
Editing mode
ref #1359
## Steps for reproduction
Click RT node in Navigator, press Enter, edit text
<img width="820" alt="image"
src="https://user-images.githubusercontent.com/5077042/229862820-62bc3f50-1290-49e3-856e-1fab2fb50eae.png">
## Code Review
- [x] hi @TrySound , I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [x] 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
Slots have display: contents to not affect layout. So we need a way to
show correct hover and selected state. Here's added utility to traverse
all descendants and get their rects and then compute the sum of those
rects.
Label again started flickering because hovered instance and hovered
outline store changes have delay in between. Solution as before is to
provide all info with outline. Here I just passed both label and
component to get the shape for getInstanceLabel.
Removed react hook from instance hovering and refactored with instance
selectors.
Bogdan Chadkin
