Proper fix for https://github.com/webstudio-is/webstudio/pull/5211
Now props meta are available in component generator and can be used to
figure if prop is defined by component or comes from html attributes.
Added same logic in canvas and component generator.
Also got rid from no longer necessary registeredComponentPropsMetas
store since all props are described by component meta.
We had a few issues
- instance selector was resynced even though computed from awareness
- when click in navigator both click and focus events do selection
So fixed by reducing 6 or more reselections when click on instances in
navigator.
- removed non-unit values from browser styles
- merged browser styles and unit sizes into single store; both objects
used in cize conversion
- use typed cssom to parse units instead of custom parser (sorry
firefox)
We are moving away from binding system to variables and instead gonna
have one global variable.
Here moved system values into separate store coupled to pages instead of
variables.
Also fixed suggestions in address bar, probably broke while design
system refactorings.
Testing
- submit form with one named input
- check system value is rendered
- check system value can be inspected
Here added one more description file for components `*.template.tsx`.
It is decoupled from component meta to fix the issue with some templates
like Sheet being treated as components though we don't have actual
components with this name.
Another reason is have it separately to not include builder specific
code and dependencies into CLI and published websites. Template package
is defined as optional in peer dependencies meta.
In this PR migrated only Button and List as examples. There is still not
support for data sources and styles.
Added support for text placeholders in children
## Description
ref #4595
Search is working
<img width="246" alt="image"
src="https://github.com/user-attachments/assets/5dc850e4-6a36-4996-9aaa-f051ac7e977f"
/>
Arrow keys, enter, mouse click is working.
https://p-15889dd9-ed47-46db-9411-fa18c1efb2fe-dot-edit.development.webstudio.is/
- [x] - Enter and click
- [ ] - Repeat > N then close menu (later)
- [x] - In case of select item clear cmd `/blabla`
- [x] - Put cursor inside 1st editable block of the new instance
- [x] - Should work only inside editable content
## 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:
0000)
- [ ] 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
Same as #4505 but supports just created links too
ref #3994
## 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:
0000)
- [ ] 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
Another layer in sync engine is composable storage.
Now you can specify a chain of storages. Each can listen transactions to
update some state. Though subscription for state is invoked one by one
until non-undefined is provided.
See tests to understand API.
Here I also migrated our server data loading and synchronization to this
storage api.
## Description
ref #3994
## 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:
0000)
- [ ] 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
ref #3994
Outline for content mode Editable Childs
https://p-64ece825-f290-4de0-8dac-223c8e88c258-dot-editable-block.development.webstudio.is/?mode=content
Like in notion if eny keyboard event is occured inside outlined block,
we hide it
Also + hovers are only on canvas
## 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:
0000)
- [ ] 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
---------
Co-authored-by: Oleg Isonen <oleg008@gmail.com>
Here added support for syncing nanostores atoms
as sync objects. Had to add some tracking of update source though it
seems like a more solid solution than previous variant.
Need to test performance caz stores updates are now synchronous and not
debounced anymore.
Sync client is getting some shape. Here I abstracted all immerhin
related api into SyncObject and added SyncObjectPool to combine multiple
objects. Objects are identified by unique name.
Here added SyncClient class which will be base for our new sync engine.
For now it can synchronize one immerhin store.
Event emitter is shared with canvas directly to avoid indirection of
iframe postMessage api.
This also partially fixes the issue with messages pollution and conflict
with react devtools.
## Description
Part 1 Of #3994
This PR introduces a feature flag, `contentEditableMode`, that hides the
`EditorButton` in the top bar. This button is now intended for **testing
purposes only** and will **never be used in production**.
<img width="154" alt="image"
src="https://github.com/user-attachments/assets/f4a37334-71b9-43d8-b4a8-afd518fc6833">
## Most Notable Things In The Content Edit Mode
1. **Notion-like Editing**: Elements are editable with a single click.
2. **Restricted Element Editing**: Binded elements, such as expressions,
are non-editable.
3. **Selective Property Editing**: Only properties for `img` and `link`
elements are editable.
Additional changes:
- **Copy/Paste and Drag/Drop**: Disabled to maintain a controlled
testing environment.
Refer to the issue `Part 1` for further details on upcoming changes and
planned enhancements.
## Steps for reproduction
Play play
## 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
Ref https://github.com/webstudio-is/webstudio/issues/4364
We need to implement universal linking of current user view. For this I
added "awareness" state which reflects terminology from collaboration
libraries.
First migrated selected page id and fixed usages.
## Description
I rewrote the font weight display logiс in the following way:
1. We now detect for each font which weights are supported
2. Unsupported weights are lighter gray in the list, but user can still
choose them, we just hint that the weight may not be supported, because
with font stacks, you can have different fonts supporting different
weights, we are testing the one user can see right now
## Steps for reproduction
1. try switching between different stacks and see that when hovering the
font width that is light gray, its not affecting canvas, meaning our
detection was correct and that weight is not supported
3. same thing for any custom font
## 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
closes#4111
- [x] - Fixes client side
- [x] - Fixes server side
https://github.com/user-attachments/assets/8bb6ffdc-2e78-45eb-b98b-e697daee822a
## Steps for reproduction
Now seems like impossible to save broken project. Tested locally on
broken project.
## 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
structuredClone fails sometimes on frozen objects
## 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/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
## Description
- Adds the ability to place images on the canvas immediately during
upload, using the file blob or a provided URL.
- Enables images to use width and height from asset metadata.
- Detects duplicate assets and displays a warning message.
<img width="323" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/5077042/fe810dd8-3e3d-4cab-8669-b0d739044f49">
These changes allow images to appear on the canvas upon pasting, even if
the asset is not fully uploaded yet.
## Steps for reproduction
Start uploading few files on a slow connection, select them before
upload, see image on canvas is changed
## 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
This is 1st PR In a series of PR's
Next: Image URL Links upload support.
Image Manager now support files drag/drop
(Images, Fonts etc)
## Steps for reproduction
Drag files on image manager 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
closes#3021
Currently if we are in a text edit mode we sometimes can't focus on any
input inside builder.
This fixes this.
## 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/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
closes#2998
Also fixes name edits etc.
The same issue with radix as we had in the past, focus lock on any
mutation inside dialog aquires focus.
And we have no good way to prevent programmatic focus inside iframe.
## 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/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
- split project settings
- add marketplace settings
## 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/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
---------
Co-authored-by: Bogdan Chadkin <trysound@yandex.ru>
Co-authored-by: istarkov <istarkov@gmail.com>
## Description
Pure renaming, nothing else.
## Code Review
- [ ] 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
- [ ] 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.example`
and the `builder/env-check.js` if mandatory
Succeeds https://github.com/webstudio-is/webstudio/pull/2136 in more
simple way. Active states are preresolved for everything except local
styles. And local styles shown as overwritten when defined state is
active.
Fixes
https://discord.com/channels/955905230107738152/1177028091227418654
## Steps for reproduction
1. create form component
2. choose error state
3. set background red
4. go to error state in style source menu
5. should be "remote" label
6. set background green
7. go to stateless style source
8. reset background color
9. should be "overwritten" label
Found we have race condition because of handshake
which complicates synchronizatio of commands.
Here removed handshake. Instead iframe now rendered client side after
first effect and canvas sends "connect" event so builder start sending
updates.
In the future this can be simplified even more with computed updates
from current state like yjs does.
## Testing steps
- try to delete instance after selecting on canvas
- try to press enter to edit text after selecting from navigator
- allow dragging control and embed components
- fix placement indicator for style sources and backgrounds
- synchronize drag and drop state between builder and canvas
Here fixed the issue with initially missing hotkeys in builder. Add
queue in immerhin to collect
transactions until subscription. This let us create new transactions in
module scope without worrying
the event will not reach the other realm.
New version of immerhin moved global queue into store instance so we can
stop filtering and just call store.popAll().
Also replaced default store with webstudio own serverSyncStore instance.
Now auto import works much better.
Here fixed two-way synchronization of commands between builder and
canvas. Added flag to not share hotkey with other apps.
Added first two commands specific to canvas: editInstanceText and
escapeSelection. Builder is able to reuse commands by specifying inn
"externalCommands" which basically extends the union of commands.
Added new commands emitter utility to manage hotkeys across plugins and
separate a lot of logic from canvas.
Here migrated only togglePreview as an example.
Later we can build commands panel and hotkeys overrides on top of this
utility.
Nanostore react wrappers in many cases introduce additional renders
because of subscription even when only store.set is used. Searching for
references become complicated because we have both direct store access
and react wrapper.
Here migrated to use direct store access for preview mode store and
renamed it to $previewMode according to new convention.
Ref https://github.com/webstudio-is/webstudio-builder/issues/1529
Here introduced two types of data sources into "variable" and
"expression". First stores the value, the second only executable code.
Execute expressions now output results of all expressions so we could
access values globally with "computed" store
Embed template references now allow to define both variable reference
and expression.
## Description
Changed pages synchronisation.
We had following path on link click in canvas:
- We intercept it in handleLinkClick and do publish('switchPage', {});
- We subscribe on 'switchPage' at builder and do navigate(builderPath, {
pageId});
- We subscribe on useSearchParams extract from there pageId and do
selectedPageIdStore.set(pageId)
- On Canvas we subscribe on selectedPageStore and finally render the
page
Now we just change
`selectedPageHashStore`, `selectedPageIdStore` in a single function
`switchPage`
`location.searchParams` used only for initial and popstate
synchronisation.
pageHashStore added for future use, no logic now.
## 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
Ref https://github.com/webstudio-is/webstudio-builder/issues/1529
Added data source values store which can be updated from both components
and props panel.
```js
const { setState } = useContext(ReactSdkContext)
const instanceId = getInstanceIdFromComponentProps(props)
setState(instanceId, propName, value)
```
Ref https://github.com/webstudio-is/webstudio-builder/issues/1529
- added data sources store
- added dataSource type to props
- insert data sources from template (prop.dataSourceReference allows to
bind several props to the same data source)
- convert to static prop on copying (simplification until requirements
are clear)
Bogdan Chadkin