Boolean flags may have a lot of combinations which can lead to
unexpected bugs. Better approach is to categorize nodes with specific
behaviours.
Here I added 5 types
- container - can accept other components with dnd
- control - usually form controls like inputs, without children
- embed - images, videos or other embeddable components, without
children
- rich-text - can be edited on double click
- rich-text-child - formatted text fragment, not listed in components
list
Droppable link an link created in text editor have different
requirements. We should split them. In the next PR they will get
different types so we will avoid similar issues in the future.
Ref https://github.com/webstudio-is/webstudio-designer/issues/487
Before lexical created paragraphs when press enter which we tried to
visually represent as line break by removing margins and converted to
line break to instances.
This could lead to a few issues.
1. When paragraph block is inside `<a>` nothing can be typed in the
beginning and in the end of paragraph
2. Paragraphs can be styled by users which can break text editor
visually
Here I overwritten default Enter command and insert line break instead
of paragraph. To protect from external sources like paste from clipboard
added transform to merge all paragraphs if move than one.
We will still have one paragraph in the root with display: inline style.
Though it will cause less damage to editor with user styles.
https://github.com/webstudio-is/webstudio-designer/issues/494
This PR Renders this UI and, when adding tokens - renders CSS variables
on the canvas: It's behind a feature flag.
<img width="411" alt="Screenshot 2022-11-25 at 15 51 00"
src="https://user-images.githubusercontent.com/52824/204009859-81ed72c4-e758-4973-be49-c8c65e6b4661.png">
## Before requesting a review
- [ ] if the PR is WIP - use draft mode
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
- [ ] what kind of review is needed?
- [ ] conceptual
- [ ] detailed
- [ ] with testing
## Test cases
- [ ] step by step interaction description and what is expected to
happen
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
Co-authored-by: istarkov <istarkov@gmail.com>
Bogdan Chadkin
