From e93633c17b6246a9b3df5fc44d7492ac0cbea98c Mon Sep 17 00:00:00 2001
From: Espen Hovlandsdal <espen@hovlandsdal.com>
Date: Fri, 2 Feb 2024 11:15:46 -0800
Subject: [PATCH] fix(comments): translate input placeholder

---
 packages/sanity/src/structure/comments/i18n/resources.ts     | 2 ++
 .../comments/src/components/pte/comment-input/Editable.tsx   | 5 ++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/sanity/src/structure/comments/i18n/resources.ts b/packages/sanity/src/structure/comments/i18n/resources.ts
index c136950f109..604f796ec5e 100644
--- a/packages/sanity/src/structure/comments/i18n/resources.ts
+++ b/packages/sanity/src/structure/comments/i18n/resources.ts
@@ -14,6 +14,8 @@ const commentsLocaleStrings = defineLocalesResources('comments', {
   /** The text for the button to go to the correct field */
   'button-go-to-field-aria-label': 'Go to field',
 
+  /** When composing a comment, the placeholder text shown when the input is empty */
+  'compose.create-comment-placeholder': 'Create a new comment',
   /** When composing a comment, the aria label for the button to mention a user */
   'compose.mention-user-aria-label': 'Mention user',
   /** When composing a comment, the tooltip text for the button to mention a user */
diff --git a/packages/sanity/src/structure/comments/src/components/pte/comment-input/Editable.tsx b/packages/sanity/src/structure/comments/src/components/pte/comment-input/Editable.tsx
index 37601119518..4f911774707 100644
--- a/packages/sanity/src/structure/comments/src/components/pte/comment-input/Editable.tsx
+++ b/packages/sanity/src/structure/comments/src/components/pte/comment-input/Editable.tsx
@@ -9,10 +9,12 @@ import {isEqual} from 'lodash'
 import React, {useCallback, useEffect, useMemo, useRef, useState, type KeyboardEvent} from 'react'
 import styled, {css} from 'styled-components'
 import {Popover, type PopoverProps} from '../../../../../../ui-components'
+import {commentsLocaleNamespace} from '../../../../i18n'
 import {MentionsMenu, type MentionsMenuHandle} from '../../mentions'
 import {renderBlock, renderChild} from '../render'
 import {useCommentInput} from './useCommentInput'
 import {useCursorElement} from './useCursorElement'
+import {useTranslation} from 'sanity'
 
 const POPOVER_FALLBACK_PLACEMENTS: PopoverProps['fallbackPlacements'] = ['bottom', 'top']
 const INLINE_STYLE: React.CSSProperties = {outline: 'none'}
@@ -65,9 +67,10 @@ export interface EditableHandle {
 }
 
 export function Editable(props: EditableProps) {
+  const {t} = useTranslation(commentsLocaleNamespace)
   const {
     focusLock,
-    placeholder = 'Create a new comment',
+    placeholder = t('compose.create-comment-placeholder'),
     onFocus,
     onBlur,
     onKeyDown,