mirror of
https://github.com/Qortal/chrome-extension.git
synced 2025-02-11 17:55:49 +00:00
added disable enter in chat
This commit is contained in:
parent
b0c940b8e3
commit
f484411da8
21
src/App.tsx
21
src/App.tsx
@ -107,8 +107,8 @@ import { Settings } from "./components/Group/Settings";
|
|||||||
import { MainAvatar } from "./components/MainAvatar";
|
import { MainAvatar } from "./components/MainAvatar";
|
||||||
import { useRetrieveDataLocalStorage } from "./useRetrieveDataLocalStorage";
|
import { useRetrieveDataLocalStorage } from "./useRetrieveDataLocalStorage";
|
||||||
import { useQortalGetSaveSettings } from "./useQortalGetSaveSettings";
|
import { useQortalGetSaveSettings } from "./useQortalGetSaveSettings";
|
||||||
import { useRecoilState, useResetRecoilState } from "recoil";
|
import { useRecoilState, useResetRecoilState, useSetRecoilState } from "recoil";
|
||||||
import { canSaveSettingToQdnAtom, fullScreenAtom, hasSettingsChangedAtom, isUsingImportExportSettingsAtom, oldPinnedAppsAtom, settingsLocalLastUpdatedAtom, settingsQDNLastUpdatedAtom, sortablePinnedAppsAtom } from "./atoms/global";
|
import { canSaveSettingToQdnAtom, fullScreenAtom, hasSettingsChangedAtom, isDisabledEditorEnterAtom, isUsingImportExportSettingsAtom, oldPinnedAppsAtom, settingsLocalLastUpdatedAtom, settingsQDNLastUpdatedAtom, sortablePinnedAppsAtom } from "./atoms/global";
|
||||||
import { useAppFullScreen } from "./useAppFullscreen";
|
import { useAppFullScreen } from "./useAppFullscreen";
|
||||||
import { NotAuthenticated } from "./ExtStates/NotAuthenticated";
|
import { NotAuthenticated } from "./ExtStates/NotAuthenticated";
|
||||||
import { useFetchResources } from "./common/useFetchResources";
|
import { useFetchResources } from "./common/useFetchResources";
|
||||||
@ -329,6 +329,7 @@ function App() {
|
|||||||
const {downloadResource} = useFetchResources()
|
const {downloadResource} = useFetchResources()
|
||||||
const [showSeed, setShowSeed] = useState(false)
|
const [showSeed, setShowSeed] = useState(false)
|
||||||
const [creationStep, setCreationStep] = useState(1)
|
const [creationStep, setCreationStep] = useState(1)
|
||||||
|
const setIsDisabledEditorEnter = useSetRecoilState(isDisabledEditorEnterAtom)
|
||||||
const {
|
const {
|
||||||
isShow: isShowInfo,
|
isShow: isShowInfo,
|
||||||
onCancel: onCancelInfo,
|
onCancel: onCancelInfo,
|
||||||
@ -458,6 +459,8 @@ function App() {
|
|||||||
}
|
}
|
||||||
}, [extState]);
|
}, [extState]);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
isFocusedRef.current = isFocused;
|
isFocusedRef.current = isFocused;
|
||||||
}, [isFocused]);
|
}, [isFocused]);
|
||||||
@ -968,6 +971,20 @@ function App() {
|
|||||||
getUserInfo();
|
getUserInfo();
|
||||||
}, [address]);
|
}, [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(() => {
|
useEffect(() => {
|
||||||
return () => {
|
return () => {
|
||||||
console.log("exit");
|
console.log("exit");
|
||||||
|
@ -141,4 +141,9 @@ export const addressInfoKeySelector = selectorFamily({
|
|||||||
const userInfo = get(addressInfoControllerAtom);
|
const userInfo = get(addressInfoControllerAtom);
|
||||||
return userInfo[key] || null; // Return the value for the key or null if not found
|
return userInfo[key] || null; // Return the value for the key or null if not found
|
||||||
},
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export const isDisabledEditorEnterAtom = atom({
|
||||||
|
key: 'isDisabledEditorEnterAtom',
|
||||||
|
default: false,
|
||||||
});
|
});
|
@ -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 { EditorProvider, useCurrentEditor, useEditor } from "@tiptap/react";
|
||||||
import StarterKit from "@tiptap/starter-kit";
|
import StarterKit from "@tiptap/starter-kit";
|
||||||
import { Color } from "@tiptap/extension-color";
|
import { Color } from "@tiptap/extension-color";
|
||||||
@ -34,6 +34,9 @@ import ListItemButton from '@mui/material/ListItemButton';
|
|||||||
import ListItemText from '@mui/material/ListItemText';
|
import ListItemText from '@mui/material/ListItemText';
|
||||||
import { ReactRenderer } from '@tiptap/react'
|
import { ReactRenderer } from '@tiptap/react'
|
||||||
import MentionList from './MentionList.jsx'
|
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) {
|
function textMatcher(doc, from) {
|
||||||
const textBeforeCursor = doc.textBetween(0, from, ' ', ' ');
|
const textBeforeCursor = doc.textBetween(0, from, ' ', ' ');
|
||||||
@ -44,7 +47,7 @@ function textMatcher(doc, from) {
|
|||||||
const query = match[0];
|
const query = match[0];
|
||||||
return { start, query };
|
return { start, query };
|
||||||
}
|
}
|
||||||
const MenuBar = ({ setEditorRef, isChat }) => {
|
const MenuBar = ({ setEditorRef, isChat, isDisabledEditorEnter, setIsDisabledEditorEnter }) => {
|
||||||
const { editor } = useCurrentEditor();
|
const { editor } = useCurrentEditor();
|
||||||
const fileInputRef = useRef(null);
|
const fileInputRef = useRef(null);
|
||||||
|
|
||||||
@ -120,7 +123,9 @@ const MenuBar = ({ setEditorRef, isChat }) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="control-group">
|
<div className="control-group">
|
||||||
<div className="button-group">
|
<div className="button-group" style={{
|
||||||
|
display: 'flex'
|
||||||
|
}}>
|
||||||
<IconButton
|
<IconButton
|
||||||
onClick={() => editor.chain().focus().toggleBold().run()}
|
onClick={() => editor.chain().focus().toggleBold().run()}
|
||||||
disabled={!editor.can().chain().focus().toggleBold().run()}
|
disabled={!editor.can().chain().focus().toggleBold().run()}
|
||||||
@ -244,6 +249,43 @@ const MenuBar = ({ setEditorRef, isChat }) => {
|
|||||||
>
|
>
|
||||||
<RedoIcon />
|
<RedoIcon />
|
||||||
</IconButton>
|
</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 && (
|
{!isChat && (
|
||||||
<>
|
<>
|
||||||
<IconButton
|
<IconButton
|
||||||
@ -300,7 +342,7 @@ export default ({
|
|||||||
membersWithNames,
|
membersWithNames,
|
||||||
enableMentions
|
enableMentions
|
||||||
}) => {
|
}) => {
|
||||||
|
const [isDisabledEditorEnter, setIsDisabledEditorEnter] = useRecoilState(isDisabledEditorEnterAtom)
|
||||||
const extensionsFiltered = isChat
|
const extensionsFiltered = isChat
|
||||||
? extensions.filter((item) => item?.name !== "image")
|
? extensions.filter((item) => item?.name !== "image")
|
||||||
: extensions;
|
: extensions;
|
||||||
@ -347,6 +389,12 @@ export default ({
|
|||||||
// Set focus state based on content
|
// Set focus state based on content
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
const handleSetIsDisabledEditorEnter = useCallback((val)=> {
|
||||||
|
setIsDisabledEditorEnter(val)
|
||||||
|
localStorage.setItem('settings-disable-editor-enter', JSON.stringify(val));
|
||||||
|
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
|
||||||
const additionalExtensions = useMemo(()=> {
|
const additionalExtensions = useMemo(()=> {
|
||||||
if(!enableMentions) return []
|
if(!enableMentions) return []
|
||||||
@ -426,7 +474,7 @@ export default ({
|
|||||||
<EditorProvider
|
<EditorProvider
|
||||||
slotBefore={
|
slotBefore={
|
||||||
(isFocusedParent || !isMobile || overrideMobile) && (
|
(isFocusedParent || !isMobile || overrideMobile) && (
|
||||||
<MenuBar setEditorRef={setEditorRefFunc} isChat={isChat} />
|
<MenuBar setEditorRef={setEditorRefFunc} isChat={isChat} isDisabledEditorEnter={isDisabledEditorEnter} setIsDisabledEditorEnter={handleSetIsDisabledEditorEnter} />
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
extensions={[...extensionsFiltered, ...additionalExtensions
|
extensions={[...extensionsFiltered, ...additionalExtensions
|
||||||
@ -450,7 +498,7 @@ export default ({
|
|||||||
}; max-height:calc(100svh - ${customEditorHeight || "140px"})`: `overflow: auto; max-height: 250px`,
|
}; max-height:calc(100svh - ${customEditorHeight || "140px"})`: `overflow: auto; max-height: 250px`,
|
||||||
},
|
},
|
||||||
handleKeyDown(view, event) {
|
handleKeyDown(view, event) {
|
||||||
if (!disableEnter && event.key === "Enter") {
|
if (!disableEnter && !isDisabledEditorEnter && event.key === "Enter") {
|
||||||
if (event.shiftKey) {
|
if (event.shiftKey) {
|
||||||
view.dispatch(
|
view.dispatch(
|
||||||
view.state.tr.replaceSelectionWith(
|
view.state.tr.replaceSelectionWith(
|
||||||
|
Loading…
x
Reference in New Issue
Block a user