fixes

2025-02-11 17:55:49 +00:00 · 2024-09-27 02:03:44 +03:00 · 2024-09-27 02:03:44 +03:00 · c577b91dfe
commit c577b91dfe
parent 9b14f5be19
4 changed files with 228 additions and 218 deletions
--- a/src/components/Chat/TipTap.tsx
+++ b/src/components/Chat/TipTap.tsx
@ -1,34 +1,35 @@
-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';
-import ListItem from '@tiptap/extension-list-item';
-import TextStyle from '@tiptap/extension-text-style';
-import Placeholder from '@tiptap/extension-placeholder'  
-import Image from '@tiptap/extension-image'; 
-import IconButton from '@mui/material/IconButton';
-import FormatBoldIcon from '@mui/icons-material/FormatBold';
-import FormatItalicIcon from '@mui/icons-material/FormatItalic';
-import StrikethroughSIcon from '@mui/icons-material/StrikethroughS';
-import FormatClearIcon from '@mui/icons-material/FormatClear';
-import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted';
-import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered';
-import CodeIcon from '@mui/icons-material/Code';
-import ImageIcon from '@mui/icons-material/Image'; // Import Image icon
-import FormatQuoteIcon from '@mui/icons-material/FormatQuote';
-import HorizontalRuleIcon from '@mui/icons-material/HorizontalRule';
-import UndoIcon from '@mui/icons-material/Undo';
-import RedoIcon from '@mui/icons-material/Redo';
-import FormatHeadingIcon from '@mui/icons-material/FormatSize';
-import DeveloperModeIcon from '@mui/icons-material/DeveloperMode';
-import CustomImage from './CustomImage';
-import Compressor from 'compressorjs'
+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";
+import ListItem from "@tiptap/extension-list-item";
+import TextStyle from "@tiptap/extension-text-style";
+import Placeholder from "@tiptap/extension-placeholder";
+import Image from "@tiptap/extension-image";
+import IconButton from "@mui/material/IconButton";
+import FormatBoldIcon from "@mui/icons-material/FormatBold";
+import FormatItalicIcon from "@mui/icons-material/FormatItalic";
+import StrikethroughSIcon from "@mui/icons-material/StrikethroughS";
+import FormatClearIcon from "@mui/icons-material/FormatClear";
+import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
+import FormatListNumberedIcon from "@mui/icons-material/FormatListNumbered";
+import CodeIcon from "@mui/icons-material/Code";
+import ImageIcon from "@mui/icons-material/Image"; // Import Image icon
+import FormatQuoteIcon from "@mui/icons-material/FormatQuote";
+import HorizontalRuleIcon from "@mui/icons-material/HorizontalRule";
+import UndoIcon from "@mui/icons-material/Undo";
+import RedoIcon from "@mui/icons-material/Redo";
+import FormatHeadingIcon from "@mui/icons-material/FormatSize";
+import DeveloperModeIcon from "@mui/icons-material/DeveloperMode";
+import Compressor from "compressorjs";
+
+import ImageResize from "tiptap-extension-resize-image"; // Import the ResizeImage extension
+import { isMobile } from "../../App";

-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); 
+  const fileInputRef = useRef(null);
+
  if (!editor) {
    return null;
  }
@ -39,33 +40,35 @@ const MenuBar = ({ setEditorRef, isChat }) => {
    }
  }, [editor, setEditorRef]);

-  const handleImageUpload = async (event) => {
-   
-    const file = event.target.files[0];
-   
-    let compressedFile
+  const handleImageUpload = async (file) => {
+    let compressedFile;
    await new Promise<void>((resolve) => {
      new Compressor(file, {
        quality: 0.6,
        maxWidth: 1200,
-        mimeType: 'image/webp',
+        mimeType: "image/webp",
        success(result) {
-          const file = new File([result], 'name', {
-            type: 'image/webp'
-          })
-          compressedFile = file
-          resolve()
+          compressedFile = new File([result], "image.webp", {
+            type: "image/webp",
+          });
+          resolve();
        },
-        error(err) {}
-      })
-    })
-   
+        error(err) {
+          console.error("Image compression error:", err);
+        },
+      });
+    });
+
    if (compressedFile) {
      const reader = new FileReader();
      reader.onload = () => {
        const url = reader.result;
-        editor.chain().focus().setImage({ src: url , style: "width: auto"}).run();
-        fileInputRef.current.value = '';
+        editor
+          .chain()
+          .focus()
+          .setImage({ src: url, style: "width: auto" })
+          .run();
+        fileInputRef.current.value = "";
      };
      reader.readAsDataURL(compressedFile);
    }
