feat: add full emoji picker using emoji-mart (#836)

* feat: add full emoji picker using emoji-mart

Fixes #4

* use a sailboat as the default emoji in the emoji picker

* fix tests

* fix lint
This commit is contained in:
Nolan Lawson 2018-12-18 00:43:51 -08:00 committed by GitHub
parent 943a1ed5e6
commit 098a20db49
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 355 additions and 109 deletions

View File

@ -4,9 +4,11 @@ import sass from 'node-sass'
import path from 'path'
import fs from 'fs'
import pify from 'pify'
import CleanCSS from 'clean-css'
const writeFile = pify(fs.writeFile.bind(fs))
const readdir = pify(fs.readdir.bind(fs))
const readFile = pify(fs.readFile.bind(fs))
const render = pify(sass.render.bind(sass))
const globalScss = path.join(__dirname, '../scss/global.scss')
@ -39,7 +41,13 @@ async function compileThemesSass () {
}))
}
async function compileThirdPartyCss () {
let css = await readFile(path.resolve(__dirname, '../node_modules/emoji-mart/css/emoji-mart.css'), 'utf8')
css = `/* compiled from emoji-mart.css */` + new CleanCSS().minify(css).styles
await writeFile(path.resolve(__dirname, '../static/emoji-mart.css'), css, 'utf8')
}
export async function buildSass () {
let [ result ] = await Promise.all([compileGlobalSass(), compileThemesSass()])
let [ result ] = await Promise.all([compileGlobalSass(), compileThemesSass(), compileThirdPartyCss()])
return result
}

202
package-lock.json generated
View File

