Fix a number of emoji bugs in message composer
This commit is contained in:
Ken Powers
Scott Nonnenberg
parent
fd5af8bb62
commit
8659f1dd23
6 changed files with 237 additions and 87 deletions
|
|
@ -1,11 +1,9 @@
|
|||
const { take } = require('lodash');
|
||||
const { getRecentEmojis } = require('./data');
|
||||
const { replaceColons } = require('../../ts/components/emoji/lib');
|
||||
|
||||
module.exports = {
|
||||
getInitialState,
|
||||
load,
|
||||
replaceColons,
|
||||
};
|
||||
|
||||
let initialState = null;
|
||||
|
|
|
|||
|
|
@ -5875,6 +5875,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
|
|||
.module-emoji {
|
||||
display: block;
|
||||
color: transparent;
|
||||
font-family: auto;
|
||||
|
||||
@include light-theme() {
|
||||
caret-color: $color-gray-90;
|
||||
|
|
|
|||
|
|
@ -23,8 +23,9 @@ import { Emoji } from './emoji/Emoji';
|
|||
import { EmojiPickDataType } from './emoji/EmojiPicker';
|
||||
import {
|
||||
convertShortName,
|
||||
DataFromEmojiText,
|
||||
EmojiData,
|
||||
replaceColons,
|
||||
emojiToData,
|
||||
search,
|
||||
} from './emoji/lib';
|
||||
import { LocalizerType } from '../types/Util';
|
||||
|
|
@ -56,9 +57,11 @@ export type InputApi = {
|
|||
submit: () => void;
|
||||
};
|
||||
|
||||
export type SelectionKeys = 'Shift-End' | 'End' | 'Shift-Home' | 'Home';
|
||||
export type CompositionInputEditorCommand =
|
||||
| DraftEditorCommand
|
||||
| ('enter-emoji' | 'next-emoji' | 'prev-emoji' | 'submit');
|
||||
| ('enter-emoji' | 'next-emoji' | 'prev-emoji' | 'submit')
|
||||
| SelectionKeys;
|
||||
|
||||
function getTrimmedMatchAtIndex(str: string, index: number, pattern: RegExp) {
|
||||
let match;
|
||||
|
|
@ -117,20 +120,119 @@ function getLengthOfSelectedText(state: EditorState): number {
|
|||
return length;
|
||||
}
|
||||
|
||||
function getWordAtIndex(str: string, index: number) {
|
||||
function getWordAtIndex(
|
||||
str: string,
|
||||
index: number
|
||||
): { start: number; end: number; word: string } {
|
||||
const start = str
|
||||
.slice(0, index + 1)
|
||||
.replace(/\s+$/, '')
|
||||
.search(/\S+$/);
|
||||
const end = str.slice(index).search(/(?:[^a-z0-9-_+]|$)/) + index;
|
||||
|
||||
let end =
|
||||
str
|
||||
.slice(index)
|
||||
.split('')
|
||||
.findIndex(c => /[^a-z0-9-_]/i.test(c) || c === ':') + index;
|
||||
|
||||
const endChar = str[end];
|
||||
|
||||
if (/\w|:/.test(endChar)) {
|
||||
end += 1;
|
||||
}
|
||||
|
||||
const word = str.slice(start, end);
|
||||
|
||||
if (word === ':') {
|
||||
return getWordAtIndex(str, index + 1);
|
||||
}
|
||||
|
||||
return {
|
||||
start,
|
||||
end,
|
||||
word: str.slice(start, end),
|
||||
word,
|
||||
};
|
||||
}
|
||||
|
||||
// Replace bare (non-entitied) emojis with draft entities
|
||||
function replaceBareEmojis(state: EditorState, focus: boolean): EditorState {
|
||||
// Track emoji positions
|
||||
const selections: Array<[SelectionState, DataFromEmojiText]> = [];
|
||||
|
||||
const content = state.getCurrentContent();
|
||||
const initialSelection = state.getSelection();
|
||||
let selectionOffset = 0;
|
||||
|
||||
content.getBlockMap().forEach(block => {
|
||||
if (!block) {
|
||||
return;
|
||||
}
|
||||
const pat = emojiRegex();
|
||||
const text = block.getText();
|
||||
let match;
|
||||
// tslint:disable-next-line
|
||||
while ((match = pat.exec(text)) !== null) {
|
||||
const start = match.index;
|
||||
const end = start + match[0].length;
|
||||
const blockKey = block.getKey();
|
||||
const blockSelection = SelectionState.createEmpty(blockKey).merge({
|
||||
anchorOffset: start,
|
||||
focusOffset: end,
|
||||
}) as SelectionState;
|
||||
const emojiData = emojiToData(match[0]);
|
||||
// If there is not entity at this location and emoji data exists for the emoji at this location, track it for replacement
|
||||
if (!block.getEntityAt(start) && emojiData) {
|
||||
selections.push([blockSelection, emojiData]);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const newContent = selections.reduce(
|
||||
(accContent, [sel, { shortName, tone }]) => {
|
||||
const emojiContent = convertShortName(shortName);
|
||||
const emojiEntityKey = accContent
|
||||
.createEntity('emoji', 'IMMUTABLE', {
|
||||
shortName: shortName,
|
||||
skinTone: tone,
|
||||
})
|
||||
.getLastCreatedEntityKey();
|
||||
|
||||
// Keep track of selection offsets caused by replaced emojis
|
||||
if (sel.getAnchorOffset() < initialSelection.getAnchorOffset()) {
|
||||
selectionOffset += Math.abs(
|
||||
sel.getAnchorOffset() - sel.getFocusOffset()
|
||||
);
|
||||
}
|
||||
|
||||
return Modifier.replaceText(
|
||||
accContent,
|
||||
sel,
|
||||
emojiContent,
|
||||
undefined,
|
||||
emojiEntityKey
|
||||
);
|
||||
},
|
||||
content
|
||||
);
|
||||
|
||||
const pushState = EditorState.push(
|
||||
state,
|
||||
newContent,
|
||||
'replace-emoji' as EditorChangeType
|
||||
);
|
||||
|
||||
if (focus) {
|
||||
const newSelection = initialSelection.merge({
|
||||
anchorOffset: initialSelection.getAnchorOffset() + selectionOffset,
|
||||
focusOffset: initialSelection.getFocusOffset() + selectionOffset,
|
||||
}) as SelectionState;
|
||||
|
||||
return EditorState.forceSelection(pushState, newSelection);
|
||||
}
|
||||
|
||||
return pushState;
|
||||
}
|
||||
|
||||
const compositeDecorator = new CompositeDecorator([
|
||||
{
|
||||
strategy: (block, cb) => {
|
||||
|
|
@ -187,18 +289,15 @@ const getInitialEditorState = (startingText?: string) => {
|
|||
return EditorState.createEmpty(compositeDecorator);
|
||||
}
|
||||
|
||||
const end = startingText.length;
|
||||
const state = EditorState.createWithContent(
|
||||
ContentState.createFromText(startingText),
|
||||
compositeDecorator
|
||||
const state = replaceBareEmojis(
|
||||
EditorState.createWithContent(
|
||||
ContentState.createFromText(startingText),
|
||||
compositeDecorator
|
||||
),
|
||||
false
|
||||
);
|
||||
const selection = state.getSelection();
|
||||
const selectionAtEnd = selection.merge({
|
||||
anchorOffset: end,
|
||||
focusOffset: end,
|
||||
}) as SelectionState;
|
||||
|
||||
return EditorState.forceSelection(state, selectionAtEnd);
|
||||
return EditorState.moveFocusToEnd(state);
|
||||
};
|
||||
|
||||
// tslint:disable-next-line max-func-body-length
|
||||
|
|
@ -231,6 +330,7 @@ export const CompositionInput = ({
|
|||
const focusRef = React.useRef(false);
|
||||
const editorStateRef = React.useRef<EditorState>(editorRenderState);
|
||||
const rootElRef = React.useRef<HTMLDivElement>();
|
||||
const latestKeyRef = React.useRef<string>();
|
||||
|
||||
// This function sets editorState and also keeps a reference to the newly set
|
||||
// state so we can reference the state in effects and callbacks without
|
||||
|
|
@ -309,7 +409,7 @@ export const CompositionInput = ({
|
|||
|
||||
// Update the state to indicate emojiable text at the current position.
|
||||
const newSearchText = match ? match.trim().substr(1) : '';
|
||||
if (newSearchText.endsWith(':')) {
|
||||
if (newSearchText.endsWith(':') && latestKeyRef.current === ':') {
|
||||
const bareText = trimEnd(newSearchText, ':');
|
||||
const emoji = head(search(bareText));
|
||||
if (emoji && bareText === emoji.short_name) {
|
||||
|
|
@ -328,12 +428,15 @@ export const CompositionInput = ({
|
|||
resetEmojiResults();
|
||||
}
|
||||
|
||||
const modifiedState = replaceBareEmojis(newState, focusRef.current);
|
||||
|
||||
// Finally, update the editor state
|
||||
setAndTrackEditorState(newState);
|
||||
updateExternalStateListeners(newState);
|
||||
setAndTrackEditorState(modifiedState);
|
||||
updateExternalStateListeners(modifiedState);
|
||||
},
|
||||
[
|
||||
focusRef,
|
||||
latestKeyRef,
|
||||
resetEmojiResults,
|
||||
setAndTrackEditorState,
|
||||
setSearchText,
|
||||
|
|
@ -399,8 +502,7 @@ export const CompositionInput = ({
|
|||
() => {
|
||||
const { current: state } = editorStateRef;
|
||||
const text = state.getCurrentContent().getPlainText();
|
||||
const emojidText = replaceColons(text);
|
||||
const trimmedText = emojidText.trim();
|
||||
const trimmedText = text.trim();
|
||||
onSubmit(trimmedText);
|
||||
},
|
||||
[editorStateRef, onSubmit]
|
||||
|
|
@ -453,8 +555,36 @@ export const CompositionInput = ({
|
|||
[emojiResultsIndex, emojiResults]
|
||||
);
|
||||
|
||||
const setCursor = React.useCallback(
|
||||
(key: SelectionKeys) => {
|
||||
const { current: state } = editorStateRef;
|
||||
const selection = state.getSelection();
|
||||
const offset =
|
||||
key === 'Shift-Home' || key === 'Home'
|
||||
? 0
|
||||
: state
|
||||
.getCurrentContent()
|
||||
.getBlockForKey(selection.getAnchorKey())
|
||||
.getText().length;
|
||||
|
||||
const desc: { focusOffset?: number; anchorOffset?: number } = {
|
||||
focusOffset: offset,
|
||||
};
|
||||
|
||||
if (key === 'Home' || key === 'End') {
|
||||
desc.anchorOffset = offset;
|
||||
}
|
||||
|
||||
const newSelection = selection.merge(desc) as SelectionState;
|
||||
setAndTrackEditorState(EditorState.forceSelection(state, newSelection));
|
||||
},
|
||||
[editorStateRef, setAndTrackEditorState]
|
||||
);
|
||||
|
||||
const handleEditorArrowKey = React.useCallback(
|
||||
(e: React.KeyboardEvent) => {
|
||||
latestKeyRef.current = e.key;
|
||||
|
||||
if (e.key === 'ArrowUp') {
|
||||
selectEmojiResult('prev', e);
|
||||
}
|
||||
|
|
@ -462,8 +592,26 @@ export const CompositionInput = ({
|
|||
if (e.key === 'ArrowDown') {
|
||||
selectEmojiResult('next', e);
|
||||
}
|
||||
|
||||
if (e.key === 'ArrowLeft' && e.metaKey) {
|
||||
e.preventDefault();
|
||||
if (e.shiftKey) {
|
||||
setCursor('Shift-Home');
|
||||
} else {
|
||||
setCursor('Home');
|
||||
}
|
||||
}
|
||||
|
||||
if (e.key === 'ArrowRight' && e.metaKey) {
|
||||
e.preventDefault();
|
||||
if (e.shiftKey) {
|
||||
setCursor('Shift-End');
|
||||
} else {
|
||||
setCursor('End');
|
||||
}
|
||||
}
|
||||
},
|
||||
[selectEmojiResult]
|
||||
[latestKeyRef, selectEmojiResult, setCursor]
|
||||
);
|
||||
|
||||
const handleEscapeKey = React.useCallback(
|
||||
|
|
@ -503,24 +651,18 @@ export const CompositionInput = ({
|
|||
.getLastCreatedEntityKey();
|
||||
const word = getWordAtCaret();
|
||||
|
||||
let newContent = replaceWord
|
||||
? Modifier.replaceText(
|
||||
oldContent,
|
||||
selection.merge({
|
||||
let newContent = Modifier.replaceText(
|
||||
oldContent,
|
||||
replaceWord
|
||||
? (selection.merge({
|
||||
anchorOffset: word.start,
|
||||
focusOffset: word.end,
|
||||
}) as SelectionState,
|
||||
emojiContent,
|
||||
undefined,
|
||||
emojiEntityKey
|
||||
)
|
||||
: Modifier.insertText(
|
||||
oldContent,
|
||||
selection,
|
||||
emojiContent,
|
||||
undefined,
|
||||
emojiEntityKey
|
||||
);
|
||||
}) as SelectionState)
|
||||
: selection,
|
||||
emojiContent,
|
||||
undefined,
|
||||
emojiEntityKey
|
||||
);
|
||||
|
||||
const afterSelection = newContent.getSelectionAfter();
|
||||
|
||||
|
|
@ -611,6 +753,15 @@ export const CompositionInput = ({
|
|||
selectEmojiResult('prev');
|
||||
}
|
||||
|
||||
if (
|
||||
command === 'Shift-End' ||
|
||||
command === 'End' ||
|
||||
command === 'Shift-Home' ||
|
||||
command === 'Home'
|
||||
) {
|
||||
setCursor(command);
|
||||
}
|
||||
|
||||
return 'not-handled';
|
||||
},
|
||||
[
|
||||
|
|
@ -619,6 +770,7 @@ export const CompositionInput = ({
|
|||
resetEmojiResults,
|
||||
selectEmojiResult,
|
||||
setAndTrackEditorState,
|
||||
setCursor,
|
||||
skinTone,
|
||||
submit,
|
||||
]
|
||||
|
|
@ -637,7 +789,10 @@ export const CompositionInput = ({
|
|||
);
|
||||
|
||||
const editorKeybindingFn = React.useCallback(
|
||||
// tslint:disable-next-line cyclomatic-complexity
|
||||
(e: React.KeyboardEvent): CompositionInputEditorCommand | null => {
|
||||
latestKeyRef.current = e.key;
|
||||
|
||||
if (e.key === 'Enter' && emojiResults.length > 0) {
|
||||
e.preventDefault();
|
||||
|
||||
|
|
@ -654,6 +809,30 @@ export const CompositionInput = ({
|
|||
return 'submit';
|
||||
}
|
||||
|
||||
if (e.shiftKey && e.key === 'End') {
|
||||
e.preventDefault();
|
||||
|
||||
return 'Shift-End';
|
||||
}
|
||||
|
||||
if (e.key === 'End') {
|
||||
e.preventDefault();
|
||||
|
||||
return 'End';
|
||||
}
|
||||
|
||||
if (e.shiftKey && e.key === 'Home') {
|
||||
e.preventDefault();
|
||||
|
||||
return 'Shift-Home';
|
||||
}
|
||||
|
||||
if (e.key === 'Home') {
|
||||
e.preventDefault();
|
||||
|
||||
return 'Home';
|
||||
}
|
||||
|
||||
if (e.key === 'n' && e.ctrlKey) {
|
||||
e.preventDefault();
|
||||
|
||||
|
|
@ -680,7 +859,7 @@ export const CompositionInput = ({
|
|||
|
||||
return getDefaultKeyBinding(e);
|
||||
},
|
||||
[emojiResults, large]
|
||||
[latestKeyRef, emojiResults, large]
|
||||
);
|
||||
|
||||
// Create popper root
|
||||
|
|
@ -732,6 +911,7 @@ export const CompositionInput = ({
|
|||
setAndTrackEditorState(
|
||||
EditorState.forceSelection(oldState, oldState.getSelection())
|
||||
);
|
||||
onFocus();
|
||||
};
|
||||
|
||||
rootEl.addEventListener('focusin', onFocusIn);
|
||||
|
|
@ -743,7 +923,7 @@ export const CompositionInput = ({
|
|||
|
||||
return noop;
|
||||
},
|
||||
[editorStateRef, rootElRef, setAndTrackEditorState]
|
||||
[editorStateRef, onFocus, rootElRef, setAndTrackEditorState]
|
||||
);
|
||||
|
||||
if (inputApi) {
|
||||
|
|
@ -780,6 +960,8 @@ export const CompositionInput = ({
|
|||
placeholder={i18n('sendMessage')}
|
||||
onUpArrow={handleEditorArrowKey}
|
||||
onDownArrow={handleEditorArrowKey}
|
||||
onLeftArrow={handleEditorArrowKey}
|
||||
onRightArrow={handleEditorArrowKey}
|
||||
onEscape={handleEscapeKey}
|
||||
onTab={onTab}
|
||||
handleKeyCommand={handleEditorCommand}
|
||||
|
|
|
|||
|
|
@ -38,6 +38,11 @@ export type EmojiSkinVariation = {
|
|||
has_img_messenger: boolean;
|
||||
};
|
||||
|
||||
export type DataFromEmojiText = {
|
||||
shortName: string;
|
||||
tone?: SkinToneKey;
|
||||
};
|
||||
|
||||
export type EmojiData = {
|
||||
name: string;
|
||||
unified: string;
|
||||
|
|
@ -116,6 +121,7 @@ export const preloadImages = async () => {
|
|||
|
||||
const dataByShortName = keyBy(data, 'short_name');
|
||||
const imageByEmoji: { [key: string]: string } = {};
|
||||
const dataByEmoji: { [key: string]: DataFromEmojiText } = {};
|
||||
|
||||
export const dataByCategory = mapValues(
|
||||
groupBy(data, ({ category }) => {
|
||||
|
|
@ -242,20 +248,8 @@ export function emojiToImage(emoji: string): string | undefined {
|
|||
return imageByEmoji[emoji];
|
||||
}
|
||||
|
||||
export function replaceColons(str: string) {
|
||||
return str.replace(/:[a-z0-9-_+]+:(?::skin-tone-[1-5]:)?/gi, m => {
|
||||
const [shortName = '', skinTone = '0'] = m
|
||||
.replace('skin-tone-', '')
|
||||
.toLowerCase()
|
||||
.split(':')
|
||||
.filter(Boolean);
|
||||
|
||||
if (shortName && isShortName(shortName)) {
|
||||
return convertShortName(shortName, parseInt(skinTone, 10));
|
||||
}
|
||||
|
||||
return m;
|
||||
});
|
||||
export function emojiToData(emoji: string): DataFromEmojiText | undefined {
|
||||
return dataByEmoji[emoji];
|
||||
}
|
||||
|
||||
function getCountOfAllMatches(str: string, regex: RegExp) {
|
||||
|
|
@ -305,12 +299,17 @@ data.forEach(emoji => {
|
|||
}
|
||||
|
||||
imageByEmoji[convertShortName(short_name)] = makeImagePath(image);
|
||||
dataByEmoji[convertShortName(short_name)] = { shortName: short_name };
|
||||
|
||||
if (skin_variations) {
|
||||
Object.entries(skin_variations).forEach(([tone, variation]) => {
|
||||
imageByEmoji[
|
||||
convertShortName(short_name, tone as SkinToneKey)
|
||||
] = makeImagePath(variation.image);
|
||||
dataByEmoji[convertShortName(short_name, tone as SkinToneKey)] = {
|
||||
shortName: short_name,
|
||||
tone: tone as SkinToneKey,
|
||||
};
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,30 +0,0 @@
|
|||
import { assert } from 'chai';
|
||||
|
||||
import { replaceColons } from '../../../components/emoji/lib';
|
||||
|
||||
describe('replaceColons', () => {
|
||||
it('replaces known emoji short names between colons', () => {
|
||||
const anEmoji = replaceColons('hello :grinning:');
|
||||
assert.equal(anEmoji, 'hello 😀');
|
||||
});
|
||||
|
||||
it('understands skin tone modifiers', () => {
|
||||
const skinToneModifierEmoji = replaceColons('hello :wave::skin-tone-5:!');
|
||||
assert.equal(skinToneModifierEmoji, 'hello 👋🏿!');
|
||||
});
|
||||
|
||||
it('passes through strings with no colons', () => {
|
||||
const noEmoji = replaceColons('hello');
|
||||
assert.equal(noEmoji, 'hello');
|
||||
});
|
||||
|
||||
it('ignores unknown emoji', () => {
|
||||
const unknownEmoji = replaceColons(':Unknown: :unknown:');
|
||||
assert.equal(unknownEmoji, ':Unknown: :unknown:');
|
||||
});
|
||||
|
||||
it('converts short names to lowercase before matching them', () => {
|
||||
const emojiWithCaps = replaceColons('hello :Grinning:');
|
||||
assert.equal(emojiWithCaps, 'hello 😀');
|
||||
});
|
||||
});
|
||||
|
|
@ -231,9 +231,9 @@
|
|||
"rule": "jQuery-load(",
|
||||
"path": "js/modules/emojis.js",
|
||||
"line": "async function load() {",
|
||||
"lineNumber": 13,
|
||||
"lineNumber": 11,
|
||||
"reasonCategory": "falseMatch",
|
||||
"updated": "2019-05-23T22:27:53.554Z"
|
||||
"updated": "2019-10-31T17:28:08.684Z"
|
||||
},
|
||||
{
|
||||
"rule": "jQuery-load(",
|
||||
|
|
|
|||
Loading…
Reference in a new issue