Add Emoji squashed commit.

2 years ago · f9f5da392b
8 changed files with 150 additions and 6 deletions
--- a/assets/css/main.css
+++ b/assets/css/main.css
@ -156,7 +156,7 @@ hr {
 }

 .emoji {
-  height: 1.2em !important;
+  max-height: 1.2em !important;
 }

 .text-wrap-truncate {
--- a/package.json
+++ b/package.json
@ -14,6 +14,7 @@
  },
  "keywords": [],
  "dependencies": {
+    "@joeattardi/emoji-button": "^2.12.1",
    "@types/autosize": "^3.0.6",
    "@types/js-cookie": "^2.2.5",
    "@types/jwt-decode": "^2.2.1",
--- a/src/components/comment-form.tsx
+++ b/src/components/comment-form.tsx
@ -17,10 +17,12 @@ import {
  toast,
  setupTribute,
  wsJsonToRes,
+  emojiPicker,
 } from '../utils';
 import { WebSocketService, UserService } from '../services';
 import autosize from 'autosize';
 import Tribute from 'tributejs/src/Tribute.js';
+import emojiShortName from 'emoji-short-name';
 import { i18n } from '../i18next';

 interface CommentFormProps {
@ -69,6 +71,8 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
    super(props, context);

    this.tribute = setupTribute();
+    this.setupEmojiPicker();
+
    this.state = this.emptyState;

    if (this.props.node) {
@ -209,6 +213,15 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
                  <use xlinkHref="#icon-spinner"></use>
                </svg>
              )}
+              <span
+                onClick={linkEvent(this, this.handleEmojiPickerClick)}
+                class="pointer unselectable d-inline-block mr-3 float-right text-muted font-weight-bold"
+                data-tippy-content={i18n.t('emoji_picker')}
+              >
+                <svg class="icon icon-inline">
+                  <use xlinkHref="#icon-smile"></use>
+                </svg>
+              </span>
            </div>
          </div>
        </form>
@ -216,6 +229,17 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
    );
  }

+  setupEmojiPicker() {
+    emojiPicker.on('emoji', emoji => {
+      if (this.state.commentForm.content == null) {
+        this.state.commentForm.content = '';
+      }
+      let shortName = `:${emojiShortName[emoji]}:`;
+      this.state.commentForm.content += shortName;
+      this.setState(this.state);
+    });
+  }
+
  handleFinished() {
    this.state.previewMode = false;
    this.state.loading = false;
@ -242,6 +266,10 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
    i.setState(i.state);
  }

