EMOJIS!!!!!!!!!!!!!

app/renderer/components/message.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Emojis } from '../emojis'
+import { Emojis, emoticons } from '../emojis'
 // import opn from 'opn'
 import { Message } from '../models'
 const opn = require('opn')
@@ -55,19 +55,29 @@ function image_process(str: string) {
   }
   return null
 }
-function emoji_process(str: string): string {
-  const emojire = /:[a-z_]+:/i
+export function emoji_process(str: string): string {
+  const emojire = /:[^\s:]+:/i
   let reres = emojire.exec(str)
   let tmpstr = str // tmpstr for loop control
+  let newstr = ''
   while (reres !== null) {
-    if (Emojis.hasOwnProperty(reres[0])) {
-      const rere = new RegExp(reres[0], 'gi')
-      str = str.replace(rere, Emojis[reres[0]])
+    console.log(reres[0], Emojis[reres[0]])
+    if (Emojis[reres[0]]) {
+      newstr = newstr + tmpstr.slice(0, reres.index) + Emojis[reres[0]]
+      tmpstr = tmpstr.substring(+reres.index + reres[0].length)
+    } else {
+      newstr = newstr + tmpstr.slice(0, reres.index + reres[0].length - 1)
+      tmpstr = tmpstr.substring(+reres.index + reres[0].length - 1)
     }
-    tmpstr = tmpstr.substring(+reres.index + reres[0].length - 1)
     reres = emojire.exec(tmpstr)
   }
-  return str
+  newstr = newstr + tmpstr
+  for (const i of Object.keys(emoticons)) {
+    // replaces shortcuts too like :D
+    // could manually make a regex to include eac one but that sounds like a pain
+    newstr = newstr.replace(emoticons[+i], Emojis[emoticons[+i]])
+  }
+  return newstr
 }
 function has_sender(message: Message) {
   return (

app/renderer/components/messageentry.tsx

@@ -1,7 +1,13 @@
 import * as React from 'react'
-
+import { emoticons, Emojis } from '../emojis'
+import { Picker, EmojiData, emojiIndex } from 'emoji-mart'
 import { Connection } from '../models/connections'
 import { Channel } from '../models/channel'
+import { emoji_process } from './message'
+declare module 'emojione' {
+  export function shortnameToUnicode(str: string): string
+}
+import * as emojione from 'emojione'
 
 interface IChatBoxProps {
   connection?: Connection
@@ -10,18 +16,22 @@ interface IChatBoxProps {
 }
 interface IMessageEntryState {
   value: string
+  emoji_vis: boolean
 }
 export class MessageEntry extends React.Component<
   IChatBoxProps,
   IMessageEntryState
 > {
   constructor(props: IChatBoxProps) {
     super(props)
-    this.state = { value: '' }
+    this.state = { value: '', emoji_vis: false }
   }
 
   handleChange = (event: any) => {
-    this.setState({ value: event.target.value })
+    this.setState({
+      value: emoji_process(event.target.value),
+      emoji_vis: this.state.emoji_vis
+    })
   }
 
   handleSubmit = (event: any) => {
@@ -34,23 +44,60 @@ export class MessageEntry extends React.Component<
     } else {
       console.error('Tried to send message without connection or channel')
     }
-    this.setState({ value: '' })
+    this.setState({ value: '', emoji_vis: false })
     event.preventDefault()
   }
-
+  toggle_emoji = (event: any) => {
+    event.preventDefault()
+    this.setState({ value: this.state.value, emoji_vis: !this.state.emoji_vis })
+    return false
+  }
+  pick_emoji = (emoji: EmojiData) => {
+    for (const i of Object.keys(emoticons)) {
+      console.log(emoticons[+i], Emojis[emoticons[+i]])
+    }
+    this.setState({
+      value: this.state.value + emoji.native,
+      emoji_vis: this.state.emoji_vis
+    })
+  }
+  show() {
+    if (this.state.emoji_vis) {
+      // custum can be used to add custom emojis, if you wnat to has picker use emoji set other then the native
+      // check out 'set' option
+      return (
+        <Picker
+          custom={[]}
+          onClick={this.pick_emoji}
+          emoji={'zap'}
+          title={''}
+          native={true}
+        />
+      )
+    }
+    return
+  }
   render() {
     return (
-      <form onSubmit={this.handleSubmit}>
-        <label>
-          Send Message:
+      <div className={'widthhund'}>
+        {this.show()}
+        <form className={'widthhund'} onSubmit={this.handleSubmit}>
+          <a href={'#'} onClick={this.toggle_emoji}>
+            ⚡
+          </a>
+          <label>Send Message:</label>
           <input
+            id={'messagebox'}
             type="text"
             value={this.state.value}
             onChange={this.handleChange}
+            onClick={event => {
+              this.setState({ value: this.state.value, emoji_vis: false })
+            }}
           />
-        </label>
-        <input type="submit" value="Submit" />
-      </form>
+          <input type="submit" value="Submit" />
+        </form>
+      </div>
     )
   }
 }

app/renderer/emojis/index.ts

@@ -6,6 +6,7 @@ import nature from './nature'
 import objects from './objects'
 import places from './places'
 import symbols from './symbols'
+import { emojiIndex } from 'emoji-mart'
 function combine() {
   const h: { [key: string]: string } = {}
   let i = 0
@@ -48,6 +49,28 @@ function combine() {
     h[symbols[i].alias] = symbols[i].emoji
     i += 1
   }
+  for (const field of Object.keys(emojiIndex.emojis)) {
+    h[emojiIndex.emojis[field].colons] = emojiIndex.emojis[field].native
+    for (const ii of Object.keys(emojiIndex.emojis[field].emoticons)) {
+      h[emojiIndex.emojis[field].emoticons[+ii]] =
+        emojiIndex.emojis[field].native
+    }
+  }
+  h[':skin-tone-2:'] = '🏻'
+  h[':skin-tone-3:'] = '🏼'
+  h[':skin-tone-4:'] = '🏽'
+  h[':skin-tone-5:'] = '🏾'
+  h[':skin-tone-6:'] = '🏿'
+  return h
+}
+function generate() {
+  const h: string[] = []
+  for (const field of Object.keys(emojiIndex.emojis)) {
+    for (const i of Object.keys(emojiIndex.emojis[field].emoticons)) {
+      h.push(emojiIndex.emojis[field].emoticons[+i])
+    }
+  }
   return h
 }
+export const emoticons = generate()
 export const Emojis = combine()

app/renderer/stylesheets/components/_all.scss

@@ -5,3 +5,4 @@
 @import 'chatwindow';
 @import 'message';
 @import 'apploader';
+@import 'emoji-mart';

app/renderer/stylesheets/components/_chatwindow.scss

@@ -17,3 +17,14 @@
   color: var(--primary-text);
   height: 5%;
 }
+.widthhund {
+  max-width: 100%;
+  min-width: 90%;
+}
+#messagebox {
+  min-width: 50%;
+}
+
+.emojiB {
+  height: 20px;
+}