bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

pl-fe: Workaround for Ladybird support

Browse source 
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
1 changed files with 25 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
packages/pl-fe/src/features/compose/editor/index.tsx
View file

@ -19,7 +19,7 @@ import { $createRemarkExport, $createRemarkImport } from '@mkljczk/lexical-remar
import clsx from 'clsx'; import clsx from 'clsx';
import { $createParagraphNode, $createTextNode, $getRoot, type EditorState, type LexicalEditor } from 'lexical'; import { $createParagraphNode, $createTextNode, $getRoot, type EditorState, type LexicalEditor } from 'lexical';
import React, { useMemo, useState } from 'react'; import React, { useMemo, useState } from 'react';
import { FormattedMessage } from 'react-intl'; import { defineMessages, useIntl } from 'react-intl';
import { useAppDispatch, useCompose } from 'pl-fe/hooks'; 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 { interface IComposeEditor {
className?: string; className?: string;
editableClassName?: string; editableClassName?: string;
@ -54,7 +60,7 @@ interface IComposeEditor {
onPaste?(files: FileList): void; onPaste?(files: FileList): void;
onChange?(text: string): void; onChange?(text: string): void;
onFocus?: React.FocusEventHandler<HTMLDivElement>; onFocus?: React.FocusEventHandler<HTMLDivElement>;
placeholder?: JSX.Element | string; placeholder?: string;
} }
const theme: InitialConfigType['theme'] = { const theme: InitialConfigType['theme'] = {
@ -95,6 +101,7 @@ const ComposeEditor = React.forwardRef<LexicalEditor, IComposeEditor>(({
const { content_type: contentType } = useCompose(composeId); const { content_type: contentType } = useCompose(composeId);
const isWysiwyg = contentType === 'wysiwyg'; const isWysiwyg = contentType === 'wysiwyg';
const nodes = useNodes(isWysiwyg); const nodes = useNodes(isWysiwyg);
const intl = useIntl();
const [suggestionsHidden, setSuggestionsHidden] = useState(true); const [suggestionsHidden, setSuggestionsHidden] = useState(true);
@ -122,6 +129,19 @@ const ComposeEditor = React.forwardRef<LexicalEditor, IComposeEditor>(({
? compose.text ? compose.text
: compose.textMap.get(compose.modified_language, ''); : 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) { if (isWysiwyg) {
$createRemarkImport({ $createRemarkImport({
handlers: { 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) { if (eventDiscussion) {
textareaPlaceholder = <FormattedMessage id='compose_form.event_placeholder' defaultMessage='Post to this event' />; textareaPlaceholder = intl.formatMessage(messages.eventPlaceholder);
} else if (hasPoll) { } else if (hasPoll) {
textareaPlaceholder = <FormattedMessage id='compose_form.poll_placeholder' defaultMessage='Add a poll topic…' />; textareaPlaceholder = intl.formatMessage(messages.pollPlaceholder);
} }
return ( return (