Ref https://github.com/webstudio-is/webstudio-builder/issues/696
Here we finally can switch to normalized instances for rendering tree
and get rid from denormalization for published sites.
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- test it on preview
- [ ] hi @rpominov, I need you to do
- detailed review (read every line)
## 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
We had a mismatch between a component and meta
Closes https://github.com/webstudio-is/webstudio-builder/issues/1418
## Steps for reproduction
1. add blockquote
2. open properties
## 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
1. What is this PR about (link the issue and add a short description)
## 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/1335
Here I replaced assetContainersStore with assetsStore. Now deleting and
uploading states are maintained locally in assets provider. To preserve
the order of uploading assets assetsStore map has value as undefined.
This way assets.get(id) provides the same value. Though when iterating
we see missing asset.
This option forces all type imports to have "type" specifier even though
there are other value imports.
TS 5 forces it when new verbatimModuleSyntax is enabled.
## Description
closes#473
`${tag}:where([${componentAttribute}=${component}])` where is used to
not increase specificity
- [ ] todo remove from getInheritedInfo, as we don't know ancestor
tagName
## Steps for reproduction
See box-sizing etc props for newly created items
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- [ ] hi @TrySound , I need you to do
- 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
If this looks good, I will not merge it right away, but open a PR in
`webstudio-saas`
## Description
- #993
1. Added a new type of Prop `{type: "page"}`, similar to `{type:
"asset"}`
2. Added `pagesStore` to `ReactSdkContext` (will need to make changes to
`webstudio-saas` as well to support this)
3. Added a new control type `{control: "url"}` and corresponding
`<UrlControl>`
4. Updated Link components:
- set `{control: "url"}` for the `href` prop
- made them support `{type: "page"}` as `href`
- simplified / cleaned up
## Steps for reproduction
1. Add a link
2. Set a page as `href` in props panel
3. Try clicking on the link in preview mode
Ref https://github.com/webstudio-is/webstudio-builder/issues/1116
Slot is copy pastable part of the tree which is always in sync. Kinda
like primitive components.
The idea is the following. Slot is copy pasted as any other instance
though its children are preserved as is without cloning with new ids.
This lead to the problem with multiple slot children. While copy paste
they are preserved as is though when add new child to slot, the other
instance of it will not get new child.
To workaround this we add another Fragment component which groups all
children into single one and new children are always reflected in all
slot copies.
## Description
Implements all design changes and accessibility for components add panel
https://user-images.githubusercontent.com/52824/227720011-344b31f8-ce17-4d13-ad4d-2d506ca3bcce.mp4
## Code Review
- [ ] hi @rpominov , 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
Here bit less straightfforward as lexical<>instances conversion is not
very straightfforward because lexical represents a few instances with
its formats.
To solve conversion complexity used almost same ancestor traverser as
before but finish once eiditing node is reached.
Pass instance selector for each webstudio-component ot identify selected
and editing instances.
## Description
Backgrounds part 2. ref #877
- [x] - remove repeat section under gradient part
- [x] - info Icon for gradient "code"
The floating panel, gradients support.
<img width="508" alt="image"
src="https://user-images.githubusercontent.com/5077042/224417159-22a27ffd-6460-4d97-8891-f14a9a3331a3.png">
No drag, no hide, no smart insert
## 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
Link block wasn't using remix link
## Code Review
- [ ] hi @rpominov , 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
User should know the underlying platform
this has also resulted in the need to have target wrapped in all links
components
<img width="265" alt="Screenshot 2023-03-09 at 14 19 50"
src="https://user-images.githubusercontent.com/52824/224035667-b0cc296c-3ed0-4c4c-b86b-205aa4a8adba.png">
## Steps for reproduction
1. create link
2. select target prop
## Code Review
- [ ] hi @rpominov , 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
Fixes https://github.com/webstudio-is/webstudio-builder/issues/1198
## Description
- Button has a standard behavior with space key pressed that can't be
turned off, so we can't type a space
- Even if we work around the space behavior somehow, we still don't have
an ability for rich-text to accept any instance and that makes a use
case for icon button and button with icon on left/right impossible
The solution I went for is to make it container for accepting child
instances and edit text using InnerText property. This may be not as
intuitive as direct rich-text but its more capable.
Webflow does the same thing for a form button, though it uses an input
element.
<img width="1082" alt="Screenshot 2023-03-09 at 03 10 05"
src="https://user-images.githubusercontent.com/52824/223898596-a4aae718-32d6-4090-a6f9-3d883b587ef7.png">
## Steps for reproduction
1. add button
1. change inner text
1. add image or text components
## Code Review
- [ ] hi @TrySound , I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
- [ ] @taylornowotny - please test
## 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
ref #877
As in this comment part 1
https://github.com/webstudio-is/webstudio-builder/issues/877#issuecomment-1441897685
<img width="647" alt="image"
src="https://user-images.githubusercontent.com/5077042/223226959-3e9b1832-07aa-425b-afcf-27f7cdafa85c.png">
You can add/remove layers. View/Hide not working. No drag.
## Steps for reproduction
Create new project. (existing could not work well because of migration)
Create background layers. Add images. Set various background layers
params.
## Code Review
- [x] 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
- [x] made a self-review
- [x] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [x] 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
- [x] 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: Oleg Isonen <oleg008@gmail.com>
Closes#1173
## Description
- link block component that allows adding child instances
- also replaced box icon
## Steps for reproduction
1. add link block
2. insert image component and text component
3. select it
4. add regular link, see if it still works correctly
5. add text-editable link, see if it still works correctly
## 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
RootInstance dont need all the data we pass
## 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
1. Don't handle global paste even when inside content-editable (before
that when you paste inside texteditable, it would insert an instance
additionally outside)
2. Insert links in paragraphs as RichTextLink
3. Make sure rich text link has the same props as link
## 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-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/1116
We moved all data to build and tree table no longer necessary.
- fixed writing instances on page creation (broke in my previous PRs)
- pages are no longer cloned on build cloning and preserve their ids
between builds
Ref https://github.com/webstudio-is/webstudio-builder/issues/1116
We want to have freedom in manipulation and reusability of tree parts so
gonna merge tree data of all pages into build.
Here migrated instances. Tree no longer have any data. Will cleanup in
the next PR.
Ref https://github.com/webstudio-is/webstudio-builder/issues/1116
Before we assumed the first instance in the list of instances is the
root. Though we are gonna introduce slots and for this have to combine
instances of all pages into single array. So there can be many roots in
one list.
So now we gonna specify root instance id on page. treeId will be removed
once instances are migrated to Build table.
We want to have freedom in manipulation and reusability of tree parts so
gonna merge tree data of all pages into build.
Here migrated props. Left one todo to cleanup tree data of deleted
pages. Though easier to solve this when pages management is moved to
client.
May require to change code in sass.
## Description
Adding target and prefetch to initial properties of a Link component
along with the defaults
## Steps for reproduction
1. add a link
2. try target prop
3. try prefetch options
## Code Review
- [ ] hi @rpominov, 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
Renaming WrapperComponent > WebstudioComponent
## Code Review
- [ ] hi @TrySound , I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
## 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
Closes#1013
1. Refactored `PropMeta` shape to be flat again instead of trying to be
the same as Storybook's `ArgType`
2. Changed `*.props.json` to `*.props.ts`. Fixes#1051
3. Prepared controls files structure, now just need to work on their UI
4. Refactored `usePropsLogic/PropsPanel` to the new logic where we
choose the prop before adding and then never change the name
5. A lot of cleanup / small fixes / better TS types
This PR basically completes architecture/logic and now only the work on
the controls UI is left. Although complicated controls like URL may
still require some work on the logic.
## Steps for reproduction
1. Open props panel
2. Interact with the props
## Description
Introduces Code component, no syntax highlighting just block and inline
code
## Steps for reproduction
1. add code component, try toggle inline prop
2. try from markdown
block
```js
alert(123)
alert(123)
alert(123)
```
inline
```
test test `alert(123)` test
```
## 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
## Steps for reproduction
1. Add separator
2. Paste `---` for markdown
## 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-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
This is adding a blockquote, preset styles taken from webflow
## Steps for reproduction
1. add a blockquote from add component
2. paste a blockquote as a markdown `> something`
3. add List
4. add List Item into List
5. paste list from markdown:
```
- one item
- another item
```
```
1. one item
1. another item
```
```
1. one item
2. another item
```
## 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-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
Closes https://github.com/webstudio-is/webstudio-builder/issues/604
## Description
- User can now override helper definitions on canvas
- only boxes that would collapse without helper - receive helper
- helper is removed when any CSS property is changed on that instance
that would prevent collapsing, so that helper can be removed
- Helper doesn't show on the preview or publish
- Helper goes away if an instance inserted as a child
- There is no need to set padding-right or padding-bottom if you just
need a small div with a defined or layout-based size, as soon as div is
not collapsing, helper is not applied
More: padding will be only added on the side that would collapse
otherwise.
For example when I add a div, it is a block element, it grows
automatically full width but has 0 height, in this case spacing heloper
with padidng-top: 50px will apply, so that it doesn't collapse.
If user sets height: 100px or does anything that would give it a height
- we remove the helper padding right away, so user can actually see the
height they set
In other words we prevent elements from collapsing when they have 0
height or width by making them non-zero on canvas, but then we remove
those padding universally without shortlists as soon as element doesn't
collapse.
## Steps for reproduction
1. add a box
2. set padding-top
3. see it applies on canvas
1. add a box
2. set width
3. see the exact width on canvas, no helper padding
1. add a box
2. set height
3. see the exact height on canvas, no helper padding
## Code Review
- [ ] hi @TrySound , I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
## 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
Before we had to preserve instance data to not break styles. Now styles
are decoupled and editor can interop whole instances type.
So we no longer need updates with instance-like shape. Text editor can
output instances directly preserving only ids.
As a result got rid from children updates in both react-sdk and project
packages.
## Description
Partial fix for #1051
The full fix must include validating during props generation. Probably
we could generate ts files with all
typeinfo inside.
cc @rpominov
Also I excluded Zod exports, only types
https://github.com/webstudio-is/webstudio-builder/pull/1052/files#diff-5659b16effbbb5a7214ce728cf281efa2f2cac4332d31685b78ecb1b27ab0502
## 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
We are going to render CSS for all pages in production mode.
That allows us to switch on native remix links i.e. `export const links`
Also now for `published` pages we use same data as SaaS will.
That would allow for investigating SaaS issues faster.
[x] - Also now check does ssr css is needed at all at "edit" mode.
_Checked, as of now we don't render `style` tags serverside and that
cause FOUC in designer on page switch,
cc @TrySound probably in Canvas we can render styles serverside too that
would allow us to not use /s/css path for canvas inside designer_
closes#929
closes https://github.com/webstudio-is/webstudio-saas/issues/51closes#606
## Steps for reproduction
In local dev mode, create 2 pages in a project, and add cross-links on
both pages.
Do publish.
Go to the published page, see no fouc on link clicks.
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- [ ] hi @TrySound , I need you to do
- 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
#992
1. Cleaned up control types
2. Control type is now chosen by component meta (including Image.src)
3. Added custom labels support
4. Some other changes mentioned in comments in diff
Bogdan Chadkin
