Commit c1db1597 authored by Alejandro Celaya's avatar Alejandro Celaya Committed by Alejandro Celaya

Add placeholder to MarkdownEditor with different value for replies

parent 7341fac3
import { useCallback, useState } from 'preact/hooks'; import { useCallback, useMemo, useState } from 'preact/hooks';
import type { Annotation } from '../../../types/api'; import type { Annotation } from '../../../types/api';
import type { SidebarSettings } from '../../../types/config'; import type { SidebarSettings } from '../../../types/config';
...@@ -48,6 +48,7 @@ function AnnotationEditor({ ...@@ -48,6 +48,7 @@ function AnnotationEditor({
const store = useSidebarStore(); const store = useSidebarStore();
const group = store.getGroup(annotation.group); const group = store.getGroup(annotation.group);
const isReplyAnno = useMemo(() => isReply(annotation), [annotation]);
const shouldShowLicense = const shouldShowLicense =
!draft.isPrivate && group && group.type !== 'private'; !draft.isPrivate && group && group.type !== 'private';
...@@ -118,11 +119,11 @@ function AnnotationEditor({ ...@@ -118,11 +119,11 @@ function AnnotationEditor({
isPrivate, isPrivate,
}); });
// Persist this as privacy default for future annotations unless this is a reply // Persist this as privacy default for future annotations unless this is a reply
if (!isReply(annotation)) { if (!isReplyAnno) {
store.setDefault('annotationPrivacy', isPrivate ? 'private' : 'shared'); store.setDefault('annotationPrivacy', isPrivate ? 'private' : 'shared');
} }
}, },
[annotation, draft, store], [annotation, draft, isReplyAnno, store],
); );
const onSave = async () => { const onSave = async () => {
...@@ -175,7 +176,7 @@ function AnnotationEditor({ ...@@ -175,7 +176,7 @@ function AnnotationEditor({
> >
<MarkdownEditor <MarkdownEditor
textStyle={textStyle} textStyle={textStyle}
label="Annotation body" label={isReplyAnno ? 'Enter reply' : 'Enter comment'}
text={text} text={text}
onEditText={onEditText} onEditText={onEditText}
/> />
......
...@@ -106,6 +106,21 @@ describe('AnnotationEditor', () => { ...@@ -106,6 +106,21 @@ describe('AnnotationEditor', () => {
assert.calledOnce(fakeStore.createDraft); assert.calledOnce(fakeStore.createDraft);
assert.equal(call.args[1].text, 'updated text'); 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', () => { describe('editing tags', () => {
......
...@@ -394,6 +394,7 @@ export default function MarkdownEditor({ ...@@ -394,6 +394,7 @@ export default function MarkdownEditor({
) : ( ) : (
<TextArea <TextArea
aria-label={label} aria-label={label}
placeholder={label}
dir="auto" dir="auto"
classes={classnames( classes={classnames(
'w-full min-h-[8em] resize-y', 'w-full min-h-[8em] resize-y',
......
...@@ -291,9 +291,10 @@ describe('MarkdownEditor', () => { ...@@ -291,9 +291,10 @@ describe('MarkdownEditor', () => {
}); });
it('sets accessible label for input field', () => { it('sets accessible label for input field', () => {
const wrapper = createComponent({ label: 'Annotation body' }); const wrapper = createComponent({ label: 'Enter comment' });
const inputField = wrapper.find('textarea'); 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', () => { describe('keyboard navigation', () => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment