diff --git a/packages/pl-fe/src/features/compose/editor/index.tsx b/packages/pl-fe/src/features/compose/editor/index.tsx index 8600f9c485..079089d4dd 100644 --- a/packages/pl-fe/src/features/compose/editor/index.tsx +++ b/packages/pl-fe/src/features/compose/editor/index.tsx @@ -19,7 +19,7 @@ import { $createRemarkExport, $createRemarkImport } from '@mkljczk/lexical-remar import clsx from 'clsx'; import { $createParagraphNode, $createTextNode, $getRoot, type EditorState, type LexicalEditor } from 'lexical'; import React, { useMemo, useState } from 'react'; -import { FormattedMessage } from 'react-intl'; +import { defineMessages, useIntl } from 'react-intl'; import { useAppDispatch, useCompose } from 'pl-fe/hooks'; @@ -41,6 +41,12 @@ const LINK_MATCHERS = [ ), ]; +const messages = defineMessages({ + placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What\'s on your mind?' }, + eventPlaceholder: { id: 'compose_form.event_placeholder', defaultMessage: 'Post to this event' }, + pollPlaceholder: { id: 'compose_form.poll_placeholder', defaultMessage: 'Add a poll topic…' }, +}); + interface IComposeEditor { className?: string; editableClassName?: string; @@ -54,7 +60,7 @@ interface IComposeEditor { onPaste?(files: FileList): void; onChange?(text: string): void; onFocus?: React.FocusEventHandler; - placeholder?: JSX.Element | string; + placeholder?: string; } const theme: InitialConfigType['theme'] = { @@ -95,6 +101,7 @@ const ComposeEditor = React.forwardRef(({ const { content_type: contentType } = useCompose(composeId); const isWysiwyg = contentType === 'wysiwyg'; const nodes = useNodes(isWysiwyg); + const intl = useIntl(); const [suggestionsHidden, setSuggestionsHidden] = useState(true); @@ -122,6 +129,19 @@ const ComposeEditor = React.forwardRef(({ ? compose.text : compose.textMap.get(compose.modified_language, ''); + if (!text && navigator.userAgent.includes('Ladybird/')) { + const paragraph = $createParagraphNode(); + const textNode = $createTextNode(placeholder || intl.formatMessage(messages.placeholder)); + + paragraph.append(textNode); + + $getRoot() + .clear() + .append(paragraph); + + return; + } + if (isWysiwyg) { $createRemarkImport({ handlers: { @@ -169,12 +189,12 @@ const ComposeEditor = React.forwardRef(({ } }; - let textareaPlaceholder = placeholder || ; + let textareaPlaceholder = placeholder || intl.formatMessage(messages.placeholder); if (eventDiscussion) { - textareaPlaceholder = ; + textareaPlaceholder = intl.formatMessage(messages.eventPlaceholder); } else if (hasPoll) { - textareaPlaceholder = ; + textareaPlaceholder = intl.formatMessage(messages.pollPlaceholder); } return (