feat(comments): use document.components.layout and rename components

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 (
+    <CommentsEnabledProvider documentId={documentId} documentType={documentType}>
+      <CommentsDocumentLayoutInner {...props} />
+    </CommentsEnabledProvider>
+  )
+}
+
+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 (
+    <CommentsEnabledProvider documentId={documentId} documentType={documentType}>
+      <CommentsProvider
+        documentId={documentId}
+        documentType={documentType}
+        isCommentsOpen={inspector?.name === COMMENTS_INSPECTOR_NAME}
+        onCommentsOpen={handleOpenCommentsInspector}
+      >
+        <CommentsSelectedPathProvider>{props.renderDefault(props)}</CommentsSelectedPathProvider>
+      </CommentsProvider>
+    </CommentsEnabledProvider>
+  )
+}

packages/sanity/src/desk/comments/plugin/document-layout/index.ts

@@ -0,0 +1 @@
+export * from './CommentsDocumentLayout'

packages/sanity/src/desk/comments/plugin/field/CommentField.tsx → 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 <CommentFieldInner {...props} />
@@ -233,7 +233,7 @@ function CommentFieldInner(props: FieldProps) {
   const internalComments: FieldProps['__internal_comments'] = useMemo(
     () => ({
       button: currentUser && (
-        <CommentFieldButton
+        <CommentsFieldButton
           count={Number(count)}
           currentUser={currentUser}
           fieldTitle={fieldTitle}

packages/sanity/src/desk/comments/plugin/field/CommentFieldButton.tsx → packages/sanity/src/desk/comments/plugin/field/CommentsFieldButton.tsx

@@ -32,7 +32,7 @@ const ContentStack = styled(Stack)`
   width: 320px;
 `
 
-interface CommentFieldButtonProps {
+interface CommentsFieldButtonProps {
   count: number
   currentUser: CurrentUser
   fieldTitle: string
@@ -48,7 +48,7 @@ interface CommentFieldButtonProps {
   value: CommentMessage
 }
 
-export function CommentFieldButton(props: CommentFieldButtonProps) {
+export function CommentsFieldButton(props: CommentsFieldButtonProps) {
   const {
     count,
     currentUser,

packages/sanity/src/desk/comments/plugin/field/index.ts

@@ -1 +1 @@
-export * from './CommentField'
+export * from './CommentsField'

packages/sanity/src/desk/comments/plugin/index.ts

@@ -1,21 +1,28 @@
 import {commentsInspector} from './inspector'
-import {CommentField} from './field'
-import {CommentsLayout} from './layout'
+import {CommentsField} from './field'
+import {CommentsDocumentLayout} from './document-layout'
+import {CommentsStudioLayout} from './studio-layout'
 import {definePlugin} from 'sanity'
 
 export const comments = definePlugin({
   name: 'sanity/desk/comments',
+
   document: {
     inspectors: [commentsInspector],
+    components: {
+      layout: CommentsDocumentLayout,
+    },
   },
+
   form: {
     components: {
-      field: CommentField,
+      field: CommentsField,
     },
   },
+
   studio: {
     components: {
-      layout: CommentsLayout,
+      layout: CommentsStudioLayout,
     },
   },
 })

packages/sanity/src/desk/comments/plugin/layout/CommentsLayout.tsx → packages/sanity/src/desk/comments/plugin/studio-layout/CommentsStudioLayout.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import {CommentsOnboardingProvider, CommentsSetupProvider} from '../../src'
 import {LayoutProps} from 'sanity'
 
-export function CommentsLayout(props: LayoutProps) {
+export function CommentsStudioLayout(props: LayoutProps) {
   return (
     <CommentsSetupProvider>
       <CommentsOnboardingProvider>{props.renderDefault(props)}</CommentsOnboardingProvider>

packages/sanity/src/desk/comments/plugin/studio-layout/index.ts

@@ -0,0 +1 @@
+export * from './CommentsStudioLayout'

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 (
     <CommentsEnabledContext.Provider value={isEnabled}>{children}</CommentsEnabledContext.Provider>

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'

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
 }

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
+}