diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7643c5ad1..75459f821 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -34,6 +34,7 @@
 - CodiMD instances can now be branded either with a '@ <custom string>' or '@ <custom logo>' after the CodiMD logo and text
 - Images will be loaded via proxy if an image proxy is configured in the backend
 - Asciinema videos may now be embedded by pasting the URL of one video into a single line
+- The Toolbar includes an EmojiPicker
 
 ### Changed
 
diff --git a/package.json b/package.json
index 76d19cd22..333966b17 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "@testing-library/user-event": "12.1.0",
     "@types/codemirror": "0.0.97",
     "@types/deep-equal": "1.0.1",
+    "@types/emoji-mart": "3.0.2",
     "@types/highlight.js": "9.12.4",
     "@types/jest": "26.0.8",
     "@types/js-yaml": "3.12.5",
@@ -31,6 +32,7 @@
     "bootstrap": "4.5.0",
     "codemirror": "5.56.0",
     "deep-equal": "2.0.3",
+    "emoji-mart": "3.0.0",
     "eslint-config-react-app": "5.2.1",
     "eslint-config-standard": "14.1.1",
     "eslint-plugin-flowtype": "5.2.0",
@@ -80,8 +82,9 @@
     "react-router-bootstrap": "0.25.0",
     "react-router-dom": "5.2.0",
     "react-scripts": "3.4.1",
+    "react-use": "15.3.3",
     "redux": "4.0.5",
-    "ts-mockery": "^1.2.0",
+    "ts-mockery": "1.2.0",
     "typescript": "3.9.7",
     "use-media": "1.4.0",
     "use-resize-observer": "6.1.0"
