## Description
Markdown paste with images
Take MD from
https://github.com/webstudio-is/webstudio/pull/3569#issuecomment-2171213517
Paste, see images are uploaded
## 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/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
## Description
- Adds the ability to place images on the canvas immediately during
upload, using the file blob or a provided URL.
- Enables images to use width and height from asset metadata.
- Detects duplicate assets and displays a warning message.
<img width="323" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/5077042/fe810dd8-3e3d-4cab-8669-b0d739044f49">
These changes allow images to appear on the canvas upon pasting, even if
the asset is not fully uploaded yet.
## Steps for reproduction
Start uploading few files on a slow connection, select them before
upload, see image on canvas is changed
## 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/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
## Description
- webflow css preset
## 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/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
Ref https://github.com/webstudio-is/webstudio/issues/2647
## Description
This allows to copy Heading only and only tested with minimal styles,
hence this is first stage, next I will add components and add tests with
complex styles.
## Steps for reproduction
1. click button
2. expect xyz
## 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/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
Code Text component is designed to render code and in the future also to
add syntax highlighting. With this PR it won't be possible to treat it
like a Box any more and code will be entered using code property.
Benefit is: better UX for editing code and no unintended side effects
later with highlighting.
## Steps for reproduction
1. click button
2. expect xyz
## 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/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 added two new types
WebstudioFragment - reusable fragment of webstudio data which can be
generated (markdown, embed template), transferred (copied or stored in
marketplace) and inserted.
WebstudioData - all available normalized data to allow composing
multiple operations within single transaction like delete instance and
then insert into other part of the page.
## Description
Pure renaming, nothing else.
## 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/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 fixed paste of bare links which render empty paragraph now because
of missing mdast extension. micromark extension is responsible only for
parsing but do not produce ast.
With this change you can paste links and get Paragraph>Link.
Fixes https://github.com/webstudio-is/webstudio-builder/issues/1950
Here added new utility to compute constraints for tree when insert embed
template, paste something or reparent. I previous implementation all
constraints were merged which gave us false positives like when paste
List>ListItem we got "requiredAncestors: [List]". Here tree layout is
considered to exclude such false positives.
For testing try to copy paste List>ListItem
Here refactored copy paste plugin system to try each plugin until it
succeeds. This way we can have multiple solutions to copy paste from
plain text. For example embed template is hand written text and should
succeed before markdown starts parsing it.
```json
{
"@webstudio/template": [
{
"type": "instance",
"component": "Box",
"children": [
{ "type": "text", "value": "Hello, I'm Box!" }
]
}
]
}
```
Fixed the issue with pasting checkbox into button
which is wrapped into label
Prevented inserting label, checkbox, radio button and input into
buttons.
Here I removed "rich-text" type from components. Instead "container" can
be edited when has only text or rich text children.
And any time user can drop into editablle container which will wrap all
text and rich text children into "Span" component.
Had to implement position adjustment to consider text children which do
not have representation in navigator tree and canvas dnd.
Span has temporary SpanContainer name to not conflict with existinig
Span for styled text in rich text. Will rename in other PR when remove
no longer necessary components.
Here added two component restrictions to meta.
requiredAncestors prevent inserting components outside of required ones
here restricted ListItem to always be inside of List.
invalidAncestors prevent inserting components inside of invalid ones
here prevented nested buttons
Ref https://github.com/webstudio-is/webstudio-builder/issues/1569
Here we change template in meta to include current component instead of
implicitly creating it.
This way we can provide insert composition of components instead of
single one for example input+label. Or even wrap current component like
label>input.
Another usecase is ability to set local styles and props for current
component.
Note: review with hidden whitespaces
Added `allowedParentComponents: string[]` option to meta which prevents
dropping, inserting or pasting components into wrong parents. For
example ListItem now can be placed only inside of List component.
This will unlock better experience with compound radix components.
InstancesItem is newer type introduced separately for gradual migration.
Not all legacy tree Instance is migrated away so we can finally use
better naming across whole system.
- in many places root check can be replaced with selector.length === 1
- reparent and insert utilities now accept selectors
- findClosestDroppableTarget output end instead of last index and always
fallback to root
With slots there can be same ids in one tree so we need new way to
address instances. Here I propose the list from target instance to the
root.
Now instead of computing parents by normalized tree (one instance of
slot can have many parents) we just access already computed list from
rendered tree.
This address can be computed when user click in dom which can be
traversed or it can be passed top-down with props.
The main con of this approach is collaboration. Reparanted instances on
by one user makes "selected address" stale. Though we have similar
situation with single id when instance is deleted.
Isolated mode for slots/components will make this problem less
noticable.
## 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
## 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
Ivan Starkov
