Enlarge emoji in composer (#7602)

res/css/views/elements/_RichText.scss

@@ -86,6 +86,11 @@ a.mx_Pill {
     margin-right: 0.24rem;
 }
 
+.mx_Emoji {
+    font-size: 1.8rem;
+    vertical-align: bottom;
+}
+
 .mx_Markdown_BOLD {
     font-weight: bold;
 }

res/css/views/rooms/_EventBubbleTile.scss

@@ -88,6 +88,8 @@ limitations under the License.
     .mx_EventTile_line {
         width: fit-content;
         max-width: 70%;
+        // fixed line height to prevent emoji from being taller than text
+        line-height: $font-18px;
     }
 
     > .mx_SenderProfile {

res/css/views/rooms/_EventTile.scss

@@ -233,11 +233,6 @@ $left-gutter: 64px;
         overflow-y: hidden;
     }
 
-    .mx_EventTile_Emoji {
-        font-size: 1.8rem;
-        vertical-align: bottom;
-    }
-
     &.mx_EventTile_selected .mx_EventTile_line,
     &:hover .mx_EventTile_line {
         border-top-left-radius: 4px;
@@ -391,7 +386,7 @@ $left-gutter: 64px;
     position: absolute;
 }
 
-.mx_EventTile_bigEmoji .mx_EventTile_Emoji {
+.mx_EventTile_bigEmoji .mx_Emoji {
     font-size: 48px !important;
     line-height: 57px;
 }

res/css/views/rooms/_SendMessageComposer.scss

@@ -19,6 +19,8 @@ limitations under the License.
     display: flex;
     flex-direction: column;
     font-size: $font-14px;
+    // fixed line height to prevent emoji from being taller than text
+    line-height: calc(1.2 * $font-14px);
     justify-content: center;
     margin-right: 6px;
     // don't grow wider than available space

src/HtmlUtils.tsx

@@ -89,9 +89,8 @@ const MEDIA_API_MXC_REGEX = /\/_matrix\/media\/r0\/(?:download|thumbnail)\/(.+?)
  * Uses a much, much simpler regex than emojibase's so will give false
  * positives, but useful for fast-path testing strings to see if they
  * need emojification.
- * unicodeToImage uses this function.
  */
-function mightContainEmoji(str: string): boolean {
+export function mightContainEmoji(str: string): boolean {
     return SURROGATE_PAIR_PATTERN.test(str) || SYMBOL_PATTERN.test(str);
 }
 
@@ -412,9 +411,9 @@ export interface IOptsReturnString extends IOpts {
 }
 
 const emojiToHtmlSpan = (emoji: string) =>
-    `<span class='mx_EventTile_Emoji' title='${unicodeToShortcode(emoji)}'>${emoji}</span>`;
+    `<span class='mx_Emoji' title='${unicodeToShortcode(emoji)}'>${emoji}</span>`;
 const emojiToJsxSpan = (emoji: string, key: number) =>
-    <span key={key} className='mx_EventTile_Emoji' title={unicodeToShortcode(emoji)}>{ emoji }</span>;
+    <span key={key} className='mx_Emoji' title={unicodeToShortcode(emoji)}>{ emoji }</span>;
 
 /**
  * Wraps emojis in <span> to style them separately from the rest of message. Consecutive emojis (and modifiers) are wrapped

src/components/views/rooms/BasicMessageComposer.tsx

@@ -199,7 +199,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
 
                 // this returns the amount of added/removed characters during the replace
                 // so the caret position can be adjusted.
-                return range.replace([partCreator.plain(data.unicode)]);
+                return range.replace([partCreator.emoji(data.unicode)]);
             }
         }
     }
@@ -831,7 +831,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         const caret = this.getCaret();
         const position = model.positionForOffset(caret.offset, caret.atNodeEnd);
         model.transform(() => {
-            const addedLen = model.insert([partCreator.plain(text)], position);
+            const addedLen = model.insert(partCreator.plainWithEmoji(text), position);
             return model.positionForOffset(caret.offset + addedLen, true);
         });
     }

src/editor/autocomplete.ts

@@ -111,7 +111,7 @@ export default class AutocompleteWrapperModel {
                 return [(this.partCreator as CommandPartCreator).command(text)];
             default:
                 // used for emoji and other plain text completion replacement
-                return [this.partCreator.plain(text)];
+                return this.partCreator.plainWithEmoji(text);
         }
     }
 }

src/editor/caret.ts

@@ -99,7 +99,7 @@ export function getLineAndNodePosition(model: EditorModel, caretPosition: IPosit
         offset = 0;
     } else {
         // move caret out of uneditable part (into caret node, or empty line br) if needed
-        ({ nodeIndex, offset } = moveOutOfUneditablePart(parts, partIndex, nodeIndex, offset));
+        ({ nodeIndex, offset } = moveOutOfUnselectablePart(parts, partIndex, nodeIndex, offset));
     }
     return { lineIndex, nodeIndex, offset };
 }
@@ -123,7 +123,7 @@ function findNodeInLineForPart(parts: Part[], partIndex: number) {
                 nodeIndex += 1;
             }
             // only jump over caret node if we're not at our destination node already,
-            // as we'll assume in moveOutOfUneditablePart that nodeIndex
+            // as we'll assume in moveOutOfUnselectablePart that nodeIndex
             // refers to the node  corresponding to the part,
             // and not an adjacent caret node
             if (i < partIndex) {
@@ -140,10 +140,10 @@ function findNodeInLineForPart(parts: Part[], partIndex: number) {
     return { lineIndex, nodeIndex };
 }
 
-function moveOutOfUneditablePart(parts: Part[], partIndex: number, nodeIndex: number, offset: number) {
+function moveOutOfUnselectablePart(parts: Part[], partIndex: number, nodeIndex: number, offset: number) {
-    // move caret before or after uneditable part
+    // move caret before or after unselectable part
     const part = parts[partIndex];
-    if (part && !part.canEdit) {
+    if (part && !part.acceptsCaret) {
         if (offset === 0) {
             nodeIndex -= 1;
             const prevPart = parts[partIndex - 1];

src/editor/deserialize.ts

@@ -29,7 +29,7 @@ function parseAtRoomMentions(text: string, partCreator: PartCreator): Part[] {
     const parts: Part[] = [];
     text.split(ATROOM).forEach((textPart, i, arr) => {
         if (textPart.length) {
-            parts.push(partCreator.plain(textPart));
+            parts.push(...partCreator.plainWithEmoji(textPart));
         }
         // it's safe to never append @room after the last textPart
         // as split will report an empty string at the end if
@@ -42,28 +42,28 @@ function parseAtRoomMentions(text: string, partCreator: PartCreator): Part[] {
     return parts;
 }
 
-function parseLink(a: HTMLAnchorElement, partCreator: PartCreator): Part {
+function parseLink(a: HTMLAnchorElement, partCreator: PartCreator): Part[] {
     const { href } = a;
     const resourceId = getPrimaryPermalinkEntity(href); // The room/user ID
     const prefix = resourceId ? resourceId[0] : undefined; // First character of ID
     switch (prefix) {
         case "@":
-            return partCreator.userPill(a.textContent, resourceId);
+            return [partCreator.userPill(a.textContent, resourceId)];
         case "#":
-            return partCreator.roomPill(resourceId);
+            return [partCreator.roomPill(resourceId)];
         default: {
             if (href === a.textContent) {
-                return partCreator.plain(a.textContent);
+                return partCreator.plainWithEmoji(a.textContent);
             } else {
-                return partCreator.plain(`[${a.textContent.replace(/[[\\\]]/g, c => "\\" + c)}](${href})`);
+                return partCreator.plainWithEmoji(`[${a.textContent.replace(/[[\\\]]/g, c => "\\" + c)}](${href})`);
             }
         }
     }
 }
 
-function parseImage(img: HTMLImageElement, partCreator: PartCreator): Part {
+function parseImage(img: HTMLImageElement, partCreator: PartCreator): Part[] {
     const { src } = img;
-    return partCreator.plain(`![${img.alt.replace(/[[\\\]]/g, c => "\\" + c)}](${src})`);
+    return partCreator.plainWithEmoji(`![${img.alt.replace(/[[\\\]]/g, c => "\\" + c)}](${src})`);
 }
 
 function parseCodeBlock(n: HTMLElement, partCreator: PartCreator): Part[] {
@@ -79,7 +79,7 @@ function parseCodeBlock(n: HTMLElement, partCreator: PartCreator): Part[] {
     }
     const preLines = ("```" + language + "\n" + n.textContent + "```").split("\n");
     preLines.forEach((l, i) => {
-        parts.push(partCreator.plain(l));
+        parts.push(...partCreator.plainWithEmoji(l));
         if (i < preLines.length - 1) {
             parts.push(partCreator.newline());
         }
@@ -126,21 +126,21 @@ function parseElement(
                 partCreator.newline(),
             ];
         case "EM":
-            return partCreator.plain(`_${n.textContent}_`);
+            return partCreator.plainWithEmoji(`_${n.textContent}_`);
         case "STRONG":
-            return partCreator.plain(`**${n.textContent}**`);
+            return partCreator.plainWithEmoji(`**${n.textContent}**`);
         case "PRE":
             return parseCodeBlock(n, partCreator);
         case "CODE":
-            return partCreator.plain(`\`${n.textContent}\``);
+            return partCreator.plainWithEmoji(`\`${n.textContent}\``);
         case "DEL":
-            return partCreator.plain(`<del>${n.textContent}</del>`);
+            return partCreator.plainWithEmoji(`<del>${n.textContent}</del>`);
         case "SUB":
-            return partCreator.plain(`<sub>${n.textContent}</sub>`);
+            return partCreator.plainWithEmoji(`<sub>${n.textContent}</sub>`);
         case "SUP":
-            return partCreator.plain(`<sup>${n.textContent}</sup>`);
+            return partCreator.plainWithEmoji(`<sup>${n.textContent}</sup>`);
         case "U":
-            return partCreator.plain(`<u>${n.textContent}</u>`);
+            return partCreator.plainWithEmoji(`<u>${n.textContent}</u>`);
         case "LI": {
             const BASE_INDENT = 4;
             const depth = state.listDepth - 1;
@@ -171,9 +171,9 @@ function parseElement(
                     ((SdkConfig.get()['latex_maths_delims'] || {})['inline'] || {})['right'] || "\\)" :
                     ((SdkConfig.get()['latex_maths_delims'] || {})['display'] || {})['right'] || "\\]";
                 const tex = n.getAttribute("data-mx-maths");
-                return partCreator.plain(delimLeft + tex + delimRight);
+                return partCreator.plainWithEmoji(delimLeft + tex + delimRight);
             } else if (!checkDescendInto(n)) {
-                return partCreator.plain(n.textContent);
+                return partCreator.plainWithEmoji(n.textContent);
             }
             break;
         }
@@ -186,7 +186,7 @@ function parseElement(
         default:
             // don't textify block nodes we'll descend into
             if (!checkDescendInto(n)) {
-                return partCreator.plain(n.textContent);
+                return partCreator.plainWithEmoji(n.textContent);
             }
     }
 }

src/editor/parts.ts

@@ -15,6 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { split } from "lodash";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { Room } from "matrix-js-sdk/src/models/room";
@@ -24,12 +25,13 @@ import AutocompleteWrapperModel, {
     UpdateCallback,
     UpdateQuery,
 } from "./autocomplete";
+import { mightContainEmoji, unicodeToShortcode } from "../HtmlUtils";
 import * as Avatar from "../Avatar";
 import defaultDispatcher from "../dispatcher/dispatcher";
 import { Action } from "../dispatcher/actions";
 
 interface ISerializedPart {
-    type: Type.Plain | Type.Newline | Type.Command | Type.PillCandidate;
+    type: Type.Plain | Type.Newline | Type.Emoji | Type.Command | Type.PillCandidate;
     text: string;
 }
 
@@ -44,6 +46,7 @@ export type SerializedPart = ISerializedPart | ISerializedPillPart;
 export enum Type {
     Plain = "plain",
     Newline = "newline",
+    Emoji = "emoji",
     Command = "command",
     UserPill = "user-pill",
     RoomPill = "room-pill",
@@ -53,8 +56,9 @@ export enum Type {
 
 interface IBasePart {
     text: string;
-    type: Type.Plain | Type.Newline;
+    type: Type.Plain | Type.Newline | Type.Emoji;
     canEdit: boolean;
+    acceptsCaret: boolean;
 
     createAutoComplete(updateCallback: UpdateCallback): void;
 
@@ -165,6 +169,10 @@ abstract class BasePart {
         return true;
     }
 
+    public get acceptsCaret(): boolean {
+        return this.canEdit;
+    }
+
     public toString(): string {
         return `${this.type}(${this.text})`;
     }
@@ -183,7 +191,7 @@ abstract class BasePart {
 
 abstract class PlainBasePart extends BasePart {
     protected acceptsInsertion(chr: string, offset: number, inputType: string): boolean {
-        if (chr === "\n") {
+        if (chr === "\n" || mightContainEmoji(chr)) {
             return false;
         }
         // when not pasting or dropping text, reject characters that should start a pill candidate
@@ -351,6 +359,48 @@ class NewlinePart extends BasePart implements IBasePart {
     }
 }
 
+class EmojiPart extends BasePart implements IBasePart {
+    protected acceptsInsertion(chr: string, offset: number): boolean {
+        return false;
+    }
+
+    protected acceptsRemoval(position: number, chr: string): boolean {
+        return false;
+    }
+
+    public toDOMNode(): Node {
+        const span = document.createElement("span");
+        span.className = "mx_Emoji";
+        span.setAttribute("title", unicodeToShortcode(this.text));
+        span.appendChild(document.createTextNode(this.text));
+        return span;
+    }
+
+    public updateDOMNode(node: HTMLElement): void {
+        const textNode = node.childNodes[0];
+        if (textNode.textContent !== this.text) {
+            node.setAttribute("title", unicodeToShortcode(this.text));
+            textNode.textContent = this.text;
+        }
+    }
+
+    public canUpdateDOMNode(node: HTMLElement): boolean {
+        return node.className === "mx_Emoji";
+    }
+
+    public get type(): IBasePart["type"] {
+        return Type.Emoji;
+    }
+
+    public get canEdit(): boolean {
+        return false;
+    }
+
+    public get acceptsCaret(): boolean {
+        return true;
+    }
+}
+
 class RoomPillPart extends PillPart {
     constructor(resourceId: string, label: string, private room: Room) {
         super(resourceId, label);
@@ -503,6 +553,9 @@ export class PartCreator {
             case "\n":
                 return new NewlinePart();
             default:
+                if (mightContainEmoji(input[0])) {
+                    return new EmojiPart();
+                }
                 return new PlainPart();
         }
     }
@@ -517,6 +570,8 @@ export class PartCreator {
                 return this.plain(part.text);
             case Type.Newline:
                 return this.newline();
+            case Type.Emoji:
+                return this.emoji(part.text);
             case Type.AtRoomPill:
                 return this.atRoomPill(part.text);
             case Type.PillCandidate:
@@ -536,6 +591,10 @@ export class PartCreator {
         return new NewlinePart("\n");
     }
 
+    public emoji(text: string): EmojiPart {
+        return new EmojiPart(text);
+    }
+
     public pillCandidate(text: string): PillCandidatePart {
         return new PillCandidatePart(text, this.autoCompleteCreator);
     }
@@ -562,6 +621,28 @@ export class PartCreator {
         return new UserPillPart(userId, displayName, member);
     }
 
+    public plainWithEmoji(text: string): (PlainPart | EmojiPart)[] {
+        const parts = [];
+        let plainText = "";
+
+        // We use lodash's grapheme splitter to avoid breaking apart compound emojis
+        for (const char of split(text, "")) {
+            if (mightContainEmoji(char)) {
+                if (plainText) {
+                    parts.push(this.plain(plainText));
+                    plainText = "";
+                }
+                parts.push(this.emoji(char));
+            } else {
+                plainText += char;
+            }
+        }
+        if (plainText) {
+            parts.push(this.plain(plainText));
+        }
+        return parts;
+    }
+
     public createMentionParts(
         insertTrailingCharacter: boolean,
         displayName: string,

src/editor/render.ts

@@ -20,11 +20,11 @@ import EditorModel from "./model";
 
 export function needsCaretNodeBefore(part: Part, prevPart: Part): boolean {
     const isFirst = !prevPart || prevPart.type === Type.Newline;
-    return !part.canEdit && (isFirst || !prevPart.canEdit);
+    return !part.acceptsCaret && (isFirst || !prevPart.acceptsCaret);
 }
 
 export function needsCaretNodeAfter(part: Part, isLastOfLine: boolean): boolean {
-    return !part.canEdit && isLastOfLine;
+    return !part.acceptsCaret && isLastOfLine;
 }
 
 function insertAfter(node: HTMLElement, nodeToInsert: HTMLElement): void {

src/editor/serialize.ts

@@ -31,6 +31,7 @@ export function mdSerialize(model: EditorModel): string {
             case Type.Newline:
                 return html + "\n";
             case Type.Plain:
+            case Type.Emoji:
             case Type.Command:
             case Type.PillCandidate:
             case Type.AtRoomPill:
@@ -164,6 +165,7 @@ export function textSerialize(model: EditorModel): string {
             case Type.Newline:
                 return text + "\n";
             case Type.Plain:
+            case Type.Emoji:
             case Type.Command:
             case Type.PillCandidate:
             case Type.AtRoomPill: