Use twemoji style for emoji picker.

This commit is contained in:
Dessalines 2020-04-12 14:55:52 -04:00
parent 9b329d42f7
commit 2adf8a8eb2
3 changed files with 11 additions and 5 deletions

View file

@ -230,11 +230,14 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
} }
setupEmojiPicker() { setupEmojiPicker() {
emojiPicker.on('emoji', emoji => { emojiPicker.on('emoji', twemojiHtmlStr => {
if (this.state.commentForm.content == null) { if (this.state.commentForm.content == null) {
this.state.commentForm.content = ''; this.state.commentForm.content = '';
} }
let shortName = `:${emojiShortName[emoji]}:`; var el = document.createElement('div');
el.innerHTML = twemojiHtmlStr;
let nativeUnicode = (el.childNodes[0] as HTMLElement).getAttribute('alt');
let shortName = `:${emojiShortName[nativeUnicode]}:`;
this.state.commentForm.content += shortName; this.state.commentForm.content += shortName;
this.setState(this.state); this.setState(this.state);
}); });

View file

@ -383,11 +383,14 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
} }
setupEmojiPicker() { setupEmojiPicker() {
emojiPicker.on('emoji', emoji => { emojiPicker.on('emoji', twemojiHtmlStr => {
if (this.state.postForm.body == null) { if (this.state.postForm.body == null) {
this.state.postForm.body = ''; this.state.postForm.body = '';
} }
let shortName = `:${emojiShortName[emoji]}:`; var el = document.createElement('div');
el.innerHTML = twemojiHtmlStr;
let nativeUnicode = (el.childNodes[0] as HTMLElement).getAttribute('alt');
let shortName = `:${emojiShortName[nativeUnicode]}:`;
this.state.postForm.body += shortName; this.state.postForm.body += shortName;
this.setState(this.state); this.setState(this.state);
}); });

2
ui/src/utils.ts vendored
View file

@ -91,7 +91,7 @@ export const themes = [
export const emojiPicker = new EmojiButton({ export const emojiPicker = new EmojiButton({
// Use the emojiShortName from native // Use the emojiShortName from native
// style: 'twemoji', style: 'twemoji',
theme: 'dark', theme: 'dark',
position: 'auto-start', position: 'auto-start',
// TODO i18n // TODO i18n