From f484411da878bbf160125a1598055ac243be6d96 Mon Sep 17 00:00:00 2001
From: PhilReact <philliplangmartinez@gmail.com>
Date: Tue, 31 Dec 2024 22:31:33 +0200
Subject: [PATCH] added disable enter in chat

---
 src/App.tsx                    | 21 ++++++++++--
 src/atoms/global.ts            |  5 +++
 src/components/Chat/TipTap.tsx | 60 ++++++++++++++++++++++++++++++----
 3 files changed, 78 insertions(+), 8 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 62cf4f0..11b5341 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -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");
diff --git a/src/atoms/global.ts b/src/atoms/global.ts
index 0efe8cd..d23000c 100644
--- a/src/atoms/global.ts
+++ b/src/atoms/global.ts
@@ -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, 
 });
\ No newline at end of file
diff --git a/src/components/Chat/TipTap.tsx b/src/components/Chat/TipTap.tsx
index 234d66e..a420581 100644
--- a/src/components/Chat/TipTap.tsx
+++ b/src/components/Chat/TipTap.tsx
@@ -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(