Commit Graph
11 Commits
Author SHA1 Message Date
Oleg Isonen 2752bcc786 feat: Support script and style tag when pasting HTML (#5447)
## 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-11-11 14:26:55 +01:00
Bogdan Chadkin 4f2d21ee06 fix: strip invalid attributes when paste html (#5304)
We never validated invalid attributes which cannot be rendered as jsx
and will break the build. Here just strip them away.
2025-06-28 17:15:58 +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 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 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 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 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 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 535d87d391 experimental: allow pasting svg as html embed (for now) (#5200)
Now icons are added as HtmlEmbed component when paste html. This is
essential for tailwind paste which use a lot of icons.

<img width="342" alt="image"
src="https://github.com/user-attachments/assets/06bbe633-e2ae-4929-99c5-91040cda9472"
/>
<img width="431" alt="image"
src="https://github.com/user-attachments/assets/8c7e1b5c-42b4-4d6f-8039-5918175bad7e"
/>


```html
    <div
      style="display: flex; border: 1px solid #ccc; border-radius: 5px; overflow: hidden;"
    >
      <button
        style="background-color: #f8f8f8; border: none; padding: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; border-right: 1px solid #ccc; font-family: sans-serif; font-size: 12px;"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          style="margin-right: 5px;"
        >
          <line x1="3" y1="12" x2="21" y2="12"></line>
          <line x1="3" y1="6" x2="21" y2="6"></line>
          <line x1="3" y1="18" x2="21" y2="18"></line>
        </svg>
        <span>Menu</span>
      </button>
      <button
        style="background-color: #f8f8f8; border: none; padding: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; border-right: 1px solid #ccc; font-family: sans-serif; font-size: 12px;"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          style="margin-right: 5px;"
        >
          <circle cx="12" cy="12" r="10"></circle>
          <line x1="12" y1="8" x2="12" y2="16"></line>
          <line x1="8" y1="12" x2="16" y2="12"></line>
        </svg>
        <span>Add</span>
      </button>
      <button
        style="background-color: #f8f8f8; border: none; padding: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: sans-serif; font-size: 12px;"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          style="margin-right: 5px;"
        >
          <path d="M18 6L6 18"></path>
          <path d="M6 6L18 18"></path>
        </svg>
        <span>Close</span>
      </button>
    </div>
```
2025-05-11 16:34:02 +04:00
Bogdan Chadkin c7c7d668ba experimental: paste inline styles (#5189)
Ref https://github.com/webstudio-is/webstudio/issues/4404

Inline styles are easy to support and tailwind templates occasionally
use them for unsupported stuff. Also fixed space collapsing.



https://github.com/user-attachments/assets/35e7a8d7-ef5b-496c-9a6d-0b05e113e503
2025-05-08 12:58:06 +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