+  handleEmojiPickerClick(_i: CommentForm, event: any) {
+    emojiPicker.togglePicker(event.target);
+  }
+
  handleCommentContentChange(i: CommentForm, event: any) {
    i.state.commentForm.content = event.target.value;
    i.setState(i.state);
--- a/src/components/post-form.tsx
+++ b/src/components/post-form.tsx
@ -34,9 +34,11 @@ import {
  randomStr,
  setupTribute,
  setupTippy,
+  emojiPicker,
 } from '../utils';
 import autosize from 'autosize';
 import Tribute from 'tributejs/src/Tribute.js';
+import emojiShortName from 'emoji-short-name';
 import Selectr from 'mobius1-selectr';
 import { i18n } from '../i18next';

@ -92,6 +94,8 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
    this.fetchPageTitle = debounce(this.fetchPageTitle).bind(this);

    this.tribute = setupTribute();
+    this.setupEmojiPicker();
+
    this.state = this.emptyState;

    if (this.props.post) {
@ -191,7 +195,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                <label
                  htmlFor="file-upload"
                  className={`${UserService.Instance.user &&
-                    'pointer'} d-inline-block float-right text-muted h6 font-weight-bold`}
+                    'pointer'} d-inline-block float-right text-muted font-weight-bold`}
                  data-tippy-content={i18n.t('upload_image')}
                >
                  <svg class="icon icon-inline">
@ -294,13 +298,22 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
              <a
                href={markdownHelpUrl}
                target="_blank"
-                class="d-inline-block float-right text-muted h6 font-weight-bold"
+                class="d-inline-block float-right text-muted font-weight-bold"
                title={i18n.t('formatting_help')}
              >
                <svg class="icon icon-inline">
                  <use xlinkHref="#icon-help-circle"></use>
                </svg>
              </a>
+              <span
+                onClick={linkEvent(this, this.handleEmojiPickerClick)}
+                class="pointer unselectable d-inline-block mr-3 float-right text-muted font-weight-bold"
+                data-tippy-content={i18n.t('emoji_picker')}
+              >
+                <svg class="icon icon-inline">
+                  <use xlinkHref="#icon-smile"></use>
+                </svg>
+              </span>
            </div>
          </div>
          {!this.props.post && (
@ -369,6 +382,17 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
    );
  }

+  setupEmojiPicker() {
+    emojiPicker.on('emoji', emoji => {
+      if (this.state.postForm.body == null) {
+        this.state.postForm.body = '';
+      }
+      let shortName = `:${emojiShortName[emoji]}:`;
+      this.state.postForm.body += shortName;
+      this.setState(this.state);
+    });
+  }
+
  handlePostSubmit(i: PostForm, event: any) {
    event.preventDefault();
    if (i.props.post) {
@ -512,6 +536,10 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
      });
  }

+  handleEmojiPickerClick(_i: PostForm, event: any) {
+    emojiPicker.togglePicker(event.target);
+  }
+
  parseMessage(msg: WebSocketJsonResponse) {
    let res = wsJsonToRes(msg);
    if (msg.error) {
--- a/src/components/symbols.tsx
+++ b/src/components/symbols.tsx
@ -15,6 +15,9 @@ export class Symbols extends Component<any, any> {
        xmlnsXlink="http://www.w3.org/1999/xlink"
      >
        <defs>
+          <symbol id="icon-smile" viewBox="0 0 24 24">
+            <path d="M23 12c0-3.037-1.232-5.789-3.222-7.778s-4.741-3.222-7.778-3.222-5.789 1.232-7.778 3.222-3.222 4.741-3.222 7.778 1.232 5.789 3.222 7.778 4.741 3.222 7.778 3.222 5.789-1.232 7.778-3.222 3.222-4.741 3.222-7.778zM21 12c0 2.486-1.006 4.734-2.636 6.364s-3.878 2.636-6.364 2.636-4.734-1.006-6.364-2.636-2.636-3.878-2.636-6.364 1.006-4.734 2.636-6.364 3.878-2.636 6.364-2.636 4.734 1.006 6.364 2.636 2.636 3.878 2.636 6.364zM7.2 14.6c0 0 0.131 0.173 0.331 0.383 0.145 0.153 0.338 0.341 0.577 0.54 0.337 0.281 0.772 0.59 1.297 0.853 0.705 0.352 1.579 0.624 2.595 0.624s1.89-0.272 2.595-0.624c0.525-0.263 0.96-0.572 1.297-0.853 0.239-0.199 0.432-0.387 0.577-0.54 0.2-0.21 0.331-0.383 0.331-0.383 0.331-0.442 0.242-1.069-0.2-1.4s-1.069-0.242-1.4 0.2c-0.041 0.050-0.181 0.206-0.181 0.206-0.1 0.105-0.237 0.239-0.408 0.382-0.243 0.203-0.549 0.419-0.91 0.6-0.48 0.239-1.050 0.412-1.701 0.412s-1.221-0.173-1.701-0.413c-0.36-0.18-0.667-0.397-0.91-0.6-0.171-0.143-0.308-0.277-0.408-0.382-0.14-0.155-0.181-0.205-0.181-0.205-0.331-0.442-0.958-0.531-1.4-0.2s-0.531 0.958-0.2 1.4zM9 10c0.552 0 1-0.448 1-1s-0.448-1-1-1-1 0.448-1 1 0.448 1 1 1zM15 10c0.552 0 1-0.448 1-1s-0.448-1-1-1-1 0.448-1 1 0.448 1 1 1z"></path>
+          </symbol>
          <symbol id="icon-book-open" viewBox="0 0 24 24">
            <path d="M21 4v13h-6c-0.728 0-1.412 0.195-2 0.535v-10.535c0-0.829 0.335-1.577 0.879-2.121s1.292-0.879 2.121-0.879zM11 17.535c-0.588-0.34-1.272-0.535-2-0.535h-6v-13h5c0.829 0 1.577 0.335 2.121 0.879s0.879 1.292 0.879 2.121zM22 2h-6c-1.38 0-2.632 0.561-3.536 1.464-0.167 0.167-0.322 0.346-0.464 0.536-0.142-0.19-0.297-0.369-0.464-0.536-0.904-0.903-2.156-1.464-3.536-1.464h-6c-0.552 0-1 0.448-1 1v15c0 0.552 0.448 1 1 1h7c0.553 0 1.051 0.223 1.414 0.586s0.586 0.861 0.586 1.414c0 0.552 0.448 1 1 1s1-0.448 1-1c0-0.553 0.223-1.051 0.586-1.414s0.861-0.586 1.414-0.586h7c0.552 0 1-0.448 1-1v-15c0-0.552-0.448-1-1-1z"></path>
          </symbol>
--- a/src/utils.ts
+++ b/src/utils.ts
@ -43,6 +43,7 @@ import twemoji from 'twemoji';
 import emojiShortName from 'emoji-short-name';
 import Toastify from 'toastify-js';
 import tippy from 'tippy.js';
+import EmojiButton from '@joeattardi/emoji-button';

 export const repoUrl = 'https://github.com/LemmyNet/lemmy';
 export const helpGuideUrl = '/docs/about_guide.html';
@ -88,6 +89,14 @@ export const themes = [
  'i386',
 ];

+export const emojiPicker = new EmojiButton({
+  // Use the emojiShortName from native
+  // style: 'twemoji',
+  theme: 'dark',
+  position: 'auto-start',
+  // TODO i18n
+});
+
 export function randomStr() {
  return Math.random()
    .toString(36)
@ -473,8 +482,9 @@ export function setupTribute(): Tribute {
      {
        trigger: ':',
        menuItemTemplate: (item: any) => {
-          let emoji = `:${item.original.key}:`;
-          return `${item.original.val} ${emoji}`;
+          let shortName = `:${item.original.key}:`;
+          let twemojiIcon = twemoji.parse(item.original.val);
+          return `${twemojiIcon} ${shortName}`;
        },
        selectTemplate: (item: any) => {
          return `:${item.original.key}:`;
--- a/translations/en.json
+++ b/translations/en.json
@ -251,5 +251,6 @@
    "couldnt_update_private_message": "Couldn't update private message.",
    "time": "Time",
    "action": "Action",
+    "emoji_picker": "Emoji Picker",
    "block_leaving": "Are you sure you want to leave?"
 }
--- a/yarn.lock
+++ b/yarn.lock
@ -126,6 +126,51 @@
    lodash "^4.17.13"
    to-fast-properties "^2.0.0"

+"@fortawesome/[email protected]^0.2.28":
+  version "0.2.28"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.28.tgz#1091bdfe63b3f139441e9cba27aa022bff97d8b2"
+  integrity sha512-gtis2/5yLdfI6n0ia0jH7NJs5i/Z/8M/ZbQL6jXQhCthEOe5Cr5NcQPhgTvFxNOtURE03/ZqUcEskdn2M+QaBg==
+
+"@fortawesome/[email protected]^1.2.22":
+  version "1.2.28"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.28.tgz#e5b8c8814ef375f01f5d7c132d3c3a2f83a3abf9"
+  integrity sha512-4LeaNHWvrneoU0i8b5RTOJHKx7E+y7jYejplR7uSVB34+mp3Veg7cbKk7NBCLiI4TyoWS1wh9ZdoyLJR8wSAdg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.28"
+
+"@fortawesome/[email protected]^5.10.2":
+  version "5.13.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.13.0.tgz#925a13d8bdda0678f71551828cac80ab47b8150c"
+  integrity sha512-70FAyiS5j+ANYD4dh9NGowTorNDnyvQHHpCM7FpnF7GxtDjBUCKdrFqCPzesEIpNDFNd+La3vex+jDk4nnUfpA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.28"
+
+"@fortawesome/[email protected]^5.10.2":
+  version "5.13.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.13.0.tgz#44d9118668ad96b4fd5c9434a43efc5903525739"
+  integrity sha512-IHUgDJdomv6YtG4p3zl1B5wWf9ffinHIvebqQOmV3U+3SLw4fC+LUCCgwfETkbTtjy5/Qws2VoVf6z/ETQpFpg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.28"
+
+"@joeattardi/[email protected]^2.12.1":
+  version "2.12.1"
+  resolved "https://registry.yarnpkg.com/@joeattardi/emoji-button/-/emoji-button-2.12.1.tgz#190df7c00721e04742ed6f8852db828798a4cf98"
+  integrity sha512-rUuCXIcv4mRFK2IUKarYJN6J667wtH234smb1aQILzRf3/ycOoa6yUwnnvjxZeXMsPhuTnz15ndMOP2DhO5nNw==
+  dependencies:
+    "@fortawesome/fontawesome-svg-core" "^1.2.22"
+    "@fortawesome/free-regular-svg-icons" "^5.10.2"
+    "@fortawesome/free-solid-svg-icons" "^5.10.2"
+    "@popperjs/core" "^2.0.0"
+    focus-trap "^5.1.0"
+    tiny-emitter "^2.1.0"
+    tslib "^1.10.0"
+    twemoji "^12.1.5"
+
+"@popperjs/[email protected]^2.0.0":
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.2.3.tgz#0ae22b5650ab0b8fe508047245b66e71fc59e983"
+  integrity sha512-68EQPzEZRrpFavFX40V2+80eqzQIhgza2AGTXW+i8laxSA4It+Y13rmZInrAYoIujp8YO7YJPbvgOesDZcIulQ==
+
 "@popperjs/[email protected]^2.1.1":
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.1.1.tgz#12c572ab88ef7345b43f21883fca26631c223085"
@ -1829,6 +1874,14 @@ [email protected]^0.3.13:
  dependencies:
    chain-able "^1.0.1"

+[email protected]^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-5.1.0.tgz#64a0bfabd95c382103397dbc96bfef3a3cf8e5ad"
+  integrity sha512-CkB/nrO55069QAUjWFBpX6oc+9V90Qhgpe6fBWApzruMq5gnlh90Oo7iSSDK7pKiV5ugG6OY2AXM5mxcmL3lwQ==
+  dependencies:
+    tabbable "^4.0.0"
+    xtend "^4.0.1"
+
 [email protected]^1.0.1, [email protected]^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@ -4473,6 +4526,11 @@ [email protected]^1.1.0:
  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
  integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==

+[email protected]^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-4.0.0.tgz#5bff1d1135df1482cf0f0206434f15eadbeb9261"
+  integrity sha512-H1XoH1URcBOa/rZZWxLxHCtOdVUEev+9vo5YdYhC9tCY4wnybX+VQrCYuy9ubkg69fCBxCONJOSLGfw0DWMffQ==
+
 [email protected]^5.2.3:
  version "5.4.6"
  resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"
@ -4502,6 +4560,11 @@ [email protected]^2.3.6:
  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
  integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=

+[email protected]^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
+  integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
+
 [email protected]^1.0.2:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
@ -4609,6 +4672,11 @@ [email protected]^4.0.2:
  resolved "https://registry.yarnpkg.com/ts-transform-inferno/-/ts-transform-inferno-4.0.2.tgz#06b9be45edf874ba7a6ebfb6107ba782509c6afe"
  integrity sha512-CZb4+w/2l2zikPZ/c51fi3n+qnR2HCEfAS73oGQB80aqRLffkZqm25kYYTMmqUW2+oVfs4M5AZa0z14cvxlQ5w==

+[email protected]^1.10.0:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35"
+  integrity sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA==
+
 [email protected]^1.8.0, [email protected]^1.8.1, [email protected]^1.9.0:
  version "1.10.0"
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
@ -4638,7 +4706,7 @@ [email protected]:
  resolved "https://registry.yarnpkg.com/twemoji-parser/-/twemoji-parser-12.1.3.tgz#916c0153e77bd5f1011e7a99cbeacf52e43c9371"
  integrity sha512-ND4LZXF4X92/PFrzSgGkq6KPPg8swy/U0yRw1k/+izWRVmq1HYi3khPwV3XIB6FRudgVICAaBhJfW8e8G3HC7Q==

-[email protected]^12.1.2:
+[email protected]^12.1.2, [email protected]^12.1.5:
  version "12.1.5"
  resolved "https://registry.yarnpkg.com/twemoji/-/twemoji-12.1.5.tgz#a961fb65a1afcb1f729ad7e59391f9fe969820b9"
  integrity sha512-B0PBVy5xomwb1M/WZxf/IqPZfnoIYy1skXnlHjMwLwTNfZ9ljh8VgWQktAPcJXu8080WoEh6YwQGPVhDVqvrVQ==
@ -4890,6 +4958,11 @@ [email protected]^4.3.0:
  dependencies:
    "@babel/runtime-corejs3" "^7.8.3"

+[email protected]^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
+  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
+
 [email protected]^1.7.2:
  version "1.7.2"
  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.7.2.tgz#f26aabf738590ab61efaca502358e48dc9f348b2"