diff --git a/apps/admin-x-settings/src/components/settings/site/navigation/NavigationEditForm.tsx b/apps/admin-x-settings/src/components/settings/site/navigation/NavigationEditForm.tsx index 04692647c8..72cbbb1f46 100644 --- a/apps/admin-x-settings/src/components/settings/site/navigation/NavigationEditForm.tsx +++ b/apps/admin-x-settings/src/components/settings/site/navigation/NavigationEditForm.tsx @@ -26,6 +26,7 @@ const NavigationEditForm: React.FC<{ } + addItem={navigation.addItem} baseUrl={baseUrl} className="mt-1" clearError={key => navigation.clearError(navigation.newItem.id, key)} diff --git a/apps/admin-x-settings/src/components/settings/site/navigation/NavigationItemEditor.tsx b/apps/admin-x-settings/src/components/settings/site/navigation/NavigationItemEditor.tsx index ef576008cc..50e2689ed8 100644 --- a/apps/admin-x-settings/src/components/settings/site/navigation/NavigationItemEditor.tsx +++ b/apps/admin-x-settings/src/components/settings/site/navigation/NavigationItemEditor.tsx @@ -1,7 +1,7 @@ import React, {ReactNode} from 'react'; import clsx from 'clsx'; import {EditableItem, NavigationItem, NavigationItemErrors} from '../../../../hooks/site/useNavigationEditor'; -import {TextField, URLTextField} from '@tryghost/admin-x-design-system'; +import {TextField, URLTextField, formatUrl} from '@tryghost/admin-x-design-system'; export type NavigationItemEditorProps = React.HTMLAttributes & { baseUrl: string; @@ -12,9 +12,10 @@ export type NavigationItemEditorProps = React.HTMLAttributes & { unstyled?: boolean textFieldClasses?: string action?: ReactNode + addItem?: () => void } -const NavigationItemEditor: React.FC = ({baseUrl, item, updateItem, clearError, labelPlaceholder, unstyled, textFieldClasses, action, className, ...props}) => { +const NavigationItemEditor: React.FC = ({baseUrl, item, updateItem, addItem, clearError, labelPlaceholder, unstyled, textFieldClasses, action, className, ...props}) => { return (
@@ -29,7 +30,14 @@ const NavigationItemEditor: React.FC = ({baseUrl, ite value={item.label} hideTitle onChange={e => updateItem?.({label: e.target.value})} - onKeyDown={() => clearError?.('label')} + onKeyDown={(e) => { + updateItem?.({label: (e.target as HTMLInputElement).value}); + if (e.key === 'Enter') { + e.preventDefault(); + addItem?.(); + } + !!item.errors.label && clearError?.('label'); + }} />
@@ -44,7 +52,19 @@ const NavigationItemEditor: React.FC = ({baseUrl, ite value={item.url} hideTitle onChange={value => updateItem?.({url: value || ''})} - onKeyDown={() => clearError?.('url')} + onKeyDown={(e) => { + const urls = formatUrl((e.target as HTMLInputElement).value, baseUrl, true); + updateItem?.({url: urls.save || ''}); + }} + onKeyUp={(e) => { + if (e.key === 'Enter') { + e.preventDefault(); + const urls = formatUrl((e.target as HTMLInputElement).value, baseUrl, true); + updateItem?.({url: urls.save || ''}); + addItem?.(); + } + !!item.errors.url && clearError?.('url'); + }} />
{action}