diff --git a/mobile/package.json b/mobile/package.json index 04684355a..804a48bb9 100644 --- a/mobile/package.json +++ b/mobile/package.json @@ -10,58 +10,58 @@ "copy-html-entry": "cp ../raven/public/raven_mobile/index.html ../raven/www/raven_mobile.html" }, "dependencies": { - "@capacitor/app": "^5.0.6", - "@capacitor/core": "^5.0.0", - "@capacitor/haptics": "^5.0.0", - "@ionic/react": "^7.5.2", - "@ionic/react-router": "^7.3.2", + "@capacitor/app": "^5.0.7", + "@capacitor/core": "^5.7.0", + "@capacitor/haptics": "^5.0.7", + "@ionic/react": "^7.7.3", + "@ionic/react-router": "^7.7.3", "@ionic/storage": "^4.0.0", - "@tiptap/extension-code-block-lowlight": "^2.1.12", - "@tiptap/extension-highlight": "^2.1.12", - "@tiptap/extension-link": "^2.1.12", - "@tiptap/extension-mention": "^2.1.12", - "@tiptap/extension-placeholder": "^2.1.12", - "@tiptap/extension-typography": "^2.1.12", - "@tiptap/extension-underline": "^2.1.12", - "@tiptap/pm": "^2.1.12", - "@tiptap/react": "^2.1.12", - "@tiptap/starter-kit": "^2.1.12", - "@tiptap/suggestion": "^2.1.12", + "@tiptap/extension-code-block-lowlight": "^2.2.3", + "@tiptap/extension-highlight": "^2.2.3", + "@tiptap/extension-link": "^2.2.3", + "@tiptap/extension-mention": "^2.2.3", + "@tiptap/extension-placeholder": "^2.2.3", + "@tiptap/extension-typography": "^2.2.3", + "@tiptap/extension-underline": "^2.2.3", + "@tiptap/pm": "^2.2.3", + "@tiptap/react": "^2.2.3", + "@tiptap/starter-kit": "^2.2.3", + "@tiptap/suggestion": "^2.2.3", "cal-sans": "^1.0.1", - "emoji-picker-element": "^1.18.4", - "frappe-react-sdk": "^1.3.8", + "emoji-picker-element": "^1.21.1", + "frappe-react-sdk": "^1.3.11", "highlight.js": "^11.9.0", - "ionicons": "^7.1.2", + "ionicons": "^7.2.2", "lowlight": "^3.1.0", "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-hook-form": "^7.45.4", - "react-icons": "^4.10.1", - "react-intersection-observer": "^9.5.2", - "react-markdown": "^8.0.7", + "react-hook-form": "^7.50.1", + "react-icons": "^5.0.1", + "react-intersection-observer": "^9.8.0", + "react-markdown": "^9.0.1", "react-remark": "^2.1.0", "react-router": "5.2.0", "react-router-dom": "5.2.0", "rehype-raw": "^7.0.0", "rehype-sanitize": "^6.0.0", - "remark-gfm": "^3.0.1", - "swiper": "^10.2.0", + "remark-gfm": "^4.0.0", "tippy.js": "^6.3.7", "turndown": "^7.1.2" }, "devDependencies": { - "@types/react": "^18.0.27", - "@types/react-dom": "^18.0.10", + "@capacitor/cli": "^5.7.0", + "@types/react": "^18.2.55", + "@types/react-dom": "^18.2.19", "@types/react-router": "5.1.11", "@types/react-router-dom": "^5.3.3", - "@types/turndown": "^5.0.3", - "@vitejs/plugin-react": "^4.0.4", - "autoprefixer": "^10.4.13", - "postcss": "^8.4.29", - "tailwindcss": "^3.2.7", + "@types/turndown": "^5.0.4", + "@vitejs/plugin-react": "^4.2.1", + "autoprefixer": "^10.4.17", + "postcss": "^8.4.35", + "tailwindcss": "^3.4.1", "typescript": "^4.9.3", - "vite": "^4.4.9", - "vite-plugin-pwa": "^0.16.5" + "vite": "^5.1.4", + "vite-plugin-pwa": "^0.19.0" } -} \ No newline at end of file +} diff --git a/mobile/src/components/common/EmojiPicker.tsx b/mobile/src/components/common/EmojiPicker.tsx new file mode 100644 index 000000000..b1c71ff48 --- /dev/null +++ b/mobile/src/components/common/EmojiPicker.tsx @@ -0,0 +1,28 @@ +import { createElement, useEffect, useRef } from "react" +import 'emoji-picker-element' +import './emojiPicker.styles.css' + +const EmojiPicker = ({ onSelect }: { onSelect: (emoji: string) => void }) => { + + const ref = useRef(null) + + useEffect(() => { + const handler = (event: any) => { + onSelect(event.detail.unicode) + } + ref.current?.addEventListener('emoji-click', handler) + ref.current.skinToneEmoji = '👍' + + const style = document.createElement('style'); + style.textContent = `.picker { border-radius: 8px; box-shadow: var(--shadow-6); } input.search{ color: 'rgb(24 24 27)' } }` + ref.current.shadowRoot.appendChild(style); + + return () => { + ref.current?.removeEventListener('emoji-click', handler) + } + }, []) + + return createElement('emoji-picker', { ref }) +} + +export default EmojiPicker \ No newline at end of file diff --git a/mobile/src/components/common/emojiPicker.styles.css b/mobile/src/components/common/emojiPicker.styles.css new file mode 100644 index 000000000..a0f4b439a --- /dev/null +++ b/mobile/src/components/common/emojiPicker.styles.css @@ -0,0 +1,23 @@ +emoji-picker { + --indicator-color: var(--ion-color-primary); + --input-padding: 0.6rem; + width: 100%; + /* --emoji-size: 1.8rem; */ + /* --num-columns: 8; */ + height: 100%; + --input-font-size: 0.8rem; + --background: rgb(24 24 27); + --indicator-height: 4px; + --border-color: transparent; + --input-border-color: rgb(63 63 70); + --input-border-size: 2px; + --input-font-color: rgb(244 244 245); + --button-active-background: color: rgb(39 39 42); + --button-hover-background: rgb(39 39 42); + --input-placeholder-color: rgb(82 82 91); + --outline-color: #5958B1; +} + +.picker { + --border-size: 2px; +} \ No newline at end of file diff --git a/mobile/src/components/features/chat-input/Tiptap.tsx b/mobile/src/components/features/chat-input/Tiptap.tsx index 8613bca60..2b57dd3df 100644 --- a/mobile/src/components/features/chat-input/Tiptap.tsx +++ b/mobile/src/components/features/chat-input/Tiptap.tsx @@ -296,7 +296,7 @@ export const Tiptap = ({ onMessageSend, messageSending, defaultText = '' }: Tipt