diff --git a/public/img/forkawesome.png b/public/img/forkawesome.png
new file mode 100644
index 000000000..c1a976795
Binary files /dev/null and b/public/img/forkawesome.png differ
diff --git a/src/components/editor/editor-window/tool-bar/emoji-picker/emoji-picker.scss b/src/components/editor/editor-window/tool-bar/emoji-picker/emoji-picker.scss
new file mode 100644
index 000000000..d97a6af30
--- /dev/null
+++ b/src/components/editor/editor-window/tool-bar/emoji-picker/emoji-picker.scss
@@ -0,0 +1,8 @@
+.emoji-mart {
+  position: absolute;
+  z-index: 10000;
+}
+
+.emoji-mart-emoji-native {
+  font-family: "twemoji", monospace;
+}
diff --git a/src/components/editor/editor-window/tool-bar/emoji-picker/emoji-picker.tsx b/src/components/editor/editor-window/tool-bar/emoji-picker/emoji-picker.tsx
new file mode 100644
index 000000000..b9eaffdf2
--- /dev/null
+++ b/src/components/editor/editor-window/tool-bar/emoji-picker/emoji-picker.tsx
@@ -0,0 +1,47 @@
+import { Data, EmojiData, NimblePicker } from 'emoji-mart'
+import 'emoji-mart/css/emoji-mart.css'
+import emojiData from 'emoji-mart/data/twitter.json'
+import React, { useMemo, useRef } from 'react'
+import { useClickAway } from 'react-use'
+import { ShowIf } from '../../../../common/show-if/show-if'
+import './emoji-picker.scss'
+import { ForkAwesomeIcons } from './icon-names'
+
+export interface EmojiPickerProps {
+  show: boolean
+  onEmojiSelected: (emoji: EmojiData) => void
+  onDismiss: () => void
+}
+
+export const EmojiPicker: React.FC<EmojiPickerProps> = ({ show, onEmojiSelected, onDismiss }) => {
+  const pickerRef = useRef(null)
+  const customIcons = useMemo(() =>
+    Object.keys(ForkAwesomeIcons).map((name) => ({
+      name: `fa-${name}`,
+      short_names: [`fa-${name.toLowerCase()}`],
+      text: '',
+      emoticons: [],
+      keywords: ['fork awesome'],
+      imageUrl: '/img/forkawesome.png',
+      customCategory: 'ForkAwesome'
+    })), [])
+
+  useClickAway(pickerRef, () => {
+    onDismiss()
+  })
+
+  return (
+    <ShowIf condition={show}>
+      <div className={'position-relative'} ref={pickerRef}>
+        <NimblePicker
+          data={emojiData as unknown as Data}
+          native={true}
+          onSelect={onEmojiSelected}
+          theme={'auto'}
+          title=''
+          custom={customIcons}
+        />
+      </div>
+    </ShowIf>
+  )
+}
diff --git a/src/components/editor/editor-window/tool-bar/emoji-picker/icon-names.ts b/src/components/editor/editor-window/tool-bar/emoji-picker/icon-names.ts
new file mode 100644
index 000000000..e9c21ecc8
--- /dev/null
+++ b/src/components/editor/editor-window/tool-bar/emoji-picker/icon-names.ts
@@ -0,0 +1,760 @@
+export enum ForkAwesomeIcons {
+  '500px'='500px',
+  'activitypub'='activitypub',
+  'address-book-o'='address-book-o',
+  'address-book'='address-book',
+  'address-card-o'='address-card-o',
+  'address-card'='address-card',
+  'adjust'='adjust',
+  'adn'='adn',
+  'align-center'='align-center',
+  'align-justify'='align-justify',
+  'align-left'='align-left',
+  'align-right'='align-right',
+  'amazon'='amazon',
+  'ambulance'='ambulance',
+  'american-sign-language-interpreting'='american-sign-language-interpreting',
+  'anchor'='anchor',
+  'android'='android',
+  'angellist'='angellist',
+  'angle-double-down'='angle-double-down',
+  'angle-double-left'='angle-double-left',
+  'angle-double-right'='angle-double-right',
+  'angle-double-up'='angle-double-up',
+  'angle-down'='angle-down',
+  'angle-left'='angle-left',
+  'angle-right'='angle-right',
+  'angle-up'='angle-up',
+  'apple'='apple',
+  'archive-org'='archive-org',
+  'archive'='archive',
+  'archlinux'='archlinux',
+  'area-chart'='area-chart',
+  'arrow-circle-down'='arrow-circle-down',
+  'arrow-circle-left'='arrow-circle-left',
+  'arrow-circle-o-down'='arrow-circle-o-down',
+  'arrow-circle-o-left'='arrow-circle-o-left',
+  'arrow-circle-o-right'='arrow-circle-o-right',
+  'arrow-circle-o-up'='arrow-circle-o-up',
+  'arrow-circle-right'='arrow-circle-right',
+  'arrow-circle-up'='arrow-circle-up',
+  'arrow-down'='arrow-down',
+  'arrow-left'='arrow-left',
+  'arrow-right'='arrow-right',
+  'arrows-alt'='arrows-alt',
+  'arrows-h'='arrows-h',
+  'arrows'='arrows',
+  'arrows-v'='arrows-v',
+  'arrow-up'='arrow-up',
+  'artstation'='artstation',
+  'assistive-listening-systems'='assistive-listening-systems',
+  'asterisk'='asterisk',
+  'at'='at',
+  'att'='att',
+  'audio-description'='audio-description',
+  'backward'='backward',
+  'balance-scale'='balance-scale',
+  'bandcamp'='bandcamp',
+  'ban'='ban',
+  'bar-chart'='bar-chart',
+  'barcode'='barcode',
+  'bars'='bars',
+  'bath'='bath',
+  'battery-empty'='battery-empty',
+  'battery-full'='battery-full',
+  'battery-half'='battery-half',
+  'battery-quarter'='battery-quarter',
+  'battery-three-quarters'='battery-three-quarters',
+  'bed'='bed',
+  'beer'='beer',
+  'behance-square'='behance-square',
+  'behance'='behance',
+  'bell-o'='bell-o',
+  'bell-rigning-o'='bell-rigning-o',
+  'bell-ringing'='bell-ringing',
+  'bell-slash-o'='bell-slash-o',
+  'bell-slash'='bell-slash',
+  'bell'='bell',
+  'bicycle'='bicycle',
+  'binoculars'='binoculars',
+  'biometric'='biometric',
+  'birthday-cake'='birthday-cake',
+  'bitbucket-square'='bitbucket-square',
+  'bitbucket'='bitbucket',
+  'black-tie'='black-tie',
+  'blind'='blind',
+  'bluetooth-b'='bluetooth-b',
+  'bluetooth'='bluetooth',
+  'bold'='bold',
+  'bolt'='bolt',
+  'bomb'='bomb',
+  'bookmark-o'='bookmark-o',
+  'bookmark'='bookmark',
+  'book'='book',
+  'bootstrap'='bootstrap',
+  'braille'='braille',
+  'briefcase'='briefcase',
+  'btc'='btc',
+  'bug'='bug',
+  'building-o'='building-o',
+  'building'='building',
+  'bullhorn'='bullhorn',
+  'bullseye'='bullseye',
+  'bus'='bus',
+  'buysellads'='buysellads',
+  'calculator'='calculator',
+  'calendar-check-o'='calendar-check-o',
+  'calendar-minus-o'='calendar-minus-o',
+  'calendar-o'='calendar-o',
+  'calendar-plus-o'='calendar-plus-o',
+  'calendar'='calendar',
+  'calendar-times-o'='calendar-times-o',
+  'camera-retro'='camera-retro',
+  'camera'='camera',
+  'caret-down'='caret-down',
+  'caret-left'='caret-left',
+  'caret-right'='caret-right',
+  'caret-square-o-down'='caret-square-o-down',
+  'caret-square-o-left'='caret-square-o-left',
+  'caret-square-o-right'='caret-square-o-right',
+  'caret-square-o-up'='caret-square-o-up',
+  'caret-up'='caret-up',
+  'car'='car',
+  'cart-arrow-down'='cart-arrow-down',
+  'cart-plus'='cart-plus',
+  'cc-amex'='cc-amex',
+  'cc-diners-club'='cc-diners-club',
+  'cc-discover'='cc-discover',
+  'cc-jcb'='cc-jcb',
+  'cc-mastercard'='cc-mastercard',
+  'cc-paypal'='cc-paypal',
+  'cc-stripe'='cc-stripe',
+  'cc'='cc',
+  'cc-visa'='cc-visa',
+  'certificate'='certificate',
+  'chain-broken'='chain-broken',
+  'check-circle-o'='check-circle-o',
+  'check-circle'='check-circle',
+  'check-square-o'='check-square-o',
+  'check-square'='check-square',
+  'check'='check',
+  'chevron-circle-down'='chevron-circle-down',
+  'chevron-circle-left'='chevron-circle-left',
+  'chevron-circle-right'='chevron-circle-right',
+  'chevron-circle-up'='chevron-circle-up',
+  'chevron-down'='chevron-down',
+  'chevron-left'='chevron-left',
+  'chevron-right'='chevron-right',
+  'chevron-up'='chevron-up',
+  'child'='child',
+  'chrome'='chrome',
+  'circle-o-notch'='circle-o-notch',
+  'circle-o'='circle-o',
+  'circle'='circle',
+  'circle-thin'='circle-thin',
+  'classicpress-circle'='classicpress-circle',
+  'classicpress'='classicpress',
+  'clipboard'='clipboard',
+  'clock-o'='clock-o',
+  'clone'='clone',
+  'cloud-download'='cloud-download',
+  'cloud'='cloud',
+  'cloud-upload'='cloud-upload',
+  'code-fork'='code-fork',
+  'codepen'='codepen',
+  'code'='code',
+  'codiepie'='codiepie',
+  'coffee'='coffee',
+  'cogs'='cogs',
+  'cog'='cog',
+  'columns'='columns',
+  'commenting-o'='commenting-o',
+  'commenting'='commenting',
+  'comment-o'='comment-o',
+  'comments-o'='comments-o',
+  'comments'='comments',
+  'comment'='comment',
+  'compass'='compass',
+  'compress'='compress',
+  'connectdevelop'='connectdevelop',
+  'contao'='contao',
+  'copyright'='copyright',
+  'creative-commons'='creative-commons',
+  'credit-card-alt'='credit-card-alt',
+  'credit-card'='credit-card',
+  'crop'='crop',
+  'crosshairs'='crosshairs',
+  'css3'='css3',
+  'c'='c',
+  'cubes'='cubes',
+  'cube'='cube',
+  'cutlery'='cutlery',
+  'dashcube'='dashcube',
+  'database'='database',
+  'deaf'='deaf',
+  'debian'='debian',
+  'delicious'='delicious',
+  'desktop'='desktop',
+  'deviantart'='deviantart',
+  'dev-to'='dev-to',
+  'diamond'='diamond',
+  'diaspora'='diaspora',
+  'digg'='digg',
+  'digitalocean'='digitalocean',
+  'discord-alt'='discord-alt',
+  'discord'='discord',
+  'dogmazic'='dogmazic',
+  'dot-circle-o'='dot-circle-o',
+  'download'='download',
+  'dribbble'='dribbble',
+  'dropbox'='dropbox',
+  'drupal'='drupal',
+  'edge'='edge',
+  'eercast'='eercast',
+  'eject'='eject',
+  'ellipsis-h'='ellipsis-h',
+  'ellipsis-v'='ellipsis-v',
+  'emby'='emby',
+  'empire'='empire',
+  'envelope-open-o'='envelope-open-o',
+  'envelope-open'='envelope-open',
+  'envelope-o'='envelope-o',
+  'envelope-square'='envelope-square',
+  'envelope'='envelope',
+  'envira'='envira',
+  'eraser'='eraser',
+  'ethereum'='ethereum',
+  'etsy'='etsy',
+  'eur'='eur',
+  'exchange'='exchange',
+  'exclamation-circle'='exclamation-circle',
+  'exclamation'='exclamation',
+  'exclamation-triangle'='exclamation-triangle',
+  'expand'='expand',
+  'expeditedssl'='expeditedssl',
+  'external-link-square'='external-link-square',
+  'external-link'='external-link',
+  'eyedropper'='eyedropper',
+  'eye-slash'='eye-slash',
+  'eye'='eye',
+  'facebook-messenger'='facebook-messenger',
+  'facebook-official'='facebook-official',
+  'facebook-square'='facebook-square',
+  'facebook'='facebook',
+  'fast-backward'='fast-backward',
+  'fast-forward'='fast-forward',
+  'fax'='fax',
+  'f-droid'='f-droid',
+  'female'='female',
+  'ffmpeg'='ffmpeg',
+  'fighter-jet'='fighter-jet',
+  'file-archive-o'='file-archive-o',
+  'file-audio-o'='file-audio-o',
+  'file-code-o'='file-code-o',
+  'file-epub'='file-epub',
+  'file-excel-o'='file-excel-o',
+  'file-image-o'='file-image-o',
+  'file-o'='file-o',
+  'file-pdf-o'='file-pdf-o',
+  'file-powerpoint-o'='file-powerpoint-o',
+  'files-o'='files-o',
+  'file'='file',
+  'file-text-o'='file-text-o',
+  'file-text'='file-text',
+  'file-video-o'='file-video-o',
+  'file-word-o'='file-word-o',
+  'film'='film',
+  'filter'='filter',
+  'fire-extinguisher'='fire-extinguisher',
+  'firefox'='firefox',
+  'fire'='fire',
+  'first-order'='first-order',
+  'flag-checkered'='flag-checkered',
+  'flag-o'='flag-o',
+  'flag'='flag',
+  'flask'='flask',
+  'flickr'='flickr',
+  'floppy-o'='floppy-o',
+  'folder-open-o'='folder-open-o',
+  'folder-open'='folder-open',
+  'folder-o'='folder-o',
+  'folder'='folder',
+  'font-awesome'='font-awesome',
+  'fonticons'='fonticons',
+  'font'='font',
+  'fork-awesome'='fork-awesome',
+  'fort-awesome'='fort-awesome',
+  'forumbee'='forumbee',
+  'forward'='forward',
+  'foursquare'='foursquare',
+  'free-code-camp'='free-code-camp',
+  'freedombox'='freedombox',
+  'friendica'='friendica',
+  'frown-o'='frown-o',
+  'funkwhale'='funkwhale',
+  'futbol-o'='futbol-o',
+  'gamepad'='gamepad',
+  'gavel'='gavel',
+  'gbp'='gbp',
+  'genderless'='genderless',
+  'get-pocket'='get-pocket',
+  'gg-circle'='gg-circle',
+  'gg'='gg',
+  'gift'='gift',
+  'gimp'='gimp',
+  'gitea'='gitea',
+  'github-alt'='github-alt',
+  'github-square'='github-square',
+  'github'='github',
+  'gitlab'='gitlab',
+  'git-square'='git-square',
+  'git'='git',
+  'glass'='glass',
+  'glide-g'='glide-g',
+  'glide'='glide',
+  'globe-e'='globe-e',
+  'globe'='globe',
+  'globe-w'='globe-w',
+  'gnupg'='gnupg',
+  'gnu-social'='gnu-social',
+  'google-plus-official'='google-plus-official',
+  'google-plus-square'='google-plus-square',
+  'google-plus'='google-plus',
+  'google'='google',
+  'google-wallet'='google-wallet',
+  'graduation-cap'='graduation-cap',
+  'gratipay'='gratipay',
+  'grav'='grav',
+  'hackaday'='hackaday',
+  'hacker-news'='hacker-news',
+  'hackster'='hackster',
+  'hal'='hal',
+  'hand-lizard-o'='hand-lizard-o',
+  'hand-o-down'='hand-o-down',
+  'hand-o-left'='hand-o-left',
+  'hand-o-right'='hand-o-right',
+  'hand-o-up'='hand-o-up',
+  'hand-paper-o'='hand-paper-o',
+  'hand-peace-o'='hand-peace-o',
+  'hand-pointer-o'='hand-pointer-o',
+  'hand-rock-o'='hand-rock-o',
+  'hand-scissors-o'='hand-scissors-o',
+  'handshake-o'='handshake-o',
+  'hand-spock-o'='hand-spock-o',
+  'hashnode'='hashnode',
+  'hashtag'='hashtag',
+  'hdd-o'='hdd-o',
+  'header'='header',
+  'headphones'='headphones',
+  'heartbeat'='heartbeat',
+  'heart-o'='heart-o',
+  'heart'='heart',
+  'history'='history',
+  'home'='home',
+  'hospital-o'='hospital-o',
+  'hourglass-end'='hourglass-end',
+  'hourglass-half'='hourglass-half',
+  'hourglass-o'='hourglass-o',
+  'hourglass-start'='hourglass-start',
+  'hourglass'='hourglass',
+  'houzz'='houzz',
+  'h-square'='h-square',
+  'html5'='html5',
+  'hubzilla'='hubzilla',
+  'i-cursor'='i-cursor',
+  'id-badge'='id-badge',
+  'id-card-o'='id-card-o',
+  'id-card'='id-card',
+  'ils'='ils',
+  'imdb'='imdb',
+  'inbox'='inbox',
+  'indent'='indent',
+  'industry'='industry',
+  'info-circle'='info-circle',
+  'info'='info',
+  'inkscape'='inkscape',
+  'inr'='inr',
+  'instagram'='instagram',
+  'internet-explorer'='internet-explorer',
+  'ioxhost'='ioxhost',
+  'italic'='italic',
+  'jirafeau'='jirafeau',
+  'joomla'='joomla',
+  'joplin'='joplin',
+  'jpy'='jpy',
+  'jsfiddle'='jsfiddle',
+  'julia'='julia',
+  'jupyter'='jupyter',
+  'keybase'='keybase',
+  'keyboard-o'='keyboard-o',
+  'key-modern'='key-modern',
+  'key'='key',
+  'krw'='krw',
+  'language'='language',
+  'laptop'='laptop',
+  'laravel'='laravel',
+  'lastfm-square'='lastfm-square',
+  'lastfm'='lastfm',
+  'leaf'='leaf',
+  'leanpub'='leanpub',
+  'lemon-o'='lemon-o',
+  'level-down'='level-down',
+  'level-up'='level-up',
+  'liberapay-square'='liberapay-square',
+  'liberapay'='liberapay',
+  'life-ring'='life-ring',
+  'lightbulb-o'='lightbulb-o',
+  'line-chart'='line-chart',
+  'linkedin-square'='linkedin-square',
+  'linkedin'='linkedin',
+  'link'='link',
+  'linode'='linode',
+  'linux'='linux',
+  'list-alt'='list-alt',
+  'list-ol'='list-ol',
+  'list'='list',
+  'list-ul'='list-ul',
+  'location-arrow'='location-arrow',
+  'lock'='lock',
+  'long-arrow-down'='long-arrow-down',
+  'long-arrow-left'='long-arrow-left',
+  'long-arrow-right'='long-arrow-right',
+  'long-arrow-up'='long-arrow-up',
+  'low-vision'='low-vision',
+  'magic'='magic',
+  'magnet'='magnet',
+  'male'='male',
+  'map-marker'='map-marker',
+  'map-o'='map-o',
+  'map-pin'='map-pin',
+  'map-signs'='map-signs',
+  'map'='map',
+  'mars-double'='mars-double',
+  'mars-stroke-h'='mars-stroke-h',
+  'mars-stroke'='mars-stroke',
+  'mars-stroke-v'='mars-stroke-v',
+  'mars'='mars',
+  'mastodon-alt'='mastodon-alt',
+  'mastodon-square'='mastodon-square',
+  'mastodon'='mastodon',
+  'matrix-org'='matrix-org',
+  'maxcdn'='maxcdn',
+  'meanpath'='meanpath',
+  'medium-square'='medium-square',
+  'medium'='medium',
+  'medkit'='medkit',
+  'meetup'='meetup',
+  'meh-o'='meh-o',
+  'mercury'='mercury',
+  'microchip'='microchip',
+  'microphone-slash'='microphone-slash',
+  'microphone'='microphone',
+  'minus-circle'='minus-circle',
+  'minus-square-o'='minus-square-o',
+  'minus-square'='minus-square',
+  'minus'='minus',
+  'mixcloud'='mixcloud',
+  'mobile'='mobile',
+  'modx'='modx',
+  'money'='money',
+  'moon-o'='moon-o',
+  'moon'='moon',
+  'motorcycle'='motorcycle',
+  'mouse-pointer'='mouse-pointer',
+  'music'='music',
+  'neuter'='neuter',
+  'newspaper-o'='newspaper-o',
+  'nextcloud-square'='nextcloud-square',
+  'nextcloud'='nextcloud',
+  'nodejs'='nodejs',
+  'object-group'='object-group',
+  'object-ungroup'='object-ungroup',
+  'odnoklassniki-square'='odnoklassniki-square',
+  'odnoklassniki'='odnoklassniki',
+  'opencart'='opencart',
+  'open-collective'='open-collective',
+  'openid'='openid',
+  'opera'='opera',
+  'optin-monster'='optin-monster',
+  'orcid'='orcid',
+  'outdent'='outdent',
+  'pagelines'='pagelines',
+  'paint-brush'='paint-brush',
+  'paperclip'='paperclip',
+  'paper-plane-o'='paper-plane-o',
+  'paper-plane'='paper-plane',
+  'paragraph'='paragraph',
+  'patreon'='patreon',
+  'pause-circle-o'='pause-circle-o',
+  'pause-circle'='pause-circle',
+  'pause'='pause',
+  'paw'='paw',
+  'paypal'='paypal',
+  'peertube'='peertube',
+  'pencil-square-o'='pencil-square-o',
+  'pencil-square'='pencil-square',
+  'pencil'='pencil',
+  'percent'='percent',
+  'phone-square'='phone-square',
+  'phone'='phone',
+  'php'='php',
+  'picture-o'='picture-o',
+  'pie-chart'='pie-chart',
+  'pinterest-p'='pinterest-p',
+  'pinterest-square'='pinterest-square',
+  'pinterest'='pinterest',
+  'pixelfed'='pixelfed',
+  'plane'='plane',
+  'play-circle-o'='play-circle-o',
+  'play-circle'='play-circle',
+  'play'='play',
+  'pleroma'='pleroma',
+  'plug'='plug',
+  'plus-circle'='plus-circle',
+  'plus-square-o'='plus-square-o',
+  'plus-square'='plus-square',
+  'plus'='plus',
+  'podcast'='podcast',
+  'power-off'='power-off',
+  'print'='print',
+  'product-hunt'='product-hunt',
+  'puzzle-piece'='puzzle-piece',
+  'python'='python',
+  'qq'='qq',
+  'qrcode'='qrcode',
+  'question-circle-o'='question-circle-o',
+  'question-circle'='question-circle',
+  'question'='question',
+  'quora'='quora',
+  'quote-left'='quote-left',
+  'quote-right'='quote-right',
+  'random'='random',
+  'ravelry'='ravelry',
+  'react'='react',
+  'rebel'='rebel',
+  'recycle'='recycle',
+  'reddit-alien'='reddit-alien',
+  'reddit-square'='reddit-square',
+  'reddit'='reddit',
+  'refresh'='refresh',
+  'registered'='registered',
+  'renren'='renren',
+  'repeat'='repeat',
+  'reply-all'='reply-all',
+  'reply'='reply',
+  'researchgate'='researchgate',
+  'retweet'='retweet',
+  'road'='road',
+  'rocket'='rocket',
+  'rss-square'='rss-square',
+  'rss'='rss',
+  'rub'='rub',
+  'safari'='safari',
+  'scissors'='scissors',
+  'scribd'='scribd',
+  'scuttlebutt'='scuttlebutt',
+  'search-minus'='search-minus',
+  'search-plus'='search-plus',
+  'search'='search',
+  'sellsy'='sellsy',
+  'server'='server',
+  'shaarli-o'='shaarli-o',
+  'shaarli'='shaarli',
+  'share-alt-square'='share-alt-square',
+  'share-alt'='share-alt',
+  'share-square-o'='share-square-o',
+  'share-square'='share-square',
+  'share'='share',
+  'shield'='shield',
+  'ship'='ship',
+  'shirtsinbulk'='shirtsinbulk',
+  'shopping-bag'='shopping-bag',
+  'shopping-basket'='shopping-basket',
+  'shopping-cart'='shopping-cart',
+  'shower'='shower',
+  'signalapp'='signalapp',
+  'signal'='signal',
+  'sign-in'='sign-in',
+  'sign-language'='sign-language',
+  'sign-out'='sign-out',
+  'simplybuilt'='simplybuilt',
+  'sitemap'='sitemap',
+  'skyatlas'='skyatlas',
+  'skype'='skype',
+  'slack'='slack',
+  'sliders'='sliders',
+  'slideshare'='slideshare',
+  'smile-o'='smile-o',
+  'snapchat-ghost'='snapchat-ghost',
+  'snapchat-square'='snapchat-square',
+  'snapchat'='snapchat',
+  'snowdrift'='snowdrift',
+  'snowflake-o'='snowflake-o',
+  'social-home'='social-home',
+  'sort-alpha-asc'='sort-alpha-asc',
+  'sort-alpha-desc'='sort-alpha-desc',
+  'sort-amount-asc'='sort-amount-asc',
+  'sort-amount-desc'='sort-amount-desc',
+  'sort-asc'='sort-asc',
+  'sort-desc'='sort-desc',
+  'sort-numeric-asc'='sort-numeric-asc',
+  'sort-numeric-desc'='sort-numeric-desc',
+  'sort'='sort',
+  'soundcloud'='soundcloud',
+  'space-shuttle'='space-shuttle',
+  'spell-check'='spell-check',
+  'spinner'='spinner',
+  'spoon'='spoon',
+  'spotify'='spotify',
+  'square-o'='square-o',
+  'square'='square',
+  'stack-exchange'='stack-exchange',
+  'stack-overflow'='stack-overflow',
+  'star-half-o'='star-half-o',
+  'star-half'='star-half',
+  'star-o'='star-o',
+  'star'='star',
+  'steam-square'='steam-square',
+  'steam'='steam',
+  'step-backward'='step-backward',
+  'step-forward'='step-forward',
+  'stethoscope'='stethoscope',
+  'sticky-note-o'='sticky-note-o',
+  'sticky-note'='sticky-note',
+  'stop-circle-o'='stop-circle-o',
+  'stop-circle'='stop-circle',
+  'stop'='stop',
+  'street-view'='street-view',
+  'strikethrough'='strikethrough',
+  'stumbleupon-circle'='stumbleupon-circle',
+  'stumbleupon'='stumbleupon',
+  'subscript'='subscript',
+  'subway'='subway',
+  'suitcase'='suitcase',
+  'sun-o'='sun-o',
+  'sun'='sun',
+  'superpowers'='superpowers',
+  'superscript'='superscript',
+  'syncthing'='syncthing',
+  'table'='table',
+  'tablet'='tablet',
+  'tachometer'='tachometer',
+  'tags'='tags',
+  'tag'='tag',
+  'tasks'='tasks',
+  'taxi'='taxi',
+  'telegram'='telegram',
+  'television'='television',
+  'tencent-weibo'='tencent-weibo',
+  'terminal'='terminal',
+  'text-height'='text-height',
+  'text-width'='text-width',
+  'themeisle'='themeisle',
+  'thermometer-empty'='thermometer-empty',
+  'thermometer-full'='thermometer-full',
+  'thermometer-half'='thermometer-half',
+  'thermometer-quarter'='thermometer-quarter',
+  'thermometer-three-quarters'='thermometer-three-quarters',
+  'th-large'='th-large',
+  'th-list'='th-list',
+  'th'='th',
+  'thumbs-down'='thumbs-down',
+  'thumbs-o-down'='thumbs-o-down',
+  'thumbs-o-up'='thumbs-o-up',
+  'thumbs-up'='thumbs-up',
+  'thumb-tack'='thumb-tack',
+  'ticket'='ticket',
+  'times-circle-o'='times-circle-o',
+  'times-circle'='times-circle',
+  'times'='times',
+  'tint'='tint',
+  'tipeee'='tipeee',
+  'toggle-off'='toggle-off',
+  'toggle-on'='toggle-on',
+  'tor-onion'='tor-onion',
+  'trademark'='trademark',
+  'train'='train',
+  'transgender-alt'='transgender-alt',
+  'transgender'='transgender',
+  'trash-o'='trash-o',
+  'trash'='trash',
+  'tree'='tree',
+  'trello'='trello',
+  'tripadvisor'='tripadvisor',
+  'trophy'='trophy',
+  'truck'='truck',
+  'try'='try',
+  'tty'='tty',
+  'tumblr-square'='tumblr-square',
+  'tumblr'='tumblr',
+  'twitch'='twitch',
+  'twitter-square'='twitter-square',
+  'twitter'='twitter',
+  'umbrella'='umbrella',
+  'underline'='underline',
+  'undo'='undo',
+  'universal-access'='universal-access',
+  'university'='university',
+  'unlock-alt'='unlock-alt',
+  'unlock'='unlock',
+  'unslpash'='unslpash',
+  'upload'='upload',
+  'usb'='usb',
+  'usd'='usd',
+  'user-circle-o'='user-circle-o',
+  'user-circle'='user-circle',
+  'user-md'='user-md',
+  'user-o'='user-o',
+  'user-plus'='user-plus',
+  'user-secret'='user-secret',
+  'users'='users',
+  'user'='user',
+  'user-times'='user-times',
+  'venus-double'='venus-double',
+  'venus-mars'='venus-mars',
+  'venus'='venus',
+  'viacoin'='viacoin',
+  'viadeo-square'='viadeo-square',
+  'viadeo'='viadeo',
+  'video-camera'='video-camera',
+  'vimeo-square'='vimeo-square',
+  'vimeo'='vimeo',
+  'vine'='vine',
+  'vk'='vk',
+  'volume-control-phone'='volume-control-phone',
+  'volume-down'='volume-down',
+  'volume-mute'='volume-mute',
+  'volume-off'='volume-off',
+  'volume-up'='volume-up',
+  'weibo'='weibo',
+  'weixin'='weixin',
+  'whatsapp'='whatsapp',
+  'wheelchair-alt'='wheelchair-alt',
+  'wheelchair'='wheelchair',
+  'wifi'='wifi',
+  'wikidata'='wikidata',
+  'wikipedia-w'='wikipedia-w',
+  'window-close-o'='window-close-o',
+  'window-close'='window-close',
+  'window-maximize'='window-maximize',
+  'window-minimize'='window-minimize',
+  'window-restore'='window-restore',
+  'windows'='windows',
+  'wire'='wire',
+  'wordpress'='wordpress',
+  'wpbeginner'='wpbeginner',
+  'wpexplorer'='wpexplorer',
+  'wpforms'='wpforms',
+  'wrench'='wrench',
+  'xing-square'='xing-square',
+  'xing'='xing',
+  'xmpp'='xmpp',
+  'yahoo'='yahoo',
+  'y-combinator'='y-combinator',
+  'yelp'='yelp',
+  'yoast'='yoast',
+  'youtube-play'='youtube-play',
+  'youtube-square'='youtube-square',
+  'youtube'='youtube',
+  'zotero'='zotero'
+}
diff --git a/src/components/editor/editor-window/tool-bar/tool-bar.tsx b/src/components/editor/editor-window/tool-bar/tool-bar.tsx
index afd693adc..dd59613d4 100644
--- a/src/components/editor/editor-window/tool-bar/tool-bar.tsx
+++ b/src/components/editor/editor-window/tool-bar/tool-bar.tsx
@@ -1,12 +1,14 @@
 import { Editor } from 'codemirror'