@ -75,200 +78,171 @@ const MenuBar = ({ setEditorRef, isChat }) => {
    fileInputRef.current.click(); // Trigger the file input click
  };

+  const handlePaste = (event) => {
+    const items = event.clipboardData.items;
+    for (const item of items) {
+      if (item.type.startsWith("image/")) {
+        const file = item.getAsFile();
+        if (file) {
+          event.preventDefault(); // Prevent the default paste behavior
+          handleImageUpload(file); // Call the image upload function
+        }
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (editor) {
+      editor.view.dom.addEventListener("paste", handlePaste);
+      return () => {
+        editor.view.dom.removeEventListener("paste", handlePaste);
+      };
+    }
+  }, [editor]);
+
  return (
    <div className="control-group">
      <div className="button-group">
        <IconButton
          onClick={() => editor.chain().focus().toggleBold().run()}
-          disabled={
-            !editor.can()
-              .chain()
-              .focus()
-              .toggleBold()
-              .run()
-          }
-          // color={editor.isActive('bold') ? 'white' : 'gray'}
+          disabled={!editor.can().chain().focus().toggleBold().run()}
          sx={{
-            color: editor.isActive('bold') ? 'white' : 'gray',
-            padding: isMobile ? '5px' : 'revert'
+            color: editor.isActive("bold") ? "white" : "gray",
+            padding: isMobile ? "5px" : "revert",
          }}
        >
-          <FormatBoldIcon  />
+          <FormatBoldIcon />
        </IconButton>
        <IconButton
          onClick={() => editor.chain().focus().toggleItalic().run()}
-          disabled={
-            !editor.can()
-              .chain()
-              .focus()
-              .toggleItalic()
-              .run()
-          }
-          // color={editor.isActive('italic') ? 'white' : 'gray'}
+          disabled={!editor.can().chain().focus().toggleItalic().run()}
          sx={{
-            color: editor.isActive('italic') ? 'white' : 'gray',
-            padding: isMobile ? '5px' : 'revert'
+            color: editor.isActive("italic") ? "white" : "gray",
+            padding: isMobile ? "5px" : "revert",
          }}
        >
          <FormatItalicIcon />
        </IconButton>
        <IconButton
          onClick={() => editor.chain().focus().toggleStrike().run()}
-          disabled={
-            !editor.can()
-              .chain()
-              .focus()
-              .toggleStrike()
-              .run()
-          }
-          // color={editor.isActive('strike') ? 'white' : 'gray'}
+          disabled={!editor.can().chain().focus().toggleStrike().run()}
          sx={{
-            color: editor.isActive('strike') ? 'white' : 'gray',
-            padding: isMobile ? '5px' : 'revert'
+            color: editor.isActive("strike") ? "white" : "gray",
+            padding: isMobile ? "5px" : "revert",
          }}
        >
          <StrikethroughSIcon />
        </IconButton>
        <IconButton
          onClick={() => editor.chain().focus().toggleCode().run()}
-          disabled={
-            !editor.can()
-              .chain()
-              .focus()
-              .toggleCode()
-              .run()
-          }
-          // color={editor.isActive('code') ? 'white' : 'gray'}
+          disabled={!editor.can().chain().focus().toggleCode().run()}
          sx={{
-            color: editor.isActive('code') ? 'white' : 'gray',
-            padding: isMobile ? '5px' : 'revert'
+            color: editor.isActive("code") ? "white" : "gray",
+            padding: isMobile ? "5px" : "revert",
          }}
        >
          <CodeIcon />
        </IconButton>
        <IconButton
-  onClick={() => editor.chain().focus().unsetAllMarks().run()}
-  sx={{
-    color: editor.isActive('bold') || editor.isActive('italic') || editor.isActive('strike') || editor.isActive('code') 
-      ? 'white' 
-      : 'gray',
-    padding: isMobile ? '5px' : 'revert',
-  }}
->
-  <FormatClearIcon />
-</IconButton>
+          onClick={() => editor.chain().focus().unsetAllMarks().run()}
+          sx={{
+            color:
+              editor.isActive("bold") ||
+              editor.isActive("italic") ||
+              editor.isActive("strike") ||
+              editor.isActive("code")
+                ? "white"
+                : "gray",
+            padding: isMobile ? "5px" : "revert",
+          }}
+        >
+          <FormatClearIcon />
+        </IconButton>
        <IconButton
          onClick={() => editor.chain().focus().toggleBulletList().run()}
-          // color={editor.isActive('bulletList') ? 'white' : 'gray'}
          sx={{
-            color: editor.isActive('bulletList') ? 'white' : 'gray',
-            padding: isMobile ? '5px' : 'revert'
+            color: editor.isActive("bulletList") ? "white" : "gray",
+            padding: isMobile ? "5px" : "revert",
          }}
        >
          <FormatListBulletedIcon />
        </IconButton>
        <IconButton
          onClick={() => editor.chain().focus().toggleOrderedList().run()}
-          // color={editor.isActive('orderedList') ? 'white' : 'gray'}
          sx={{
-            color: editor.isActive('orderedList') ? 'white' : 'gray',
-            padding: isMobile ? '5px' : 'revert'
+            color: editor.isActive("orderedList") ? "white" : "gray",
+            padding: isMobile ? "5px" : "revert",
          }}
        >
          <FormatListNumberedIcon />
        </IconButton>
        <IconButton
          onClick={() => editor.chain().focus().toggleCodeBlock().run()}
-          // color={editor.isActive('codeBlock') ? 'white' : 'gray'}
          sx={{
-            color: editor.isActive('codeBlock') ? 'white' : 'gray',
-            padding: isMobile ? '5px' : 'revert'
+            color: editor.isActive("codeBlock") ? "white" : "gray",
+            padding: isMobile ? "5px" : "revert",
          }}
        >
          <DeveloperModeIcon />
        </IconButton>
        <IconButton
          onClick={() => editor.chain().focus().toggleBlockquote().run()}
-          // color={editor.isActive('blockquote') ? 'white' : 'gray'}
          sx={{
-            color: editor.isActive('blockquote') ? 'white' : 'gray',
-            padding: isMobile ? '5px' : 'revert'
+            color: editor.isActive("blockquote") ? "white" : "gray",
+            padding: isMobile ? "5px" : "revert",
          }}
        >
          <FormatQuoteIcon />
        </IconButton>
        <IconButton
-  onClick={() => editor.chain().focus().setHorizontalRule().run()}
-  disabled={!editor.can().chain().focus().setHorizontalRule().run()}
-  sx={{
-    color:  'gray',
-    padding: isMobile ? '5px' : 'revert',
-  }}
->
-  <HorizontalRuleIcon />
-</IconButton>
+          onClick={() => editor.chain().focus().setHorizontalRule().run()}
+          disabled={!editor.can().chain().focus().setHorizontalRule().run()}
+          sx={{ color: "gray", padding: isMobile ? "5px" : "revert" }}
+        >
+          <HorizontalRuleIcon />
+        </IconButton>
        <IconButton
-          onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
-          // color={editor.isActive('heading', { level: 1 }) ? 'white' : 'gray'}
+          onClick={() =>
+            editor.chain().focus().toggleHeading({ level: 1 }).run()
+          }
          sx={{
-            color: editor.isActive('heading', { level: 1 }) ? 'white' : 'gray',
-            padding: isMobile ? '5px' : 'revert'
+            color: editor.isActive("heading", { level: 1 }) ? "white" : "gray",
+            padding: isMobile ? "5px" : "revert",
          }}
        >
          <FormatHeadingIcon fontSize="small" />
        </IconButton>
        <IconButton
          onClick={() => editor.chain().focus().undo().run()}
-          disabled={
-            !editor.can()
-              .chain()
-              .focus()
-              .undo()
-              .run()
-          }
-          sx={{
-            color: 'gray',
-            padding: isMobile ? '5px' : 'revert'
-          }}
+          disabled={!editor.can().chain().focus().undo().run()}
+          sx={{ color: "gray", padding: isMobile ? "5px" : "revert" }}
        >
          <UndoIcon />
        </IconButton>
        <IconButton
-          sx={{
-            color: 'gray'
-          }}
          onClick={() => editor.chain().focus().redo().run()}
-          disabled={
-            !editor.can()
-              .chain()
-              .focus()
-              .redo()
-              .run()
-          }
+          disabled={!editor.can().chain().focus().redo().run()}
+          sx={{ color: "gray" }}
        >
          <RedoIcon />
        </IconButton>
        {!isChat && (
          <>
-           <IconButton
-          onClick={triggerImageUpload}
-          sx={{
-            color: 'gray',
-            padding: isMobile ? '5px' : 'revert'
-          }}
-        >
-          <ImageIcon />
-        </IconButton>
-        <input
-          type="file"
-          ref={fileInputRef}
-          style={{ display: 'none' }}
-          onChange={handleImageUpload}
-          accept="image/*" // Limit file types to images only
-        />
+            <IconButton
+              onClick={triggerImageUpload}
+              sx={{ color: "gray", padding: isMobile ? "5px" : "revert" }}
+            >
+              <ImageIcon />
+            </IconButton>
+            <input
+              type="file"
+              ref={fileInputRef}
+              style={{ display: "none" }}
+              onChange={(event) => handleImageUpload(event.target.files[0])}
+              accept="image/*"
+            />
          </>
        )}
-       
      </div>
    </div>
  );
@ -288,73 +262,91 @@ const extensions = [
    },
  }),
  Placeholder.configure({
-    placeholder: 'Start typing here...',  // Add your placeholder text here
+    placeholder: "Start typing here...",
  }),
  ImageResize,
 ];

 const content = ``;

