feat: add inline rename support for typography presets

Author: eldomagan

resources/assets/editor/components.d.ts

@@ -42,6 +42,7 @@ declare module 'vue' {
     IHeroiconsItalic: typeof import('~icons/heroicons/italic')['default']
     IHeroiconsLink: typeof import('~icons/heroicons/link')['default']
     IHeroiconsMagnifyingGlass: typeof import('~icons/heroicons/magnifying-glass')['default']
+    IHeroiconsPencil: typeof import('~icons/heroicons/pencil')['default']
     IHeroiconsPlus: typeof import('~icons/heroicons/plus')['default']
     IHeroiconsQuestionMarkCircle: typeof import('~icons/heroicons/question-mark-circle')['default']
     IHeroiconsTrash: typeof import('~icons/heroicons/trash')['default']

resources/assets/editor/components/TypographyPicker.vue

@@ -18,7 +18,6 @@ const typographyPresets = computed(() => {
     return {};
   }
 
-  // Find the TypographyPresets group setting
   const settingId = theme.value.settingsSchema
     .flatMap((obj) => obj.settings)
     .find((setting) => setting.type === 'typography_presets')?.id;
@@ -27,7 +26,6 @@ const typographyPresets = computed(() => {
     return {};
   }
 
-  // Return the presets from the group
   return theme.value.settings[settingId] || {};
 });
 
@@ -45,11 +43,11 @@ const selectedPreset = computed(() => {
 });
 
 const selectedLabel = computed(() => {
-  if (!model.value) {
+  if (!model.value || !selectedPreset.value) {
     return null;
   }
 
-  return toTitleCase(model.value);
+  return selectedPreset.value.name || toTitleCase(model.value);
 });
 
 function onSelectPreset(id: string) {

resources/assets/editor/components/TypographyPresetEditor.vue

@@ -20,6 +20,7 @@ interface Font {
 }
 
 interface TypographyPresetValue {
+  name?: string;
   fontFamily: Font | null;
   fontStyle: string;
   fontWeight: number;

resources/assets/editor/components/TypographyPresetPreview.vue

@@ -28,7 +28,7 @@ const displayLabel = computed(() => {
     return '';
   }
 
-  return toTitleCase(props.label);
+  return props.preset?.name || toTitleCase(props.label);
 });
 
 const summary = computed(() => {

resources/assets/editor/components/TypographyPresets.vue

@@ -2,6 +2,7 @@
 import type { PropertyField } from '@craftile/types';
 import { Dialog } from '@ark-ui/vue/dialog';
 import useI18n from '../composables/i18n';
+import { toTitleCase } from '../utils/strings';
 import TypographyPresetEditor from './TypographyPresetEditor.vue';
 import TypographyPresetPreview from './TypographyPresetPreview.vue';
 
@@ -13,6 +14,7 @@ interface Font {
 }
 
 interface TypographyPresetData {
+  name?: string;
   fontFamily: Font | null;
   fontStyle: string;
   fontWeight: string;
@@ -33,6 +35,8 @@ const { t } = useI18n();
 
 const editingPreset = ref<string | null>(null);
 const editModalOpen = ref(false);
+const isEditingName = ref(false);
+const editingNameValue = ref('');
 
 const themePresetIds = computed(() => {
   return Object.keys(props.field.presets || {});
@@ -51,6 +55,18 @@ const editingPresetValue = computed({
   }
 });
 
+const editingPresetDisplayName = computed(() => {
+  if (!editingPreset.value || !editingPresetValue.value) {
+    return '';
+  }
+  return editingPresetValue.value.name || toTitleCase(editingPreset.value);
+});
+
+const canRenameCurrentPreset = computed(() => {
+  if (!editingPreset.value) return false;
+  return !themePresetIds.value.includes(editingPreset.value);
+});
+
 function onEditPreset(id: string) {
   editingPreset.value = id;
   editModalOpen.value = true;
@@ -85,6 +101,47 @@ function onDeletePreset(id: string) {
   model.value = rest;
 }
 
+function startEditingName() {
+  if (!canRenameCurrentPreset.value) {
+    return;
+  }
+
+  isEditingName.value = true;
+  editingNameValue.value = editingPresetValue.value?.name || editingPresetDisplayName.value;
+
+  nextTick(() => {
+    const input = document.querySelector('.preset-name-input') as HTMLInputElement;
+    input?.focus();
+    input?.select();
+  });
+}
+
+function saveEditingName() {
+  if (!editingPresetValue.value) {
+    return;
+  }
+
+  editingPresetValue.value = {
+    ...editingPresetValue.value,
+    name: editingNameValue.value?.trim(),
+  };
+
+  isEditingName.value = false;
+}
+
+function cancelEditingName() {
+  isEditingName.value = false;
+  editingNameValue.value = '';
+}
+
+function handleNameKeydown(e: KeyboardEvent) {
+  if (e.key === 'Enter') {
+    saveEditingName();
+  } else if (e.key === 'Escape') {
+    cancelEditingName();
+  }
+}
+
 function handleEditorDelete() {
   if (!editingPreset.value) {
     return;
@@ -148,7 +205,35 @@ const canDeleteCurrentPreset = computed(() => {
       <Dialog.Positioner class="flex fixed z-50 top-14 left-14 bottom-0 w-75 items-center justify-center">
         <Dialog.Content class="bg-white shadow flex flex-col w-full h-full overflow-hidden">
           <header class="flex-none h-12 border-b border-neutral-200 flex gap-3 px-4 items-center justify-between">
-            <Dialog.Title class="capitalize">{{ t('Editing') }} {{ editingPreset?.replace('-', ' ') }}</Dialog.Title>
+            <div class="flex items-center gap-2 flex-1 min-w-0">
+              <span class="text-sm text-gray-600 flex-none">{{ t('Editing') }}</span>
+
+              <input
+                v-if="isEditingName"
+                v-model="editingNameValue"
+                type="text"
+                maxlength="50"
+                class="preset-name-input flex-1 min-w-0 px-2 py-1 text-sm font-medium border border-blue-500 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+                @blur="saveEditingName"
+                @keydown="handleNameKeydown"
+              />
+
+              <button
+                v-else
+                type="button"
+                class="flex-1 min-w-0 text-left px-2 py-1 text-sm font-medium rounded truncate"
+                :class="canRenameCurrentPreset ? 'hover:bg-gray-100 cursor-pointer' : 'cursor-default'"
+                :title="canRenameCurrentPreset ? t('Click to rename') : t('Theme preset (cannot be renamed)')"
+                @click="startEditingName"
+              >
+                {{ editingPresetDisplayName }}
+                <i-heroicons-pencil
+                  v-if="canRenameCurrentPreset"
+                  class="inline-block w-3 h-3 ml-1 text-gray-400"
+                />
+              </button>
+            </div>
+
             <Dialog.CloseTrigger class="cursor-pointer rounded-lg p-0.5 text-neutral-700 hover:bg-neutral-300">
               <i-heroicons-x-mark class="w-5 h-5" />
             </Dialog.CloseTrigger>

resources/lang/en/theme-editor.php

@@ -88,6 +88,10 @@
     'Letter Spacing' => 'Letter Spacing',
     'Text Transform' => 'Text Transform',
 
+    // Typography preset rename (inline editing)
+    'Click to rename' => 'Click to rename',
+    'Theme preset (cannot be renamed)' => 'Theme preset (cannot be renamed)',
+
     // Font size options
     'Extra Small' => 'Extra Small',
     'Small' => 'Small',

src/Settings/Support/TypographyValue.php

@@ -7,6 +7,8 @@
 
 class TypographyValue
 {
+    public readonly ?string $name;
+
     public readonly ?FontValue $fontFamily;
 
     public readonly string $fontStyle;
@@ -27,6 +29,8 @@ public function __construct(array $data, string $id)
     {
         $this->id = $id;
 
+        $this->name = $data['name'] ?? null;
+
         $this->fontFamily = $this->transformFontFamily($data['fontFamily'] ?? null);
         $this->fontStyle = $data['fontStyle'] ?? 'normal';
         $this->fontWeight = $data['fontWeight'] ?? '400';
@@ -82,6 +86,7 @@ public function __toString(): string
     public function toArray(): array
     {
         return [
+            'name' => $this->name,
             'fontFamily' => $this->fontFamily?->toArray(),
             'fontStyle' => $this->fontStyle,
             'fontWeight' => $this->fontWeight,

tests/Settings/Support/TypographyValueTest.php

@@ -395,3 +395,45 @@
     expect($value->toCss()->toHtml())
         ->toContain('[data-typography="heading1"]');
 });
+
+it('constructs with name', function () {
+    $data = [
+        'name' => 'My Custom Heading',
+        'fontSize' => 'xl',
+    ];
+
+    $value = new TypographyValue($data, 'heading');
+
+    expect($value->name)->toBe('My Custom Heading');
+});
+
+it('handles missing name', function () {
+    $value = new TypographyValue([], 'test');
+
+    expect($value->name)->toBeNull();
+});
+
+it('includes name in toArray', function () {
+    $data = [
+        'name' => 'Test Preset Name',
+        'fontSize' => 'base',
+    ];
+
+    $value = new TypographyValue($data, 'test');
+    $array = $value->toArray();
+
+    expect($array)
+        ->toHaveKey('name')
+        ->and($array['name'])->toBe('Test Preset Name');
+});
+
+it('includes null name in toArray when not provided', function () {
+    $data = ['fontSize' => 'base'];
+
+    $value = new TypographyValue($data, 'test');
+    $array = $value->toArray();
+
+    expect($array)
+        ->toHaveKey('name')
+        ->and($array['name'])->toBeNull();
+});