@ -1272,6 +1272,23 @@
"babel-types": "^6.24.1"
}
},
"babel-polyfill": {
"version": "6.23.0",
"resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.23.0.tgz",
"integrity": "sha1-g2TKYt+Or7gwSZ9pkXdGbDsDSZ0=",
"requires": {
"babel-runtime": "^6.22.0",
"core-js": "^2.4.0",
"regenerator-runtime": "^0.10.0"
},
"dependencies": {
"regenerator-runtime": {
"version": "0.10.5",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
"integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg="
}
}
},
"babel-preset-env": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/babel-preset-env/-/babel-preset-env-1.7.0.tgz",
@ -1386,7 +1403,6 @@
"version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
"integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
"dev": true,
"requires": {
"core-js": "^2.4.0",
"regenerator-runtime": "^0.11.0"
@ -1953,8 +1969,7 @@
"chardet": {
"version": "0.4.2",
"resolved": "https://registry.npmjs.org/chardet/-/chardet-0.4.2.tgz",
"integrity": "sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I=",
"dev": true
"integrity": "sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I="
},
"check-error": {
"version": "1.0.2",
@ -2061,14 +2076,12 @@
"balanced-match": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
"optional": true
"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
},
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@ -2088,8 +2101,7 @@
"concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
"optional": true
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
},
"console-control-strings": {
"version": "1.1.0",
@ -2237,7 +2249,6 @@
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@ -2680,7 +2691,6 @@
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz",
"integrity": "sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=",
"dev": true,
"requires": {
"restore-cursor": "^2.0.0"
}
@ -2688,8 +2698,7 @@
"cli-width": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz",
"integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=",
"dev": true
"integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk="
},
"cliui": {
"version": "3.2.0",
@ -2920,8 +2929,7 @@
"core-js": {
"version": "2.5.7",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.7.tgz",
"integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw==",
"dev": true
"integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw=="
},
"core-util-is": {
"version": "1.0.2",
@ -3513,6 +3521,11 @@
"minimalistic-crypto-utils": "^1.0.0"
}
},
"emoji-mart": {
"version": "2.9.2",
"resolved": "https://registry.npmjs.org/emoji-mart/-/emoji-mart-2.9.2.tgz",
"integrity": "sha512-5S743OpjFb9nBbbx5F4APWgcp2IOjdT7gLLzu2OBh0k44C3ZoCm+wuIN1llOtj5eosUa3lYqrZWtU/ZiaCULrg=="
},
"emoji-regex": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.1.tgz",
@ -4354,7 +4367,6 @@
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/external-editor/-/external-editor-2.2.0.tgz",
"integrity": "sha512-bSn6gvGxKt+b7+6TKEv1ZycHleA7aHhRHyAqJyp5pbUFuYYNIzpZnQDk7AsYckyWdEnTeAnay0aCy2aV6iTk9A==",
"dev": true,
"requires": {
"chardet": "^0.4.0",
"iconv-lite": "^0.4.17",
@ -4365,7 +4377,6 @@
"version": "0.0.33",
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
"integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
"dev": true,
"requires": {
"os-tmpdir": "~1.0.2"
}
@ -4476,7 +4487,6 @@
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
"integrity": "sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=",
"dev": true,
"requires": {
"escape-string-regexp": "^1.0.5"
}
@ -5380,6 +5390,70 @@
"resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz",
"integrity": "sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10="
},
"inferno": {
"version": "7.0.4",
"resolved": "https://registry.npmjs.org/inferno/-/inferno-7.0.4.tgz",
"integrity": "sha512-R5lk2e7F1Jy1l9+rwz/onTyx7kqb1aikbfnMwJ1GKoKX+DJu5skha1AQvI4ran6HueXFtfoNWpylgSVx0qd9pA==",
"requires": {
"inferno-shared": "7.0.4",
"inferno-vnode-flags": "7.0.4",
"opencollective": "^1.0.3"
}
},
"inferno-clone-vnode": {
"version": "7.0.4",
"resolved": "https://registry.npmjs.org/inferno-clone-vnode/-/inferno-clone-vnode-7.0.4.tgz",
"integrity": "sha512-Pa2TUZwHT0i28mi+blp9d/z/PAXBv9EWKjbKAcmb8wpVl/fDlk03NP0VIVRgXZvLUo973Rq90g1IQtthJCu0MA==",
"requires": {
"inferno": "7.0.4"
}
},
"inferno-compat": {
"version": "7.0.4",
"resolved": "https://registry.npmjs.org/inferno-compat/-/inferno-compat-7.0.4.tgz",
"integrity": "sha512-SCE23uS2oryFC4cck1gR9iBN7a8quo9DwtCJ1U8fka61OC92qPOrVjteOBtYJERZr+cJlBw9vK+7uwQ6t1G8Zw==",
"requires": {
"inferno": "7.0.4",
"inferno-clone-vnode": "7.0.4",
"inferno-create-class": "7.0.4",
"inferno-create-element": "7.0.4",
"inferno-extras": "7.0.4"
}
},
"inferno-create-class": {
"version": "7.0.4",
"resolved": "https://registry.npmjs.org/inferno-create-class/-/inferno-create-class-7.0.4.tgz",
"integrity": "sha512-l4zilxP724wwy3/2M+LlcOw2FMT7UBdAF3NXwuS39+O9xguDY6pw8EuBmBOCLc/C0felG9HOTltRQwvCFF41wA==",
"requires": {
"inferno": "7.0.4"
}
},
"inferno-create-element": {
"version": "7.0.4",
"resolved": "https://registry.npmjs.org/inferno-create-element/-/inferno-create-element-7.0.4.tgz",
"integrity": "sha512-pT1oZOiMXVV8yZB7TQUojRulr6DW24cb9YfDZBzL1GtIMtfQkzPAYh6/IgCh6V/7acS9OHn6XOF3UK0uXyfoCA==",
"requires": {
"inferno": "7.0.4"
}
},
"inferno-extras": {
"version": "7.0.4",
"resolved": "https://registry.npmjs.org/inferno-extras/-/inferno-extras-7.0.4.tgz",
"integrity": "sha512-R+AtXDzXTb6hGncajE17c/FBX6lT+1RJu7pEfQw9borZH4NTATHAsvgZwJJsDcfMXe6WbDoq/ioLBFZgM363Og==",
"requires": {
"inferno": "7.0.4"
}
},
"inferno-shared": {
"version": "7.0.4",
"resolved": "https://registry.npmjs.org/inferno-shared/-/inferno-shared-7.0.4.tgz",
"integrity": "sha512-SlYO5BWsnC2S3osG5goOxxI9Hm4E7OUo3Nq976lNMaU3fWdRNeeJipTvp2s61hQznAq6r+/GY0qwrgQcC97S2Q=="
},
"inferno-vnode-flags": {
"version": "7.0.4",
"resolved": "https://registry.npmjs.org/inferno-vnode-flags/-/inferno-vnode-flags-7.0.4.tgz",
"integrity": "sha512-zGGBX6a05xqle3w2dcpkyEFGu/axQfsqTsp8icX1myxhW0DFs2LikVnBtskuIegThI9mDLwvBtsf4WubDo1i1A=="
},
"inflight": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@ -5690,8 +5764,7 @@
"is-promise": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.1.0.tgz",
"integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=",
"dev": true
"integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o="
},
"is-regex": {
"version": "1.0.4",
@ -5710,8 +5783,7 @@
"is-stream": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
"integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
"dev": true
"integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
},
"is-symbol": {
"version": "1.0.1",
@ -6212,8 +6284,7 @@
"mimic-fn": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.1.0.tgz",
"integrity": "sha1-5md4PZLonb00KBi1IwudYqZyrRg=",
"dev": true
"integrity": "sha1-5md4PZLonb00KBi1IwudYqZyrRg="
},
"minimalistic-assert": {
"version": "1.0.1",
@ -6357,8 +6428,7 @@
"mute-stream": {
"version": "0.0.7",
"resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz",
"integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=",
"dev": true
"integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s="
},
"nan": {
"version": "2.11.1",
@ -6748,16 +6818,78 @@
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz",
"integrity": "sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=",
"dev": true,
"requires": {
"mimic-fn": "^1.0.0"
}
},
"opencollective": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/opencollective/-/opencollective-1.0.3.tgz",
"integrity": "sha1-ruY3K8KBRFg2kMPKja7PwSDdDvE=",
"requires": {
"babel-polyfill": "6.23.0",
"chalk": "1.1.3",
"inquirer": "3.0.6",
"minimist": "1.2.0",
"node-fetch": "1.6.3",
"opn": "4.0.2"
},
"dependencies": {
"ansi-escapes": {
"version": "1.4.0",
"resolved": "http://registry.npmjs.org/ansi-escapes/-/ansi-escapes-1.4.0.tgz",
"integrity": "sha1-06ioOzGapneTZisT52HHkRQiMG4="
},
"inquirer": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/inquirer/-/inquirer-3.0.6.tgz",
"integrity": "sha1-4EqqnQW3o8ubD0B9BDdfBEcZA0c=",
"requires": {
"ansi-escapes": "^1.1.0",
"chalk": "^1.0.0",
"cli-cursor": "^2.1.0",
"cli-width": "^2.0.0",
"external-editor": "^2.0.1",
"figures": "^2.0.0",
"lodash": "^4.3.0",
"mute-stream": "0.0.7",
"run-async": "^2.2.0",
"rx": "^4.1.0",
"string-width": "^2.0.0",
"strip-ansi": "^3.0.0",
"through": "^2.3.6"
}
},
"minimist": {
"version": "1.2.0",
"resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
},
"node-fetch": {
"version": "1.6.3",
"resolved": "http://registry.npmjs.org/node-fetch/-/node-fetch-1.6.3.tgz",
"integrity": "sha1-3CNO3WSJmC1Y6PDbT2lQKavNjAQ=",
"requires": {
"encoding": "^0.1.11",
"is-stream": "^1.0.1"
}
}
}
},
"opener": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/opener/-/opener-1.5.1.tgz",
"integrity": "sha512-goYSy5c2UXE4Ra1xixabeVh1guIX/ZV/YokJksb6q2lubWu6UbvPQ20p542/sFIll1nl8JnCyK9oBaOcCWXwvA=="
},
"opn": {
"version": "4.0.2",
"resolved": "http://registry.npmjs.org/opn/-/opn-4.0.2.tgz",
"integrity": "sha1-erwi5kTf9jsKltWrfyeQwPAavJU=",
"requires": {
"object-assign": "^4.0.1",
"pinkie-promise": "^2.0.0"
}
},
"optionator": {
"version": "0.8.2",
"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz",
@ -7615,8 +7747,7 @@
"regenerator-runtime": {
"version": "0.11.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
"integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
"dev": true
"integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
},
"regenerator-transform": {
"version": "0.10.1",
@ -7685,6 +7816,11 @@
"resolved": "https://registry.npmjs.org/remedial/-/remedial-1.0.7.tgz",
"integrity": "sha1-1mdEE6ZWdgB74A3UAJgJh7LDAME="
},
"remount": {
"version": "0.9.3",
"resolved": "https://registry.npmjs.org/remount/-/remount-0.9.3.tgz",
"integrity": "sha512-U/a16ZqFadWSbjfr6k8ahEMEjFmJ3EceDFjgsbagE4tzwvcz0NQtgIKeVC4R/hF8mKhRdTyqpeFJIxQzhiP/Gw=="
},
"remove-trailing-separator": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
@ -7837,7 +7973,6 @@
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz",
"integrity": "sha1-n37ih/gv0ybU/RYpI9YhKe7g368=",
"dev": true,
"requires": {
"onetime": "^2.0.0",
"signal-exit": "^3.0.2"
@ -7982,7 +8117,6 @@
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/run-async/-/run-async-2.3.0.tgz",
"integrity": "sha1-A3GrSuC91yDUFm19/aZP96RFpsA=",
"dev": true,
"requires": {
"is-promise": "^2.1.0"
}
@ -8001,6 +8135,11 @@
"aproba": "^1.1.1"
}
},
"rx": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/rx/-/rx-4.1.0.tgz",
"integrity": "sha1-pfE/957zt0D+MKqAP7CfmIBdR4I="
},
"rxjs": {
"version": "5.5.12",
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.5.12.tgz",
@ -9522,8 +9661,7 @@
"through": {
"version": "2.3.8",
"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
"integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
"dev": true
"integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
},
"through2": {
"version": "2.0.3",

View File

@ -46,9 +46,11 @@
"child-process-promise": "^2.2.1",
"chokidar": "^2.0.4",
"circular-dependency-plugin": "^5.0.2",
"clean-css": "^4.2.1",
"compression": "^1.7.3",
"cross-env": "^5.2.0",
"css-loader": "^2.0.1",
"emoji-mart": "^2.9.2",
"emoji-regex": "^7.0.1",
"encoding": "^0.1.12",
"escape-html": "^1.0.3",
@ -62,6 +64,7 @@
"helmet": "^3.15.0",
"idb-keyval": "^3.1.0",
"indexeddb-getall-shim": "^1.3.5",
"inferno-compat": "^7.0.4",
"intersection-observer": "^0.5.1",
"localstorage-memory": "^1.0.3",
"lodash-es": "^4.17.11",
@ -75,6 +78,7 @@
"performance-now": "^2.1.0",
"pify": "^4.0.1",
"quick-lru": "^2.0.0",
"remount": "^0.9.3",
"requestidlecallback": "^0.3.0",
"rollup": "^0.68.0",
"rollup-plugin-replace": "^2.1.0",
@ -137,7 +141,8 @@
"NotificationEvent",
"NodeList",
"DOMParser",
"CSS"
"CSS",
"customElements"
],
"ignore": [
"dist",

View File

@ -17,11 +17,12 @@ export async function updateCustomEmojiForInstance (instanceName) {
}
export function insertEmoji (realm, emoji) {
let emojiText = emoji.custom ? emoji.colons : emoji.native
let { composeSelectionStart } = store.get()
let idx = composeSelectionStart || 0
let oldText = store.getComposeData(realm, 'text') || ''
let pre = oldText.substring(0, idx)
let post = oldText.substring(idx)
let newText = `${pre}:${emoji.shortcode}: ${post}`
let newText = `${pre}${emojiText} ${post}`
store.setComposeData(realm, { text: newText })
}

View File

@ -4,57 +4,39 @@
{title}
background="var(--main-bg)"
>
<div class="custom-emoji-container">
{#if emojis.length}
<ul class="custom-emoji-list">
{#each emojis as emoji}
<li class="custom-emoji">
<button type="button" on:click="onClickEmoji(emoji)">
<img src={$autoplayGifs ? emoji.url : emoji.static_url}
alt=":{emoji.shortcode}:"
title=":{emoji.shortcode}:"
/>
</button>
</li>
{/each}
</ul>
<div class="emoji-container" {style} >
{#if loaded}
<emoji-mart props-json={emojiMartPropsJson} ></emoji-mart>
{:elseif error}
<div>Failed to load emoji picker: {error}</div>
{:else}
<div class="custom-emoji-no-emoji">No custom emoji found for this instance.</div>
<div class="emoji-container-loading" >
<LoadingSpinner />
</div>
{/if}
</div>
</ModalDialog>
<style>
.custom-emoji-container {
max-width: 100%;
width: 400px;
height: 300px;
overflow: auto;
.emoji-container {
max-width: calc(100vw - 20px);
position: relative;
}
.custom-emoji-no-emoji {
font-size: 1.3em;
padding: 20px;
.emoji-container-loading {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
.custom-emoji-list {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
grid-gap: 5px;
padding: 20px 10px;
:global(.emoji-mart-category .emoji-mart-emoji-custom span,
.emoji-mart-preview-emoji .emoji-mart-emoji-custom span) {
/* some custom emoji look repeated because they aren't tall enough */
background-repeat: no-repeat;
background-position: center center;
}
.custom-emoji button {
padding: 0;
margin: 0;
border: none;
cursor: pointer;
box-shadow: none;
background: none;
}
.custom-emoji img {
width: 48px;
height: 48px;
object-fit: contain;
}
</style>
<script>
import ModalDialog from './ModalDialog.html'
@ -62,26 +44,73 @@
import { insertEmoji } from '../../../_actions/emoji'
import { show } from '../helpers/showDialog'
import { close } from '../helpers/closeDialog'
import { oncreate } from '../helpers/onCreateDialog'
import { oncreate as onCreateDialog } from '../helpers/onCreateDialog'
import { define } from 'remount/es6'
import { loadCSS } from '../../../_utils/loadCSS'
import LoadingSpinner from '../../../_components/LoadingSpinner.html'
import { importEmojiMart } from '../../../_utils/asyncModules'
import { on } from '../../../_utils/eventBus'
export default {
oncreate,
async oncreate () {
onCreateDialog.call(this)
on('emoji-selected', this, emoji => this.onEmojiSelected(emoji))
try {
loadCSS('/emoji-mart.css')
let Picker = await importEmojiMart()
if (!customElements.get('emoji-mart')) {
define({ 'emoji-mart': Picker })
}
this.set({ loaded: true })
} catch (error) {
this.set({ error }) // should never happen, but you never know
}
},
components: {
ModalDialog
ModalDialog,
LoadingSpinner
},
store: () => store,
data: () => ({
loading: true,
loaded: false,
error: void 0
}),
computed: {
emojis: ({ $currentCustomEmoji }) => {
// try to estimate size of emoji-mart based on mobile vs desktop
style: ({ $isSmallMobileSize }) => (`
min-width: ${$isSmallMobileSize ? 250 : 300}px;
min-height: ${$isSmallMobileSize ? 300 : 400}px;
`),
emojiMartPropsJson: ({ emojiMartProps }) => JSON.stringify(emojiMartProps),
emojiMartProps: ({ perLine, custom, showPreview }) => ({
perLine,
custom,
showPreview,
color: 'var(--nav-bg)',
emoji: 'sailboat',
title: 'Emoji'
}),
showPreview: ({ $isSmallMobileSize }) => !$isSmallMobileSize,
perLine: ({ $isSmallMobileSize }) => $isSmallMobileSize ? 7 : 9,
custom: ({ $currentCustomEmoji, $autoplayGifs }) => {
if (!$currentCustomEmoji) {
return []
}
return $currentCustomEmoji.filter(emoji => emoji.visible_in_picker)
return $currentCustomEmoji.filter(emoji => emoji.visible_in_picker).map(emoji => ({
name: emoji.shortcode,
short_names: [emoji.shortcode],
text: `:${emoji.shortcode}:`,
emoticons: [],
keywords: [emoji.shortcode],
imageUrl: $autoplayGifs ? emoji.url : emoji.static_url
}))
}
},
methods: {
show,
close,
onClickEmoji (emoji) {
onEmojiSelected (emoji) {
let { realm } = this.get()
insertEmoji(realm, emoji)
this.close()

View File

@ -8,7 +8,7 @@ export default function showEmojiDialog (realm) {
data: {
id: createDialogId(),
label: 'Emoji dialog',
title: 'Custom emoji',
title: 'Emoji',
realm
}
})

View File

@ -0,0 +1,20 @@
// I wrap the emoji-mart React code itself here, so that we don't need to pass in a huge "data"
// object via a JSON-stringified custom element attribute. Also, AFAICT there is no way when
// using `remount` to pass in functions as attributes, since everything is stringified. So
// I just fire a global event here when an emoji is clicked.
import data from 'emoji-mart/data/messenger.json'
import NimblePicker from 'emoji-mart/dist-es/components/picker/nimble-picker'
import React from 'react'
import { emit } from '../_utils/eventBus'
function onEmojiSelected (emoji) {
emit('emoji-selected', emoji)
}
export default props => React.createElement(NimblePicker, Object.assign({
set: 'messenger',
data,
native: true,
onSelect: onEmojiSelected
}, props))

View File

@ -6,7 +6,10 @@ export function resizeObservers (store) {
}
const recalculateIsMobileSize = () => {
store.set({ isMobileSize: window.matchMedia('(max-width: 767px)').matches })
store.set({
isMobileSize: window.matchMedia('(max-width: 767px)').matches,
isSmallMobileSize: window.matchMedia('(max-width: 479px)').matches
})
}
registerResizeListener(recalculateIsMobileSize)

View File

@ -35,3 +35,7 @@ export const importDatabase = () => import(
export const importLoggedInObservers = () => import(
/* webpackChunkName: 'loggedInObservers.js' */ '../_store/observers/loggedInObservers.js'
).then(getDefault)
export const importEmojiMart = () => import(
/* webpackChunkName: 'emoji-mart.js' */ '../_react/emoji-mart.js'
).then(getDefault)

View File

@ -0,0 +1,12 @@
export function loadCSS (href) {
let existingLink = document.querySelector(`link[href="${href}"]`)
if (existingLink) {
return
}
let link = document.createElement('link')
link.rel = 'stylesheet'
link.href = href
document.head.appendChild(link)
}

View File

@ -1,6 +1,5 @@
import { Selector as $ } from 'testcafe'
import {
composeButton, composeInput, composeLengthIndicator, emojiButton, getComposeSelectionStart,
composeButton, composeInput, composeLengthIndicator, emojiButton, emojiSearchInput, getComposeSelectionStart,
getNthStatusContent, getUrl,
homeNavButton,
notificationsNavButton, sleep,
@ -63,7 +62,8 @@ test('shows compose limits for custom emoji', async t => {
await t
.typeText(composeInput, 'hello world ')
.click(emojiButton)
.click($('button img[title=":blobnom:"]'))
.typeText(emojiSearchInput, 'blobnom')
.pressKey('enter')
.expect(composeInput.value).eql('hello world :blobnom: ')
.expect(composeLengthIndicator.innerText).eql('478')
})
@ -75,16 +75,19 @@ test('inserts custom emoji correctly', async t => {
.selectText(composeInput, 6, 6)
.expect(getComposeSelectionStart()).eql(6)
.click(emojiButton)
.click($('button img[title=":blobpats:"]'))
.typeText(emojiSearchInput, 'blobpats')
.pressKey('enter')
.expect(composeInput.value).eql('hello :blobpats: world')
.selectText(composeInput, 0, 0)
.expect(getComposeSelectionStart()).eql(0)
.click(emojiButton)
.click($('button img[title=":blobnom:"]'))
.typeText(emojiSearchInput, 'blobnom')
.pressKey('enter')
.expect(composeInput.value).eql(':blobnom: hello :blobpats: world')
.typeText(composeInput, ' foobar ')
.click(emojiButton)
.click($('button img[title=":blobpeek:"]'))
.typeText(emojiSearchInput, 'blobpeek')
.pressKey('enter')
.expect(composeInput.value).eql(':blobnom: hello :blobpats: world foobar :blobpeek: ')
})
@ -92,13 +95,28 @@ test('inserts emoji without typing anything', async t => {
await loginAsFoobar(t)
await t
.click(emojiButton)
.click($('button img[title=":blobpats:"]'))
.typeText(emojiSearchInput, 'blobpats')
.pressKey('enter')
.expect(composeInput.value).eql(':blobpats: ')
.click(emojiButton)
.click($('button img[title=":blobpeek:"]'))
.typeText(emojiSearchInput, 'blobpeek')
.pressKey('enter')
.expect(composeInput.value).eql(':blobpeek: :blobpats: ')
})
test('inserts native emoji without typing anything', async t => {
await loginAsFoobar(t)
await t
.click(emojiButton)
.typeText(emojiSearchInput, 'pineapple')
.pressKey('enter')
.expect(composeInput.value).eql('\ud83c\udf4d ')
.click(emojiButton)
.typeText(emojiSearchInput, 'elephant')
.pressKey('enter')
.expect(composeInput.value).eql('\ud83d\udc18 \ud83c\udf4d ')
})
test('cannot post an empty status', async t => {
await loginAsFoobar(t)
await t

View File

@ -9,7 +9,7 @@ import {
getNthStatusSelector,
composeModalEmojiButton,
composeModalInput,
composeModalComposeButton
composeModalComposeButton, emojiSearchInput
} from '../utils'
import { loginAsFoobar } from '../roles'
import { Selector as $ } from 'testcafe'
@ -42,7 +42,8 @@ test('can use emoji dialog within compose dialog', async t => {
await sleep(2000)
await t.click(composeButton)
.click(composeModalEmojiButton)
.click($('button img[title=":blobpats:"]'))
.typeText(emojiSearchInput, 'blobpats')
.pressKey('enter')
.expect(composeModalInput.value).eql(':blobpats: ')
.click(composeModalComposeButton)
.expect(modalDialog.exists).notOk()

View File

@ -46,6 +46,7 @@ export const markMediaSensitiveInput = $('#choice-mark-media-sensitive')
export const neverMarkMediaSensitiveInput = $('#choice-never-mark-media-sensitive')
export const removeEmojiFromDisplayNamesInput = $('#choice-omit-emoji-in-display-names')
export const dialogOptionsOption = $(`.modal-dialog button`)
export const emojiSearchInput = $('.emoji-mart-search input')
export const composeModalInput = $('.modal-dialog .compose-box-input')
export const composeModalComposeButton = $('.modal-dialog .compose-box-button')

View File

@ -4,15 +4,12 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPl
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
const terser = require('./terser.config')
const CircularDependencyPlugin = require('circular-dependency-plugin')
const { mode, dev } = require('./shared.config')
const { mode, dev, resolve } = require('./shared.config')
module.exports = {
entry: config.client.entry(),
output: Object.assign(config.client.output(), { globalObject: 'this' }), // enables HMR in workers
resolve: {
extensions: ['.js', '.json', '.html'],
mainFields: ['svelte', 'module', 'browser', 'main']
},
resolve,
mode,
module: {
rules: [

View File

@ -1,15 +1,12 @@
const config = require('sapper/config/webpack.js')
const pkg = require('../package.json')
const { mode, dev } = require('./shared.config')
const { mode, dev, resolve } = require('./shared.config')
module.exports = {
entry: config.server.entry(),
output: config.server.output(),
target: 'node',
resolve: {
extensions: ['.js', '.json', '.html'],
mainFields: ['svelte', 'module', 'browser', 'main']
},
resolve,
externals: Object.keys(pkg.dependencies),
module: {
rules: [

View File

@ -1,11 +1,12 @@
const config = require('sapper/config/webpack.js')
const terser = require('./terser.config')
const webpack = require('webpack')
const { mode, dev } = require('./shared.config')
const { mode, dev, resolve } = require('./shared.config')
module.exports = {
entry: config.serviceworker.entry(),
output: config.serviceworker.output(),
resolve,
mode,
devtool: dev ? 'inline-source-map' : 'source-map',
plugins: [

View File

@ -1,7 +1,18 @@
const mode = process.env.NODE_ENV
const dev = mode === 'development'
const resolve = {
extensions: ['.js', '.json', '.html'],
mainFields: ['svelte', 'module', 'browser', 'main'],
alias: {
'react': 'inferno-compat',
'react-dom': 'inferno-compat',
'inferno': dev ? 'inferno/dist/index.dev.esm.js' : 'inferno'
}
}
module.exports = {
mode,
dev
dev,
resolve
}