added disable enter in chat

This commit is contained in:
PhilReact 2024-12-31 22:31:33 +02:00
parent b0c940b8e3
commit f484411da8
3 changed files with 78 additions and 8 deletions

View File

@ -107,8 +107,8 @@ import { Settings } from "./components/Group/Settings";
import { MainAvatar } from "./components/MainAvatar";
import { useRetrieveDataLocalStorage } from "./useRetrieveDataLocalStorage";
import { useQortalGetSaveSettings } from "./useQortalGetSaveSettings";
import { useRecoilState, useResetRecoilState } from "recoil";
import { canSaveSettingToQdnAtom, fullScreenAtom, hasSettingsChangedAtom, isUsingImportExportSettingsAtom, oldPinnedAppsAtom, settingsLocalLastUpdatedAtom, settingsQDNLastUpdatedAtom, sortablePinnedAppsAtom } from "./atoms/global";
import { useRecoilState, useResetRecoilState, useSetRecoilState } from "recoil";
import { canSaveSettingToQdnAtom, fullScreenAtom, hasSettingsChangedAtom, isDisabledEditorEnterAtom, isUsingImportExportSettingsAtom, oldPinnedAppsAtom, settingsLocalLastUpdatedAtom, settingsQDNLastUpdatedAtom, sortablePinnedAppsAtom } from "./atoms/global";
import { useAppFullScreen } from "./useAppFullscreen";
import { NotAuthenticated } from "./ExtStates/NotAuthenticated";
import { useFetchResources } from "./common/useFetchResources";
@ -329,6 +329,7 @@ function App() {
const {downloadResource} = useFetchResources()
const [showSeed, setShowSeed] = useState(false)
const [creationStep, setCreationStep] = useState(1)
const setIsDisabledEditorEnter = useSetRecoilState(isDisabledEditorEnterAtom)
const {
isShow: isShowInfo,
onCancel: onCancelInfo,
@ -458,6 +459,8 @@ function App() {
}
}, [extState]);
useEffect(() => {
isFocusedRef.current = isFocused;
}, [isFocused]);
@ -968,6 +971,20 @@ function App() {
getUserInfo();
}, [address]);
useEffect(()=> {
try {
const val = localStorage.getItem('settings-disable-editor-enter');
if(val){
const parsedVal = JSON.parse(val)
if(parsedVal === false || parsedVal === true){
setIsDisabledEditorEnter(parsedVal)
}
}
} catch (error) {
}
}, [])
useEffect(() => {
return () => {
console.log("exit");

View File

@ -141,4 +141,9 @@ export const addressInfoKeySelector = selectorFamily({
const userInfo = get(addressInfoControllerAtom);
return userInfo[key] || null; // Return the value for the key or null if not found
},
});
export const isDisabledEditorEnterAtom = atom({
key: 'isDisabledEditorEnterAtom',
default: false,
});

View File

@ -1,4 +1,4 @@
import React, { useEffect, useMemo, useRef, useState } from "react";
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { EditorProvider, useCurrentEditor, useEditor } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import { Color } from "@tiptap/extension-color";
@ -34,6 +34,9 @@ import ListItemButton from '@mui/material/ListItemButton';
import ListItemText from '@mui/material/ListItemText';
import { ReactRenderer } from '@tiptap/react'
import MentionList from './MentionList.jsx'
import { Box, Checkbox, Typography } from "@mui/material";
import { useRecoilState } from "recoil";
import { isDisabledEditorEnterAtom } from "../../atoms/global.js";
function textMatcher(doc, from) {
const textBeforeCursor = doc.textBetween(0, from, ' ', ' ');
@ -44,7 +47,7 @@ function textMatcher(doc, from) {
const query = match[0];
return { start, query };
}
const MenuBar = ({ setEditorRef, isChat }) => {
const MenuBar = ({ setEditorRef, isChat, isDisabledEditorEnter, setIsDisabledEditorEnter }) => {
const { editor } = useCurrentEditor();
const fileInputRef = useRef(null);
@ -120,7 +123,9 @@ const MenuBar = ({ setEditorRef, isChat }) => {
return (
<div className="control-group">
<div className="button-group">
<div className="button-group" style={{
display: 'flex'
}}>
<IconButton
onClick={() => editor.chain().focus().toggleBold().run()}
disabled={!editor.can().chain().focus().toggleBold().run()}
@ -244,6 +249,43 @@ const MenuBar = ({ setEditorRef, isChat }) => {
>
<RedoIcon />
</IconButton>
{isChat && (
<Box
sx={{
display: "flex",
alignItems: "center",
marginLeft: '5px',
cursor: 'pointer'
}}
onClick={()=> {
setIsDisabledEditorEnter(!isDisabledEditorEnter)
}}
>
<Checkbox
edge="start"
tabIndex={-1}
disableRipple
checked={isDisabledEditorEnter}
sx={{
"&.Mui-checked": {
color: "gray", // Customize the color when checked
},
"& .MuiSvgIcon-root": {
color: "gray",
},
}}
/>
<Typography
sx={{
fontSize: "14px",
color: 'gray'
}}
>
disable enter
</Typography>
</Box>
)}
{!isChat && (
<>
<IconButton
@ -300,7 +342,7 @@ export default ({
membersWithNames,
enableMentions
}) => {
const [isDisabledEditorEnter, setIsDisabledEditorEnter] = useRecoilState(isDisabledEditorEnterAtom)
const extensionsFiltered = isChat
? extensions.filter((item) => item?.name !== "image")
: extensions;
@ -347,6 +389,12 @@ export default ({
// Set focus state based on content
}
};
const handleSetIsDisabledEditorEnter = useCallback((val)=> {
setIsDisabledEditorEnter(val)
localStorage.setItem('settings-disable-editor-enter', JSON.stringify(val));
}, [])
const additionalExtensions = useMemo(()=> {
if(!enableMentions) return []
@ -426,7 +474,7 @@ export default ({
<EditorProvider
slotBefore={
(isFocusedParent || !isMobile || overrideMobile) && (
<MenuBar setEditorRef={setEditorRefFunc} isChat={isChat} />
<MenuBar setEditorRef={setEditorRefFunc} isChat={isChat} isDisabledEditorEnter={isDisabledEditorEnter} setIsDisabledEditorEnter={handleSetIsDisabledEditorEnter} />
)
}
extensions={[...extensionsFiltered, ...additionalExtensions
@ -450,7 +498,7 @@ export default ({
}; max-height:calc(100svh - ${customEditorHeight || "140px"})`: `overflow: auto; max-height: 250px`,
},
handleKeyDown(view, event) {
if (!disableEnter && event.key === "Enter") {
if (!disableEnter && !isDisabledEditorEnter && event.key === "Enter") {
if (event.shiftKey) {
view.dispatch(
view.state.tr.replaceSelectionWith(