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

ComposeForm: insert emoji from picker into lexical

Browse source 
Fixes https://gitlab.com/soapbox-pub/soapbox/-/issues/1529
This commit is contained in:
Alex Gleason 2023-09-25 16:31:01 -05:00
parent cdda5363f6
commit eb875673fd
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
1 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/features/compose/components/compose-form.tsx
View file

@ -1,5 +1,5 @@
import clsx from 'clsx';
import { CLEAR_EDITOR_COMMAND, type LexicalEditor } from 'lexical';
import { CLEAR_EDITOR_COMMAND, TextNode, type LexicalEditor } from 'lexical';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { Link, useHistory } from 'react-router-dom';
@ -11,7 +11,6 @@ import {
clearComposeSuggestions,
fetchComposeSuggestions,
selectComposeSuggestion,
insertEmojiCompose,
uploadCompose,
} from 'soapbox/actions/compose';
import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest-input';
@ -28,6 +27,7 @@ import ReplyIndicatorContainer from '../containers/reply-indicator-container';
import ScheduleFormContainer from '../containers/schedule-form-container';
import UploadButtonContainer from '../containers/upload-button-container';
import WarningContainer from '../containers/warning-container';
import { $createEmojiNode } from '../editor/nodes/emoji-node';
import { countableText } from '../util/counter';
import MarkdownButton from './markdown-button';
@ -46,8 +46,6 @@ import Warning from './warning';
import type { Emoji } from 'soapbox/features/emoji';
const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029\u0009\u000a\u000b\u000c\u000d';
const messages = defineMessages({
placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What\'s on your mind?' },
pollPlaceholder: { id: 'compose_form.poll_placeholder', defaultMessage: 'Add a poll topic…' },
@ -181,10 +179,12 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
};
const handleEmojiPick = (data: Emoji) => {
const position = autosuggestTextareaRef.current!.textarea!.selectionStart;
const needsSpace = !!data.custom && position > 0 && !allowedAroundShortCode.includes(text[position - 1]);
const editor = editorRef.current;
if (!editor) return;
dispatch(insertEmojiCompose(id, position, data, needsSpace));
editor.update(() => {
editor.getEditorState()._selection?.insertNodes([$createEmojiNode(data), new TextNode(' ')]);
});
};
const onPaste = (files: FileList) => {