Add placeholder to MarkdownEditor with different value for replies

src/sidebar/components/Annotation/AnnotationEditor.tsx

-import { useCallback, useState } from 'preact/hooks';
+import { useCallback, useMemo, useState } from 'preact/hooks';
 
 import type { Annotation } from '../../../types/api';
 import type { SidebarSettings } from '../../../types/config';
@@ -48,6 +48,7 @@ function AnnotationEditor({
 
   const store = useSidebarStore();
   const group = store.getGroup(annotation.group);
+  const isReplyAnno = useMemo(() => isReply(annotation), [annotation]);
 
   const shouldShowLicense =
     !draft.isPrivate && group && group.type !== 'private';
@@ -118,11 +119,11 @@ function AnnotationEditor({
         isPrivate,
       });
       // Persist this as privacy default for future annotations unless this is a reply
-      if (!isReply(annotation)) {
+      if (!isReplyAnno) {
         store.setDefault('annotationPrivacy', isPrivate ? 'private' : 'shared');
       }
     },
-    [annotation, draft, store],
+    [annotation, draft, isReplyAnno, store],
   );
 
   const onSave = async () => {
@@ -175,7 +176,7 @@ function AnnotationEditor({
     >
       <MarkdownEditor
         textStyle={textStyle}
-        label="Annotation body"
+        label={isReplyAnno ? 'Enter reply' : 'Enter comment'}
         text={text}
         onEditText={onEditText}
       />

src/sidebar/components/Annotation/test/AnnotationEditor-test.js

@@ -106,6 +106,21 @@ describe('AnnotationEditor', () => {
       assert.calledOnce(fakeStore.createDraft);
       assert.equal(call.args[1].text, 'updated text');
     });
+
+    [
+      { annotation: fixtures.newReply(), expectedLabel: 'Enter reply' },
+      {
+        annotation: fixtures.defaultAnnotation(),
+        expectedLabel: 'Enter comment',
+      },
+    ].forEach(({ annotation, expectedLabel }) => {
+      it('sets proper label', () => {
+        const wrapper = createComponent({ annotation });
+        const editor = wrapper.find('MarkdownEditor');
+
+        assert.equal(editor.prop('label'), expectedLabel);
+      });
+    });
   });
 
   describe('editing tags', () => {

src/sidebar/components/MarkdownEditor.tsx

@@ -394,6 +394,7 @@ export default function MarkdownEditor({
       ) : (
         <TextArea
           aria-label={label}
+          placeholder={label}
           dir="auto"
           classes={classnames(
             'w-full min-h-[8em] resize-y',

src/sidebar/components/test/MarkdownEditor-test.js

@@ -291,9 +291,10 @@ describe('MarkdownEditor', () => {
   });
 
   it('sets accessible label for input field', () => {
-    const wrapper = createComponent({ label: 'Annotation body' });
+    const wrapper = createComponent({ label: 'Enter comment' });
     const inputField = wrapper.find('textarea');
-    assert.equal(inputField.prop('aria-label'), 'Annotation body');
+    assert.equal(inputField.prop('aria-label'), 'Enter comment');
+    assert.equal(inputField.prop('placeholder'), 'Enter comment');
   });
 
   describe('keyboard navigation', () => {