From 4079a42f09e5b3eab7b6033dbc7ae337f9a8d333 Mon Sep 17 00:00:00 2001 From: Nevo David Date: Fri, 27 Dec 2024 17:50:03 +0700 Subject: [PATCH] feat: emojies --- .../src/components/launches/editor.tsx | 75 +- .../providers/high.order.provider.tsx | 2 +- .../src/components/layout/click.outside.tsx | 5 +- package-lock.json | 984 +++++------------- package.json | 1 + 5 files changed, 306 insertions(+), 761 deletions(-) diff --git a/apps/frontend/src/components/launches/editor.tsx b/apps/frontend/src/components/launches/editor.tsx index dd6343ca..6775206c 100644 --- a/apps/frontend/src/components/launches/editor.tsx +++ b/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 ) => { 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 ( -
- 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, - }} - /> -
+ <> +
+
setEmojiPickerOpen(!emojiPickerOpen)} + > + 😀 +
+
+
+ { + addText(e.emoji); + setEmojiPickerOpen(false); + }} + open={emojiPickerOpen} + /> +
+
+ { + 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, + }} + /> +
+ ); } ); diff --git a/apps/frontend/src/components/launches/providers/high.order.provider.tsx b/apps/frontend/src/components/launches/providers/high.order.provider.tsx index 26cc5dee..aae10fb2 100644 --- a/apps/frontend/src/components/launches/providers/high.order.provider.tsx +++ b/apps/frontend/src/components/launches/providers/high.order.provider.tsx @@ -413,7 +413,7 @@ export const withProvider = function (
- {integration?.identifier === 'linkedin' && ( + {(integration?.identifier === 'linkedin' || integration?.identifier === 'linkedin-page') && (