3763 Commits
Author SHA1 Message Date
Bogdan Chadkin d5efe60822 Remove unused import 2025-06-27 10:47:37 +03:00
Michael b30e0e33a3 fix: allow case sensitive path in redirects ( old path field ) #5079 (#5084)
fixes #5079 

## Description
this fix was to allow case sensitive path in redirects (specifically the
"old-path" field), for users migrating from legacy system this could be
important.

![Screen Shot 2025-04-03 at 2 00 54
PM](https://github.com/user-attachments/assets/011d9026-4a54-436c-b26c-8b3300b52c5b)



1. What is this PR about (link the issue and add a short description)

## Steps for reproduction

1. click on project setting
2. go to redirects tab
3. input a path with uppercase letter(s) in the old-path field and the
page you want to redirect to
4. This should work without any error

## 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

- [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:
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
2025-06-27 10:38:07 +03:00
Bogdan Chadkin 1bbfe42249 feat: paste HTML with tailwind classes (#5296)
Ref https://github.com/webstudio-is/webstudio/issues/2651

Added command to let users paste tailwind fragments.

- all classes are converted to local styles
- breakpoints are adapted to desktop-first if possible
- images are automatically uploaded
2025-06-27 00:21:35 +03:00
Bogdan Chadkin 701793d8b8 experimental: use --tw- prefix for tailwind css variables (#5294)
Ref https://github.com/webstudio-is/webstudio/issues/2651
2025-06-26 16:31:00 +03:00
Bogdan Chadkin 3cc2f3be1e feat: improve automatic domain configuration (#5289)
- added official entrijs with types and mimimal runtime (no
dependencies)
- automatically add `www.` prefix to non-cloudflare root domains
- enabled automatic www redirect to setup with entri (though does not
work seamlesly, namecheap requires ssl certificate, godaddy requires
manual setup by user)
- toast error when click on "Configure automatically" on free plan
2025-06-26 15:22:31 +03:00
Bogdan Chadkin 7c05003cc5 fix: properly support details and summary elements (#5285)
This fixes headings inside of summary and interactive elements inside of
details content.
2025-06-25 16:53:27 +03:00
Bogdan Chadkin 83159aaaa2 feat: open page settings when click on publish blockers (#5290)
Here improved publish dialog to open page settings when one of blockers
is dynamic path or redirect.



https://github.com/user-attachments/assets/816c8bb9-a357-4c86-ae8b-f2bf2a1b753e
2025-06-25 15:33:08 +03:00
Oleg Isonen e11137a411 fix: Check width and height of the badge is not 0 (#5291)
## 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:
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
2025-06-24 11:50:05 +02:00
Oleg Isonen 78d3145c17 fix: Improve clarity of the upgrade banner (#5282)
## Description
<img width="348" alt="image"
src="https://github.com/user-attachments/assets/85ff2cb9-9cdf-4283-b932-c03423fcc02e"
/>

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:
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
2025-06-17 17:52:03 +02:00
Bogdan Chadkin 88a29bfc21 fix: catch iframe errors (#5279) 2025-06-14 18:53:36 +03:00
Oleg Isonen 07c2710442 feat: Improve badge checks (#5278)
## Description

Checks:
- show
- display
- visibility
- opacity
- rel attribute

## 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
2025-06-14 13:59:59 +02:00
Oleg Isonen 959fd11800 feat: Open current page in the publish dialog (#5277)
## 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:
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
2025-06-13 19:18:18 +02:00
Bogdan Chadkin dff2946f64 refactor: migrate legacy rich text copmonents after editing (#5275)
https://github.com/user-attachments/assets/1e6f936e-d60e-44cd-9a04-24201e7449e9
2025-06-12 17:19:38 +03:00
Bogdan Chadkin a9d31e70d9 feat: allow editing remote resources (#5274)
Did you ever wonder why you can't edit inherited data variables? We
wondered the same. Now you can edit variables and resources from
anywhere deep in the tree.



https://github.com/user-attachments/assets/9e117fc7-9329-4b38-8a2f-c97360bc3e7d
2025-06-12 17:00:57 +03:00
Bogdan Chadkin df9fecff3b fix: ignore content model checks for XmlNode component (#5268)
We rely on "tag" in legacy components though it is primary way to setup
tag on xml nodes. Here added exception for all xml components.
2025-06-11 15:10:50 +03:00
Bogdan Chadkin 0ffba194cb refactor: remove animation flags (#5269) 2025-06-11 13:28:05 +03:00
Oleg Isonen 136d7c19d9 fix: Improve made with webstudio badge tooltip (#5266)
Trying to explain that user can change the styles and position and
everything about that badge.

## 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
2025-06-10 18:47:39 +02:00
Bogdan Chadkin b64a0c077a fix: accept <source> as <video> child (#5264)
Transparent category was overriden by parent categories without merging
others from current element.
2025-06-10 18:42:38 +03:00
Bogdan Chadkin ca0e1d72d1 fix: show correct component icons in command panel (#5261)
Missed command panel case

<img width="487" alt="Screenshot 2025-06-10 at 10 05 39"
src="https://github.com/user-attachments/assets/6a2f738c-dd7d-4701-91aa-c0dcdbe669f1"
/>
2025-06-10 14:46:18 +03:00
Bogdan Chadkin 31cf38d1bc fix: autocomplete tags on body when page has invalid content (#5262)
Removed children from content model check in command panel tags.
2025-06-10 11:29:58 +03:00
Bogdan Chadkin bac4627643 fix: prevent typing only inside of textarea and input on canvas (#5260)
Accidentally broke when fixed links download attribute
2025-06-09 21:55:13 +03:00
Bogdan Chadkin 274c8d84c2 experimental: adapt tailwind to webstudio breakpoints (#5244)
Ref https://github.com/webstudio-is/webstudio/issues/2651

There is an edge case which will prevent from converting breakpoints.
When there is no base breakpoint there is no value to fill with inverted
space. Though it should be very rare usecase. Need to test how often it
will create new breakpoints.
2025-06-09 15:32:52 +03:00
Bogdan Chadkin aea46aba6c feat: insert tag commands (#5248)
Ref https://github.com/webstudio-is/webstudio/issues/3632

Added commands for all tags satisfying current tree



https://github.com/user-attachments/assets/6e7e29c4-1a9a-452d-a967-448e216e4703
2025-06-08 14:53:39 +03:00
Oleg Isonen 1e1edf7a65 feat: Built with webstudio badge check on publish (#5246)
## Description

<img width="351" alt="image"
src="https://github.com/user-attachments/assets/1afca5f0-da0f-4726-a29a-cd9ed2403967"
/>

## 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
2025-06-08 11:35:24 +02:00
Bogdan Chadkin 14e6ced695 feat: add replace with element command (#5242)
Ref https://github.com/webstudio-is/webstudio/issues/3632

This can be a nice addition and a way to migrate legacy components.


https://github.com/user-attachments/assets/8354d4bd-e60b-4cf3-b662-5c8e974d9537
2025-06-04 11:56:05 +03:00
Bogdan Chadkin 24180a2edb perf: improve instance selection performance (#5240)
We have html element mutations in a few places and each can add ~250ms
of repaint time on large projects. Here I got rid of it in two places

1. Collapsed logic enforced document height to preserve scroll position.
Instead I created an absolutely positioned div which enforced scroll
where collapsed elements are reset.
2. Scroll into view logic defined position absolute on scroll container.
Though it's not necessary on html element so just ignored it.
2025-06-01 14:42:10 +03:00
Bogdan Chadkin 68621fa363 feat: support <a> download attribute in preview (#5238)
Ref https://github.com/webstudio-is/webstudio/issues/5197

We prevented all link clicks. Though seems like download is safe to
proceed when url is relative (asset).
2025-05-28 22:16:23 +03:00
Bogdan Chadkin 04949cbc88 feat: wrap text with span element when droppping instances into it (#5237)
Ref https://github.com/webstudio-is/webstudio/issues/3632

Here changed insertion logic to wrap rich text with span element instead
of Text component when drop into it. This is the last place which
creates legacy components.

Refactored tests with jsx to make them more readable.
2025-05-28 12:11:10 +03:00
Bogdan Chadkin 3d064f1b20 fix: paste markdown (#5235)
Async in html paste broke markdown because await was missing in onPaste.
2025-05-28 00:24:46 +03:00
Bogdan Chadkin 8b1063425c fix: prevent checkbox and radio changing in design mode (#5233)
User can click on checkboxes and radio inputs on canvas and make them
checked. We don't want this in design mode.
2025-05-26 18:51:43 +03:00
Bogdan Chadkin 57ea5da3d2 feat: download image when paste html with it (#5232)
Ref https://github.com/webstudio-is/webstudio/issues/3632

Now images will be downloaded when paste it in html to make them
accessible within project even when original one is no longer responds.



https://github.com/user-attachments/assets/2591e981-3ec1-40f8-bf50-19332c322332
2025-05-26 12:18:03 +03:00
Bogdan Chadkin 3506fe881f feat: add element component (#5231)
Ref https://github.com/webstudio-is/webstudio/issues/3632

Here unflagged element component in components panel and html paste.

Additionally

- migrate link template to html element
- added :local-link state to links which is replaced with
[aria-current=page] when css is generated, sadly not yet supported in
any browser
- migrated many templates from legacy components to html elements
- put tailwind paste behind flag
2025-05-25 14:26:40 +03:00
Bogdan Chadkin 4dfdf50380 feat: migrate forms components to html elements (#5230)
Ref https://github.com/webstudio-is/webstudio/issues/3632

This is big one. So I switched to html elements whole forms section in
components. Though here I introduced some deviation from specification

**Textarea**

Initial value is represented as text content
```html
<textarea>content</textarea>
````

Though it is trickier to manage text content as state and all frameworks
rely on value property of textarea dom interface.

**Select**

Similar story. There is no value attribute and state is represented by
selected boolean attribute on options

```html
<select>
  <option value="value1" selected></option>
  <option value="value2"></option>
</select>
```

We replace selected attribute on option with value attribute on selected
when paste.

So basically all form elements are using "value" and "checked"
attributes which can be easily mapped to html and all frameworks.
2025-05-24 15:11:49 +03:00
Bogdan Chadkin e9e0fb7503 feat: add wrap in element command (#5228)
Ref https://github.com/webstudio-is/webstudio/issues/3632

Here "Wrap in Element" is replacing "Wrap in Box" as more general
option.
2025-05-24 13:43:12 +03:00
Bogdan Chadkin de61cffde6 experimental: paste tailwind (#5217)
Ref https://github.com/webstudio-is/webstudio/issues/2651

Added "Paste Html With Tailwind Classes" command.

For now only tailwind 3 is supported.
Also fixed a few issues with css parser.


<img width="547" alt="Screenshot 2025-05-18 at 00 38 01"
src="https://github.com/user-attachments/assets/470b63e0-9b17-4769-8a65-679b90d73a89"
/>
2025-05-23 13:19:04 +03:00
Bogdan Chadkin 8b60ff7988 feat: infer states from tags in style panel (#5229)
Ref https://github.com/webstudio-is/webstudio/issues/3632

Now states are always inferred from tags. User action states work for
all tags.

<img width="233" alt="Screenshot 2025-05-22 at 19 27 18"
src="https://github.com/user-attachments/assets/f0dc6a07-8a01-4878-950e-61b6e489da7a"
/>
2025-05-22 21:16:40 +03:00
Bogdan Chadkin c630054c74 feat: use html elements for typography (#5226)
Html elements can completely replace legacy typography components. Here
replace component templates with element templates as part of sdk.

- moved content block to general section
- moved separator into typography section
- moved code text into typography section and used regular `<code>`
element for it
- made "Text Content" setting expandable
- fixed dragging templates onto canvas.

<img width="475" alt="Screenshot 2025-05-21 at 11 27 27"
src="https://github.com/user-attachments/assets/ab53c5ec-e51f-498d-b01b-cc7f2eb20c2d"
/>
<img width="515" alt="Screenshot 2025-05-21 at 11 27 20"
src="https://github.com/user-attachments/assets/0f560c26-7e51-4025-a487-6f7e4e3f43e3"
/>
2025-05-21 15:26:05 +03:00
Bogdan Chadkin 88c467c72a fix: make all radix components uncontrolled (#5227)
Here improved handling radix states by making all components
uncontrolled yet still synchronizing external state with local one.
2025-05-21 14:20:40 +03:00
Bogdan Chadkin 0c9b138bba feat: support GitHub flavored markdown paste (#5225)
Markdown paste now generate html elements. This unlocks us supporting
more features:

**strikethrough**

`~~text~~` -> <del>text</del>

**tables**

```
| Header 1   | Header 2   |
|------------|------------|
| Cell 1.1   | Cell 1.2   |
| Cell 2.1   | Cell 2.2   |
```

*autolinks*

```
The link is https://github.com
```

is converted to

```html
<p>This link is <a href="https://github.com">https://github.com</a></p>
```
<img width="559" alt="Screenshot 2025-05-20 at 16 44 53"
src="https://github.com/user-attachments/assets/48508140-9791-47f6-b1c1-3b2946dd5583"
/>

<img width="514" alt="image"
src="https://github.com/user-attachments/assets/dc19e67a-0067-458f-bf3c-64d9b73d02e3"
/>
2025-05-21 01:50:00 +03:00
Bogdan Chadkin fa875ab5c1 feat: use body element on new pages (#5222)
Ref https://github.com/webstudio-is/webstudio/issues/3632

Now new project and new page will have body element in the root instead
of body component.

<img width="422" alt="Screenshot 2025-05-20 at 00 15 37"
src="https://github.com/user-attachments/assets/aee568c5-f0e4-40f5-a5a3-e94fc765505d"
/>
2025-05-20 12:24:27 +03:00
Bogdan Chadkin e35de86421 experimental: add icons to html elements (#5219)
Ref https://github.com/webstudio-is/webstudio/issues/3632

<img width="281" alt="Screenshot 2025-05-18 at 18 37 16"
src="https://github.com/user-attachments/assets/0b95b674-c9fa-4f5d-b79d-b1ce6023dba8"
/>
2025-05-18 20:46:45 +03:00
Bogdan Chadkin 90aa42422d experimental: support html elements in content block (#5216)
Ref https://github.com/webstudio-is/webstudio/issues/3632

Now content block is relying on instances tags instead of component
names. Tested all cases. Should work smoothly.

Also dialog title now have placeholders inferred from tag as well
<img width="1025" alt="image"
src="https://github.com/user-attachments/assets/4c7817fb-cf68-4d61-a672-213b1e8d1cc7"
/>
2025-05-18 00:29:50 +03:00
Bogdan Chadkin 646c5b38e7 fix: normalize html attributes only when not defined by component (#5215)
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.
2025-05-17 10:11:56 +03:00
Bogdan Chadkin 0eea205bfc refactor: merge base and animation props with component metas (#5214)
Related https://github.com/webstudio-is/webstudio/pull/5211
2025-05-16 23:31:06 +03:00
Bogdan Chadkin 72345fb1fb refactor: merge radix props with component metas (#5213)
Related https://github.com/webstudio-is/webstudio/pull/5211

We moved html attributes away from props metas and have very little
actual props left in meta. It is safe to merge with component meta to
simplify access in both builder and CLI.

CLI size increase is not very significant

```diff
- 241.92kB
+ 256.64kB
```
2025-05-16 17:55:07 +03:00
Bogdan Chadkin d372aa386b experimental: customize initial attributes per tag (#5209)
Ref https://github.com/webstudio-is/webstudio/issues/3632

Now different tags can have own initial attributes. Here added initial
attributes to `<a>` and `<form>` which will be replaced with remix
components on publish. Also overriden href, download and target types
for links.

<img width="246" alt="Screenshot 2025-05-15 at 16 21 00"
src="https://github.com/user-attachments/assets/112c3c94-0c87-4fa5-936b-4def5cc4ee12"
/>
2025-05-16 14:59:10 +03:00
Bogdan Chadkin a44530b068 experimental: adapt tag control to html content model (#5208)
Ref https://github.com/webstudio-is/webstudio/issues/3632

Here improved tag control to allow updating with tag satisfying content
model.

For example when ul has li it can only be changed to ol and menu. li
inside ul cannot be changed with anything.

Also switch to combobox when there is more than 10 satisfying tags.



https://github.com/user-attachments/assets/ad42bba7-9be1-4f50-9b1a-6f6cda52f3e5
2025-05-14 14:12:48 +03:00
Bogdan Chadkin 28e61f49bd experimental: add matching tag when insert element component (#5204)
Ref https://github.com/webstudio-is/webstudio/issues/3632

Now element does not provide default tag and instead builder will try to
find tag matching its parent.

This way we can insert element, give it "ul" tag
and then insert another element into it which will match only "li"


https://github.com/user-attachments/assets/3ea87624-9524-4f2e-91b2-d658d16d7a1b
2025-05-13 12:46:40 +04:00
Bogdan Chadkin a04af45fa3 experimental: support element component in rich text (#5203)
Ref https://github.com/webstudio-is/webstudio/issues/3632

Now when element rich text component is detected all children like bold,
italic, link etc are created with element component.

Old rich text components are still using legacy rich text content
components.

<img width="571" alt="Screenshot 2025-05-12 at 12 47 43"
src="https://github.com/user-attachments/assets/82b1a36e-6efb-40c0-b77c-668a66da6724"
/>
2025-05-12 22:08:26 +04:00
Oleg Isonen 7f50fbe85c fix: Rewrite overflow clip and hidden description (#5201)
## Description

 Rewrite overflow clip and hidden description and move it to css-data

## 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
2025-05-11 17:16:53 +02:00