feat: emojies

Author: nevo-david

apps/frontend/src/components/launches/editor.tsx

@@ -1,10 +1,14 @@
-import { forwardRef } from 'react';
+import { forwardRef, useCallback, useRef, useState } from 'react';
 import type { MDEditorProps } from '@uiw/react-md-editor/src/Types';
 import { RefMDEditor } from '@uiw/react-md-editor/src/Editor';
 import { useCopilotAction, useCopilotReadable } from '@copilotkit/react-core';
 import { CopilotTextarea } from '@copilotkit/react-textarea';
 import clsx from 'clsx';
 import { useUser } from '@gitroom/frontend/components/layout/user.context';
+import { makeId } from '@gitroom/nestjs-libraries/services/make.is';
+import { Transforms } from 'slate';
+import EmojiPicker from 'emoji-picker-react';
+import { Theme } from 'emoji-picker-react';
 
 export const Editor = forwardRef<
   RefMDEditor,
@@ -19,6 +23,10 @@ export const Editor = forwardRef<
     ref: React.ForwardedRef<RefMDEditor>
   ) => {
     const user = useUser();
+    const [id] = useState(makeId(10));
+    const newRef = useRef(null);
+    const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
+
     useCopilotReadable({
       description: 'Content of the post number ' + (props.order + 1),
       value: props.value,
@@ -38,24 +46,55 @@ export const Editor = forwardRef<
       },
     });
 
+    const addText = useCallback(
+      (emoji: string) => {
+        // @ts-ignore
+        Transforms.insertText(newRef?.current?.editor!, emoji);
+      },
+      [props.value, id]
+    );
+
     return (
-      <div className="relative bg-customColor2">
-        <CopilotTextarea
-          disableBranding={true}
-          className={clsx(
-            '!min-h-40 !max-h-80 p-2 overflow-x-hidden scrollbar scrollbar-thumb-[#612AD5] bg-customColor2 outline-none'
-          )}
-          value={props.value}
-          onChange={(e) => props?.onChange?.(e.target.value)}
-          onPaste={props.onPaste}
-          placeholder="Write your reply..."
-          autosuggestionsConfig={{
-            textareaPurpose: `Assist me in writing social media posts.`,
-            chatApiConfigs: {},
-            disabled: !user?.tier?.ai,
-          }}
-        />
-      </div>
+      <>
+        <div className="flex justify-end -mt-[30px]">
+          <div
+            className="select-none cursor-pointer bg-customColor2 w-[40px] p-[5px] text-center rounded-tl-lg rounded-tr-lg"
+            onClick={() => setEmojiPickerOpen(!emojiPickerOpen)}
+          >
+            😀
+          </div>
+        </div>
+        <div className="absolute z-[200] right-0">
+          <EmojiPicker
+            theme={localStorage.getItem('mode') as Theme || Theme.DARK}
+            onEmojiClick={(e) => {
+              addText(e.emoji);
+              setEmojiPickerOpen(false);
+            }}
+            open={emojiPickerOpen}
+          />
+        </div>
+        <div className="relative bg-customColor2" id={id}>
+          <CopilotTextarea
+            disableBranding={true}
+            ref={newRef}
+            className={clsx(
+              '!min-h-40 !max-h-80 p-2 overflow-x-hidden scrollbar scrollbar-thumb-[#612AD5] bg-customColor2 outline-none'
+            )}
+            value={props.value}
+            onChange={(e) => {
+              props?.onChange?.(e.target.value);
+            }}
+            onPaste={props.onPaste}
+            placeholder="Write your reply..."
+            autosuggestionsConfig={{
+              textareaPurpose: `Assist me in writing social media posts.`,
+              chatApiConfigs: {},
+              disabled: !user?.tier?.ai,
+            }}
+          />
+        </div>
+      </>
     );
   }
 );

apps/frontend/src/components/launches/providers/high.order.provider.tsx

@@ -413,7 +413,7 @@ export const withProvider = function <T extends object>(
                       <div>
                         <div className="flex gap-[4px]">
                           <div className="flex-1 text-textColor editor">
-                            {integration?.identifier === 'linkedin' && (
+                            {(integration?.identifier === 'linkedin' || integration?.identifier === 'linkedin-page') && (
                               <Button
                                 className="mb-[5px]"
                                 onClick={tagPersonOrCompany(

apps/frontend/src/components/layout/click.outside.tsx

@@ -4,11 +4,14 @@ export const useClickOutside = (callback: () => Promise<void>) => {
   const handleClick = (event: MouseEvent) => {
     const selector = document.querySelector('#add-edit-modal');
     const copilotkit = document.querySelector('.copilotKitPopup');
+    const emoji = document.querySelector('.EmojiPickerReact');
     if (
       selector &&
       !selector.contains(event.target as HTMLElement) &&
       copilotkit &&
-      !copilotkit.contains(event.target as HTMLElement)
+      !copilotkit.contains(event.target as HTMLElement) &&
+      emoji &&
+      !emoji.contains(event.target as HTMLElement)
     ) {
       callback();
     }