feat: Context menu for advanced style panel (#4876)

#4816

## Description

1. right click in advanced 
2. copy all
3. copy one
4. paste
5. search now works for properties AND values
6. backspace in add styles input when its empty now also closes the
input same as esc

## Steps for reproduction

1. click button
7. expect xyz

## 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/add-styles-input.tsx

@@ -0,0 +1,254 @@
+import { lexer } from "css-tree";
+import { forwardRef, useRef, useState, type KeyboardEvent } from "react";
+import { matchSorter } from "match-sorter";
+import {
+  Box,
+  ComboboxAnchor,
+  ComboboxContent,
+  ComboboxItemDescription,
+  ComboboxListbox,
+  ComboboxListboxItem,
+  ComboboxRoot,
+  ComboboxScrollArea,
+  InputField,
+  NestedInputButton,
+  Text,
+  theme,
+  useCombobox,
+} from "@webstudio-is/design-system";
+import {
+  properties as propertiesData,
+  keywordValues,
+  propertyDescriptions,
+  parseCssValue,
+} from "@webstudio-is/css-data";
+import {
+  cssWideKeywords,
+  hyphenateProperty,
+  type StyleProperty,
+} from "@webstudio-is/css-engine";
+import { deleteProperty, setProperty } from "../../shared/use-style-data";
+import { composeEventHandlers } from "~/shared/event-utils";
+
+type SearchItem = { property: string; label: string; value?: string };
+
+const autoCompleteItems: Array<SearchItem> = [];
+
+const getNewPropertyDescription = (item: null | SearchItem) => {
+  let description: string | undefined = `Create CSS variable.`;
+  if (item && item.property in propertyDescriptions) {
+    description = propertyDescriptions[item.property];
+  }
+  return <Box css={{ width: theme.spacing[28] }}>{description}</Box>;
+};
+
+const getAutocompleteItems = () => {
+  if (autoCompleteItems.length > 0) {
+    return autoCompleteItems;
+  }
+  for (const property in propertiesData) {
+    autoCompleteItems.push({
+      property,
+      label: hyphenateProperty(property),
+    });
+  }
+
+  const ignoreValues = new Set([...cssWideKeywords, ...keywordValues.color]);
+
+  for (const property in keywordValues) {
+    const values = keywordValues[property as keyof typeof keywordValues];
+    for (const value of values) {
+      if (ignoreValues.has(value)) {
+        continue;
+      }
+      autoCompleteItems.push({
+        property,
+        value,
+        label: `${hyphenateProperty(property)}: ${value}`,
+      });
+    }
+  }
+
+  autoCompleteItems.sort((a, b) =>
+    Intl.Collator().compare(a.property, b.property)
+  );
+
+  return autoCompleteItems;
+};
+
+const matchOrSuggestToCreate = (
+  search: string,
+  items: Array<SearchItem>,
+  itemToString: (item: SearchItem) => string
+) => {
+  const matched = matchSorter(items, search, {
+    keys: [itemToString],
+  });
+
+  // Limit the array to 100 elements
+  matched.length = Math.min(matched.length, 100);
+
+  const property = search.trim();
+  if (
+    property.startsWith("--") &&
+    lexer.match("<custom-ident>", property).matched
+  ) {
+    matched.unshift({
+      property,
+      label: `Create "${property}"`,
+    });
+  }
+  // When there is no match we suggest to create a custom property.
+  if (
+    matched.length === 0 &&
+    lexer.match("<custom-ident>", `--${property}`).matched
+  ) {
+    matched.unshift({
+      property: `--${property}`,
+      label: `--${property}: unset;`,
+    });
+  }
+
+  return matched;
+};
+
+/**
+ *
+ * Advanced search control supports following interactions
+ *
+ * find property
+ * create custom property
+ * submit css declarations
+ * paste css declarations
+ *
+ */
+export const AddStylesInput = forwardRef<
+  HTMLInputElement,
+  {
+    onClose: () => void;
+    onSubmit: (css: string) => void;
+    onFocus: () => void;
+    onBlur: () => void;
+  }
+>(({ onClose, onSubmit, onFocus, onBlur }, forwardedRef) => {
+  const [item, setItem] = useState<SearchItem>({
+    property: "",
+    label: "",
+  });
+  const highlightedItemRef = useRef<SearchItem>();
+
+  const combobox = useCombobox<SearchItem>({
+    getItems: getAutocompleteItems,
+    itemToString: (item) => item?.label ?? "",
+    value: item,
+    defaultHighlightedIndex: 0,
+    getItemProps: () => ({ text: "sentence" }),
+    match: matchOrSuggestToCreate,
+    onChange: (value) => setItem({ property: value ?? "", label: value ?? "" }),
+    onItemSelect: (item) => {
+      clear();
+      onSubmit(`${item.property}: ${item.value ?? "unset"}`);
+    },
+    onItemHighlight: (item) => {
+      const previousHighlightedItem = highlightedItemRef.current;
+      if (item?.value === undefined && previousHighlightedItem) {
+        deleteProperty(previousHighlightedItem.property as StyleProperty, {
+          isEphemeral: true,
+        });
+        highlightedItemRef.current = undefined;
+        return;
+      }
+
+      if (item?.value) {
+        const value = parseCssValue(item.property as StyleProperty, item.value);
+        setProperty(item.property as StyleProperty)(value, {
+          isEphemeral: true,
+        });
+        highlightedItemRef.current = item;
+      }
+    },
+  });
+
+  const descriptionItem = combobox.items[combobox.highlightedIndex];
+  const description = getNewPropertyDescription(descriptionItem);
+  const descriptions = combobox.items.map(getNewPropertyDescription);
+  const inputProps = combobox.getInputProps();
+
+  const clear = () => {
+    setItem({ property: "", label: "" });
+  };
+
+  const handleKeys = (event: KeyboardEvent) => {
+    // Dropdown might handle enter or escape.
+    if (event.defaultPrevented) {
+      return;
+    }
+    if (event.key === "Enter") {
+      clear();
+      onSubmit(item.property);
+      return;
+    }
+    // When user hits backspace and there is nothing in the input - we hide the input
+    const abortByBackspace =
+      event.key === "Backspace" && combobox.inputValue === "";
+
+    if (event.key === "Escape" || abortByBackspace) {
+      clear();
+      onClose();
+      event.preventDefault();
+    }
+  };
+
+  const handleKeyDown = composeEventHandlers(inputProps.onKeyDown, handleKeys, {
+    // Pass prevented events to the combobox (e.g., the Escape key doesn't work otherwise, as it's blocked by Radix)
+    checkForDefaultPrevented: false,
+  });
+
+  return (
+    <ComboboxRoot open={combobox.isOpen}>
+      <div {...combobox.getComboboxProps()}>
+        <ComboboxAnchor>
+          <InputField
+            {...inputProps}
+            autoFocus
+            onFocus={onFocus}
+            onBlur={(event) => {
+              inputProps.onBlur(event);
+              onBlur();
+            }}
+            inputRef={forwardedRef}
+            onKeyDown={handleKeyDown}
+            placeholder="Add styles"
+            suffix={<NestedInputButton {...combobox.getToggleButtonProps()} />}
+          />
+        </ComboboxAnchor>
+        <ComboboxContent>
+          <ComboboxListbox {...combobox.getMenuProps()}>
+            <ComboboxScrollArea>
+              {combobox.items.map((item, index) => (
+                <ComboboxListboxItem
+                  {...combobox.getItemProps({ item, index })}
+                  key={index}
+                  asChild
+                >
+                  <Text
+                    variant="labelsSentenceCase"
+                    truncate
+                    css={{ maxWidth: "25ch" }}
+                  >
+                    {item.label}
+                  </Text>
+                </ComboboxListboxItem>
+              ))}
+            </ComboboxScrollArea>
+            {description && (
+              <ComboboxItemDescription descriptions={descriptions}>
+                {description}
+              </ComboboxItemDescription>
+            )}
+          </ComboboxListbox>
+        </ComboboxContent>
+      </div>
+    </ComboboxRoot>
+  );
+});