experimental: Reusable css editor

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

@@ -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/copy-paste-menu.tsx → apps/builder/app/builder/shared/css-editor/copy-paste-menu.tsx

@@ -13,21 +13,20 @@ import {
   toValue,
   type StyleMap,
 } 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: StyleMap;
   onPaste: (cssText: string) => void;
 }) => {
-  const advancedStylesLonghands = useStore($advancedStylesLonghands);
   const lastClickedProperty = useRef<string>();
 
   const handlePaste = () => {
@@ -38,7 +37,7 @@ export const CopyPasteMenu = ({
     // 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) {
+    for (const [property, value] of styleMap) {
       const isEmpty = toValue(value) === "";
       if (properties.includes(property) && isEmpty === false) {
         currentStyleMap.set(hyphenateProperty(property), value);
@@ -55,7 +54,7 @@ export const CopyPasteMenu = ({
     if (property === undefined) {
       return;
     }
-    const value = advancedStylesLonghands.get(property);
+    const value = styleMap.get(property);
 
     if (value === undefined) {
       return;

apps/builder/app/builder/features/style-panel/sections/advanced/advanced.stories.tsx → apps/builder/app/builder/shared/css-editor/css-editor.stories.tsx

@@ -1,14 +1,14 @@
 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";
 
 const backgroundImage: StyleDecl = {
@@ -42,11 +42,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 = 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,
 };