Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

😄 Emoji autocomplete and unicode emoji to image conversion using emojione. #255

Closed
wants to merge 4 commits into from
Closed

😄 Emoji autocomplete and unicode emoji to image conversion using emojione. #255

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bed0a7c
Autocomplete and render unicode emoji as images
aviraldg Apr 1, 2016
98a2b7b
Merge branch 'develop' into feature-emoji
aviraldg Apr 9, 2016
8f9d35a
Fix emoji conversion's interaction with highlights
aviraldg Apr 9, 2016
94f1009
Remove emoji to image code from HtmlUtils
aviraldg Apr 9, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,14 @@
},
"dependencies": {
"classnames": "^2.1.2",
"emojione": "^2.1.3",
"favico.js": "^0.3.10",
"filesize": "^3.1.2",
"flux": "^2.0.3",
"glob": "^5.0.14",
"highlight.js": "^8.9.1",
"linkifyjs": "^2.0.0-beta.4",
"lodash": "^4.7.0",
"marked": "^0.3.5",
"matrix-js-sdk": "matrix-org/matrix-js-sdk#develop",
"optimist": "^0.6.1",
Expand All @@ -41,9 +43,9 @@
"velocity-ui-pack": "^1.2.2"
},
"//babelversion": [
"brief experiments with babel6 seems to show that it generates source ",
"maps which confuse chrome and make setting breakpoints tricky. So ",
"let's stick with v5 for now."
"brief experiments with babel6 seems to show that it generates source ",
"maps which confuse chrome and make setting breakpoints tricky. So ",
"let's stick with v5 for now."
],
"devDependencies": {
"babel": "^5.8.23",
Expand Down
2 changes: 1 addition & 1 deletion src/HtmlUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ var sanitizeHtmlParams = {
'del', // for markdown
// deliberately no h1/h2 to stop people shouting.
'h3', 'h4', 'h5', 'h6', 'blockquote', 'p', 'a', 'ul', 'ol',
'nl', 'li', 'b', 'i', 'u', 'strong', 'em', 'strike', 'code', 'hr', 'br', 'div',
'nl', 'li', 'b', 'i', 'strong', 'em', 'strike', 'code', 'hr', 'br', 'div',
'table', 'thead', 'caption', 'tbody', 'tr', 'th', 'td', 'pre'
],
allowedAttributes: {
Expand Down
28 changes: 28 additions & 0 deletions src/TabCompleteEntries.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ limitations under the License.
*/
var React = require("react");
var sdk = require("./index");
var emojione = require('emojione');

class Entry {
constructor(text) {
Expand Down Expand Up @@ -91,6 +92,32 @@ CommandEntry.fromCommands = function(commandArray) {
});
}

class EmojiEntry extends Entry {
constructor(shortname) {
super(shortname);
this.shortname = shortname;
}

getFillText() {
return emojione.shortnameToUnicode(this.shortname);
}

getKey() {
return this.shortname;
}

getImageJsx() {
var image = emojione.shortnameToImage(this.shortname);
return <span dangerouslySetInnerHTML={{ __html: image }} />;
}

getSuffix(isFirstWord) {
return " "; // force a space after the command.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we really want to suffix a " "?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(personal opinion) I (mostly) do want a space after I insert an emoji.

}
}

EmojiEntry.entries = Object.keys(emojione.emojioneList).map((shortname) => new EmojiEntry(shortname));

class MemberEntry extends Entry {
constructor(member) {
super(member.name || member.userId);
Expand Down Expand Up @@ -139,3 +166,4 @@ MemberEntry.fromMemberList = function(members) {
module.exports.Entry = Entry;
module.exports.MemberEntry = MemberEntry;
module.exports.CommandEntry = CommandEntry;
module.exports.EmojiEntry = EmojiEntry;
3 changes: 2 additions & 1 deletion src/components/structures/RoomView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ var CallHandler = require('../../CallHandler');
var TabComplete = require("../../TabComplete");
var MemberEntry = require("../../TabCompleteEntries").MemberEntry;
var CommandEntry = require("../../TabCompleteEntries").CommandEntry;
var EmojiEntry = require("../../TabCompleteEntries").EmojiEntry;
var Resend = require("../../Resend");
var SlashCommands = require("../../SlashCommands");
var dis = require("../../dispatcher");
Expand Down Expand Up @@ -469,7 +470,7 @@ module.exports = React.createClass({
this.tabComplete.setCompletionList(
MemberEntry.fromMemberList(members).concat(
CommandEntry.fromCommands(SlashCommands.getCommandList())
)
).concat(EmojiEntry.entries)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm. Slightly scared about the perf/UX impact of appending eeeeevery emoji ever to the tab complete list all the time - mainly in terms of the CPU required to filter down the list once you start filtering. I wonder if we should only be adding it in as an option in the special case of the user hitting a colon? I haven't played with it in anger yet, but definitely worth keeping an eye on CPU...

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In my tests it worked well enough (that I actually used it myself for quite a while), but if we notice issues we can definitely try to be smarter about it. That it's at the end of the list of autocompletions definitely helps.

imo, the whole autocompletion thing needs to be changed so it isn't one giant list, but calling functions for each type of autocomplete, but that's going to be a much larger change 😅 (and also ventures into the territory of my GSoC proposal)

);
}, 500),

Expand Down