pl-fe: Workaround for Ladybird support

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2024-09-23 00:09:55 +02:00
parent 8898de7bfb
commit 8871284405

View file

@ -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<HTMLDivElement>;
placeholder?: JSX.Element | string;
placeholder?: string;
}
const theme: InitialConfigType['theme'] = {
@ -95,6 +101,7 @@ const ComposeEditor = React.forwardRef<LexicalEditor, IComposeEditor>(({
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<LexicalEditor, IComposeEditor>(({
? 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<LexicalEditor, IComposeEditor>(({
}
};
let textareaPlaceholder = placeholder || <FormattedMessage id='compose_form.placeholder' defaultMessage="What's on your mind?" />;
let textareaPlaceholder = placeholder || intl.formatMessage(messages.placeholder);
if (eventDiscussion) {
textareaPlaceholder = <FormattedMessage id='compose_form.event_placeholder' defaultMessage='Post to this event' />;
textareaPlaceholder = intl.formatMessage(messages.eventPlaceholder);
} else if (hasPoll) {
textareaPlaceholder = <FormattedMessage id='compose_form.poll_placeholder' defaultMessage='Add a poll topic…' />;
textareaPlaceholder = intl.formatMessage(messages.pollPlaceholder);
}
return (