Commit Graph
10 Commits
Author SHA1 Message Date
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 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 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 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