mirror of
https://github.com/Qortal/Qortal-Hub.git
synced 2025-07-23 04:36:52 +00:00
mobile update
This commit is contained in:
@@ -26,6 +26,8 @@ export const AnnouncementDiscussion = ({
|
||||
}) => {
|
||||
const [isSending, setIsSending] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isFocusedParent, setIsFocusedParent] = useState(false);
|
||||
|
||||
const [comments, setComments] = useState([])
|
||||
const [tempPublishedList, setTempPublishedList] = useState([])
|
||||
const firstMountRef = useRef(false)
|
||||
@@ -38,6 +40,12 @@ export const AnnouncementDiscussion = ({
|
||||
const clearEditorContent = () => {
|
||||
if (editorRef.current) {
|
||||
editorRef.current.chain().focus().clearContent().run();
|
||||
if(isMobile){
|
||||
setTimeout(() => {
|
||||
editorRef.current?.chain().blur().run();
|
||||
setIsFocusedParent(false)
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -78,6 +86,7 @@ export const AnnouncementDiscussion = ({
|
||||
|
||||
if (!response?.error) {
|
||||
res(response);
|
||||
return
|
||||
}
|
||||
rej(response.error);
|
||||
}
|
||||
@@ -281,14 +290,18 @@ export const AnnouncementDiscussion = ({
|
||||
// position: 'fixed',
|
||||
// bottom: '0px',
|
||||
backgroundColor: "#232428",
|
||||
minHeight: "150px",
|
||||
maxHeight: "400px",
|
||||
minHeight: isMobile ? "0px" : "150px",
|
||||
maxHeight: isMobile ? "auto" : "400px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
overflow: "hidden",
|
||||
width: "100%",
|
||||
boxSizing: "border-box",
|
||||
padding: "20px",
|
||||
padding: isMobile ? "10px": "20px",
|
||||
position: isFocusedParent ? 'fixed' : 'relative',
|
||||
bottom: isFocusedParent ? '0px' : 'unset',
|
||||
top: isFocusedParent ? '0px' : 'unset',
|
||||
zIndex: isFocusedParent ? 5 : 'unset',
|
||||
flexShrink:0,
|
||||
}}
|
||||
>
|
||||
@@ -297,6 +310,7 @@ export const AnnouncementDiscussion = ({
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
// height: '100%',
|
||||
flexGrow: isMobile && 1,
|
||||
overflow: "auto",
|
||||
}}
|
||||
>
|
||||
@@ -304,8 +318,19 @@ export const AnnouncementDiscussion = ({
|
||||
setEditorRef={setEditorRef}
|
||||
onEnter={publishComment}
|
||||
disableEnter
|
||||
maxHeightOffset="60px"
|
||||
isFocusedParent={isFocusedParent} setIsFocusedParent={setIsFocusedParent}
|
||||
|
||||
/>
|
||||
</div>
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
width: '100&',
|
||||
gap: '10px',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
position: 'relative',
|
||||
}}>
|
||||
<CustomButton
|
||||
onClick={() => {
|
||||
if (isSending) return;
|
||||
@@ -317,6 +342,8 @@ export const AnnouncementDiscussion = ({
|
||||
cursor: isSending ? "default" : "pointer",
|
||||
background: isSending && "rgba(0, 0, 0, 0.8)",
|
||||
flexShrink: 0,
|
||||
padding: isMobile && '5px',
|
||||
fontSize: isMobile && '14px'
|
||||
}}
|
||||
>
|
||||
{isSending && (
|
||||
@@ -334,6 +361,30 @@ export const AnnouncementDiscussion = ({
|
||||
)}
|
||||
{` Publish Comment`}
|
||||
</CustomButton>
|
||||
{isFocusedParent && (
|
||||
<CustomButton
|
||||
onClick={()=> {
|
||||
if(isSending) return
|
||||
setIsFocusedParent(false)
|
||||
clearEditorContent()
|
||||
// Unfocus the editor
|
||||
}}
|
||||
style={{
|
||||
marginTop: 'auto',
|
||||
alignSelf: 'center',
|
||||
cursor: isSending ? 'default' : 'pointer',
|
||||
background: isSending && 'rgba(0, 0, 0, 0.8)',
|
||||
flexShrink: 0,
|
||||
padding: isMobile && '5px',
|
||||
fontSize: isMobile && '14px',
|
||||
}}
|
||||
>
|
||||
|
||||
{` Close`}
|
||||
</CustomButton>
|
||||
|
||||
)}
|
||||
</Box>
|
||||
</div>
|
||||
|
||||
<LoadingSnackbar
|
||||
|
@@ -6,7 +6,7 @@ import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
|
||||
import Tiptap from './TipTap'
|
||||
import { CustomButton } from '../../App-styles'
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
import { Input } from '@mui/material';
|
||||
import { Box, Input } from '@mui/material';
|
||||
import { LoadingSnackbar } from '../Snackbar/LoadingSnackbar';
|
||||
import { getNameInfo } from '../Group/Group';
|
||||
import { Spacer } from '../../common/Spacer';
|
||||
@@ -15,6 +15,7 @@ import { getBaseApiReactSocket, isMobile, pauseAllQueues, resumeAllQueues } from
|
||||
import { getPublicKey } from '../../background';
|
||||
import { useMessageQueue } from '../../MessageQueueContext';
|
||||
import { executeEvent } from '../../utils/events';
|
||||
import zIndex from '@mui/material/styles/zIndex';
|
||||
|
||||
|
||||
|
||||
@@ -22,6 +23,7 @@ import { executeEvent } from '../../utils/events';
|
||||
|
||||
export const ChatDirect = ({ myAddress, isNewChat, selectedDirect, setSelectedDirect, setNewChat, getTimestampEnterChat, myName, balance}) => {
|
||||
const { queueChats, addToQueue, } = useMessageQueue();
|
||||
const [isFocusedParent, setIsFocusedParent] = useState(false);
|
||||
|
||||
const [messages, setMessages] = useState([])
|
||||
const [isSending, setIsSending] = useState(false)
|
||||
@@ -252,6 +254,13 @@ const sendChatDirect = async ({ chatReference = undefined, messageText}: any, ad
|
||||
const clearEditorContent = () => {
|
||||
if (editorRef.current) {
|
||||
editorRef.current.chain().focus().clearContent().run();
|
||||
if(isMobile){
|
||||
setTimeout(() => {
|
||||
editorRef.current?.chain().blur().run();
|
||||
setIsFocusedParent(false)
|
||||
executeEvent("sent-new-message-group", {})
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -293,7 +302,6 @@ const clearEditorContent = () => {
|
||||
executeEvent("sent-new-message-group", {})
|
||||
}, 150);
|
||||
clearEditorContent()
|
||||
clearEditorContent()
|
||||
}
|
||||
// send chat message
|
||||
} catch (error) {
|
||||
@@ -310,7 +318,7 @@ const clearEditorContent = () => {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
console.log('isFocusedParent', isFocusedParent)
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
@@ -336,25 +344,37 @@ const clearEditorContent = () => {
|
||||
// position: 'fixed',
|
||||
// bottom: '0px',
|
||||
backgroundColor: "#232428",
|
||||
minHeight: '150px',
|
||||
maxHeight: '400px',
|
||||
minHeight: isMobile ? '0px' : '150px',
|
||||
maxHeight: isMobile ? 'auto' : '400px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
overflow: 'hidden',
|
||||
width: '100%',
|
||||
boxSizing: 'border-box',
|
||||
padding: '20px'
|
||||
padding: isMobile ? '10px' : '20px',
|
||||
position: isFocusedParent ? 'fixed' : 'relative',
|
||||
bottom: isFocusedParent ? '0px' : 'unset',
|
||||
top: isFocusedParent ? '0px' : 'unset',
|
||||
zIndex: isFocusedParent ? 5 : 'unset'
|
||||
}}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
// height: '100%',
|
||||
overflow: 'auto'
|
||||
flexGrow: isMobile && 1,
|
||||
overflow: !isMobile && "auto",
|
||||
}}>
|
||||
|
||||
|
||||
<Tiptap setEditorRef={setEditorRef} onEnter={sendMessage} isChat />
|
||||
<Tiptap isFocusedParent={isFocusedParent} setEditorRef={setEditorRef} onEnter={sendMessage} isChat disableEnter={isMobile ? true : false} setIsFocusedParent={setIsFocusedParent}/>
|
||||
</div>
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
width: '100&',
|
||||
gap: '10px',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
position: 'relative',
|
||||
}}>
|
||||
<CustomButton
|
||||
onClick={()=> {
|
||||
if(isSending) return
|
||||
@@ -365,7 +385,8 @@ const clearEditorContent = () => {
|
||||
alignSelf: 'center',
|
||||
cursor: isSending ? 'default' : 'pointer',
|
||||
background: isSending && 'rgba(0, 0, 0, 0.8)',
|
||||
flexShrink: 0
|
||||
flexShrink: 0,
|
||||
padding: isMobile && '5px'
|
||||
}}
|
||||
>
|
||||
{isSending && (
|
||||
@@ -383,6 +404,29 @@ const clearEditorContent = () => {
|
||||
)}
|
||||
{` Send`}
|
||||
</CustomButton>
|
||||
{isFocusedParent && (
|
||||
<CustomButton
|
||||
onClick={()=> {
|
||||
if(isSending) return
|
||||
setIsFocusedParent(false)
|
||||
clearEditorContent()
|
||||
// Unfocus the editor
|
||||
}}
|
||||
style={{
|
||||
marginTop: 'auto',
|
||||
alignSelf: 'center',
|
||||
cursor: isSending ? 'default' : 'pointer',
|
||||
background: isSending && 'rgba(0, 0, 0, 0.8)',
|
||||
flexShrink: 0,
|
||||
padding: isMobile && '5px'
|
||||
}}
|
||||
>
|
||||
|
||||
{` Close`}
|
||||
</CustomButton>
|
||||
|
||||
)}
|
||||
</Box>
|
||||
</div>
|
||||
<LoadingSnackbar open={isLoading} info={{
|
||||
message: "Loading chat... please wait."
|
||||
|
@@ -15,6 +15,7 @@ import { CustomizedSnackbars } from '../Snackbar/Snackbar'
|
||||
import { PUBLIC_NOTIFICATION_CODE_FIRST_SECRET_KEY } from '../../constants/codes'
|
||||
import { useMessageQueue } from '../../MessageQueueContext'
|
||||
import { executeEvent } from '../../utils/events'
|
||||
import { Box } from '@mui/material'
|
||||
|
||||
|
||||
|
||||
@@ -28,6 +29,8 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey,
|
||||
const [openSnack, setOpenSnack] = React.useState(false);
|
||||
const [infoSnack, setInfoSnack] = React.useState(null);
|
||||
const hasInitialized = useRef(false)
|
||||
const [isFocusedParent, setIsFocusedParent] = useState(false);
|
||||
|
||||
const hasInitializedWebsocket = useRef(false)
|
||||
const socketRef = useRef(null); // WebSocket reference
|
||||
const timeoutIdRef = useRef(null); // Timeout ID reference
|
||||
@@ -270,6 +273,13 @@ const sendChatGroup = async ({groupId, typeMessage = undefined, chatReference =
|
||||
const clearEditorContent = () => {
|
||||
if (editorRef.current) {
|
||||
editorRef.current.chain().focus().clearContent().run();
|
||||
if(isMobile){
|
||||
setTimeout(() => {
|
||||
editorRef.current?.chain().blur().run();
|
||||
setIsFocusedParent(false)
|
||||
executeEvent("sent-new-message-group", {})
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -354,25 +364,37 @@ const clearEditorContent = () => {
|
||||
// position: 'fixed',
|
||||
// bottom: '0px',
|
||||
backgroundColor: "#232428",
|
||||
minHeight: '150px',
|
||||
maxHeight: '400px',
|
||||
minHeight: isMobile ? '0px' : '150px',
|
||||
maxHeight: isMobile ? 'auto' : '400px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
overflow: 'hidden',
|
||||
width: '100%',
|
||||
boxSizing: 'border-box',
|
||||
padding: '20px'
|
||||
padding: isMobile ? '10px' : '20px',
|
||||
position: isFocusedParent ? 'fixed' : 'relative',
|
||||
bottom: isFocusedParent ? '0px' : 'unset',
|
||||
top: isFocusedParent ? '0px' : 'unset',
|
||||
zIndex: isFocusedParent ? 5 : 'unset'
|
||||
}}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
// height: '100%',
|
||||
overflow: 'auto'
|
||||
flexGrow: isMobile && 1,
|
||||
overflow: !isMobile && "auto",
|
||||
}}>
|
||||
|
||||
|
||||
<Tiptap setEditorRef={setEditorRef} onEnter={sendMessage} isChat />
|
||||
<Tiptap setEditorRef={setEditorRef} onEnter={sendMessage} isChat disableEnter={isMobile ? true : false} isFocusedParent={isFocusedParent} setIsFocusedParent={setIsFocusedParent} />
|
||||
</div>
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
width: '100&',
|
||||
gap: '10px',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
position: 'relative',
|
||||
}}>
|
||||
<CustomButton
|
||||
onClick={()=> {
|
||||
if(isSending) return
|
||||
@@ -383,7 +405,9 @@ const clearEditorContent = () => {
|
||||
alignSelf: 'center',
|
||||
cursor: isSending ? 'default' : 'pointer',
|
||||
background: isSending && 'rgba(0, 0, 0, 0.8)',
|
||||
flexShrink: 0
|
||||
flexShrink: 0,
|
||||
padding: isMobile && '5px',
|
||||
|
||||
}}
|
||||
>
|
||||
{isSending && (
|
||||
@@ -401,6 +425,29 @@ const clearEditorContent = () => {
|
||||
)}
|
||||
{` Send`}
|
||||
</CustomButton>
|
||||
{isFocusedParent && (
|
||||
<CustomButton
|
||||
onClick={()=> {
|
||||
if(isSending) return
|
||||
setIsFocusedParent(false)
|
||||
clearEditorContent()
|
||||
// Unfocus the editor
|
||||
}}
|
||||
style={{
|
||||
marginTop: 'auto',
|
||||
alignSelf: 'center',
|
||||
cursor: isSending ? 'default' : 'pointer',
|
||||
background: isSending && 'rgba(0, 0, 0, 0.8)',
|
||||
flexShrink: 0,
|
||||
padding: isMobile && '5px'
|
||||
}}
|
||||
>
|
||||
|
||||
{` Close`}
|
||||
</CustomButton>
|
||||
|
||||
)}
|
||||
</Box>
|
||||
{/* <button onClick={sendMessage}>send</button> */}
|
||||
</div>
|
||||
{/* <ChatContainerComp messages={formatMessages} /> */}
|
||||
|
@@ -51,6 +51,7 @@ export const saveTempPublish = async ({ data, key }: any) => {
|
||||
|
||||
if (!response?.error) {
|
||||
res(response);
|
||||
return
|
||||
}
|
||||
rej(response.error);
|
||||
}
|
||||
@@ -71,6 +72,7 @@ export const getTempPublish = async () => {
|
||||
(response) => {
|
||||
if (!response?.error) {
|
||||
res(response);
|
||||
return
|
||||
}
|
||||
rej(response.error);
|
||||
}
|
||||
@@ -135,6 +137,8 @@ export const GroupAnnouncements = ({
|
||||
const [tempPublishedList, setTempPublishedList] = useState([])
|
||||
const [announcementData, setAnnouncementData] = useState({});
|
||||
const [selectedAnnouncement, setSelectedAnnouncement] = useState(null);
|
||||
const [isFocusedParent, setIsFocusedParent] = useState(false);
|
||||
|
||||
const { show } = React.useContext(MyContext);
|
||||
const [openSnack, setOpenSnack] = React.useState(false);
|
||||
const [infoSnack, setInfoSnack] = React.useState(null);
|
||||
@@ -226,6 +230,12 @@ export const GroupAnnouncements = ({
|
||||
const clearEditorContent = () => {
|
||||
if (editorRef.current) {
|
||||
editorRef.current.chain().focus().clearContent().run();
|
||||
if(isMobile){
|
||||
setTimeout(() => {
|
||||
editorRef.current?.chain().blur().run();
|
||||
setIsFocusedParent(false)
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -500,18 +510,18 @@ export const GroupAnnouncements = ({
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
padding: "25px",
|
||||
fontSize: "20px",
|
||||
padding: isMobile ? '8px' : "25px",
|
||||
fontSize: isMobile ? '16px' : "20px",
|
||||
gap: '20px',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<CampaignIcon sx={{
|
||||
fontSize: '30px'
|
||||
fontSize: isMobile ? '16px' : '30px'
|
||||
}} />
|
||||
Group Announcements
|
||||
</Box>
|
||||
<Spacer height="25px" />
|
||||
<Spacer height={isMobile ? "10px" : "25px"} />
|
||||
|
||||
</div>
|
||||
{!isLoading && combinedListTempAndReal?.length === 0 && (
|
||||
@@ -541,31 +551,46 @@ export const GroupAnnouncements = ({
|
||||
// position: 'fixed',
|
||||
// bottom: '0px',
|
||||
backgroundColor: "#232428",
|
||||
minHeight: "150px",
|
||||
maxHeight: "400px",
|
||||
minHeight: isMobile ? "0px" : "150px",
|
||||
maxHeight: isMobile ? "auto" : "400px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
overflow: "hidden",
|
||||
width: "100%",
|
||||
boxSizing: "border-box",
|
||||
padding: "20px",
|
||||
flexShrink: 0
|
||||
padding: isMobile ? "10px": "20px",
|
||||
position: isFocusedParent ? 'fixed' : 'relative',
|
||||
bottom: isFocusedParent ? '0px' : 'unset',
|
||||
top: isFocusedParent ? '0px' : 'unset',
|
||||
zIndex: isFocusedParent ? 5 : 'unset',
|
||||
flexShrink: 0
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
flexGrow: isMobile && 1,
|
||||
overflow: "auto",
|
||||
// height: '100%',
|
||||
overflow: "auto",
|
||||
}}
|
||||
}}
|
||||
>
|
||||
<Tiptap
|
||||
setEditorRef={setEditorRef}
|
||||
onEnter={publishAnnouncement}
|
||||
disableEnter
|
||||
maxHeightOffset="40px"
|
||||
isFocusedParent={isFocusedParent} setIsFocusedParent={setIsFocusedParent}
|
||||
/>
|
||||
</div>
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
width: '100&',
|
||||
gap: '10px',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
position: 'relative',
|
||||
}}>
|
||||
<CustomButton
|
||||
onClick={() => {
|
||||
if (isSending) return;
|
||||
@@ -577,6 +602,9 @@ export const GroupAnnouncements = ({
|
||||
cursor: isSending ? "default" : "pointer",
|
||||
background: isSending && "rgba(0, 0, 0, 0.8)",
|
||||
flexShrink: 0,
|
||||
padding: isMobile && '5px',
|
||||
fontSize: isMobile && '14px',
|
||||
|
||||
}}
|
||||
>
|
||||
{isSending && (
|
||||
@@ -594,6 +622,30 @@ export const GroupAnnouncements = ({
|
||||
)}
|
||||
{` Publish Announcement`}
|
||||
</CustomButton>
|
||||
{isFocusedParent && (
|
||||
<CustomButton
|
||||
onClick={()=> {
|
||||
if(isSending) return
|
||||
setIsFocusedParent(false)
|
||||
clearEditorContent()
|
||||
// Unfocus the editor
|
||||
}}
|
||||
style={{
|
||||
marginTop: 'auto',
|
||||
alignSelf: 'center',
|
||||
cursor: isSending ? 'default' : 'pointer',
|
||||
background: isSending && 'rgba(0, 0, 0, 0.8)',
|
||||
flexShrink: 0,
|
||||
padding: isMobile && '5px',
|
||||
fontSize: isMobile && '14px',
|
||||
}}
|
||||
>
|
||||
|
||||
{` Close`}
|
||||
</CustomButton>
|
||||
|
||||
)}
|
||||
</Box>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
@@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { EditorProvider, useCurrentEditor } from '@tiptap/react';
|
||||
import StarterKit from '@tiptap/starter-kit';
|
||||
import { Color } from '@tiptap/extension-color';
|
||||
@@ -25,6 +25,7 @@ import CustomImage from './CustomImage';
|
||||
import Compressor from 'compressorjs'
|
||||
|
||||
import ImageResize from 'tiptap-extension-resize-image'; // Import the ResizeImage extension
|
||||
import { isMobile } from '../../App';
|
||||
const MenuBar = ({ setEditorRef, isChat }) => {
|
||||
const { editor } = useCurrentEditor();
|
||||
const fileInputRef = useRef(null);
|
||||
@@ -88,10 +89,11 @@ const MenuBar = ({ setEditorRef, isChat }) => {
|
||||
}
|
||||
// color={editor.isActive('bold') ? 'white' : 'gray'}
|
||||
sx={{
|
||||
color: editor.isActive('bold') ? 'white' : 'gray'
|
||||
color: editor.isActive('bold') ? 'white' : 'gray',
|
||||
padding: isMobile ? '5px' : 'revert'
|
||||
}}
|
||||
>
|
||||
<FormatBoldIcon />
|
||||
<FormatBoldIcon />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
onClick={() => editor.chain().focus().toggleItalic().run()}
|
||||
@@ -104,7 +106,8 @@ const MenuBar = ({ setEditorRef, isChat }) => {
|
||||
}
|
||||
// color={editor.isActive('italic') ? 'white' : 'gray'}
|
||||
sx={{
|
||||
color: editor.isActive('italic') ? 'white' : 'gray'
|
||||
color: editor.isActive('italic') ? 'white' : 'gray',
|
||||
padding: isMobile ? '5px' : 'revert'
|
||||
}}
|
||||
>
|
||||
<FormatItalicIcon />
|
||||
@@ -120,7 +123,8 @@ const MenuBar = ({ setEditorRef, isChat }) => {
|
||||
}
|
||||
// color={editor.isActive('strike') ? 'white' : 'gray'}
|
||||
sx={{
|
||||
color: editor.isActive('strike') ? 'white' : 'gray'
|
||||
color: editor.isActive('strike') ? 'white' : 'gray',
|
||||
padding: isMobile ? '5px' : 'revert'
|
||||
}}
|
||||
>
|
||||
<StrikethroughSIcon />
|
||||
@@ -136,19 +140,23 @@ const MenuBar = ({ setEditorRef, isChat }) => {
|
||||
}
|
||||
// color={editor.isActive('code') ? 'white' : 'gray'}
|
||||
sx={{
|
||||
color: editor.isActive('code') ? 'white' : 'gray'
|
||||
color: editor.isActive('code') ? 'white' : 'gray',
|
||||
padding: isMobile ? '5px' : 'revert'
|
||||
}}
|
||||
>
|
||||
<CodeIcon />
|
||||
</IconButton>
|
||||
<IconButton onClick={() => editor.chain().focus().unsetAllMarks().run()}>
|
||||
<IconButton sx={{
|
||||
padding: isMobile ? '5px' : 'revert'
|
||||
}} onClick={() => editor.chain().focus().unsetAllMarks().run()}>
|
||||
<FormatClearIcon />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
onClick={() => editor.chain().focus().toggleBulletList().run()}
|
||||
// color={editor.isActive('bulletList') ? 'white' : 'gray'}
|
||||
sx={{
|
||||
color: editor.isActive('bulletList') ? 'white' : 'gray'
|
||||
color: editor.isActive('bulletList') ? 'white' : 'gray',
|
||||
padding: isMobile ? '5px' : 'revert'
|
||||
}}
|
||||
>
|
||||
<FormatListBulletedIcon />
|
||||
@@ -157,7 +165,8 @@ const MenuBar = ({ setEditorRef, isChat }) => {
|
||||
onClick={() => editor.chain().focus().toggleOrderedList().run()}
|
||||
// color={editor.isActive('orderedList') ? 'white' : 'gray'}
|
||||
sx={{
|
||||
color: editor.isActive('orderedList') ? 'white' : 'gray'
|
||||
color: editor.isActive('orderedList') ? 'white' : 'gray',
|
||||
padding: isMobile ? '5px' : 'revert'
|
||||
}}
|
||||
>
|
||||
<FormatListNumberedIcon />
|
||||
@@ -166,7 +175,8 @@ const MenuBar = ({ setEditorRef, isChat }) => {
|
||||
onClick={() => editor.chain().focus().toggleCodeBlock().run()}
|
||||
// color={editor.isActive('codeBlock') ? 'white' : 'gray'}
|
||||
sx={{
|
||||
color: editor.isActive('codeBlock') ? 'white' : 'gray'
|
||||
color: editor.isActive('codeBlock') ? 'white' : 'gray',
|
||||
padding: isMobile ? '5px' : 'revert'
|
||||
}}
|
||||
>
|
||||
<DeveloperModeIcon />
|
||||
@@ -175,7 +185,8 @@ const MenuBar = ({ setEditorRef, isChat }) => {
|
||||
onClick={() => editor.chain().focus().toggleBlockquote().run()}
|
||||
// color={editor.isActive('blockquote') ? 'white' : 'gray'}
|
||||
sx={{
|
||||
color: editor.isActive('blockquote') ? 'white' : 'gray'
|
||||
color: editor.isActive('blockquote') ? 'white' : 'gray',
|
||||
padding: isMobile ? '5px' : 'revert'
|
||||
}}
|
||||
>
|
||||
<FormatQuoteIcon />
|
||||
@@ -187,7 +198,8 @@ const MenuBar = ({ setEditorRef, isChat }) => {
|
||||
onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
|
||||
// color={editor.isActive('heading', { level: 1 }) ? 'white' : 'gray'}
|
||||
sx={{
|
||||
color: editor.isActive('heading', { level: 1 }) ? 'white' : 'gray'
|
||||
color: editor.isActive('heading', { level: 1 }) ? 'white' : 'gray',
|
||||
padding: isMobile ? '5px' : 'revert'
|
||||
}}
|
||||
>
|
||||
<FormatHeadingIcon fontSize="small" />
|
||||
@@ -202,7 +214,8 @@ const MenuBar = ({ setEditorRef, isChat }) => {
|
||||
.run()
|
||||
}
|
||||
sx={{
|
||||
color: 'gray'
|
||||
color: 'gray',
|
||||
padding: isMobile ? '5px' : 'revert'
|
||||
}}
|
||||
>
|
||||
<UndoIcon />
|
||||
@@ -227,7 +240,8 @@ const MenuBar = ({ setEditorRef, isChat }) => {
|
||||
<IconButton
|
||||
onClick={triggerImageUpload}
|
||||
sx={{
|
||||
color: 'gray'
|
||||
color: 'gray',
|
||||
padding: isMobile ? '5px' : 'revert'
|
||||
}}
|
||||
>
|
||||
<ImageIcon />
|
||||
@@ -268,32 +282,66 @@ const extensions = [
|
||||
|
||||
const content = ``;
|
||||
|
||||
export default ({ setEditorRef, onEnter, disableEnter, isChat }) => {
|
||||
|
||||
export default ({ setEditorRef, onEnter, disableEnter, isChat, maxHeightOffset, setIsFocusedParent, isFocusedParent, overrideMobile, customEditorHeight }) => {
|
||||
const [isFocused, setIsFocused] = useState(false);
|
||||
const extensionsFiltered = isChat ? extensions.filter((item)=> item?.name !== 'image') : extensions
|
||||
const editorRef = useRef(null);
|
||||
const setEditorRefFunc = (editorInstance) => {
|
||||
editorRef.current = editorInstance;
|
||||
setEditorRef(editorInstance)
|
||||
};
|
||||
const handleFocus = () => {
|
||||
if(!isMobile) return
|
||||
// setIsFocused(true);
|
||||
setIsFocusedParent(true)
|
||||
};
|
||||
|
||||
const handleBlur = () => {
|
||||
const htmlContent = editorRef.current.getHTML();
|
||||
|
||||
if (!htmlContent?.trim() || htmlContent?.trim() === "<p></p>"){
|
||||
// setIsFocused(false);
|
||||
// setIsFocusedParent(false)
|
||||
};
|
||||
|
||||
};
|
||||
// useEffect(()=> {
|
||||
// setIsFocused(isFocusedParent)
|
||||
// },[isFocusedParent])
|
||||
|
||||
return (
|
||||
<EditorProvider
|
||||
slotBefore={<MenuBar setEditorRef={setEditorRef} isChat={isChat} />}
|
||||
extensions={extensionsFiltered}
|
||||
content={content}
|
||||
editorProps={{
|
||||
handleKeyDown(view, event) {
|
||||
if (!disableEnter && event.key === 'Enter') {
|
||||
if (event.shiftKey) {
|
||||
// Shift+Enter: Insert a hard break
|
||||
view.dispatch(view.state.tr.replaceSelectionWith(view.state.schema.nodes.hardBreak.create()));
|
||||
return true;
|
||||
} else {
|
||||
// Enter: Call the callback function
|
||||
if (typeof onEnter === 'function') {
|
||||
onEnter();
|
||||
}
|
||||
return true; // Prevent the default action of adding a new line
|
||||
slotBefore={(isFocusedParent || !isMobile || overrideMobile) && <MenuBar setEditorRef={setEditorRefFunc} isChat={isChat} />}
|
||||
extensions={extensionsFiltered}
|
||||
content={content}
|
||||
onCreate={({ editor }) => {
|
||||
editor.on('focus', handleFocus); // Listen for focus event
|
||||
editor.on('blur', handleBlur); // Listen for blur event
|
||||
}}
|
||||
onUpdate={({ editor }) => {
|
||||
editor.on('focus', handleFocus); // Ensure focus is updated
|
||||
editor.on('blur', handleBlur); // Ensure blur is updated
|
||||
}}
|
||||
editorProps={{
|
||||
attributes: {
|
||||
class: 'tiptap-prosemirror',
|
||||
style: isMobile && `overflow: auto; min-height: ${customEditorHeight ? '200px' : '0px'}; 200px; max-height:calc(100svh - ${ customEditorHeight ? customEditorHeight : '140px'})`,
|
||||
},
|
||||
handleKeyDown(view, event) {
|
||||
if (!disableEnter && event.key === 'Enter') {
|
||||
if (event.shiftKey) {
|
||||
view.dispatch(view.state.tr.replaceSelectionWith(view.state.schema.nodes.hardBreak.create()));
|
||||
return true;
|
||||
} else {
|
||||
if (typeof onEnter === 'function') {
|
||||
onEnter();
|
||||
}
|
||||
return true;
|
||||
}
|
||||
return false; // Allow default handling for other keys
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return false;
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
@@ -118,4 +118,5 @@
|
||||
.tiptap img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user