diff --git a/src/components/PageSettingsModal/PageSettingsModal.tsx b/src/components/PageSettingsModal/PageSettingsModal.tsx index 14fe98706..bfef42e12 100644 --- a/src/components/PageSettingsModal/PageSettingsModal.tsx +++ b/src/components/PageSettingsModal/PageSettingsModal.tsx @@ -96,6 +96,7 @@ export const PageSettingsModal = ({ }: PageSettingsModalParams) => { const { siteName, fileName } = params const isTiptapEnabled = useFeatureIsOn("is-tiptap-enabled") + const isPageCreated = !fileName const existingTitlesArray = pagesData .filter((page) => page.name !== fileName) @@ -146,6 +147,23 @@ export const PageSettingsModal = ({ }) } + const getDefaultPermalink = (title: string) => { + if (!title) return "" + const titleSlug = title + .toLowerCase() + .replace(/[^a-z0-9]+/g, "-") + .replace(/^-+|-+$/g, "") + return `/${titleSlug}/` + } + + const currTitle = watch("title") + const currPermalink = watch("permalink") + useEffect(() => { + if (isPageCreated && currPermalink !== getDefaultPermalink(currTitle)) { + setValue("permalink", getDefaultPermalink(currTitle)) + } + }, [isPageCreated, setValue, currTitle, currPermalink]) + return ( @@ -169,8 +187,17 @@ export const PageSettingsModal = ({ isLink={false} /> {/* Title */} - - Page title + + + Page title + + This appears on the top of the browser window or tab + + {errors.title?.message} -
{/* Permalink */} - + Page URL - {`${siteUrl}${watch("permalink")}`} + {isPageCreated + ? "You can change this later in Page Settings." + : `${siteUrl}${watch("permalink")}`} + {isPageCreated && ( + + + {`${siteUrl}${watch("permalink")}`} + + + )} + {errors.permalink?.message} -
{isTiptapEnabled && (