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>
don't display chevron if there are no items to display in the dropdown
and fix the bg on chevron's/unit text-field suffix button.
## 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
Our designer bundle heavily bloated with not analyzable commonjs
generated by typescript.
The biggest problem comes from bundled icons library which esbuild
cannot tree shake because of cjs.
Another issue is broken code splitting. Packages in one piece are appear
in chunks and always loaded even with dynamic import and React.lazy.
To solve this I migrated each package to native node es modules.
Storybook and jest work almost without changes. Though it's not possible
to run remix in esm project (while still esm packages can be bundled for
ssr). And as a result designer jest failed because of cjs tests requires
from esm packages. As a solution I generated additional commonjs
artifacts in lib/cjs.
du -ck public/build
2336
1736
The new version got more readable snapshots, no longer depends jsdom and
has much better esm support (will be enabled in next PR).
Had to switch to babel to support typescript, react and esm for now.
Generated .props.json in react-sdk added huge amount of unused data to
app bundle.
Here I loaded only what's used, validated generated data and covered
meta with strict types.
As you can see this heavily reduced app size
du -ck public/build
2800
2336
Eslint always had issues finding unused variables. And it's usually
required two more plugins beside builtin functionality to handle this
case.
Typescript has this builtin and handles all cases out of the box. Also
it works faster and more responsive in ide than eslint.
Styles were lost when refactored with new css engine. Here used the same
way as with className before but instead set data-ws-id attribute. Did
not add data-ws-component to avoid selecting.
Fixed text toolbar background for dark mode.
Ref https://github.com/webstudio-is/webstudio-designer/issues/107
Text toolbar is badly positioned when flipped up. Keeping it too close
to cursor makes text selection harder.
Here I replaced custom logic with computed rect from toolbar parent and
state from canvas. A few middlewares polished offsets. Flip no longer
overlap text.
Also fixed toolbar background.
Hide toolbar while selecting text with mouse.
Ivan Starkov
