refs #72 Insert emojis in compose panel

package.json

@@ -30,8 +30,10 @@
  "testEnvironment": "node"
  },
  "dependencies": {
+ "@emoji-mart/react": "^1.0.1",
  "@rsuite/icons": "^1.0.2",
  "@tauri-apps/api": "^1.2.0",
+ "emoji-mart": "^5.3.3",
  "megalodon": "^5.0.0",
  "moment": "^2.29.4",
  "next": "^13.0.6",

src/components/Compose.tsx

@@ -1,13 +1,30 @@
-import { Container, Header, Content, FlexboxGrid, Button, Dropdown, Avatar, Form, Input, ButtonToolbar, Schema } from 'rsuite'
+import {
+ Container,
+ Header,
+ Content,
+ FlexboxGrid,
+ Button,
+ Dropdown,
+ Avatar,
+ Form,
+ Input,
+ ButtonToolbar,
+ Schema,
+ Whisper,
+ Popover
+} from 'rsuite'
 import { Icon } from '@rsuite/icons'
-import { BsX } from 'react-icons/bs'
+import { BsX, BsEmojiLaughing } from 'react-icons/bs'
 import { useEffect, useState, forwardRef, useRef } from 'react'
 import { invoke } from '@tauri-apps/api/tauri'
+import generator, { Entity, MegalodonInterface } from 'megalodon'
 
 import { Server } from 'src/entities/server'
 import { Account } from 'src/entities/account'
 import failoverImg from 'src/utils/failoverImg'
-import generator from 'megalodon'
+import { data } from 'src/utils/emojiData'
+import Picker from '@emoji-mart/react'
+import { USER_AGENT } from 'src/defaults'
 
 const renderAccountIcon = (props: any, ref: any, account: [Account, Server] | undefined) => {
  if (account && account.length > 0) {
@@ -35,8 +52,7 @@ const renderAccountIcon = (props: any, ref: any, account: [Account, Server] | un
 
 const Textarea = forwardRef<HTMLTextAreaElement>((props, ref) => <Input {...props} as="textarea" ref={ref} />)
 
-const post = async (account: Account, server: Server, value: FormValue) => {
- const client = generator(server.sns, server.base_url, account.access_token, 'Fedistar')
+const post = async (client: MegalodonInterface, value: FormValue) => {
  const res = await client.postStatus(value.status)
  return res
 }
@@ -50,15 +66,32 @@ type FormValue = {
  status: string
 }
 
+type CustomEmojiCategory = {
+ id: string
+ name: string
+ emojis: Array<CustomEmoji>
+}
+
+type CustomEmoji = {
+ id: string
+ name: string
+ keywords: Array<String>
+ skins: Array<{ src: string }>
+}
+
 const Compose: React.FC<Props> = props => {
  const [accounts, setAccounts] = useState<Array<[Account, Server]>>([])
  const [fromAccount, setFromAccount] = useState<[Account, Server]>()
  const [formValue, setFormValue] = useState<FormValue>({
  status: ''
  })
  const [loading, setLoading] = useState<boolean>(false)
+ const [client, setClient] = useState<MegalodonInterface>()
+ const [customEmojis, setCustomEmojis] = useState<Array<CustomEmojiCategory>>([])
 
  const formRef = useRef<any>()
+ const statusRef = useRef<HTMLDivElement>()
+ const emojiPickerRef = useRef(null)
 
  const model = Schema.Model({
  status: Schema.Types.StringType().isRequired('This field is required.')
@@ -73,6 +106,39 @@ const Compose: React.FC<Props> = props => {
  f()
  }, [props.servers])
 
+ useEffect(() => {
+ if (!fromAccount || fromAccount.length < 2) {
+ return
+ }
+ const account = fromAccount[0]
+ const server = fromAccount[1]
+ const client = generator(server.sns, server.base_url, account.access_token, USER_AGENT)
+ setClient(client)
+
+ const f = async () => {
+ const emojis = await client.getInstanceCustomEmojis()
+ setCustomEmojis([
+ {
+ id: server.domain,
+ name: server.domain,
+ emojis: emojis.data
+ .map(emoji => ({
+ name: emoji.shortcode,
+ image: emoji.url
+ }))
+ .filter((e, i, array) => array.findIndex(ar => e.name === ar.name) === i)
+ .map(e => ({
+ id: e.name,
+ name: e.name,
+ keywords: [e.name],
+ skins: [{ src: e.image }]
+ }))
+ }
+ ])
+ }
+ f()
+ }, [fromAccount])
+
  const selectAccount = (eventKey: string) => {
  const account = accounts[parseInt(eventKey)]
  setFromAccount(account)
@@ -89,9 +155,12 @@ const Compose: React.FC<Props> = props => {
  return
  } else {
  setLoading(true)
- await post(fromAccount[0], fromAccount[1], formValue)
- clear()
- setLoading(false)
+ try {
+ await post(client, formValue)
+ clear()
+ } finally {
+ setLoading(false)
+ }
  }
  }
 
@@ -101,6 +170,32 @@ const Compose: React.FC<Props> = props => {
  })
  }
 
+ const onEmojiSelect = emoji => {
+ const textarea = statusRef.current.firstElementChild as HTMLTextAreaElement
+ const cursor = textarea.selectionStart
+ if (emoji.native) {
+ setFormValue(current =>
+ Object.assign({}, current, {
+ status: `${current.status.slice(0, cursor)}${emoji.native} ${current.status.slice(cursor)}`
+ })
+ )
+ } else if (emoji.shortcodes) {
+ // Custom emojis don't have native code
+ setFormValue(current =>
+ Object.assign({}, current, {
+ status: `${current.status.slice(0, cursor)}${emoji.shortcodes} ${current.status.slice(cursor)}`
+ })
+ )
+ }
+ emojiPickerRef?.current.close()
+ }
+
+ const EmojiPicker = forwardRef<HTMLDivElement>((props, ref) => (
+ <Popover ref={ref} {...props}>
+ <Picker data={data} custom={customEmojis} onEmojiSelect={onEmojiSelect} previewPosition="none" set="native" perLine="7" />
+ </Popover>
+ ))
+
  return (
  <Container>
  <Header style={{ borderBottom: '1px solid var(--rs-divider-border)', backgroundColor: 'var(--rs-sidenav-default-bg)' }}>
@@ -128,9 +223,14 @@ const Compose: React.FC<Props> = props => {
  </FlexboxGrid>
  <div style={{ fontSize: '1.2em', padding: '12px 0' }}>Status</div>
  <Form fluid model={model} ref={formRef} onChange={setFormValue} formValue={formValue}>
- <Form.Group controlId="status">
+ <Form.Group controlId="status" style={{ position: 'relative' }}>
  {/** @ts-ignore **/}
- <Form.Control rows={5} name="status" accepter={Textarea} />
+ <Form.Control rows={5} name="status" accepter={Textarea} ref={statusRef} />
+ <Whisper trigger="click" placement="bottomStart" ref={emojiPickerRef} speaker={<EmojiPicker />}>
+ <Button appearance="link" style={{ position: 'absolute', top: '4px', right: '8px', padding: 0 }}>
+ <Icon as={BsEmojiLaughing} style={{ fontSize: '1.2em' }} />
+ </Button>
+ </Whisper>
  </Form.Group>
  <Form.Group>
  <ButtonToolbar style={{ textAlign: 'right' }}>

src/defaults.ts

@@ -1,2 +1,3 @@
 export const TIMELINE_STATUSES_COUNT = 40
 export const TIMELINE_MAX_STATUSES = 2147483647
+export const USER_AGENT = 'Fedistar'

src/utils/emojiData.ts

@@ -0,0 +1,5 @@
+export const data = async () => {
+ const response = await fetch('https://cdn.jsdelivr.net/npm/@emoji-mart/data')
+
+ return response.json()
+}

yarn.lock

@@ -304,6 +304,11 @@
  resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
  integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@emoji-mart/react@^1.0.1":
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/@emoji-mart/react/-/react-1.0.1.tgz#46b6a2e92faf16fa9b7f9471f137fa2e3d1e8ac3"
+ integrity sha512-ALhLD96BOL5w+a4NI5NpmfqfF1aVjjj2qJE0dLst/OhjBfVmpteWNgn/h8LZy9ulU6AnbeS+13KnPFzDjCvRRw==
+
 "@eslint/eslintrc@^1.3.3":
  version "1.3.3"
  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.3.3.tgz#2b044ab39fdfa75b4688184f9e573ce3c5b0ff95"
@@ -1615,6 +1620,11 @@ emittery@^0.13.1:
  resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.13.1.tgz#c04b8c3457490e0847ae51fced3af52d338e3dad"
  integrity sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==
 
+emoji-mart@^5.3.3:
+ version "5.3.3"
+ resolved "https://registry.yarnpkg.com/emoji-mart/-/emoji-mart-5.3.3.tgz#f079700be84d5b13653378cf7bba45fb0217452b"
+ integrity sha512-rr3wXUimYFQ5Mf50P/5UOsRibr5JSJE3Nj4zw0aDglb3GSHzn/wGKBoXoSkjtWaji8UcmXcYn3cdilD2Eix6iQ==
+
 emoji-regex@^8.0.0:
  version "8.0.0"
  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"