diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js index 580e3b0d81..00cb276923 100644 --- a/src/components/views/rooms/MessageComposer.js +++ b/src/components/views/rooms/MessageComposer.js @@ -22,10 +22,10 @@ import MatrixClientPeg from '../../../MatrixClientPeg'; import sdk from '../../../index'; import dis from '../../../dispatcher'; import RoomViewStore from '../../../stores/RoomViewStore'; -import Stickerpicker from './Stickerpicker'; import { makeRoomPermalink } from '../../../utils/permalinks/Permalinks'; import ContentMessages from '../../../ContentMessages'; import E2EIcon from './E2EIcon'; +import {aboveLeftOf, ContextMenu, ContextMenuButton, useContextMenu} from "../../structures/ContextMenu"; function ComposerAvatar(props) { const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar'); @@ -102,6 +102,32 @@ HangupButton.propTypes = { roomId: PropTypes.string.isRequired, }; +const EmojiButton = ({addEmoji}) => { + const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu(); + + let contextMenu; + if (menuDisplayed) { + const buttonRect = button.current.getBoundingClientRect(); + const EmojiPicker = sdk.getComponent('emojipicker.EmojiPicker'); + contextMenu = + + ; + } + + return + + + + + { contextMenu } + ; +}; + class UploadButton extends React.Component { static propTypes = { roomId: PropTypes.string.isRequired, @@ -298,6 +324,13 @@ export default class MessageComposer extends React.Component { } } + addEmoji(emoji) { + dis.dispatch({ + action: "insert_emoji", + emoji, + }); + } + render() { const controls = [ this.state.me ? : null, @@ -321,7 +354,7 @@ export default class MessageComposer extends React.Component { room={this.props.room} placeholder={this.renderPlaceholderText()} permalinkCreator={this.props.permalinkCreator} />, - , + , , callInProgress ? : null, callInProgress ? null : , diff --git a/src/components/views/rooms/SendMessageComposer.js b/src/components/views/rooms/SendMessageComposer.js index af25155588..c2f79c72d7 100644 --- a/src/components/views/rooms/SendMessageComposer.js +++ b/src/components/views/rooms/SendMessageComposer.js @@ -317,6 +317,9 @@ export default class SendMessageComposer extends React.Component { case 'quote': this._insertQuotedMessage(payload.event); break; + case 'insert_emoji': + this._insertEmoji(payload.emoji); + break; } }; @@ -353,6 +356,17 @@ export default class SendMessageComposer extends React.Component { this._editorRef && this._editorRef.focus(); } + _insertEmoji = (emoji) => { + const {model} = this; + const {partCreator} = model; + const caret = this._editorRef.getCaret(); + const position = model.positionForOffset(caret.offset, caret.atNodeEnd); + model.transform(() => { + const addedLen = model.insert([partCreator.plain(emoji)], position); + return model.positionForOffset(caret.offset + addedLen, true); + }); + }; + _onPaste = (event) => { const {clipboardData} = event; if (clipboardData.files.length) { diff --git a/src/components/views/rooms/Stickerpicker.js b/src/components/views/rooms/Stickerpicker.js index 24f256e706..095a0dca31 100644 --- a/src/components/views/rooms/Stickerpicker.js +++ b/src/components/views/rooms/Stickerpicker.js @@ -36,6 +36,7 @@ const STICKERPICKER_Z_INDEX = 3500; // Key to store the widget's AppTile under in PersistedElement const PERSISTED_ELEMENT_KEY = "stickerPicker"; +// TODO figure out where to expose it now that the EmojiPicker has taken its place export default class Stickerpicker extends React.Component { static currentWidget;