Merge pull request #3747 from matrix-org/t3chguy/emoji_picker_composer

Rewire the Sticker button to be an Emoji Picker

res/css/views/rooms/_MessageComposer.scss

@@ -214,8 +214,12 @@ limitations under the License.
     mask-image: url('$(res)/img/feather-customised/video.svg');
 }
 
+.mx_MessageComposer_emoji::before {
+    mask-image: url('$(res)/img/feather-customised/emoji3.custom.svg');
+}
+
 .mx_MessageComposer_stickers::before {
-    mask-image: url('$(res)/img/feather-customised/face.svg');
+    mask-image: url('$(res)/img/feather-customised/sticker.custom.svg');
 }
 
 .mx_MessageComposer_formatting {

res/img/feather-customised/emoji3.custom.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="12" cy="12" r="11.5" stroke="#2E2F32" stroke-linecap="round"/>
+    <path d="M6.95508 14.75C8.02332 16.4046 9.88349 17.5 11.9995 17.5C14.1155 17.5 15.9757 16.4046 17.0439 14.75" stroke="#2E2F32" stroke-linecap="round"/>
+    <path d="M8.8 9.5C8.8 9.88024 8.69689 10.2154 8.5407 10.4497C8.38357 10.6854 8.18847 10.8 8 10.8C7.81153 10.8 7.61643 10.6854 7.4593 10.4497C7.30311 10.2154 7.2 9.88024 7.2 9.5C7.2 9.11976 7.30311 8.78457 7.4593 8.55028C7.61643 8.31459 7.81153 8.2 8 8.2C8.18847 8.2 8.38357 8.31459 8.5407 8.55028C8.69689 8.78457 8.8 9.11976 8.8 9.5Z" fill="#2E2F32" stroke="#2E2F32" stroke-width="0.4"/>
+    <path d="M16.8 9.5C16.8 9.88024 16.6969 10.2154 16.5407 10.4497C16.3836 10.6854 16.1885 10.8 16 10.8C15.8115 10.8 15.6164 10.6854 15.4593 10.4497C15.3031 10.2154 15.2 9.88024 15.2 9.5C15.2 9.11976 15.3031 8.78457 15.4593 8.55028C15.6164 8.31459 15.8115 8.2 16 8.2C16.1885 8.2 16.3836 8.31459 16.5407 8.55028C16.6969 8.78457 16.8 9.11976 16.8 9.5Z" fill="#2E2F32" stroke="#2E2F32" stroke-width="0.4"/>
+</svg>

res/img/feather-customised/sticker.custom.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M11.7947 23.4982C5.53814 23.3887 0.5 18.2827 0.5 12C0.5 5.64873 5.64873 0.5 12 0.5C18.2827 0.5 23.3887 5.53814 23.4982 11.7947L11.7947 23.4982Z" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M11.7137 23.496C10.6345 20.1166 11.3182 16.403 13.8244 13.875C16.3306 11.347 20.0122 10.6574 23.3625 11.7459" stroke="#2E2F32" stroke-linejoin="round"/>
+</svg>

src/components/views/rooms/MessageComposer.js

@@ -27,6 +27,7 @@ import { makeRoomPermalink } from '../../../utils/permalinks/Permalinks';
 import ContentMessages from '../../../ContentMessages';
 import E2EIcon from './E2EIcon';
 import SettingsStore from "../../../settings/SettingsStore";
+import {aboveLeftOf, ContextMenu, ContextMenuButton, useContextMenu} from "../../structures/ContextMenu";
 
 function ComposerAvatar(props) {
     const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar');
@@ -103,6 +104,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 = <ContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu} catchTab={false}>
+            <EmojiPicker onChoose={addEmoji} showQuickReactions={true} />
+        </ContextMenu>;
+    }
+
+    return <React.Fragment>
+        <ContextMenuButton className="mx_MessageComposer_button mx_MessageComposer_emoji"
+                           onClick={openMenu}
+                           isExpanded={menuDisplayed}
+                           label={_t('Emoji picker')}
+                           inputRef={button}
+        >
+
+        </ContextMenuButton>
+
+        { contextMenu }
+    </React.Fragment>;
+};
+
 class UploadButton extends React.Component {
     static propTypes = {
         roomId: PropTypes.string.isRequired,
@@ -312,6 +339,13 @@ export default class MessageComposer extends React.Component {
         }
     }
 
+    addEmoji(emoji) {
+        dis.dispatch({
+            action: "insert_emoji",
+            emoji,
+        });
+    }
+
     render() {
         const controls = [
             this.state.me ? <ComposerAvatar key="controls_avatar" me={this.state.me} /> : null,
@@ -335,8 +369,9 @@ export default class MessageComposer extends React.Component {
                     room={this.props.room}
                     placeholder={this.renderPlaceholderText()}
                     permalinkCreator={this.props.permalinkCreator} />,
-                <Stickerpicker key='stickerpicker_controls_button' room={this.props.room} />,
                 <UploadButton key="controls_upload" roomId={this.props.room.roomId} />,
+                <EmojiButton key="emoji_button" addEmoji={this.addEmoji} />,
+                <Stickerpicker key="stickerpicker_controls_button" room={this.props.room} />,
             );
 
             if (this.state.showCallButtons) {

src/components/views/rooms/SendMessageComposer.js

@@ -373,6 +373,9 @@ export default class SendMessageComposer extends React.Component {
             case 'quote':
                 this._insertQuotedMessage(payload.event);
                 break;
+            case 'insert_emoji':
+                this._insertEmoji(payload.emoji);
+                break;
         }
     };
 
@@ -410,6 +413,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) {

src/i18n/strings/en_EN.json

@@ -1091,6 +1091,7 @@
     "Voice call": "Voice call",
     "Video call": "Video call",
     "Hangup": "Hangup",
+    "Emoji picker": "Emoji picker",
     "Upload file": "Upload file",
     "Send an encrypted reply…": "Send an encrypted reply…",
     "Send a reply…": "Send a reply…",