Support for sending formatting messages
This commit is contained in:
parent
42e13aedcd
commit
9bfbee464b
65 changed files with 1762 additions and 371 deletions
|
@ -9,14 +9,20 @@ import { shouldNeverBeCalled } from '../util/shouldNeverBeCalled';
|
|||
import type { InputApi } from './CompositionInput';
|
||||
import { CompositionInput } from './CompositionInput';
|
||||
import { EmojiButton } from './emoji/EmojiButton';
|
||||
import type { DraftBodyRangeMention } from '../types/BodyRange';
|
||||
import type {
|
||||
DraftBodyRanges,
|
||||
HydratedBodyRangesType,
|
||||
} from '../types/BodyRange';
|
||||
import type { ThemeType } from '../types/Util';
|
||||
import type { Props as EmojiButtonProps } from './emoji/EmojiButton';
|
||||
import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
|
||||
import * as grapheme from '../util/grapheme';
|
||||
|
||||
export type CompositionTextAreaProps = {
|
||||
bodyRanges?: HydratedBodyRangesType;
|
||||
i18n: LocalizerType;
|
||||
isFormattingEnabled: boolean;
|
||||
isFormattingSpoilersEnabled: boolean;
|
||||
maxLength?: number;
|
||||
placeholder?: string;
|
||||
whenToShowRemainingCount?: number;
|
||||
|
@ -25,13 +31,13 @@ export type CompositionTextAreaProps = {
|
|||
onPickEmoji: (e: EmojiPickDataType) => void;
|
||||
onChange: (
|
||||
messageText: string,
|
||||
draftBodyRanges: ReadonlyArray<DraftBodyRangeMention>,
|
||||
draftBodyRanges: HydratedBodyRangesType,
|
||||
caretLocation?: number | undefined
|
||||
) => void;
|
||||
onSetSkinTone: (tone: number) => void;
|
||||
onSubmit: (
|
||||
message: string,
|
||||
draftBodyRanges: ReadonlyArray<DraftBodyRangeMention>,
|
||||
draftBodyRanges: DraftBodyRanges,
|
||||
timestamp: number
|
||||
) => void;
|
||||
onTextTooLong: () => void;
|
||||
|
@ -48,22 +54,25 @@ export type CompositionTextAreaProps = {
|
|||
* basically a rectangle input with an emoji selector floating at the top-right
|
||||
*/
|
||||
export function CompositionTextArea({
|
||||
bodyRanges,
|
||||
draftText,
|
||||
getPreferredBadge,
|
||||
i18n,
|
||||
placeholder,
|
||||
isFormattingEnabled,
|
||||
isFormattingSpoilersEnabled,
|
||||
maxLength,
|
||||
whenToShowRemainingCount = Infinity,
|
||||
scrollerRef,
|
||||
onScroll,
|
||||
onPickEmoji,
|
||||
onChange,
|
||||
onPickEmoji,
|
||||
onScroll,
|
||||
onSetSkinTone,
|
||||
onSubmit,
|
||||
onTextTooLong,
|
||||
getPreferredBadge,
|
||||
draftText,
|
||||
theme,
|
||||
placeholder,
|
||||
recentEmojis,
|
||||
scrollerRef,
|
||||
skinTone,
|
||||
theme,
|
||||
whenToShowRemainingCount = Infinity,
|
||||
}: CompositionTextAreaProps): JSX.Element {
|
||||
const inputApiRef = React.useRef<InputApi | undefined>();
|
||||
const [characterCount, setCharacterCount] = React.useState(
|
||||
|
@ -87,7 +96,11 @@ export function CompositionTextArea({
|
|||
}, [inputApiRef]);
|
||||
|
||||
const handleChange = React.useCallback(
|
||||
({ bodyRanges, caretLocation, messageText: newValue }) => {
|
||||
({
|
||||
bodyRanges: updatedBodyRanges,
|
||||
caretLocation,
|
||||
messageText: newValue,
|
||||
}) => {
|
||||
const inputEl = inputApiRef.current;
|
||||
if (!inputEl) {
|
||||
return;
|
||||
|
@ -108,11 +121,11 @@ export function CompositionTextArea({
|
|||
// was modifying text in the middle of the editor
|
||||
// a better solution would be to prevent the change to begin with, but
|
||||
// quill makes this VERY difficult
|
||||
inputEl.setContents(newValueSized, bodyRanges, true);
|
||||
inputEl.setContents(newValueSized, updatedBodyRanges, true);
|
||||
}
|
||||
}
|
||||
setCharacterCount(newCharacterCount);
|
||||
onChange(newValue, bodyRanges, caretLocation);
|
||||
onChange(newValue, updatedBodyRanges, caretLocation);
|
||||
},
|
||||
[maxLength, onChange]
|
||||
);
|
||||
|
@ -121,10 +134,13 @@ export function CompositionTextArea({
|
|||
<div className="CompositionTextArea">
|
||||
<CompositionInput
|
||||
clearQuotedMessage={shouldNeverBeCalled}
|
||||
draftBodyRanges={bodyRanges}
|
||||
draftText={draftText}
|
||||
getPreferredBadge={getPreferredBadge}
|
||||
getQuotedMessage={noop}
|
||||
i18n={i18n}
|
||||
isFormattingEnabled={isFormattingEnabled}
|
||||
isFormattingSpoilersEnabled={isFormattingSpoilersEnabled}
|
||||
inputApi={inputApiRef}
|
||||
large
|
||||
moduleClassName="CompositionTextArea__input"
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue