diff --git a/packages/sanity/src/desk/comments/plugin/document-layout/CommentsDocumentLayout.tsx b/packages/sanity/src/desk/comments/plugin/document-layout/CommentsDocumentLayout.tsx new file mode 100644 index 000000000000..5a3f3e163233 --- /dev/null +++ b/packages/sanity/src/desk/comments/plugin/document-layout/CommentsDocumentLayout.tsx @@ -0,0 +1,50 @@ +import React, {useCallback} from 'react' +import { + CommentsEnabledProvider, + CommentsProvider, + CommentsSelectedPathProvider, + useCommentsEnabled, +} from '../../src' +import {useDocumentPane} from '../../..' +import {COMMENTS_INSPECTOR_NAME} from '../../../panes/document/constants' +import {DocumentLayoutProps} from 'sanity' + +export function CommentsDocumentLayout(props: DocumentLayoutProps) { + const {documentId, documentType} = props + + return ( + + + + ) +} + +function CommentsDocumentLayoutInner(props: DocumentLayoutProps) { + const {documentId, documentType} = props + const commentsEnabled = useCommentsEnabled() + const {openInspector, inspector} = useDocumentPane() + + const handleOpenCommentsInspector = useCallback(() => { + if (inspector?.name === COMMENTS_INSPECTOR_NAME) return + + openInspector(COMMENTS_INSPECTOR_NAME) + }, [inspector?.name, openInspector]) + + // If comments are not enabled, render the default document layout + if (!commentsEnabled) { + return props.renderDefault(props) + } + + return ( + + + {props.renderDefault(props)} + + + ) +} diff --git a/packages/sanity/src/desk/comments/plugin/document-layout/index.ts b/packages/sanity/src/desk/comments/plugin/document-layout/index.ts new file mode 100644 index 000000000000..83ed9e8c602d --- /dev/null +++ b/packages/sanity/src/desk/comments/plugin/document-layout/index.ts @@ -0,0 +1 @@ +export * from './CommentsDocumentLayout' diff --git a/packages/sanity/src/desk/comments/plugin/field/CommentField.tsx b/packages/sanity/src/desk/comments/plugin/field/CommentsField.tsx similarity index 98% rename from packages/sanity/src/desk/comments/plugin/field/CommentField.tsx rename to packages/sanity/src/desk/comments/plugin/field/CommentsField.tsx index 630910678f84..c68f14d521b9 100644 --- a/packages/sanity/src/desk/comments/plugin/field/CommentField.tsx +++ b/packages/sanity/src/desk/comments/plugin/field/CommentsField.tsx @@ -13,7 +13,7 @@ import { CommentCreatePayload, useCommentsSelectedPath, } from '../../src' -import {CommentFieldButton} from './CommentFieldButton' +import {CommentsFieldButton} from './CommentsFieldButton' import {FieldProps, getSchemaTypeTitle, useCurrentUser} from 'sanity' const HIGHLIGHT_BLOCK_VARIANTS: Variants = { @@ -28,7 +28,7 @@ const HIGHLIGHT_BLOCK_VARIANTS: Variants = { }, } -export function CommentField(props: FieldProps) { +export function CommentsField(props: FieldProps) { const isEnabled = useCommentsEnabled() if (isEnabled) return @@ -233,7 +233,7 @@ function CommentFieldInner(props: FieldProps) { const internalComments: FieldProps['__internal_comments'] = useMemo( () => ({ button: currentUser && ( - {props.renderDefault(props)} diff --git a/packages/sanity/src/desk/comments/plugin/studio-layout/index.ts b/packages/sanity/src/desk/comments/plugin/studio-layout/index.ts new file mode 100644 index 000000000000..6e525fb95ca3 --- /dev/null +++ b/packages/sanity/src/desk/comments/plugin/studio-layout/index.ts @@ -0,0 +1 @@ +export * from './CommentsStudioLayout' diff --git a/packages/sanity/src/desk/comments/src/context/enabled/CommentsEnabledProvider.tsx b/packages/sanity/src/desk/comments/src/context/enabled/CommentsEnabledProvider.tsx index 23f5bc95bdaa..cf0221dd7fd5 100644 --- a/packages/sanity/src/desk/comments/src/context/enabled/CommentsEnabledProvider.tsx +++ b/packages/sanity/src/desk/comments/src/context/enabled/CommentsEnabledProvider.tsx @@ -1,6 +1,6 @@ -import React, {useMemo} from 'react' +import React from 'react' +import {useResolveCommentsEnabled} from '../../hooks' import {CommentsEnabledContext} from './CommentsEnabledContext' -import {useFeatureEnabled, useSource, getPublishedId} from 'sanity' interface CommentsEnabledProviderProps { children: React.ReactNode @@ -13,21 +13,7 @@ export const CommentsEnabledProvider = React.memo(function CommentsEnabledProvid ) { const {children, documentId, documentType} = props - // Check if the projects plan has the feature enabled - const {enabled: featureEnabled, isLoading} = useFeatureEnabled('studioComments') - - const {enabled} = useSource().document.unstable_comments - - // Check if the feature is enabled for the current document in the config - const enabledFromConfig = useMemo( - () => enabled({documentType, documentId: getPublishedId(documentId)}), - [documentId, documentType, enabled], - ) - - const isEnabled = useMemo((): boolean => { - if (isLoading || !featureEnabled || !enabledFromConfig) return false - return true - }, [enabledFromConfig, featureEnabled, isLoading]) + const isEnabled = useResolveCommentsEnabled(documentId, documentType) return ( {children} diff --git a/packages/sanity/src/desk/comments/src/hooks/index.ts b/packages/sanity/src/desk/comments/src/hooks/index.ts index 6a540105c94b..5d1ea8237220 100644 --- a/packages/sanity/src/desk/comments/src/hooks/index.ts +++ b/packages/sanity/src/desk/comments/src/hooks/index.ts @@ -5,3 +5,4 @@ export * from './useCommentsSetup' export * from './useCommentsEnabled' export * from './useCommentsOnboarding' export * from './useCommentsSelectedPath' +export * from './useResolveCommentsEnabled' diff --git a/packages/sanity/src/desk/comments/src/hooks/useCommentsEnabled.ts b/packages/sanity/src/desk/comments/src/hooks/useCommentsEnabled.ts index 9c67673cbbe3..935f51d1b840 100644 --- a/packages/sanity/src/desk/comments/src/hooks/useCommentsEnabled.ts +++ b/packages/sanity/src/desk/comments/src/hooks/useCommentsEnabled.ts @@ -8,7 +8,11 @@ import {CommentsEnabledContext} from '../context/enabled' * if comments is enabled for the current document in the config API. */ export function useCommentsEnabled(): boolean { - const enabled = useContext(CommentsEnabledContext) + const ctx = useContext(CommentsEnabledContext) - return Boolean(enabled) + if (ctx === null) { + throw new Error('useCommentsEnabled: missing context value') + } + + return ctx } diff --git a/packages/sanity/src/desk/comments/src/hooks/useResolveCommentsEnabled.ts b/packages/sanity/src/desk/comments/src/hooks/useResolveCommentsEnabled.ts new file mode 100644 index 000000000000..5028b6269d19 --- /dev/null +++ b/packages/sanity/src/desk/comments/src/hooks/useResolveCommentsEnabled.ts @@ -0,0 +1,27 @@ +import {useMemo} from 'react' +import {getPublishedId, useFeatureEnabled, useSource} from 'sanity' + +/** + * @internal + * A hook that resolves if comments are enabled for the current document and document type + * and if the feature is enabled for the current project. + */ +export function useResolveCommentsEnabled(documentId: string, documentType: string): boolean { + // Check if the projects plan has the feature enabled + const {enabled: featureEnabled, isLoading} = useFeatureEnabled('studioComments') + + const {enabled} = useSource().document.unstable_comments + + // Check if the feature is enabled for the current document in the config + const enabledFromConfig = useMemo( + () => enabled({documentType, documentId: getPublishedId(documentId)}), + [documentId, documentType, enabled], + ) + + const isEnabled = useMemo((): boolean => { + if (isLoading || !featureEnabled || !enabledFromConfig) return false + return true + }, [enabledFromConfig, featureEnabled, isLoading]) + + return isEnabled +}