Ref https://github.com/webstudio-is/webstudio-designer/issues/696
Gradually starting to migrate to new styles format. Here replaced
getCssRules and getPresetStylesMap with getStyleRules and
getPresetStyleRules utilities.
Will reuse both at once on release.
Before we populated preset style on instance creation. This does not let
us to distinct preset style from local one.
As an option we could use preset style hardcoded in meta though this may
affect user when we change defaults.
Here I added presetStyle column in Tree table with the list of styles
for component.
```
Array<{
component: string,
property: string,
value: StyleValue
}>
```
Will style controls as grey for such styles.
Ref https://github.com/webstudio-is/webstudio-designer/issues/651
We want to normalize our tree structure and need to distinct text
children with ids. Now instead of string its respresented as
```
{
type: 'text',
value: string
}
```
This also gives us a little type safety because typeof child ===
'string' ignores when child cannot be string.
Will help with
https://github.com/webstudio-is/webstudio-designer/issues/628
treeId is stored in every props update which complicates data flow and
requires passing it everywhere. Here I instead pass it inside of
transaction.
This allowed us pass undefined in props data when select instance so we
no longer need to create empty instance props. Updates will create it
lazily.
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
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.
isNew and createInstance flags makes state management more complex.
Instead tree of instances updates should be idempotent.
This will let us do more straightforward mapping from lexical nodes
to designer tree.
Bogdan Chadkin
