feat: paste HTML with tailwind classes (#5296)

Ref #2651

Added command to let users paste tailwind fragments.

- all classes are converted to local styles
- breakpoints are adapted to desktop-first if possible
- images are automatically uploaded

Author: TrySound

apps/builder/app/builder/features/command-panel/command-panel.tsx

@@ -459,7 +459,7 @@ const $shortcutOptions = computed([$commandMetas], (commandMetas) => {
   const shortcutOptions: ShortcutOption[] = [];
   for (const [name, meta] of commandMetas) {
     if (!meta.hidden) {
-      const label = humanizeString(name);
+      const label = meta.label ?? humanizeString(name);
       const keys = meta.defaultHotkeys?.[0]?.split("+");
       shortcutOptions.push({
         tokens: ["shortcuts", "commands", label],
@@ -493,7 +493,7 @@ const ShortcutOptionsGroup = ({ options }: { options: ShortcutOption[] }) => {
             emitCommand(name as never);
           }}
         >
-          <Text variant="labelsTitleCase">{label}</Text>
+          <Text variant="labelsSentenceCase">{label}</Text>
           {keys && <Kbd value={keys} />}
         </CommandItem>
       ))}

apps/builder/app/builder/shared/commands.ts

@@ -6,7 +6,6 @@ import {
 } from "@webstudio-is/sdk";
 import type { Instance } from "@webstudio-is/sdk";
 import { toast } from "@webstudio-is/design-system";
-import { isFeatureEnabled } from "@webstudio-is/feature-flags";
 import { createCommandsEmitter, type Command } from "~/shared/commands-emitter";
 import {
   $editingItemSelector,
@@ -576,10 +575,12 @@ export const { emitCommand, subscribeCommands } = createCommandsEmitter({
     },
     {
       name: "wrapInElement",
+      label: "Wrap in an Element",
       handler: () => wrapIn(elementComponent),
     },
     {
       name: "wrapInLink",
+      label: "Wrap in a Link",
       handler: () => wrapIn(elementComponent, "a"),
     },
     {
@@ -588,27 +589,26 @@ export const { emitCommand, subscribeCommands } = createCommandsEmitter({
     },
     {
       name: "replaceWithElement",
+      label: "Replace with an Element",
       handler: () => replaceWith(elementComponent),
     },
     {
       name: "replaceWithLink",
+      label: "Replace with a Link",
       handler: () => replaceWith(elementComponent, "a"),
     },
 
-    ...(isFeatureEnabled("tailwind")
-      ? [
-          {
-            name: "pasteHtmlWithTailwindClasses",
-            handler: async () => {
-              const html = await navigator.clipboard.readText();
-              let fragment = generateFragmentFromHtml(html);
-              fragment = await denormalizeSrcProps(fragment);
-              fragment = await generateFragmentFromTailwind(fragment);
-              return insertWebstudioFragmentAt(fragment);
-            },
-          },
-        ]
-      : []),
+    {
+      name: "pasteTailwind",
+      label: "Paste HTML with Tailwind classes",
+      handler: async () => {
+        const html = await navigator.clipboard.readText();
+        let fragment = generateFragmentFromHtml(html);
+        fragment = await denormalizeSrcProps(fragment);
+        fragment = await generateFragmentFromTailwind(fragment);
+        return insertWebstudioFragmentAt(fragment);
+      },
+    },
 
     // history
 

apps/builder/app/shared/commands-emitter.ts

@@ -5,6 +5,7 @@ import { clientSyncStore } from "~/shared/sync";
 type CommandMeta<CommandName extends string> = {
   // @todo category, description
   name: CommandName;
+  label?: string;
   /** default because hotkeys can be customized from ui */
   defaultHotkeys?: string[];
   /** set to false when default browser or radix behavior is desired */