experimental: Reusable css editor (#4945)

## Description

For using in animations UI we need a reusable css editor.

## Steps for reproduction

This PR should not have changed how advanced section works at all. This
is pure refactoring.

## 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

Author: kof

apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx

@@ -2,7 +2,7 @@ import { computed } from "nanostores";
 import {
   hyphenateProperty,
   type CssProperty,
-  type StyleMap,
+  type CssStyleMap,
 } from "@webstudio-is/css-engine";
 import { $matchingBreakpoints, getDefinedStyles } from "../../shared/model";
 import { sections } from "../sections";
@@ -42,7 +42,7 @@ export const $advancedStylesLonghands = computed(
     styles,
     settings
   ) => {
-    const advancedStyles: StyleMap = new Map();
+    const advancedStyles: CssStyleMap = new Map();
 
     if (instancePath === undefined) {
       return advancedStyles;

apps/builder/app/builder/features/style-panel/sections/advanced/stores.ts

@@ -30,7 +30,10 @@ import {
   toValue,
   type StyleProperty,
 } from "@webstudio-is/css-engine";
-import { deleteProperty, setProperty } from "../../shared/use-style-data";
+import {
+  deleteProperty,
+  setProperty,
+} from "../../features/style-panel/shared/use-style-data";
 import { composeEventHandlers } from "~/shared/event-utils";
 import { parseStyleInput } from "./parse-style-input";
 

apps/builder/app/builder/features/style-panel/sections/advanced/add-style-input.tsx apps/builder/app/builder/shared/css-editor/add-style-input.tsx

@@ -11,23 +11,23 @@ import {
   hyphenateProperty,
   mergeStyles,
   toValue,
-  type StyleMap,
+  type CssProperty,
+  type CssStyleMap,
 } from "@webstudio-is/css-engine";
-import { useStore } from "@nanostores/react";
-import { $advancedStylesLonghands } from "./stores";
 
 export const copyAttribute = "data-declaration";
 
 export const CopyPasteMenu = ({
   children,
   properties,
+  styleMap,
   onPaste,
 }: {
   children: ReactNode;
   properties: Array<string>;
+  styleMap: CssStyleMap;
   onPaste: (cssText: string) => void;
 }) => {
-  const advancedStylesLonghands = useStore($advancedStylesLonghands);
   const lastClickedProperty = useRef<string>();
 
   const handlePaste = () => {
@@ -37,8 +37,8 @@ export const CopyPasteMenu = ({
   const handleCopyAll = () => {
     // We want to only copy properties that are currently in front of the user.
     // That includes search or any future filters.
-    const currentStyleMap: StyleMap = new Map();
-    for (const [property, value] of advancedStylesLonghands) {
+    const currentStyleMap: CssStyleMap = new Map();
+    for (const [property, value] of styleMap) {
       const isEmpty = toValue(value) === "";
       if (properties.includes(property) && isEmpty === false) {
         currentStyleMap.set(hyphenateProperty(property), value);
@@ -55,7 +55,7 @@ export const CopyPasteMenu = ({
     if (property === undefined) {
       return;
     }
-    const value = advancedStylesLonghands.get(property);
+    const value = styleMap.get(property as CssProperty);
 
     if (value === undefined) {
       return;

apps/builder/app/builder/features/style-panel/sections/advanced/copy-paste-menu.tsx apps/builder/app/builder/shared/css-editor/copy-paste-menu.tsx

@@ -1,15 +1,16 @@
 import { getStyleDeclKey, type StyleDecl } from "@webstudio-is/sdk";
 import { registerContainers } from "~/shared/sync";
-import { Section } from "./advanced";
+import { CssEditor as CssEditorComponent } from "./css-editor";
 import {
   $breakpoints,
   $instances,
   $selectedBreakpointId,
   $styles,
   $styleSourceSelections,
 } from "~/shared/nano-states";
-import { setProperty } from "../../shared/use-style-data";
+import { setProperty } from "../../features/style-panel/shared/use-style-data";
 import { $awareness } from "~/shared/awareness";
+import type { CssStyleMap } from "@webstudio-is/css-engine";
 
 const backgroundImage: StyleDecl = {
   breakpointId: "base",
@@ -42,11 +43,24 @@ setProperty("accentColor")({ type: "keyword", value: "red" });
 setProperty("alignContent")({ type: "keyword", value: "normal" });
 setProperty("opacity")({ type: "unit", unit: "number", value: 11.2 });
 
-export const Advanced = () => {
-  return <Section />;
+export const CssEditor = () => {
+  const styleMap: CssStyleMap = new Map([
+    ["background-image", backgroundImage.value],
+    ["accent-color", { type: "keyword", value: "red" }],
+    ["align-content", { type: "keyword", value: "normal" }],
+    ["opacity", { type: "unit", unit: "number", value: 11.2 }],
+  ]);
+  return (
+    <CssEditorComponent
+      styleMap={styleMap}
+      onDeleteProperty={() => undefined}
+      onSetProperty={() => () => undefined}
+      onAddProperties={() => undefined}
+    />
+  );
 };
 
 export default {
-  title: "Style Panel/Advanced",
-  component: Advanced,
+  title: "Style Panel",
+  component: CssEditor,
 };