diff --git a/packages/pl-fe/src/features/compose/components/text-character-counter.tsx b/packages/pl-fe/src/features/compose/components/text-character-counter.tsx index ce696b753..6ef20d836 100644 --- a/packages/pl-fe/src/features/compose/components/text-character-counter.tsx +++ b/packages/pl-fe/src/features/compose/components/text-character-counter.tsx @@ -1,19 +1,27 @@ import clsx from 'clsx'; import React from 'react'; +import { defineMessages, useIntl } from 'react-intl'; import { length } from 'stringz'; +const messages = defineMessages({ + characterCount: { id: 'compose_form.remaining_character_count', defaultMessage: 'Remaining characters: {value} of {max}' }, +}); + interface ITextCharacterCounter { max: number; text: string; } const TextCharacterCounter: React.FC = ({ text, max }) => { + const intl = useIntl(); + const checkRemainingText = (diff: number) => ( = 0, 'text-secondary-600': diff < 0, })} + title={intl.formatMessage(messages.characterCount, { value: diff, max })} > {diff} diff --git a/packages/pl-fe/src/locales/en.json b/packages/pl-fe/src/locales/en.json index 996de2f10..94c74be6a 100644 --- a/packages/pl-fe/src/locales/en.json +++ b/packages/pl-fe/src/locales/en.json @@ -537,6 +537,7 @@ "compose_form.preview_label": "Preview", "compose_form.publish": "Post", "compose_form.publish_loud": "{publish}!", + "compose_form.remaining_character_count": "Remaining characters: {value} of {max}", "compose_form.save_changes": "Save changes", "compose_form.schedule": "Schedule", "compose_form.sensitive.marked": "Media is marked as sensitive",