diff --git a/apps/builder/app/builder/features/command-panel/command-panel.tsx b/apps/builder/app/builder/features/command-panel/command-panel.tsx index 0d33cf2d04ce..ee06e7594921 100644 --- a/apps/builder/app/builder/features/command-panel/command-panel.tsx +++ b/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); }} > - {label} + {label} {keys && } ))} diff --git a/apps/builder/app/builder/shared/commands.ts b/apps/builder/app/builder/shared/commands.ts index ada4d6139988..f0633e63d436 100644 --- a/apps/builder/app/builder/shared/commands.ts +++ b/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 diff --git a/apps/builder/app/shared/commands-emitter.ts b/apps/builder/app/shared/commands-emitter.ts index 0b29202ea937..7fda568409c6 100644 --- a/apps/builder/app/shared/commands-emitter.ts +++ b/apps/builder/app/shared/commands-emitter.ts @@ -5,6 +5,7 @@ import { clientSyncStore } from "~/shared/sync"; type CommandMeta = { // @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 */