feat(desk): implement comments (beta)

.github/CODEOWNERS

@@ -25,3 +25,5 @@
 # Tom owns the Shopify templates
 /packages/@sanity/cli/src/actions/init-project/templates/shopify* @thebiggianthead
 /packages/@sanity/cli/templates/shopify* @thebiggianthead
+
+/packages/sanity/src/desk/comments/ @hermanwikner

dev/studio-e2e-testing/sanity.config.ts

@@ -12,7 +12,6 @@ import {defaultDocumentNode, newDocumentOptions, structure} from 'sanity-test-st
 import {presenceTool} from 'sanity-test-studio/plugins/presence'
 import {copyAction} from 'sanity-test-studio/fieldActions/copyAction'
 import {assistFieldActionGroup} from 'sanity-test-studio/fieldActions/assistFieldActionGroup'
-import {commentAction} from 'sanity-test-studio/fieldActions/commentFieldAction'
 import {customInspector} from 'sanity-test-studio/inspectors/custom'
 import {pasteAction} from 'sanity-test-studio/fieldActions/pasteAction'
 import {Branding} from './components/Branding'
@@ -45,7 +44,7 @@ const sharedSettings = definePlugin({
     },
     unstable_fieldActions: (prev, ctx) => {
       if (['fieldActionsTest', 'stringsTest'].includes(ctx.documentType)) {
-        return [...prev, commentAction, assistFieldActionGroup, copyAction, pasteAction]
+        return [...prev, assistFieldActionGroup, copyAction, pasteAction]
       }
 
       return prev

dev/test-studio/sanity.config.ts

@@ -5,7 +5,6 @@ import {deskTool} from 'sanity/desk'
 import {muxInput} from 'sanity-plugin-mux-input'
 import {assist} from '@sanity/assist'
 import {googleMapsInput} from '@sanity/google-maps-input'
-// eslint-disable-next-line import/no-extraneous-dependencies
 import {tsdoc} from '@sanity/tsdoc/studio'
 import {theme as tailwindTheme} from './sanity.theme.mjs'
 import {imageAssetSource} from './assetSources'
@@ -39,7 +38,6 @@ import {vercelTheme} from './themes/vercel'
 import {GoogleLogo, TailwindLogo, VercelLogo} from './components/workspaceLogos'
 import {copyAction} from './fieldActions/copyAction'
 import {assistFieldActionGroup} from './fieldActions/assistFieldActionGroup'
-import {commentAction} from './fieldActions/commentFieldAction'
 import {customInspector} from './inspectors/custom'
 import {pasteAction} from './fieldActions/pasteAction'
 
@@ -70,12 +68,16 @@ const sharedSettings = definePlugin({
     },
     unstable_fieldActions: (prev, ctx) => {
       if (['fieldActionsTest', 'stringsTest'].includes(ctx.documentType)) {
-        return [...prev, commentAction, assistFieldActionGroup, copyAction, pasteAction]
+        return [...prev, assistFieldActionGroup, copyAction, pasteAction]
       }
 
       return prev
     },
     newDocumentOptions,
+
+    unstable_comments: {
+      enabled: true,
+    },
   },
   plugins: [
     deskTool({

dev/test-studio/schema/debug/comments.ts

@@ -0,0 +1,115 @@
+import {defineType} from 'sanity'
+
+const DESCRIPTION = 'Comments added to this field should be hidden when the toggle above is checked'
+
+export const commentsDebug = defineType({
+  name: 'commentsDebug',
+  type: 'document',
+  title: 'Comments debug',
+  fields: [
+    {
+      name: 'string',
+      type: 'string',
+      title: 'String title',
+    },
+    {
+      name: 'hideFields',
+      type: 'boolean',
+      title: 'Hide fields',
+    },
+    {
+      type: 'object',
+      name: 'object',
+      title: 'Object title',
+      fields: [
+        {
+          type: 'string',
+          name: 'string',
+          title: 'String title',
+          hidden: ({document}) => Boolean(document?.hideFields),
+          description: DESCRIPTION,
+        },
+        {
+          type: 'number',
+          name: 'number',
+          title: 'Number title',
+        },
+      ],
+    },
+    {
+      type: 'array',
+      name: 'arrayOfObjects',
+      title: 'Array 1',
+      of: [
+        {
+          name: 'arrayObject',
+          type: 'object',
+          title: 'Array object 1',
+          fields: [
+            {
+              name: 'string',
+              type: 'string',
+              title: 'String 1',
+            },
+            {
+              name: 'image',
+              type: 'image',
+              title: 'Image 1',
+              hidden: ({document}) => {
+                return Boolean(document?.hideFields)
+              },
+              description: DESCRIPTION,
+            },
+            {
+              name: 'nestedArray',
+              type: 'array',
+              title: 'Array 2',
+              of: [
+                {
+                  name: 'nestedArrayObject1',
+                  type: 'object',
+                  title: 'Nested array object 1',
+                  fields: [
+                    {
+                      name: 'string',
+                      type: 'string',
+                      title: 'String 2.1',
+                    },
+                    {
+                      name: 'image',
+                      type: 'image',
+                      title: 'Image 2.1',
+                      hidden: ({document}) => {
+                        return Boolean(document?.hideFields)
+                      },
+                      description: DESCRIPTION,
+                    },
+                  ],
+                },
+                {
+                  type: 'object',
+                  name: 'nestedArrayObject2',
+                  title: 'Nested array object 2',
+                  fields: [
+                    {
+                      name: 'string',
+                      type: 'string',
+                      title: 'String 2.2',
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: 'image',
+      type: 'image',
+      title: 'Image title',
+      hidden: ({document}) => Boolean(document?.hideFields),
+      description: DESCRIPTION,
+    },
+  ],
+})

dev/test-studio/schema/index.ts

@@ -113,6 +113,7 @@ import {circularCrossDatasetReferenceTest} from './debug/circularCrossDatasetRef
 import {allNativeInputComponents} from './debug/allNativeInputComponents'
 import fieldGroupsWithFieldsets from './debug/fieldGroupsWithFieldsets'
 import ptReference from './debug/ptReference'
+import {commentsDebug} from './debug/comments'
 
 // @todo temporary, until code input is v3 compatible
 const codeInputType = {
@@ -159,6 +160,7 @@ export const schemaTypes = [
   code,
   codeInputType, // @todo temporary, until code input is v3 compatible
   color,
+  commentsDebug,
   conditionalFields,
   conditionalFieldset,
   customBlock,

dev/test-studio/structure/constants.ts

@@ -34,50 +34,51 @@ export const PLUGIN_INPUT_TYPES = [
 ]
 
 export const DEBUG_INPUT_TYPES = [
-  'languageFilterDebug',
   'actionsTest',
-  'simpleArrayOfObjects',
-  'simpleReferences',
-  'formInputDebug',
+  'allNativeInputComponents',
+  'collapsibleObjects',
+  'commentsDebug',
   'conditionalFieldsTest',
   'customInputsTest',
   'customInputsWithPatches',
   'documentActionsTest',
-  'collapsibleObjects',
+  'documentWithHoistedPt',
   'empty',
   'fieldActionsTest',
   'fieldComponentsTest',
   'fieldsetsTest',
   'fieldValidationInferReproDoc',
   'focusTest',
-  'documentWithHoistedPt',
+  'formInputDebug',
   'initialValuesTest',
   'inspectorsTest',
   'invalidPreviews',
-  'thesis',
+  'languageFilterDebug',
   'manyFieldsTest',
   'noTitleField',
   'poppers',
   'presence',
   'previewImageUrlTest',
   'previewMediaTest',
   'previewSelectBugRepro',
+  'ptReference',
   'radio',
   'readOnlyTest',
-  'recursiveDocument',
   'recursiveArraysTest',
+  'recursiveDocument',
   'recursiveObjectTest',
   'recursivePopoverTest',
   'reservedKeywordsTest',
+  'scrollBug',
   'select',
+  'simpleArrayOfObjects',
+  'simpleReferences',
+  'thesis',
   'typeWithNoToplevelStrings',
   'uploadsTest',
   'validationTest',
-  'allNativeInputComponents',
-  'scrollBug',
-  'ptReference',
-  'virtualizationInObject',
   'virtualizationDebug',
+  'virtualizationInObject',
 ]
 
 export const CI_INPUT_TYPES = ['conditionalFieldset', 'validationCI', 'textsTest']

packages/sanity/package.json

@@ -151,6 +151,7 @@
     "@sanity/logos": "^2.0.2",
     "@sanity/mutator": "3.18.1",
     "@sanity/portable-text-editor": "3.18.1",
+    "@portabletext/react": "^3.0.0",
     "@sanity/schema": "3.18.1",
     "@sanity/types": "3.18.1",
     "@sanity/ui": "^1.8.3",

packages/sanity/playwright-ct/tests/comments/CommentInput.spec.tsx

@@ -0,0 +1,49 @@
+import {expect, test} from '@playwright/experimental-ct-react'
+import React from 'react'
+import {testHelpers} from '../utils/testHelpers'
+import {CommentsInputStory} from './CommentInputStory'
+
+test.describe('Comments', () => {
+  test.describe('CommentInput', () => {
+    test('Should render', async ({mount, page}) => {
+      await mount(<CommentsInputStory />)
+      const $editable = page.getByTestId('comment-input-editable')
+      await expect($editable).toBeVisible()
+    })
+
+    test('Should be able to type into', async ({mount, page}) => {
+      const {insertPortableText} = testHelpers({page})
+      await mount(<CommentsInputStory />)
+      const $editable = page.getByTestId('comment-input-editable')
+      await expect($editable).toBeEditable()
+      await insertPortableText('My first comment!', $editable)
+      await expect($editable).toHaveText('My first comment!')
+    })
+
+    test('Should bring up mentions menu when typing @', async ({mount, page}) => {
+      await mount(<CommentsInputStory />)
+      const $editable = page.getByTestId('comment-input-editable')
+      await $editable.waitFor({state: 'visible'})
+      await page.keyboard.type('@')
+      await expect(page.getByTestId('comments-mentions-menu')).toBeVisible()
+    })
+
+    test('Should be able to submit', async ({mount, page}) => {
+      const {insertPortableText} = testHelpers({page})
+      let submitted = false
+      const onSubmit = () => {
+        submitted = true
+      }
+      await mount(<CommentsInputStory onSubmit={onSubmit} />)
+      const $editable = page.getByTestId('comment-input-editable')
+      await expect($editable).toBeEditable()
+      // Test that blank comments can't be submitted
+      await page.keyboard.press('Enter')
+      expect(submitted).toBe(false)
+      await insertPortableText('This is a comment!', $editable)
+      await expect($editable).toHaveText('This is a comment!')
+      await page.keyboard.press('Enter')
+      expect(submitted).toBe(true)
+    })
+  })
+})

packages/sanity/playwright-ct/tests/comments/CommentInputStory.tsx

@@ -0,0 +1,47 @@
+import React, {useState} from 'react'
+import {CurrentUser, PortableTextBlock} from '@sanity/types'
+import {noop} from 'lodash'
+import {CommentInput} from '../../../src/desk/comments/src/components/pte/comment-input/CommentInput'
+import {TestWrapper} from '../formBuilder/utils/TestWrapper'
+
+const currentUser: CurrentUser = {
+  email: '',
+  id: '',
+  name: '',
+  role: '',
+  roles: [],
+  profileImage: '',
+  provider: '',
+}
+
+const SCHEMA_TYPES: [] = []
+
+export function CommentsInputStory({
+  onDiscardCancel = noop,
+  onDiscardConfirm = noop,
+  onSubmit = noop,
+  value = null,
+}: {
+  onDiscardCancel?: () => void
+  onDiscardConfirm?: () => void
+  onSubmit?: () => void
+  value?: PortableTextBlock[] | null
+}) {
+  const [valueState, setValueState] = useState<PortableTextBlock[] | null>(value)
+  return (
+    <TestWrapper schemaTypes={SCHEMA_TYPES}>
+      <CommentInput
+        focusOnMount
+        placeholder="Your comment..."
+        focusLock
+        currentUser={currentUser}
+        onChange={setValueState}
+        value={valueState}
+        mentionOptions={{data: [], error: null, loading: false}}
+        onDiscardConfirm={onDiscardConfirm}
+        onDiscardCancel={onDiscardCancel}
+        onSubmit={onSubmit}
+      />
+    </TestWrapper>
+  )
+}

packages/sanity/src/core/components/userAvatar/UserAvatar.tsx

@@ -80,7 +80,7 @@ const StaticUserAvatar = forwardRef(function StaticUserAvatar(
   props: Omit<UserAvatarProps, 'user'> & {user: User},
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
-  const {user, animateArrowFrom, position, size, status, tone} = props
+  const {user, animateArrowFrom, position, size, status, tone, ...restProps} = props
   const [imageLoadError, setImageLoadError] = useState<null | Error>(null)
   const userColor = useUserColor(user.id)
   const imageUrl = imageLoadError ? undefined : user?.imageUrl
@@ -98,6 +98,7 @@ const StaticUserAvatar = forwardRef(function StaticUserAvatar(
       size={typeof size === 'string' ? LEGACY_TO_UI_AVATAR_SIZES[size] : size}
       status={status}
       title={user?.displayName}
+      {...restProps}
     />
   )
 })