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 */