Fixes : tags, comments (#283)

#283

* Fix add tags menu

* Don't save comment when it is empty

* Add Changeset

Author: xypnox

.changeset/two-steaks-unite.md

@@ -0,0 +1,5 @@
+---
+'mexit-webapp': patch
+---
+
+Fix tag menu, no empty comments

apps/webapp/src/Components/CommentsAndReactions/Comments.tsx

@@ -1,25 +1,26 @@
 import deleteBin6Line from '@iconify/icons-ri/delete-bin-6-line'
-import { Comment as CommentType, defaultContent, NodeEditorContent } from '@mexit/core'
+import { Comment as CommentType, defaultContent, mog, NodeEditorContent } from '@mexit/core'
 import { RelativeTime } from '@mexit/shared'
 import { PlateProvider } from '@udecode/plate'
 import { IconButton } from '@workduck-io/mex-components'
 import { tinykeys } from '@workduck-io/tinykeys'
 import React, { useCallback, useEffect, useMemo } from 'react'
 import { useMentions } from '../../Hooks/useMentions'
 import { useAuthStore } from '../../Stores/useAuth'
+import { areEqual } from '../../Utils/hash'
 import { CommentEditor } from '../CommentEditor'
 import { CommentEditorWrapper } from '../CommentEditor/styled'
 import Plateless from '../Editor/Plateless'
 import { ProfileImage } from '../User/ProfileImage'
 import {
-    CommentActions,
-    CommentAuthor,
-    CommentContentWrapper,
-    CommentHeader,
-    CommentsWrapper,
-    CommentTime,
-    CommentWrapper,
-    NewCommentWrapper
+  CommentActions,
+  CommentAuthor,
+  CommentContentWrapper,
+  CommentHeader,
+  CommentsWrapper,
+  CommentTime,
+  CommentWrapper,
+  NewCommentWrapper
 } from './Comments.style'
 
 type OnAddComment = (content: NodeEditorContent) => Promise<void>
@@ -90,6 +91,7 @@ export const NewComment = ({ onAddComment, byUser }: NewCommentProps) => {
   }
 
   const onSubmit = useCallback(() => {
+    if (areEqual(content, defaultContent.content)) return
     onAddComment(content)
       .then(() => {
         setContent(defaultContent.content)

libs/shared/src/Components/FloatingElements/Dropdown.tsx

@@ -279,8 +279,8 @@ export const MenuComponent = forwardRef<any, Props & React.HTMLProps<HTMLButtonE
           const newChildren = Children.map(children, (child) => {
             if (isValidElement(child) && filtered.includes(child.props.label)) {
               return child
-            }
-          })
+            } else return null
+          }).filter((child) => child !== null)
           setFilteredChildren(newChildren)
         }
         if (search === '') {
@@ -376,8 +376,8 @@ export const MenuComponent = forwardRef<any, Props & React.HTMLProps<HTMLButtonE
                         ref(node: HTMLButtonElement) {
                           listItemsRef.current[index] = node
                         },
-                        onClick() {
-                          child.props.onClick?.()
+                        onClick(e) {
+                          child.props.onClick?.(e)
                           tree?.events.emit('click')
                         },
                         // By default `focusItemOnHover` uses `mousemove` to sync focus,