-export default ({ setEditorRef, onEnter, disableEnter, isChat, maxHeightOffset,  setIsFocusedParent, isFocusedParent, overrideMobile, customEditorHeight }) => {
+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 extensionsFiltered = isChat
+    ? extensions.filter((item) => item?.name !== "image")
+    : extensions;
  const editorRef = useRef(null);
  const setEditorRefFunc = (editorInstance) => {
    editorRef.current = editorInstance;
-    setEditorRef(editorInstance)
+    setEditorRef(editorInstance);
  };
+
  const handleFocus = () => {
-    if(!isMobile) return
-    // setIsFocused(true);
-    setIsFocusedParent(true)
+    if (!isMobile) return;
+    setIsFocusedParent(true);
  };

  const handleBlur = () => {
    const htmlContent = editorRef.current.getHTML();
-      
-        if (!htmlContent?.trim() || htmlContent?.trim() === "<p></p>"){
-          // setIsFocused(false);
-          // setIsFocusedParent(false)
-        };
-    
+    if (!htmlContent?.trim() || htmlContent?.trim() === "<p></p>") {
+      // Set focus state based on content
+    }
  };
-  // useEffect(()=> {
-  //   setIsFocused(isFocusedParent)
-  // },[isFocusedParent])

  return (
    <EditorProvider
-    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 }) => {
+      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();
+      editorProps={{
+        attributes: {
+          class: "tiptap-prosemirror",
+          style:
+            isMobile &&
+            `overflow: auto; min-height: ${
+              customEditorHeight ? "200px" : "0px"
+            }; max-height:calc(100svh - ${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 true;
          }
-        }
-        return false;
-      },
-    }}
-  />
-  )
+          return false;
+        },
+      }}
+    />
+  );
 };
--- a/src/components/Group/Forum/GroupMail.tsx
+++ b/src/components/Group/Forum/GroupMail.tsx
@ -53,7 +53,7 @@ import ArrowDownSVG from "../../../assets/svgs/ArrowDown.svg";
 import { LoadingSnackbar } from "../../Snackbar/LoadingSnackbar";
 import { executeEvent, subscribeToEvent, unsubscribeFromEvent } from "../../../utils/events";
 import RefreshIcon from '@mui/icons-material/Refresh';
-import { getArbitraryEndpointReact, getBaseApiReact } from "../../../App";
+import { getArbitraryEndpointReact, getBaseApiReact, isMobile } from "../../../App";
 import { WrapperUserAction } from "../../WrapperUserAction";
 import { addDataPublishesFunc, getDataPublishesFunc } from "../Group";
 const filterOptions = ["Recently active", "Newest", "Oldest"];
@ -105,12 +105,15 @@ export const GroupMail = ({
  const setTempData = async ()=> {
    try {
      const getTempAnnouncements = await getTempPublish()
-
+      
  if(getTempAnnouncements?.thread){
    let tempData = []
    Object.keys(getTempAnnouncements?.thread || {}).map((key)=> {
      const value = getTempAnnouncements?.thread[key]
-      tempData.push(value.data)
+      if(value?.data?.groupId === groupIdRef?.current){
+        tempData.push(value.data)
+      }
+     
    })
    setTempPublishedList(tempData)
  }
@ -720,15 +723,18 @@ export const GroupMail = ({
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "center",
+                    width: '100%'
                  }}
                >
                  <ThreadSingleTitle
                    sx={{
                      fontWeight: shouldAppearLighter && 300,
+                      fontSize: isMobile && '18px'
                    }}
                  >
                    {thread?.threadData?.title}
                  </ThreadSingleTitle>
+                  <Spacer height="10px" />
                  {filterMode === "Recently active" && (
                    <div
                      style={{
--- a/src/components/Group/Forum/NewThread.tsx
+++ b/src/components/Group/Forum/NewThread.tsx
@ -172,7 +172,10 @@ export const NewThread = ({
  const closeModal = () => {
    setIsOpen(false);
    setValue("");
-    setPostReply(null)
+    if(setPostReply){
+      setPostReply(null)
+    }
+   
  };

  async function publishQDNResource() {
@ -288,6 +291,7 @@ export const NewThread = ({
          service: 'DOCUMENT',
          tempData: threadObject,
          created: Date.now(),
+          groupId: groupInfo.groupId
        }
        const dataToSaveToStoragePost = {
          name: myName,
@ -313,15 +317,7 @@ export const NewThread = ({
        // );
        if (publishCallback) {
          publishCallback()
-          // threadCallback({
-          //   threadData: threadObject,
-          //   threadOwner: name,
-          //   name,
-          //   threadId: identifierThread,
-          //   created: Date.now(),
-          //   service: 'MAIL_PRIVATE',
-          //   identifier: identifier
-          // })
+    
        }
        closeModal();
      } else {
--- a/src/components/ReactionPicker.tsx
+++ b/src/components/ReactionPicker.tsx
@ -44,13 +44,28 @@ export const ReactionPicker = ({ onReaction }) => {
      {/* Emoji CTA */}
      <ButtonBase sx={{
        fontSize: '22px'
-      }} onClick={() => setShowPicker(!showPicker)}>
+      }} 
+      // onTouchStart={(e) => {
+      //   e.preventDefault(); // Prevent mobile keyboard
+      //   e.stopPropagation(); 
+      //   if(!isMobile) return
+      //   setShowPicker(!showPicker);
+      // }}
+      onClick={(e) => {
+        e.preventDefault(); // Prevents any focus issues
+        e.stopPropagation(); 
+        // if(isMobile) return
+
+        setShowPicker(!showPicker);
+      }}
+      
+      >
        😃
      </ButtonBase>

      {/* Emoji Picker with dark theme */}
      {showPicker && (
-        <div className="emoji-picker" ref={pickerRef}>
+        <div className="emoji-picker" ref={pickerRef} onClick={(e) => e.preventDefault()}>
          <Picker
            height={isMobile ? 300 : 450}
            width={isMobile ? 250 : 350 }
@ -58,6 +73,7 @@ export const ReactionPicker = ({ onReaction }) => {
            onReactionClick={handleReaction}
            onEmojiClick={handlePicker}
            allowExpandReactions={true}
+            autoFocusSearch={false}
            theme={Theme.DARK} 
          />
        </div>