Feature/show full url (#18)

* show url below slug input

* reuse getsanitydocumentid logic

* add readme

* cleanup

* improve typing

* Update src/components/SlugField.tsx

Co-authored-by: Djovanni Tehubijuluw <[email protected]>

* use renderdefault

* fix typo

---------

Co-authored-by: Djovanni Tehubijuluw <[email protected]>

README.md

@@ -42,6 +42,9 @@ export const pageTreeConfig: PageTreeConfig = {
   apiVersion: '2023-12-08',
   /* Optionally provide the field name of the title field of your page documents, to be used to generate a slug automatically for example. */
   titleFieldName: 'title',
+  /* Used for showing the full url for a document and linking to it. */
+  /* optional, otherwise the path is shown */
+  baseUrl: "https://example.com"
 };
 ```
 

examples/studio/page-tree.config.ts

@@ -5,4 +5,5 @@ export const pageTreeConfig: PageTreeConfig = {
   pageSchemaTypes: ['homePage', 'contentPage'],
   apiVersion: '2023-12-08',
   titleFieldName: 'title',
+  baseUrl: 'https://q42.nl'
 };

src/components/PageTreeField.tsx

@@ -4,11 +4,12 @@ import { ObjectFieldProps, ReferenceValue, FormField, set, useFormValue, SanityD
 import styled from 'styled-components';
 
 import { PageTreeEditor } from './PageTreeEditor';
-import { DRAFTS_PREFIX, findPageTreeItemById, flatMapPageTree } from '../helpers/page-tree';
+import { findPageTreeItemById, flatMapPageTree } from '../helpers/page-tree';
 import { useOptimisticState } from '../hooks/useOptimisticState';
 import { usePageTree } from '../hooks/usePageTree';
 import { PageTreeConfigProvider } from '../hooks/usePageTreeConfig';
 import { PageTreeConfig, PageTreeItem } from '../types';
+import { getSanityDocumentId } from '../utils/sanity';
 
 export const PageTreeField = (
   props: ObjectFieldProps<ReferenceValue> & {
@@ -26,7 +27,7 @@ export const PageTreeField = (
   const [isPageTreeDialogOpen, setIsPageTreeDialogOpen] = useState(false);
 
   const parentId = props.inputProps.value?._ref;
-  const pageId = form._id?.replace(DRAFTS_PREFIX, '');
+  const pageId = getSanityDocumentId(form._id);
 
   const fieldPage = useMemo(() => (pageTree ? findPageTreeItemById(pageTree, pageId) : undefined), [pageTree, pageId]);
   const parentPage = useMemo(

src/components/SlugField.tsx

@@ -0,0 +1,61 @@
+import { Stack, Text } from '@sanity/ui';
+import { Reference, SlugInputProps, SlugValue, useEditState, useFormValue } from 'sanity';
+import { PageTreeConfig } from '../types';
+import { usePageTreeItem } from '../hooks/usePageTreeItem';
+import { getSanityDocumentId } from '../utils/sanity';
+
+export type SlugFieldProps = {
+  config: PageTreeConfig;
+} & SlugInputProps;
+
+export const SlugField = (props: SlugFieldProps) => {
+  const id = useFormValue(['_id']);
+  const type = useFormValue(['_type']);
+  // eslint-disable-next-line no-warning-comments
+  // TODO ideally this would be more type safe.
+  const parentRef = useFormValue(['parent']) as Reference | undefined;
+
+  const { config, value, renderDefault } = props;
+  return (
+    <Stack space={3}>
+      {renderDefault(props)}
+      {typeof id == 'string' && typeof type == 'string' && !!parentRef?._ref && (
+        <UrlExplanation id={id} type={type} parentId={parentRef?._ref} config={config} value={value} />
+      )}
+    </Stack>
+  );
+};
+
+type UrlExplanationProps = {
+  id: string;
+  type: string;
+  parentId: string;
+  value: SlugValue | undefined;
+  config: PageTreeConfig;
+};
+
+const UrlExplanation = ({ id, type, parentId, value, config }: UrlExplanationProps) => {
+  const state = useEditState(getSanityDocumentId(id), type ?? '');
+  const isPublished = !!state.published;
+
+  // we use published perspective so we don't get a draft version of the slug that has been changed of a parent page.
+  const { page, isLoading } = usePageTreeItem(parentId, config, 'published');
+  if (isLoading) return null;
+
+  const path = page?.path == '/' ? `${page?.path}${value?.current}` : `${page?.path}/${value?.current}`;
+
+  const url = config.baseUrl ? `${config.baseUrl}${path}` : null;
+  const linkToPage = url && (
+    <a href={url} target="blank">
+      {url}
+    </a>
+  );
+
+  const content = isPublished ? <>Link to page: {linkToPage}</> : <>Page url once published: {url ?? path}</>;
+
+  return (
+    <Text muted size={1}>
+      {content}
+    </Text>
+  );
+};

src/helpers/page-tree.ts

@@ -8,6 +8,7 @@ import {
   PageMetadata,
 } from '../types';
 import { getLanguageFromConfig } from './config';
+import { getSanityDocumentId } from '../utils/sanity';
 
 export const DRAFTS_PREFIX = 'drafts.';
 
@@ -95,15 +96,15 @@ const getPublishedAndDraftRawPageMetdadata = (
   );
   const draftPages = groupBy(
     pages.filter(p => p._id.startsWith(DRAFTS_PREFIX)),
-    p => p._id.replace(DRAFTS_PREFIX, ''),
+    p => getSanityDocumentId(p._id),
   );
 
   return pages
     .filter(page => isValidPage(config, page))
     .filter(p => !draftPages[p._id]) // filter out published versions for pages which have a draft
     .map(p => {
       const isDraft = p._id.startsWith(DRAFTS_PREFIX);
-      const _idWithoutDraft = p._id.replace(DRAFTS_PREFIX, '');
+      const _idWithoutDraft = getSanityDocumentId(p._id);
       const newPage: RawPageMetadataWithPublishedState = {
         ...p,
         _id: isDraft ? _idWithoutDraft : p._id,

src/hooks/usePageTreeItem.ts

@@ -0,0 +1,20 @@
+import { useMemo } from 'react';
+
+import { getRawPageMetadataQuery } from '../queries';
+import { RawPageMetadata, PageTreeConfig } from '../types';
+import { getAllPageMetadata } from '../helpers/page-tree';
+import { useListeningQuery } from 'sanity-plugin-utils';
+import { ClientPerspective } from 'next-sanity';
+
+export const usePageTreeItem = (documentId: string, config: PageTreeConfig, perspective?: ClientPerspective) => {
+  const { data, loading } = useListeningQuery<RawPageMetadata[]>(getRawPageMetadataQuery(config), {
+    options: { apiVersion: config.apiVersion, perspective },
+  });
+
+  const pageTree = useMemo(() => (data ? getAllPageMetadata(config, data) : undefined), [config, data]);
+
+  return {
+    isLoading: loading,
+    page: pageTree?.find(page => page._id === documentId),
+  };
+};

src/schema/definePageType.ts

@@ -3,6 +3,7 @@ import { DocumentDefinition, defineField, defineType, SlugOptions } from 'sanity
 import { PageTreeField } from '../components/PageTreeField';
 import { PageTreeConfig } from '../types';
 import { slugValidator } from '../validators/slug-validator';
+import { SlugField } from '../components/SlugField';
 
 type Options = {
   isRoot?: boolean;
@@ -32,6 +33,9 @@ const basePageFields = (config: PageTreeConfig, options: Options) => [
             source: config.titleFieldName ?? options.slugSource,
             isUnique: () => true,
           },
+          components: {
+            input: props => SlugField({ ...props, config }),
+          },
           validation: Rule => Rule.required().custom(slugValidator(config)),
           group: options.fieldsGroupName,
         }),

src/types.ts

@@ -47,6 +47,8 @@ export type PageTreeConfig = {
   pageSchemaTypes: string[];
   /* Field name of your page documents */
   titleFieldName?: string;
+  /* Used for creating page link on the editor page */
+  baseUrl?: string;
   /* This plugin supports the document-internationalization plugin. To use it properly, provide the supported languages. */
   documentInternationalization?: {
     /* Array of supported language code strings, e.g. ["en", "nl"]. These will be used in root pages and when creating a new child page it will set the language field based on the parent page. */

src/utils/sanity.ts

@@ -0,0 +1,6 @@
+export const DRAFTS_PREFIX = 'drafts.';
+
+/**
+ * Strips draft id prefix from Sanity document id when draft id is provided.
+ */
+export const getSanityDocumentId = (val: string) => val.replace(DRAFTS_PREFIX, '');

src/validators/slug-validator.ts

@@ -3,6 +3,7 @@ import { SlugValue, ValidationContext } from 'sanity';
 import { DRAFTS_PREFIX } from '../helpers/page-tree';
 import { getRawPageMetadataQuery } from '../queries';
 import { RawPageMetadata, PageTreeConfig, SanityRef } from '../types';
+import { getSanityDocumentId } from '../utils/sanity';
 
 /**
  * Validates that the slug is unique within the parent page and therefore that entire the path is unique.
@@ -20,7 +21,9 @@ export const slugValidator =
     const siblingPages = allPages.filter(page => page.parent?._ref === parentRef._ref);
 
     const siblingPagesWithSameSlug = siblingPages
-      .filter(page => page._id.replace(DRAFTS_PREFIX, '') !== context.document?._id.replace(DRAFTS_PREFIX, ''))
+      .filter(
+        page => getSanityDocumentId(page._id) !== (context.document?._id && getSanityDocumentId(context.document._id)),
+      )
       .filter(page => page.slug?.current === slug?.current);
 
     if (siblingPagesWithSameSlug.length) {