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"
/>
Was accidentally added when rewriting content model.
Also fixed two other issues
- user can override text color in error boundary with global root
- text content property now have tooltip with description and it can be
reset
<img width="320" alt="Screenshot 2025-05-10 at 18 14 19"
src="https://github.com/user-attachments/assets/ffb16efc-e7b5-44d1-a214-0a9251e9eb9d"
/>
Here replaced "transparent" keyword with more explicit "descendants"
list in component content model.
This will enable use case with child constraint while allowing other
instances to be children like here
```
contentModel: {
category: "instance",
children: [
"instance",
"AnimateText",
"StaggerAnimation",
"VideoAnimation",
],
},
```
and descendants are described like this
```
contentModel: {
category: "instance",
children: ["instance"],
descendants: ["VimeoSpinner", "VimeoPlayButton", "VimeoPreviewImage"],
},
```
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: []
}
}
```
Ref https://github.com/webstudio-is/webstudio/issues/3632
Here I finally got rid from "rich-text-child" necessity. With html
elements in the tree it will no longer work so we need a new way to work
with rich text.
Added a few new utilities to content model which detect rich text by
text inside or any textual tags. Span and links can still be detected as
containers rather than children when not surrounded by text and other
textual elements.
Extended content model to support categories defined in component meta.
Most components has transparent children categories to pass through
constraints from parent, this way we allow descendants with non
category.
Here migrated only core and base components.
Will extend more for animations in another PR.
Ref https://github.com/webstudio-is/webstudio/issues/3632
Here migrated webflow and markdown paste plugins to instance.tag to
avoid adding more legacy "tag" prop.
Also fixed content model for instance.tag and rewrote its tests with
ws:element.
We introduced html content model which restricts how html elements can
be nested into each other. Here fixed two edge cases
- allow to put div into buttons, headings or any other phrasing content
- allow put images into interactive elements like a > img
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
Bogdan Chadkin