Commit Graph
19 Commits
Author SHA1 Message Date
Oleg Isonen 82c3d83fd1 fix: optimize CLI import for large data amount (#5831)
## Summary

- Add CLI project import support from synced `.webstudio/data.json` into
another project via a destination share link.
- Move project bundle import/export contract into
`@webstudio-is/protocol`, including bundle versioning, staged upload
constants, schema validation, and fixture coverage.
- Upload project bundle data through staged TUS upload before calling
the import RPC to avoid request body limits.
- Upload referenced assets as binary files through the existing asset
upload route before importing asset rows.
- Add `--skip-assets` and `--ignore-version-check` import options.
- Add retry handling for transient missing imported asset files by
re-uploading only the reported missing assets.
- Share missing-asset import error formatting/parsing through protocol
to avoid duplicated string contracts.
- Preserve browser asset upload behavior while adding API upload
support.
- Normalize schema naming across the branch to lower-case names without
`Schema` suffix.
2026-06-23 18:50:01 +02:00
Bogdan Chadkin 62f969cccb fix: show href on link in content mode (#5396)
Got broken when we switched links to element component.

<img width="844" height="466" alt="Screenshot 2025-09-09 at 13 50 45"
src="https://github.com/user-attachments/assets/a4f0c969-9003-4ea7-aef0-22014f307884"
/>
2025-09-09 19:09:14 +03:00
Bogdan Chadkin 0960101fa3 fix: accept any string in <iframe> name attribute (#5349)
Fixes
https://discord.com/channels/955905230107738152/1400906922235920445/1400906922235920445

The spec does not clearly indicate possible values and in case of iframe
and object name attribute accepts any string.
2025-08-03 19:56:05 +02:00
Bogdan Chadkin ac6b649397 fix: allow <p> inside of <hgroup> (#5338)
Ref https://github.com/webstudio-is/webstudio-community/discussions/241

Never supported heading outline algorithm was never supported and the
latest update to html spec allowed paragraphs as part of this removal
for lower level subtitles or descriptions.

Though indices tables were not updated. I [sent
PR](https://github.com/whatwg/html/pull/11524)
2025-08-02 16:14:25 +02:00
Bogdan Chadkin 1eb11fdb34 feat: autocomplete SVG attributes (#5331)
Ref https://github.com/webstudio-is/webstudio/issues/5258

Now user will see all available attributes for any SVG element.

<img width="283" height="507" alt="image"
src="https://github.com/user-attachments/assets/750c3027-aada-4e55-b429-c5adb5449158"
/>
2025-07-18 15:47:35 +02:00
Bogdan Chadkin 60ab7c7b68 feat: support svg elements (#5330)
Ref https://github.com/webstudio-is/webstudio/issues/5258

Now users can create svg elements and paste svg code or html with svg.



https://github.com/user-attachments/assets/77738ede-e4ee-4fd8-b128-5679170b30b4
2025-07-18 02:38:33 +02: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 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 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 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 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 59b6471c4f experimental: support paste html (#5185)
Ref https://github.com/webstudio-is/webstudio/issues/4404

Slightly reworked paste story. Now minimal API to insert html looks like
this

```js
const fragment = generateFragmentFromHtml(html);
insertWebstudioFragmentAt(fragment);
```

- attributes are casted to string, number and boolean types
- text is wrapped with spans when outside of rich text
- unsupported tags are ignored in result



https://github.com/user-attachments/assets/c8072d86-72bd-4446-a26a-e678b193f93e
2025-05-06 13:31:13 +04:00
Bogdan Chadkin 525804389f experimental: add Element component to builder (#5182)
Ref https://github.com/webstudio-is/webstudio/issues/3632

- Added template for Element component in builder
- Render Element component on canvas
- Labels are shown as html tags
- Element has div tag by default

<img width="276" alt="Screenshot 2025-05-04 at 03 17 53"
src="https://github.com/user-attachments/assets/2f55b5d0-b6a0-4152-968b-842f4fcd18ea"
/>
2025-05-05 11:15:14 +04:00
Bogdan Chadkin 6fa88d9711 refactor: render html attributes for all components (#5163)
Ref https://github.com/webstudio-is/webstudio/issues/3632

Here enabled converting class -> className for all components with tags.
Now it does not affect anything though later will unlock using html
attributes instead of component props.

Also got rid from huge map with react properties and replaced it with a
set of proper aliases.
2025-04-29 15:40:43 +04:00
Bogdan Chadkin f13455394d feat: add descriptions to tags (#5164)
Ref https://github.com/webstudio-is/webstudio/issues/3632

Scraped descriptions from html spec to show in tag control.

<img width="297" alt="Screenshot 2025-04-26 at 12 46 21"
src="https://github.com/user-attachments/assets/444e319d-e24f-429e-b09d-1db95cc248d5"
/>
2025-04-26 17:04:31 +07:00
Bogdan Chadkin 93c00570fd perf: reuse aria attributes between all components (#5160)
Ref https://github.com/webstudio-is/webstudio/issues/3632

We have a universally generated list of aria attributes and can reuse it
instead of generating for every component and bloating our client
bundle.

Now users will have to download ~700kB less javascript when load
builder.

```diff
- 5748    build/client/assets
+ 5036    build/client/assets
```

<img width="299" alt="Screenshot 2025-04-24 at 12 01 46"
src="https://github.com/user-attachments/assets/1faedc01-8f5f-47ad-8601-d17bf5059ea3"
/>
2025-04-24 22:54:51 +07:00
Bogdan Chadkin 87312f8809 experimental: generate meta for html and aria attributes (#5149)
Here added lists of attributes from html and aria specifications for
future Element component.

Html provides an easy to navigate table with all types with relations to
specific tags and descriptions.

Aria list with types is extracted from aria-query library. Though
descriptions are parsed from specification. In the future we will use
more aria-query data to navigate specific roles.

All attributes types are tested with react types

You can see generated data in
- packages/html-data/src/__generated__/attributes.ts
- packages/html-data/src/__generated__/aria.ts

Succeeds https://github.com/webstudio-is/webstudio/pull/2341
2025-04-21 13:13:50 +07:00
Bogdan Chadkin bd77a252c2 refactor: detect empty tags and components (#5132)
Here replaced "embed" and "control" components with content model. Many
components now detect no content based on html content model like with
img or input tags. In other cases component meta can explicitly specify
empty array to not accept anything.

```
meta = {
  contentModel: {
    category: 'instance',
    children: []
  }
}
```
2025-04-17 23:23:20 +07:00
Bogdan Chadkin d5bc0f9760 feat: enforce html content model (#5074)
Ref https://github.com/webstudio-is/webstudio/issues/3632

This is a big step into native html elements support. I scraped content
model from html spec and now enforcing all html tags structure so we no
longer need to write custom restrictions.

Now paragraph cannot be nested into heading. Box cannot be nested into
span Text though still can in div Text. Any interactive elements cannot
be nested automatically. List item should have a list as direct parent
(collection and slot are exception because they don't have elements
inside).

Most rules are defined in this table
https://html.spec.whatwg.org/multipage/indices.html#elements-3
2025-04-01 22:07:56 +07:00