-import React from 'react'
+import React, { Fragment, useState } from 'react'
 import { Button, ButtonToolbar } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
+import { EmojiPicker } from './emoji-picker/emoji-picker'
 import './tool-bar.scss'
 import {
   addCodeFences,
   addComment,
+  addEmoji,
   addHeaderLevel,
   addImage,
   addLine,
@@ -30,6 +32,8 @@ export interface ToolBarProps {
 
 export const ToolBar: React.FC<ToolBarProps> = ({ editor }) => {
   const { t } = useTranslation()
+  const [showEmojiPicker, setShowEmojiPicker] = useState(false)
+
   const notImplemented = () => {
     alert('This feature is not yet implemented')
   }
@@ -39,61 +43,70 @@ export const ToolBar: React.FC<ToolBarProps> = ({ editor }) => {
   }
 
   return (
-    <ButtonToolbar className='flex-nowrap bg-light'>
-      <Button variant='light' onClick={() => makeSelectionBold(editor)} title={t('editor.editorToolbar.bold')}>
-        <ForkAwesomeIcon icon="bold"/>
-      </Button>
-      <Button variant='light' onClick={() => makeSelectionItalic(editor)} title={t('editor.editorToolbar.italic')}>
-        <ForkAwesomeIcon icon="italic"/>
-      </Button>
-      <Button variant='light' onClick={() => underlineSelection(editor)} title={t('editor.editorToolbar.underline')}>
-        <ForkAwesomeIcon icon="underline"/>
-      </Button>
-      <Button variant='light' onClick={() => strikeThroughSelection(editor)} title={t('editor.editorToolbar.strikethrough')}>
-        <ForkAwesomeIcon icon="strikethrough"/>
-      </Button>
-      <Button variant='light' onClick={() => subscriptSelection(editor)} title={t('editor.editorToolbar.subscript')}>
-        <ForkAwesomeIcon icon="subscript"/>
-      </Button>
-      <Button variant='light' onClick={() => superscriptSelection(editor)} title={t('editor.editorToolbar.superscript')}>
-        <ForkAwesomeIcon icon="superscript"/>
-      </Button>
-      <Button variant='light' onClick={() => addHeaderLevel(editor)} title={t('editor.editorToolbar.header')}>
-        <ForkAwesomeIcon icon="header"/>
-      </Button>
-      <Button variant='light' onClick={() => addCodeFences(editor)} title={t('editor.editorToolbar.code')}>
-        <ForkAwesomeIcon icon="code"/>
-      </Button>
-      <Button variant='light' onClick={() => addQuotes(editor)} title={t('editor.editorToolbar.blockquote')}>
-        <ForkAwesomeIcon icon="quote-right"/>
-      </Button>
-      <Button variant='light' onClick={() => addList(editor)} title={t('editor.editorToolbar.unorderedList')}>
-        <ForkAwesomeIcon icon="list"/>
-      </Button>
-      <Button variant='light' onClick={() => addOrderedList(editor)} title={t('editor.editorToolbar.orderedList')}>
-        <ForkAwesomeIcon icon="list-ol"/>
-      </Button>
-      <Button variant='light' onClick={() => addTaskList(editor)} title={t('editor.editorToolbar.checkList')}>
-        <ForkAwesomeIcon icon="check-square"/>
-      </Button>
-      <Button variant='light' onClick={() => addLink(editor)} title={t('editor.editorToolbar.link')}>
-        <ForkAwesomeIcon icon="link"/>
-      </Button>
-      <Button variant='light' onClick={() => addImage(editor)} title={t('editor.editorToolbar.image')}>
-        <ForkAwesomeIcon icon="picture-o"/>
-      </Button>
-      <Button variant='light' onClick={notImplemented} title={t('editor.editorToolbar.uploadImage')}>
-        <ForkAwesomeIcon icon="upload"/>
-      </Button>
-      <Button variant='light' onClick={() => addTable(editor)} title={t('editor.editorToolbar.table')}>
-        <ForkAwesomeIcon icon="table"/>
-      </Button>
-      <Button variant='light' onClick={() => addLine(editor)} title={t('editor.editorToolbar.line')}>
-        <ForkAwesomeIcon icon="minus"/>
-      </Button>
-      <Button variant='light' onClick={() => addComment(editor)} title={t('editor.editorToolbar.comment')}>
-        <ForkAwesomeIcon icon="comment"/>
-      </Button>
-    </ButtonToolbar>
+    <Fragment>
+      <ButtonToolbar className='flex-nowrap bg-light'>
+        <Button variant='light' onClick={() => makeSelectionBold(editor)} title={t('editor.editorToolbar.bold')}>
+          <ForkAwesomeIcon icon="bold"/>
+        </Button>
+        <Button variant='light' onClick={() => makeSelectionItalic(editor)} title={t('editor.editorToolbar.italic')}>
+          <ForkAwesomeIcon icon="italic"/>
+        </Button>
+        <Button variant='light' onClick={() => underlineSelection(editor)} title={t('editor.editorToolbar.underline')}>
+          <ForkAwesomeIcon icon="underline"/>
+        </Button>
+        <Button variant='light' onClick={() => strikeThroughSelection(editor)} title={t('editor.editorToolbar.strikethrough')}>
+          <ForkAwesomeIcon icon="strikethrough"/>
+        </Button>
+        <Button variant='light' onClick={() => subscriptSelection(editor)} title={t('editor.editorToolbar.subscript')}>
+          <ForkAwesomeIcon icon="subscript"/>
+        </Button>
+        <Button variant='light' onClick={() => superscriptSelection(editor)} title={t('editor.editorToolbar.superscript')}>
+          <ForkAwesomeIcon icon="superscript"/>
+        </Button>
+        <Button variant='light' onClick={() => addHeaderLevel(editor)} title={t('editor.editorToolbar.header')}>
+          <ForkAwesomeIcon icon="header"/>
+        </Button>
+        <Button variant='light' onClick={() => addCodeFences(editor)} title={t('editor.editorToolbar.code')}>
+          <ForkAwesomeIcon icon="code"/>
+        </Button>
+        <Button variant='light' onClick={() => addQuotes(editor)} title={t('editor.editorToolbar.blockquote')}>
+          <ForkAwesomeIcon icon="quote-right"/>
+        </Button>
+        <Button variant='light' onClick={() => addList(editor)} title={t('editor.editorToolbar.unorderedList')}>
+          <ForkAwesomeIcon icon="list"/>
+        </Button>
+        <Button variant='light' onClick={() => addOrderedList(editor)} title={t('editor.editorToolbar.orderedList')}>
+          <ForkAwesomeIcon icon="list-ol"/>
+        </Button>
+        <Button variant='light' onClick={() => addTaskList(editor)} title={t('editor.editorToolbar.checkList')}>
+          <ForkAwesomeIcon icon="check-square"/>
+        </Button>
+        <Button variant='light' onClick={() => addLink(editor)} title={t('editor.editorToolbar.link')}>
+          <ForkAwesomeIcon icon="link"/>
+        </Button>
+        <Button variant='light' onClick={() => addImage(editor)} title={t('editor.editorToolbar.image')}>
+          <ForkAwesomeIcon icon="picture-o"/>
+        </Button>
+        <Button variant='light' onClick={notImplemented} title={t('editor.editorToolbar.uploadImage')}>
+          <ForkAwesomeIcon icon="upload"/>
+        </Button>
+        <Button variant='light' onClick={() => addTable(editor)} title={t('editor.editorToolbar.table')}>
+          <ForkAwesomeIcon icon="table"/>
+        </Button>
+        <Button variant='light' onClick={() => addLine(editor)} title={t('editor.editorToolbar.line')}>
+          <ForkAwesomeIcon icon="minus"/>
+        </Button>
+        <Button variant='light' onClick={() => addComment(editor)} title={t('editor.editorToolbar.comment')}>
+          <ForkAwesomeIcon icon="comment"/>
+        </Button>
+        <EmojiPicker show={showEmojiPicker} onEmojiSelected={(emoji) => {
+          setShowEmojiPicker(false)
+          addEmoji(emoji, editor)
+        }} onDismiss={() => setShowEmojiPicker(false)}/>
+        <Button variant='light' onClick={() => setShowEmojiPicker(old => !old)} title={''}>
+          <ForkAwesomeIcon icon="smile-o"/>
+        </Button>
+      </ButtonToolbar>
+    </Fragment>
   )
 }
diff --git a/src/components/editor/editor-window/tool-bar/utils.test.ts b/src/components/editor/editor-window/tool-bar/utils.test.ts
index 2b93087b5..e09c4483f 100644
--- a/src/components/editor/editor-window/tool-bar/utils.test.ts
+++ b/src/components/editor/editor-window/tool-bar/utils.test.ts
@@ -1,8 +1,10 @@
 import { Editor, Position, Range } from 'codemirror'
+import { EmojiData } from 'emoji-mart'
 import { Mock } from 'ts-mockery'
 import {
   addCodeFences,
   addComment,
+  addEmoji,
   addHeaderLevel,
   addImage,
   addLine,
@@ -1639,3 +1641,192 @@ describe('test addTable', () => {
     addTable(editor)
   })
 })
+
+describe('test addEmoji with native emoji', () => {
+  const { cursor, firstLine, multiline, multilineOffset } = buildRanges()
+  const textFirstLine = testContent.split('\n')[0]
+  const emoji = Mock.of<EmojiData>({
+    native: '👍'
+  })
+  it('just cursor', done => {
+    Mock.extend(editor).with({
+      listSelections: () => (
+        Mock.of<Range[]>([{
+          anchor: cursor.from,
+          head: cursor.to,
+          from: () => cursor.from,
+          to: () => cursor.to,
+          empty: () => true
+        }])
+      ),
+      getLine: (): string => (textFirstLine),
+      replaceRange: (replacement: string | string[]) => {
+        expect(replacement).toEqual('👍')
+        done()
+      }
+    })
+    addEmoji(emoji, editor)
+  })
+
+  it('1st line', done => {
+    Mock.extend(editor).with({
+      listSelections: () => (
+        Mock.of<Range[]>([{
+          anchor: firstLine.from,
+          head: firstLine.to,
+          from: () => firstLine.from,
+          to: () => firstLine.to,
+          empty: () => false
+        }])
+      ),
+      getLine: (): string => (textFirstLine),
+      replaceRange: (replacement: string | string[], from: CodeMirror.Position, to?: CodeMirror.Position) => {
+        expect(from).toEqual(firstLine.from)
+        expect(to).toEqual(firstLine.to)
+        expect(replacement).toEqual('👍')
+        done()
+      }
+    })
+    addEmoji(emoji, editor)
+  })
+
+  it('multiple lines', done => {
+    Mock.extend(editor).with({
+      listSelections: () => (
+        Mock.of<Range[]>([{
+          anchor: multiline.from,
+          head: multiline.to,
+          from: () => multiline.from,
+          to: () => multiline.to,
+          empty: () => false
+        }])
+      ),
+      getLine: (): string => '2nd line',
+      replaceRange: (replacement: string | string[], from: CodeMirror.Position, to?: CodeMirror.Position) => {
+        expect(from).toEqual(multiline.from)
+        expect(to).toEqual(multiline.to)
+        expect(replacement).toEqual('👍')
+        done()
+      }
+    })
+    addEmoji(emoji, editor)
+  })
+
+  it('multiple lines with offset', done => {
+    Mock.extend(editor).with({
+      listSelections: () => (
+        Mock.of<Range[]>([{
+          anchor: multilineOffset.from,
+          head: multilineOffset.to,
+          from: () => multilineOffset.from,
+          to: () => multilineOffset.to,
+          empty: () => false
+        }])
+      ),
+      getLine: (): string => '2nd line',
+      replaceRange: (replacement: string | string[], from: CodeMirror.Position, to?: CodeMirror.Position) => {
+        expect(from).toEqual(multilineOffset.from)
+        expect(to).toEqual(multilineOffset.to)
+        expect(replacement).toEqual('👍')
+        done()
+      }
+    })
+    addEmoji(emoji, editor)
+  })
+})
+
+describe('test addEmoji with native emoji', () => {
+  const { cursor, firstLine, multiline, multilineOffset } = buildRanges()
+  const textFirstLine = testContent.split('\n')[0]
+  // noinspection CheckTagEmptyBody
+  const forkAwesomeIcon = '<i class="fa star"></i>'
+  const emoji = Mock.of<EmojiData>({
+    name: 'star',
+    imageUrl: '/img/forkawesome.png'
+  })
+  it('just cursor', done => {
+    Mock.extend(editor).with({
+      listSelections: () => (
+        Mock.of<Range[]>([{
+          anchor: cursor.from,
+          head: cursor.to,
+          from: () => cursor.from,
+          to: () => cursor.to,
+          empty: () => true
+        }])
+      ),
+      getLine: (): string => (textFirstLine),
+      replaceRange: (replacement: string | string[]) => {
+        expect(replacement).toEqual(forkAwesomeIcon)
+        done()
+      }
+    })
+    addEmoji(emoji, editor)
+  })
+
+  it('1st line', done => {
+    Mock.extend(editor).with({
+      listSelections: () => (
+        Mock.of<Range[]>([{
+          anchor: firstLine.from,
+          head: firstLine.to,
+          from: () => firstLine.from,
+          to: () => firstLine.to,
+          empty: () => false
+        }])
+      ),
+      getLine: (): string => (textFirstLine),
+      replaceRange: (replacement: string | string[], from: CodeMirror.Position, to?: CodeMirror.Position) => {
+        expect(from).toEqual(firstLine.from)
+        expect(to).toEqual(firstLine.to)
+        expect(replacement).toEqual(forkAwesomeIcon)
+        done()
+      }
+    })
+    addEmoji(emoji, editor)
+  })
+
+  it('multiple lines', done => {
+    Mock.extend(editor).with({
+      listSelections: () => (
+        Mock.of<Range[]>([{
+          anchor: multiline.from,
+          head: multiline.to,
+          from: () => multiline.from,
+          to: () => multiline.to,
+          empty: () => false
+        }])
+      ),
+      getLine: (): string => '2nd line',
+      replaceRange: (replacement: string | string[], from: CodeMirror.Position, to?: CodeMirror.Position) => {
+        expect(from).toEqual(multiline.from)
+        expect(to).toEqual(multiline.to)
+        expect(replacement).toEqual(forkAwesomeIcon)
+        done()
+      }
+    })
+    addEmoji(emoji, editor)
+  })
+
+  it('multiple lines with offset', done => {
+    Mock.extend(editor).with({
+      listSelections: () => (
+        Mock.of<Range[]>([{
+          anchor: multilineOffset.from,
+          head: multilineOffset.to,
+          from: () => multilineOffset.from,
+          to: () => multilineOffset.to,
+          empty: () => false
+        }])
+      ),
+      getLine: (): string => '2nd line',
+      replaceRange: (replacement: string | string[], from: CodeMirror.Position, to?: CodeMirror.Position) => {
+        expect(from).toEqual(multilineOffset.from)
+        expect(to).toEqual(multilineOffset.to)
+        expect(replacement).toEqual(forkAwesomeIcon)
+        done()
+      }
+    })
+    addEmoji(emoji, editor)
+  })
+})
diff --git a/src/components/editor/editor-window/tool-bar/utils.ts b/src/components/editor/editor-window/tool-bar/utils.ts
index 43e753fab..70a2bdf1b 100644
--- a/src/components/editor/editor-window/tool-bar/utils.ts
+++ b/src/components/editor/editor-window/tool-bar/utils.ts
@@ -1,4 +1,5 @@
 import { Editor } from 'codemirror'
+import { BaseEmoji, CustomEmoji, EmojiData } from 'emoji-mart'
 
 export const makeSelectionBold = (editor: Editor): void => wrapTextWith(editor, '**')
 export const makeSelectionItalic = (editor: Editor): void => wrapTextWith(editor, '*')
@@ -22,6 +23,17 @@ export const addLine = (editor: Editor): void => changeLines(editor, line => `${
 export const addComment = (editor: Editor): void => changeLines(editor, line => `${line}\n> []`)
 export const addTable = (editor: Editor): void => changeLines(editor, line => `${line}\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Text     | Text     | Text     |`)
 
+export const addEmoji = (emoji: EmojiData, editor: Editor): void => {
+  let replacement = ''
+  if ((emoji as BaseEmoji).native) {
+    replacement = (emoji as BaseEmoji).native
+  } else if ((emoji as CustomEmoji).imageUrl) {
+    // noinspection CheckTagEmptyBody
+    replacement = `<i class="fa ${(emoji as CustomEmoji).name}"></i>`
+  }
+  insertAtCursor(editor, replacement)
+}
+
 export const wrapTextWith = (editor: Editor, symbol: string, endSymbol?: string): void => {
   if (!editor.getSelection()) {
     return
@@ -98,3 +110,13 @@ export const addLink = (editor: Editor, prefix?: string): void => {
     }
   }
 }
+
+export const insertAtCursor = (editor: Editor, text: string): void => {
+  const cursor = editor.getCursor()
+  const ranges = editor.listSelections()
+  for (const range of ranges) {
+    const from = range.empty() ? { line: cursor.line, ch: cursor.ch } : range.from()
+    const to = range.empty() ? { line: cursor.line, ch: cursor.ch } : range.to()
+    editor.replaceRange(`${text}`, from, to, '+input')
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index b6ce33ad6..af53aca65 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1559,9 +1559,9 @@
     "@types/testing-library__cypress" "^5.0.3"
 
 "@testing-library/dom@^7.0.2", "@testing-library/dom@^7.11.0", "@testing-library/dom@^7.17.1":
-  version "7.21.4"
-  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.21.4.tgz#24b045f3161b7c91fdb35da7c001908cdc99b55b"
-  integrity sha512-IXjKRTAH31nQ+mx6q3IPw85RTLul8VlWBm1rxURoxDt7JI0HPlAAfbtrKTdeq83XYCYO7HSHogyV+OsD+6FX0Q==
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.21.5.tgz#d87312efc5039313f9ea246ed722d808f2ffcbb3"
+  integrity sha512-zZqC5T/9Upjs0/3hyrYNpGxw75dr/bLLD27pUdb3WWJ50JHwutvnQ1FJNHbVth9f2hLzEnh7hBdZ9pD++8pJ8g==
   dependencies:
     "@babel/runtime" "^7.10.3"
     "@types/aria-query" "^4.2.0"
@@ -1672,6 +1672,13 @@
   dependencies:
     "@types/domhandler" "*"
 
+"@types/emoji-mart@3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/emoji-mart/-/emoji-mart-3.0.2.tgz#5814064ce7c622069adf1583e17b3851a00802cb"
+  integrity sha512-Cmq8xpPK5Va+fjQE7ZaE5oykXzACBQ64CpNnYOIU7gWcR6nYTxWjMR3yPhnAMzw4yQn9R9761FpTvAyi/SH9MQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/eslint-visitor-keys@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
@@ -1758,6 +1765,11 @@
     jest-diff "^25.2.1"
     pretty-format "^25.2.1"
 
+"@types/js-cookie@2.2.6":
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-2.2.6.tgz#f1a1cb35aff47bc5cfb05cb0c441ca91e914c26f"
+  integrity sha512-+oY0FDTO2GYKEV0YPvSshGq9t7YozVkgvXLty7zogQNuCxBhT9/3INX9Q7H1aRZ4SUDRXAKlJuA4EA5nTt7SNw==
+
 "@types/js-yaml@3.12.5":
   version "3.12.5"
   resolved "https://registry.yarnpkg.com/@types/js-yaml/-/js-yaml-3.12.5.tgz#136d5e6a57a931e1cce6f9d8126aa98a9c92a6bb"
@@ -2259,6 +2271,11 @@
     "@webassemblyjs/wast-parser" "1.8.5"
     "@xtuc/long" "4.2.2"
 
+"@xobotyi/scrollbar-width@1.9.5":
+  version "1.9.5"
+  resolved "https://registry.yarnpkg.com/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz#80224a6919272f405b87913ca13b92929bdf3c4d"
+  integrity sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==
+
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
@@ -2994,6 +3011,11 @@ bootstrap@4.5.0:
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.5.0.tgz#97d9dbcb5a8972f8722c9962483543b907d9b9ec"
   integrity sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA==
 
+bowser@^1.7.3:
+  version "1.9.4"
+  resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.9.4.tgz#890c58a2813a9d3243704334fa81b96a5c150c9a"
+  integrity sha512-9IdMmj2KjigRq6oWhmwv1W36pDuA4STQZ8q6YO9um+x07xgYNCD3Oou+WP/3L1HNz7iqythGet3/p4wvc8AAwQ==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -3310,9 +3332,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001035, caniuse-lite@^1.0.30001093, caniuse-lite@^1.0.30001097:
-  version "1.0.30001105"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001105.tgz#d2cb0b31e5cf2f3ce845033b61c5c01566549abf"
-  integrity sha512-JupOe6+dGMr7E20siZHIZQwYqrllxotAhiaej96y6x00b/48rPt42o+SzOSCPbrpsDWvRja40Hwrj0g0q6LZJg==
+  version "1.0.30001107"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001107.tgz#809360df7a5b3458f627aa46b0f6ed6d5239da9a"
+  integrity sha512-86rCH+G8onCmdN4VZzJet5uPELII59cUzDphko3thQFgAQG1RNa+sVLDoALIhRYmflo5iSIzWY3vu1XTWtNMQQ==
 
 capture-exit@^2.0.0:
   version "2.0.0"
@@ -3792,6 +3814,13 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
+copy-to-clipboard@^3.2.0:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
+  integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 core-js-compat@^3.6.2:
   version "3.6.5"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.6.5.tgz#2a51d9a4e25dfd6e690251aa81f99e3c05481f1c"
@@ -3962,6 +3991,14 @@ css-has-pseudo@^0.10.0:
     postcss "^7.0.6"
     postcss-selector-parser "^5.0.0-rc.4"
 
+css-in-js-utils@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz#3b472b398787291b47cfe3e44fecfdd9e914ba99"
+  integrity sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==
+  dependencies:
+    hyphenate-style-name "^1.0.2"
+    isobject "^3.0.1"
+
 css-loader@3.4.2:
   version "3.4.2"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.4.2.tgz#d3fdb3358b43f233b78501c5ed7b1c6da6133202"
@@ -4020,7 +4057,7 @@ css-tree@1.0.0-alpha.37:
     mdn-data "2.0.4"
     source-map "^0.6.1"
 
-css-tree@1.0.0-alpha.39:
+css-tree@1.0.0-alpha.39, css-tree@^1.0.0-alpha.28:
   version "1.0.0-alpha.39"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.39.tgz#2bff3ffe1bb3f776cf7eefd91ee5cba77a149eeb"
   integrity sha512-7UvkEYgBAHRG9Nt980lYxjsTrCyHFN53ky3wVsDkiMdVqylqRt+Zc+jm5qw7/qyOvN2dHSYtX0e4MbCCExSvnA==
@@ -4164,7 +4201,7 @@ cssstyle@^1.0.0, cssstyle@^1.1.1:
   dependencies:
     cssom "0.3.x"
 
-csstype@^2.2.0, csstype@^2.6.7:
+csstype@^2.2.0, csstype@^2.5.5, csstype@^2.6.7:
   version "2.6.11"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.11.tgz#452f4d024149ecf260a852b025e36562a253ffc5"
   integrity sha512-l8YyEC9NBkSm783PFTvh0FmJy7s5pFKrDp49ZL7zBGX3fWkO+N4EEyan1qqp8cwPLDcD0OSdyY6hAMoxp34JFw==
@@ -4652,6 +4689,14 @@ elliptic@^6.0.0, elliptic@^6.5.2:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.0"
 
+emoji-mart@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/emoji-mart/-/emoji-mart-3.0.0.tgz#eca24a04881e27752a6921e09f65a86ce8539a50"
+  integrity sha512-r5DXyzOLJttdwRYfJmPq/XL3W5tiAE/VsRnS0Hqyn27SqPA/GOYwVUSx50px/dXdJyDSnvmoPbuJ/zzhwSaU4A==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    prop-types "^15.6.0"
+
 emoji-regex@^7.0.1, emoji-regex@^7.0.2:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
@@ -4722,6 +4767,13 @@ error-ex@^1.2.0, error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
+error-stack-parser@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.0.6.tgz#5a99a707bd7a4c58a797902d48d82803ede6aad8"
+  integrity sha512-d51brTeqC+BHlwF0BhPtcYgF5nlzf9ZZ0ZIUQNZpc9ZB9qw5IJ2diTrBY9jlCJkTLITYPjmiX6OWCwH+fuyNgQ==
+  dependencies:
+    stackframe "^1.1.1"
+
 es-abstract@^1.17.0, es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.4, es-abstract@^1.17.5:
   version "1.17.6"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.6.tgz#9142071707857b2cacc7b89ecb670316c3e2d52a"
@@ -5358,7 +5410,7 @@ extsprintf@^1.2.0:
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
   integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
 
-fast-deep-equal@^3.1.1:
+fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
@@ -5385,6 +5437,16 @@ fast-levenshtein@~2.0.6:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
+fast-shallow-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz#d4dcaf6472440dcefa6f88b98e3251e27f25628b"
+  integrity sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw==
+
+fastest-stable-stringify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/fastest-stable-stringify/-/fastest-stable-stringify-1.0.1.tgz#9122d406d4c9d98bea644a6b6853d5874b87b028"
+  integrity sha1-kSLUBtTJ2YvqZEpraFPVh0uHsCg=
+
 faye-websocket@^0.10.0:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.10.0.tgz#4e492f8d04dfb6f89003507f6edbf2d501e7c6f4"
@@ -6289,6 +6351,11 @@ human-signals@^1.1.1:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
   integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
 
+hyphenate-style-name@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
+  integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
+
 i18next-browser-languagedetector@5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-5.0.0.tgz#9e946ed2ea5514a636913fe020a32455e82946e3"
@@ -6464,6 +6531,14 @@ ini@^1.3.5:
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
   integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
 
+inline-style-prefixer@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-4.0.2.tgz#d390957d26f281255fe101da863158ac6eb60911"
+  integrity sha512-N8nVhwfYga9MiV9jWlwfdj1UDIaZlBFu4cJSJkIr7tZX7sHpHhGR5su1qdpW+7KPL8ISTvCIkcaFi/JdBknvPg==
+  dependencies:
+    bowser "^1.7.3"
+    css-in-js-utils "^2.0.0"
+
 inquirer@7.0.4:
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-7.0.4.tgz#99af5bde47153abca23f5c7fc30db247f39da703"
@@ -7433,6 +7508,11 @@ js-base64@^2.1.8:
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.3.tgz#7afdb9b57aa7717e15d370b66e8f36a9cb835dc3"
   integrity sha512-fiUvdfCaAXoQTHdKMgTvg6IkecXDcVz6V5rlftUTclF9IKBjMizvSdQaCl/z/6TApDeby5NL+axYou3i0mu1Pg==
 
+js-cookie@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
+  integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -8485,6 +8565,20 @@ nan@^2.12.1, nan@^2.13.2:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01"
   integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==
 
+nano-css@^5.2.1:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/nano-css/-/nano-css-5.3.0.tgz#9d3cd29788d48b6a07f52aa4aec7cf4da427b6b5"
+  integrity sha512-uM/9NGK9/E9/sTpbIZ/bQ9xOLOIHZwrrb/CRlbDHBU/GFS7Gshl24v/WJhwsVViWkpOXUmiZ66XO7fSB4Wd92Q==
+  dependencies:
+    css-tree "^1.0.0-alpha.28"
+    csstype "^2.5.5"
+    fastest-stable-stringify "^1.0.1"
+    inline-style-prefixer "^4.0.0"
+    rtl-css-js "^1.9.0"
+    sourcemap-codec "^1.4.1"
+    stacktrace-js "^2.0.0"
+    stylis "3.5.0"
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -9703,14 +9797,14 @@ postcss-modules-extract-imports@^2.0.0:
     postcss "^7.0.5"
 
 postcss-modules-local-by-default@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.2.tgz#e8a6561be914aaf3c052876377524ca90dbb7915"
-  integrity sha512-jM/V8eqM4oJ/22j0gx4jrp63GSvDH6v86OqyTHHUvk4/k1vceipZsaymiZ5PvocqZOl5SFHiFJqjs3la0wnfIQ==
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.3.tgz#bb14e0cc78279d504dbdcbfd7e0ca28993ffbbb0"
+  integrity sha512-e3xDq+LotiGesympRlKNgaJ0PCzoUIdpH0dj47iWAui/kyTgh3CiAr1qP54uodmJhl6p9rN6BoNcdEDVJx9RDw==
   dependencies:
     icss-utils "^4.1.1"
-    postcss "^7.0.16"
+    postcss "^7.0.32"
     postcss-selector-parser "^6.0.2"
-    postcss-value-parser "^4.0.0"
+    postcss-value-parser "^4.1.0"
 
 postcss-modules-scope@^2.1.1:
   version "2.2.0"
@@ -10010,7 +10104,7 @@ postcss-value-parser@^3.0.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
 
-postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
+postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
@@ -10033,7 +10127,7 @@ postcss@7.0.21:
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
-postcss@^7, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.23, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
+postcss@^7, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.23, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
   version "7.0.32"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.32.tgz#4310d6ee347053da3433db2be492883d62cec59d"
   integrity sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==
@@ -10128,7 +10222,7 @@ prop-types-extra@^1.1.0:
     react-is "^16.3.2"
     warning "^4.0.0"
 
-prop-types@^15.5.10, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -10591,6 +10685,31 @@ react-transition-group@^4.4.1:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
+react-universal-interface@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/react-universal-interface/-/react-universal-interface-0.6.2.tgz#5e8d438a01729a4dbbcbeeceb0b86be146fe2b3b"
+  integrity sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==
+
+react-use@15.3.3:
+  version "15.3.3"
+  resolved "https://registry.yarnpkg.com/react-use/-/react-use-15.3.3.tgz#f16de7a16286c446388e8bd99680952fc3dc9a95"
+  integrity sha512-nYb94JbmDCaLZg3sOXmFW8HN+lXWxnl0caspXoYfZG1CON8JfLN9jMOyxRDUpm7dUq7WZ5mIept/ByqBQKJ0wQ==
+  dependencies:
+    "@types/js-cookie" "2.2.6"
+    "@xobotyi/scrollbar-width" "1.9.5"
+    copy-to-clipboard "^3.2.0"
+    fast-deep-equal "^3.1.3"
+    fast-shallow-equal "^1.0.0"
+    js-cookie "^2.2.1"
+    nano-css "^5.2.1"
+    react-universal-interface "^0.6.2"
+    resize-observer-polyfill "^1.5.1"
+    screenfull "^5.0.0"
+    set-harmonic-interval "^1.0.1"
+    throttle-debounce "^2.1.0"
+    ts-easing "^0.2.0"
+    tslib "^2.0.0"
+
 react@16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
@@ -11091,6 +11210,13 @@ rsvp@^4.8.4:
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
   integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
 
+rtl-css-js@^1.9.0:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/rtl-css-js/-/rtl-css-js-1.14.0.tgz#daa4f192a92509e292a0519f4b255e6e3c076b7d"
+  integrity sha512-Dl5xDTeN3e7scU1cWX8c9b6/Nqz3u/HgR4gePc1kWXYiQWVQbKCEyK6+Hxve9LbcJ5EieHy1J9nJCN3grTtGwg==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+
 run-async@^2.2.0, run-async@^2.4.0:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
@@ -11211,6 +11337,11 @@ schema-utils@^2.5.0, schema-utils@^2.6.0, schema-utils@^2.6.1, schema-utils@^2.6
     ajv "^6.12.2"
     ajv-keywords "^3.4.1"
 
+screenfull@^5.0.0:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/screenfull/-/screenfull-5.0.2.tgz#b9acdcf1ec676a948674df5cd0ff66b902b0bed7"
+  integrity sha512-cCF2b+L/mnEiORLN5xSAz6H3t18i2oHh9BA8+CQlAh5DRw2+NFAGQJOSYbcGw8B2k04g/lVvFcfZ83b3ysH5UQ==
+
 scroll-into-view-if-needed@^2.2.20:
   version "2.2.25"
   resolved "https://registry.yarnpkg.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.25.tgz#117b7bc7c61bc7a2b7872a0984bc73a19bc6e961"
@@ -11322,6 +11453,11 @@ set-blocking@^2.0.0, set-blocking@~2.0.0:
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
   integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
 
+set-harmonic-interval@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz#e1773705539cdfb80ce1c3d99e7f298bb3995249"
+  integrity sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g==
+
 set-value@^2.0.0, set-value@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
@@ -11554,6 +11690,11 @@ source-map-url@^0.4.0:
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
   integrity sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=
 
+source-map@0.5.6:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
+  integrity sha1-dc449SvwczxafwwRjYEzSiu19BI=
+
 source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
@@ -11571,6 +11712,11 @@ source-map@^0.5.0, source-map@^0.5.6:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
+sourcemap-codec@^1.4.1:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
+  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
+
 spdx-correct@^3.0.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"
@@ -11674,11 +11820,40 @@ stable@^0.1.8:
   resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
   integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
 
+stack-generator@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/stack-generator/-/stack-generator-2.0.5.tgz#fb00e5b4ee97de603e0773ea78ce944d81596c36"
+  integrity sha512-/t1ebrbHkrLrDuNMdeAcsvynWgoH/i4o8EGGfX7dEYDoTXOYVAkEpFdtshlvabzc6JlJ8Kf9YdFEoz7JkzGN9Q==
+  dependencies:
+    stackframe "^1.1.1"
+
 stack-utils@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.2.tgz#33eba3897788558bebfc2db059dc158ec36cebb8"
   integrity sha512-MTX+MeG5U994cazkjd/9KNAapsHnibjMLnfXodlkXw76JEea0UiNzrqidzo1emMwk7w5Qhc9jd4Bn9TBb1MFwA==
 
+stackframe@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.2.0.tgz#52429492d63c62eb989804c11552e3d22e779303"
+  integrity sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA==
+
+stacktrace-gps@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/stacktrace-gps/-/stacktrace-gps-3.0.4.tgz#7688dc2fc09ffb3a13165ebe0dbcaf41bcf0c69a"
+  integrity sha512-qIr8x41yZVSldqdqe6jciXEaSCKw1U8XTXpjDuy0ki/apyTn/r3w9hDAAQOhZdxvsC93H+WwwEu5cq5VemzYeg==
+  dependencies:
+    source-map "0.5.6"
+    stackframe "^1.1.1"
+
+stacktrace-js@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/stacktrace-js/-/stacktrace-js-2.0.2.tgz#4ca93ea9f494752d55709a081d400fdaebee897b"
+  integrity sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==
+  dependencies:
+    error-stack-parser "^2.0.6"
+    stack-generator "^2.0.5"
+    stacktrace-gps "^3.0.4"
+
 start-server-and-test@1.11.2:
   version "1.11.2"
   resolved "https://registry.yarnpkg.com/start-server-and-test/-/start-server-and-test-1.11.2.tgz#9144b7b6f25197148f159f261ae80119afbb17d5"
@@ -11962,6 +12137,11 @@ stylehacks@^4.0.0:
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.0"
 
+stylis@3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.0.tgz#016fa239663d77f868fef5b67cf201c4b7c701e1"
+  integrity sha512-pP7yXN6dwMzAR29Q0mBrabPCe0/mNO1MSr93bhay+hcZondvMMTpeGyd8nbhYJdyperNT2DRxONQuUGcJr5iPw==
+
 supports-color@7.1.0, supports-color@^7.0.0, supports-color@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
@@ -12105,6 +12285,11 @@ throat@^4.0.0:
   resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"
   integrity sha1-iQN8vJLFarGJJua6TLsgDhVnKmo=
 
+throttle-debounce@^2.1.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-2.2.1.tgz#fbd933ae6793448816f7d5b3cae259d464c98137"
+  integrity sha512-i9hAVld1f+woAiyNGqWelpDD5W1tpMroL3NofTz9xzwq6acWBlO2dC8k5EFSZepU6oOINtV5Q3aSPoRg7o4+fA==
+
 throttleit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.0.tgz#9e785836daf46743145a5984b6268d828528ac6c"
@@ -12211,6 +12396,11 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
+
 toidentifier@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
@@ -12243,6 +12433,11 @@ trim-newlines@^1.0.0:
   dependencies:
     glob "^7.1.2"
 
+ts-easing@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/ts-easing/-/ts-easing-0.2.0.tgz#c8a8a35025105566588d87dbda05dd7fbfa5a4ec"
+  integrity sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ==
+
 ts-loader@8.0.2:
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-8.0.2.tgz#ee73ca9350f745799396fff8578ba29b1e95616b"
@@ -12254,7 +12449,7 @@ ts-loader@8.0.2:
     micromatch "^4.0.0"
     semver "^6.0.0"
 
-ts-mockery@^1.2.0:
+ts-mockery@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/ts-mockery/-/ts-mockery-1.2.0.tgz#aa76521653d729e99b3808836817f64e61a213dd"
   integrity sha512-ArGPMUzO4H25KBYVTWmmE36y5bCOFAwC7XdW4CLTqYg+gQcvxJzKoj5URSc+luzwI8QdtwAkHtazBmrKepX81g==
@@ -12284,6 +12479,11 @@ tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
   integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==
 
+tslib@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.0.tgz#18d13fc2dce04051e20f074cc8387fd8089ce4f3"
+  integrity sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==
+
 tsutils@^3.17.1:
   version "3.17.1"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"