From e209066c2dc1a38e0ea97d16c147beb5f0650265 Mon Sep 17 00:00:00 2001 From: Alejandro Gomez Date: Wed, 18 Jan 2023 23:16:43 +0100 Subject: [PATCH] emoji autocompletion --- package.json | 3 ++- src/element/Textarea.css | 17 +++++++++++++++-- src/element/Textarea.tsx | 26 ++++++++++++++++++++++++++ yarn.lock | 39 ++++++++++++++++++++++++++++++++++----- 4 files changed, 77 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index b2f96b44..cb8bf8ed 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "@fortawesome/fontawesome-svg-core": "^6.2.1", "@fortawesome/free-solid-svg-icons": "^6.2.1", "@fortawesome/react-fontawesome": "^0.2.0", + "@jukben/emoji-search": "^2.0.1", "@noble/secp256k1": "^1.7.0", "@protobufjs/base64": "^1.1.2", "@reduxjs/toolkit": "^1.9.1", @@ -13,9 +14,9 @@ "@types/node": "^18.11.18", "@types/react": "^18.0.26", "@types/react-dom": "^18.0.10", + "@types/uuid": "^9.0.0", "@types/webscopeio__react-textarea-autocomplete": "^4.7.2", "@webscopeio/react-textarea-autocomplete": "^4.9.2", - "@types/uuid": "^9.0.0", "bech32": "^2.0.0", "dexie": "^3.2.2", "dexie-react-hooks": "^1.1.1", diff --git a/src/element/Textarea.css b/src/element/Textarea.css index fece461f..a3ccd992 100644 --- a/src/element/Textarea.css +++ b/src/element/Textarea.css @@ -1,4 +1,4 @@ -.user-item { +.user-item, .emoji-item { background: var(--gray); display: flex; flex-direction: row; @@ -7,7 +7,7 @@ padding: 10px; } -.user-item:hover { +.user-item:hover, .emoji-item:hover { background: var(--gray-tertiary); } @@ -39,3 +39,16 @@ .nip05 { font-size: 12px; } + +.emoji-item { + font-size: 12px; +} + +.emoji-item .emoji { + margin-right: .2em; + min-width: 20px; +} + +.emoji-item .emoji-name { + font-weight: bold; +} diff --git a/src/element/Textarea.tsx b/src/element/Textarea.tsx index 11b71887..94c783d3 100644 --- a/src/element/Textarea.tsx +++ b/src/element/Textarea.tsx @@ -4,6 +4,7 @@ import "./Textarea.css"; import { useState } from "react"; import { useLiveQuery } from "dexie-react-hooks"; import ReactTextareaAutocomplete from "@webscopeio/react-textarea-autocomplete"; +import emoji from "@jukben/emoji-search"; import TextareaAutosize from "react-textarea-autosize"; import Avatar from "./Avatar"; @@ -12,6 +13,20 @@ import { hexToBech32 } from "../Util"; import { db } from "../db"; import { MetadataCache } from "../db/User"; +interface EmojiItemProps { + name: string + char: string +} + +const EmojiItem = ({ entity: { name, char } }: { entity: EmojiItemProps }) => { + return ( +
+
{char}
+
{name}
+
+ ) +} + const UserItem = (metadata: MetadataCache) => { const { pubkey, display_name, picture, nip05, ...rest } = metadata return ( @@ -46,6 +61,12 @@ const Textarea = ({ users, onChange, ...rest }: any) => { return allUsers } + const emojiDataProvider = (token: string) => { + return emoji(token) + .slice(0, 10) + .map(({ name, char }) => ({ name, char })); + } + return ( { onChange={onChange} textAreaComponent={TextareaAutosize} trigger={{ + ":": { + dataProvider: emojiDataProvider, + component: EmojiItem, + output: (item: EmojiItemProps, trigger) => item.char + }, "@": { afterWhitespace: true, dataProvider: userDataProvider, diff --git a/yarn.lock b/yarn.lock index 29bdfd81..2e1c57c1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1024,6 +1024,13 @@ "@babel/helper-validator-option" "^7.18.6" "@babel/plugin-transform-typescript" "^7.18.6" +"@babel/runtime@7.5.5": + version "7.5.5" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.5.tgz#74fba56d35efbeca444091c7850ccd494fd2f132" + integrity sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ== + dependencies: + regenerator-runtime "^0.13.2" + "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2": version "7.20.7" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.7.tgz#fcb41a5a70550e04a7b708037c7c32f7f356d8fd" @@ -1541,6 +1548,15 @@ "@jridgewell/resolve-uri" "3.1.0" "@jridgewell/sourcemap-codec" "1.4.14" +"@jukben/emoji-search@^2.0.1": + version "2.0.1" + resolved "https://registry.yarnpkg.com/@jukben/emoji-search/-/emoji-search-2.0.1.tgz#128ff80e3efaf00430cf1e235e5af81445f6f991" + integrity sha512-jXVcJGTBl+uOsGld+6J+hcHlRt3Vhm9ffvkrb1IeSVXuFCuyklY2XPI2wvSHG1uMGXfgmKbuUe1MCh1ZV3CXNg== + dependencies: + "@babel/runtime" "7.5.5" + emojilib "2.4.0" + match-sorter "4.0.0" + "@leichtgewicht/ip-codec@^2.0.1": version "2.0.4" resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b" @@ -2121,16 +2137,17 @@ resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43" integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA== +"@types/uuid@^9.0.0": + version "9.0.0" + resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.0.tgz#53ef263e5239728b56096b0a869595135b7952d2" + integrity sha512-kr90f+ERiQtKWMz5rP32ltJ/BtULDI5RVO0uavn1HQUOwjx0R1h0rnDYNL0CepF1zL5bSY6FISAfd9tOdDhU5Q== + "@types/webscopeio__react-textarea-autocomplete@^4.7.2": version "4.7.2" resolved "https://registry.yarnpkg.com/@types/webscopeio__react-textarea-autocomplete/-/webscopeio__react-textarea-autocomplete-4.7.2.tgz#605e8a6b4194fb4b6e55df8a19bc8fcd56319cfa" integrity sha512-e1DZGD+eH19BnllTWCGXAdrMa2kI53wEMuhn/d+wUmnu8//ZI6BiuK/EPdw07fI4+tlyo5qdPZdXdpkoXHJVOw== dependencies: "@types/react" "*" -"@types/uuid@^9.0.0": - version "9.0.0" - resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.0.tgz#53ef263e5239728b56096b0a869595135b7952d2" - integrity sha512-kr90f+ERiQtKWMz5rP32ltJ/BtULDI5RVO0uavn1HQUOwjx0R1h0rnDYNL0CepF1zL5bSY6FISAfd9tOdDhU5Q== "@types/ws@^8.5.1": version "8.5.4" @@ -3920,6 +3937,11 @@ emoji-regex@^9.2.2: resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72" integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg== +emojilib@2.4.0: + version "2.4.0" + resolved "https://registry.yarnpkg.com/emojilib/-/emojilib-2.4.0.tgz#ac518a8bb0d5f76dda57289ccb2fdf9d39ae721e" + integrity sha512-5U0rVMU5Y2n2+ykNLQqMoqklN9ICBT/KsvC1Gz6vqHbz2AXXGkG+Pm5rMWk/8Vjrr/mY9985Hi8DYzn1F09Nyw== + emojis-list@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78" @@ -6326,6 +6348,13 @@ makeerror@1.0.12: dependencies: tmpl "1.0.5" +match-sorter@4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-4.0.0.tgz#16f1a52ce51b01e462df3e8a9c16b8c1efac2584" + integrity sha512-E4DWje5l7+VvDUlqnACXy1iecuD6ZNiqUFw/DUYdFQljRIskZVHoT+76lLv5zz2BQOTxF2CUEgP1/Xu9Xn3MyQ== + dependencies: + remove-accents "0.4.2" + match-sorter@^6.0.2: version "6.3.1" resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-6.3.1.tgz#98cc37fda756093424ddf3cbc62bfe9c75b92bda" @@ -8142,7 +8171,7 @@ regenerate@^1.4.2: resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a" integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A== -regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.9: +regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.2, regenerator-runtime@^0.13.9: version "0.13.11" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9" integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==