From 1371175bced08c6bb0fda718ee387286cd7051ec Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Sun, 28 Jun 2020 23:12:14 -0700 Subject: [PATCH] feat: use emoji-picker-element, add emoji autocompletions/tooltips (#1804) * feat: use emoji-picker-element, add emoji autocompletions/tooltips * fix: fix lint bug * test: fix emoji in chrome on linux in travis * test: try bionic in travis * chore: try to fix travis * chore: try to fix travis * fix: filter unsupported emoji * chore: try to fix travis * chore: try to fix travis * chore: try to fix travis * chore: try to fix travis * Revert "chore: try to fix travis" This reverts commit 3cd2d94469b2f1a20c847c2a69e088d7c8d1efdd. * fix: fix emoji autosuggest * test: fix test --- .dockerignore | 2 +- .gitignore | 4 +- .nowignore | 2 +- .travis.yml | 8 +- CONTRIBUTING.md | 6 +- bin/build-assets.js | 32 +- package.json | 11 +- src/build/template.html | 2 +- src/routes/_actions/autosuggest.js | 4 +- src/routes/_actions/autosuggestEmojiSearch.js | 39 ++- src/routes/_actions/emoji.js | 2 +- .../compose/ComposeAutosuggestionList.html | 35 ++- .../dialog/components/EmojiDialog.html | 284 ++++++------------ .../dialog/components/ModalDialog.html | 2 +- .../_components/profile/AccountProfile.html | 10 +- src/routes/_components/status/Status.html | 3 + src/routes/_react/createEmojiMartPicker.js | 20 -- .../_react/createEmojiMartPickerFromData.js | 17 -- src/routes/_static/fonts.js | 3 + .../computations/autosuggestComputations.js | 3 +- .../_store/observers/customEmojiObservers.js | 22 ++ .../_store/observers/loggedInObservers.js | 2 + .../_thirdparty/a11y-dialog/a11y-dialog.js | 59 +++- src/routes/_utils/addEmojiTooltips.js | 19 ++ src/routes/_utils/asyncPolyfills.js | 8 + .../convertCustomEmojiToEmojiPickerFormat.js | 11 + .../createAutosuggestAccessibleLabel.js | 2 +- src/routes/_utils/emojiDatabase.js | 61 ++++ src/routes/_utils/emojifyText.js | 1 + src/routes/_utils/loadPolyfills.js | 15 +- src/routes/_utils/testColorEmojiSupported.js | 39 +++ .../_utils/testEmojiRenderedAtCorrectSize.js | 43 +++ src/routes/_utils/testEmojiSupported.js | 17 ++ src/service-worker.js | 2 + tests/spec/012-compose.js | 44 ++- tests/spec/108-compose-dialog.js | 14 +- tests/spec/110-compose-content-warnings.js | 2 +- tests/utils.js | 11 +- webpack/client.config.js | 20 -- webpack/shared.config.js | 6 + yarn.lock | 46 +-- 41 files changed, 576 insertions(+), 357 deletions(-) delete mode 100644 src/routes/_react/createEmojiMartPicker.js delete mode 100644 src/routes/_react/createEmojiMartPickerFromData.js create mode 100644 src/routes/_static/fonts.js create mode 100644 src/routes/_store/observers/customEmojiObservers.js create mode 100644 src/routes/_utils/addEmojiTooltips.js create mode 100644 src/routes/_utils/convertCustomEmojiToEmojiPickerFormat.js create mode 100644 src/routes/_utils/emojiDatabase.js create mode 100644 src/routes/_utils/testColorEmojiSupported.js create mode 100644 src/routes/_utils/testEmojiRenderedAtCorrectSize.js create mode 100644 src/routes/_utils/testEmojiSupported.js diff --git a/.dockerignore b/.dockerignore index 781e9357..a060c90f 100644 --- a/.dockerignore +++ b/.dockerignore @@ -14,7 +14,7 @@ tests /static/icons.svg /static/robots.txt /static/inline-script.js.map -/static/emoji-mart-all.json +/static/emoji-all-en.json /src/inline-script/checksum.js yarn-error.log /now.json diff --git a/.gitignore b/.gitignore index fc95c0fb..0d7f1dbf 100644 --- a/.gitignore +++ b/.gitignore @@ -8,9 +8,9 @@ /static/icons.svg /static/robots.txt /static/inline-script.js.map -/static/emoji-mart-all.json +/static/emoji-all-en.json /src/inline-script/checksum.js yarn-error.log /now.json -.now \ No newline at end of file +.now diff --git a/.nowignore b/.nowignore index 4993a364..93de9e88 100644 --- a/.nowignore +++ b/.nowignore @@ -7,6 +7,6 @@ /static/*.css /static/icons.svg /static/inline-script.js.map -/static/emoji-mart-all.json +/static/emoji-all-en.json /src/inline-script/checksum.js yarn-error.log diff --git a/.travis.yml b/.travis.yml index 9d1cd3a4..1af16e6c 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,7 +1,8 @@ language: node_js node_js: - "10" -dist: xenial +dist: bionic +group: dev sudo: false services: - redis-server @@ -20,8 +21,7 @@ addons: - gcc - imagemagick - libffi-dev - - libgdbm-dev - - libgdbm-dev + - libgdbm5 - libicu-dev - libidn11-dev - libncurses5-dev @@ -33,13 +33,13 @@ addons: - libxslt1-dev - libyaml-dev - pkg-config - - postgresql-10 - postgresql-client-10 - postgresql-contrib-10 - protobuf-compiler - redis-server - redis-tools - zlib1g-dev + - fonts-noto-color-emoji # required for emoji-picker-element + Chrome on Linux before_install: - psql -d template1 -U postgres -c "CREATE USER pinafore WITH PASSWORD 'pinafore' CREATEDB;" - curl -o- -L https://yarnpkg.com/install.sh | bash -s diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index b1ce2577..0473597a 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -176,10 +176,10 @@ preprocessor. Highly modular, highly functional, lots of single-function files. Tends to help with tree-shaking and code-splitting, as well as avoiding circular dependencies. -### Preact is loaded dynamically +### emoji-picker-element is loaded as a third-party bundle -This is a Svelte project, but `emoji-mart` is used for the emoji picker, and it's written in React. So we -lazy-load the React-compatible Preact library when we load `emoji-mart`. +`emoji-picker-element` uses Svelte 3, whereas we use Svelte 2. So it's just imported +as a bundled custom element, not as a Svelte component. ### Some third-party code is bundled diff --git a/bin/build-assets.js b/bin/build-assets.js index c3cf8c87..0299de6e 100644 --- a/bin/build-assets.js +++ b/bin/build-assets.js @@ -1,30 +1,22 @@ import path from 'path' import fs from 'fs' import { promisify } from 'util' -import CleanCSS from 'clean-css' +import trimEmojiData from 'emoji-picker-element/trimEmojiData.cjs' -const writeFile = promisify(fs.writeFile) const readFile = promisify(fs.readFile) -const copyFile = promisify(fs.copyFile) - -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') -} - -async function compileThirdPartyJson () { - await copyFile( - path.resolve(__dirname, '../node_modules/emoji-mart/data/all.json'), - path.resolve(__dirname, '../static/emoji-mart-all.json') - ) -} +const writeFile = promisify(fs.writeFile) async function main () { - await Promise.all([ - compileThirdPartyCss(), - compileThirdPartyJson() - ]) + let json = JSON.parse(await readFile( + path.resolve(__dirname, '../node_modules/emojibase-data/en/data.json'), + 'utf8') + ) + json = trimEmojiData(json) + await writeFile( + path.resolve(__dirname, '../static/emoji-all-en.json'), + JSON.stringify(json), + 'utf8' + ) } main().catch(err => { diff --git a/package.json b/package.json index fde32fd9..f1f88462 100644 --- a/package.json +++ b/package.json @@ -49,21 +49,22 @@ "@babel/runtime": "^7.8.4", "@rollup/plugin-replace": "^2.3.0", "@webcomponents/custom-elements": "^1.4.0", - "arrow-key-navigation": "^1.1.0", + "@webcomponents/shadydom": "^1.7.3", + "array-flat-polyfill": "^1.0.1", + "arrow-key-navigation": "^1.2.0", "babel-loader": "^8.0.6", - "babel-plugin-transform-react-remove-prop-types": "^0.4.24", "blurhash": "^1.1.3", "cheerio": "^1.0.0-rc.3", "child-process-promise": "^2.2.1", "chokidar": "^3.3.1", "circular-dependency-plugin": "^5.2.0", - "clean-css": "^4.2.3", "compression": "^1.7.4", "cross-env": "^7.0.0", "css-dedoupe": "^0.1.1", "css-loader": "^3.4.2", - "emoji-mart": "nolanlawson/emoji-mart#8bb6fb6", + "emoji-picker-element": "^1.0.0", "emoji-regex": "^9.0.0", + "emojibase-data": "^5.0.1", "encoding": "^0.1.12", "escape-html": "^1.0.3", "esm": "^3.2.25", @@ -88,7 +89,6 @@ "page-lifecycle": "^0.1.2", "performance-now": "^2.1.0", "pinch-zoom-element": "^1.1.1", - "preact": "^10.3.3", "promise-worker": "^2.0.1", "prop-types": "^15.7.2", "requestidlecallback": "^0.3.0", @@ -134,6 +134,7 @@ "Element", "Event", "FormData", + "HTMLElement", "IDBKeyRange", "IDBObjectStore", "Image", diff --git a/src/build/template.html b/src/build/template.html index 7a64aea9..b390f763 100644 --- a/src/build/template.html +++ b/src/build/template.html @@ -26,7 +26,7 @@ */ img, svg, video, input[type="checkbox"], input[type="radio"], - .inline-emoji, .theme-preview, .emoji-mart-emoji, .emoji-mart-skin { + .inline-emoji, .theme-preview { filter: grayscale(100%); } diff --git a/src/routes/_actions/autosuggest.js b/src/routes/_actions/autosuggest.js index 0a612d57..d4181e37 100644 --- a/src/routes/_actions/autosuggest.js +++ b/src/routes/_actions/autosuggest.js @@ -1,6 +1,6 @@ import { store } from '../_store/store' -const emojiMapper = emoji => `:${emoji.shortcode}:` +const emojiMapper = emoji => emoji.unicode ? emoji.unicode : `:${emoji.shortcodes[0]}:` const hashtagMapper = hashtag => `#${hashtag.name}` const accountMapper = account => `@${account.acct}` @@ -61,7 +61,7 @@ export function selectAutosuggestItem (item) { const endIndex = composeSelectionStart if (item.acct) { /* no await */ insertUsername(currentComposeRealm, item, startIndex, endIndex) - } else if (item.shortcode) { + } else if (item.shortcodes) { /* no await */ insertEmojiAtPosition(currentComposeRealm, item, startIndex, endIndex) } else { // hashtag /* no await */ insertHashtag(currentComposeRealm, item, startIndex, endIndex) diff --git a/src/routes/_actions/autosuggestEmojiSearch.js b/src/routes/_actions/autosuggestEmojiSearch.js index 3b1b16e5..81928932 100644 --- a/src/routes/_actions/autosuggestEmojiSearch.js +++ b/src/routes/_actions/autosuggestEmojiSearch.js @@ -1,24 +1,45 @@ import { store } from '../_store/store' -import { SEARCH_RESULTS_LIMIT } from '../_static/autosuggest' import { scheduleIdleTask } from '../_utils/scheduleIdleTask' +import * as emojiDatabase from '../_utils/emojiDatabase' +import { SEARCH_RESULTS_LIMIT } from '../_static/autosuggest' +import { testEmojiSupported } from '../_utils/testEmojiSupported' +import { mark, stop } from '../_utils/marks' -function searchEmoji (searchText) { - searchText = searchText.toLowerCase().substring(1) - const { currentCustomEmoji } = store.get() - const results = currentCustomEmoji.filter(emoji => emoji.shortcode.toLowerCase().startsWith(searchText)) - .sort((a, b) => a.shortcode.toLowerCase() < b.shortcode.toLowerCase() ? -1 : 1) - .slice(0, SEARCH_RESULTS_LIMIT) +async function searchEmoji (searchText) { + let emojis = await emojiDatabase.findBySearchQuery(searchText) + + const results = [] + + if (searchText.startsWith(':') && searchText.endsWith(':')) { + // exact shortcode search + const shortcode = searchText.substring(1, searchText.length - 1).toLowerCase() + emojis = emojis.filter(_ => _.shortcodes.includes(shortcode)) + } + + mark('testEmojiSupported') + for (const emoji of emojis) { + if (results.length === SEARCH_RESULTS_LIMIT) { + break + } + if (emoji.url || testEmojiSupported(emoji.unicode)) { // emoji.url is a custom emoji + results.push(emoji) + } + } + stop('testEmojiSupported') return results } export function doEmojiSearch (searchText) { let canceled = false - scheduleIdleTask(() => { + scheduleIdleTask(async () => { + if (canceled) { + return + } + const results = await searchEmoji(searchText) if (canceled) { return } - const results = searchEmoji(searchText) store.setForCurrentAutosuggest({ autosuggestType: 'emoji', autosuggestSelected: 0, diff --git a/src/routes/_actions/emoji.js b/src/routes/_actions/emoji.js index 25031f42..373507e1 100644 --- a/src/routes/_actions/emoji.js +++ b/src/routes/_actions/emoji.js @@ -31,7 +31,7 @@ export async function setupCustomEmojiForInstance (instanceName) { } export function insertEmoji (realm, emoji) { - const emojiText = emoji.custom ? emoji.colons : emoji.native + const emojiText = emoji.unicode || `:${emoji.name}:` const { composeSelectionStart } = store.get() const idx = composeSelectionStart || 0 const oldText = store.getComposeData(realm, 'text') || '' diff --git a/src/routes/_components/compose/ComposeAutosuggestionList.html b/src/routes/_components/compose/ComposeAutosuggestionList.html index f02a4bb6..352501cb 100644 --- a/src/routes/_components/compose/ComposeAutosuggestionList.html +++ b/src/routes/_components/compose/ComposeAutosuggestionList.html @@ -3,7 +3,7 @@ class="compose-autosuggest-list" role="listbox" > - {#each items as item, i (item.shortcode || item.id || item.name)} + {#each items as item, i (item.shortcodes ? `emoji-${item.unicode || item.name}` : item.id ? `account-${item.id}` : `hashtag-${item.name}`)}
  • {item.name} - {:else} - + {:else} + {#if item.url} + + + {:else} + + + {item.unicode} + + {/if} - {':' + item.shortcode + ':'} + {item.shortcodes.map(_ => `:${_}:`).join(' ')} {/if} @@ -89,6 +97,14 @@ object-fit: contain; fill: var(--deemphasized-text-color); } + .compose-autosuggest-list-item-native-emoji { + font-family: PinaforeEmoji; + font-size: 32px; + line-height: 1; + display: flex; + justify-content: center; + align-items: center; + } .compose-autosuggest-list-display-name { grid-area: display-name; font-size: 1.1em; @@ -129,6 +145,9 @@ width: 24px; height: 24px; } + .compose-autosuggest-list-item-native-emoji { + font-size: 18px; + } }