Merge pull request #184 from pneumaticapp/frontend/editor/45330__fix_tagging_in_comment_boxes

45330 frontend [ editor ] Fix tagging in comment boxes

Author: Maria-Lordwill

frontend/src/public/components/Field/Field.tsx

@@ -107,6 +107,7 @@ export function Field({
             }}
             className={styles['rich-editor']}
             accountId={accountId as number}
+            withMentions={false}
           />
         );
       default:

frontend/src/public/components/RichEditor/__tests__/RichEditor.integration.test.tsx

@@ -36,7 +36,7 @@ describe('RichEditor integration', () => {
 
   it('contract: ref exposes focus, insertVariable, clearContent, getEditor', () => {
     const ref = React.createRef<IRichEditorHandle>();
-    render(<RichEditor ref={ref} handleChange={() => Promise.resolve('')} />);
+    render(<RichEditor ref={ref} handleChange={() => Promise.resolve('')} withMentions={false} />);
     expect(ref.current).not.toBeNull();
     expect(typeof ref.current?.focus).toBe('function');
     expect(typeof ref.current?.insertVariable).toBe('function');
@@ -46,7 +46,7 @@ describe('RichEditor integration', () => {
 
   it('contract: handleChange is invoked when parent passes it', () => {
     const handleChange = jest.fn().mockResolvedValue('');
-    render(<RichEditor handleChange={handleChange} />);
+    render(<RichEditor handleChange={handleChange} withMentions={false} />);
     expect(handleChange).not.toHaveBeenCalled();
   });
 });

frontend/src/public/components/RichEditor/plugins/MentionsPlugin/MentionMenuList.tsx

@@ -52,7 +52,7 @@ function MentionMenuListComponent({
         position: 'fixed',
         top: rect.bottom + 4,
         left: rect.left,
-        zIndex: 10,
+        zIndex: 1100,
       }}
       onMouseDown={(e) => e.preventDefault()}
     >

frontend/src/public/components/RichEditor/plugins/MentionsPlugin/MentionsPlugin.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { createPortal } from 'react-dom';
 import { useMentionMenu } from './useMentionMenu';
 import { MentionMenuList } from './MentionMenuList';
 import type { MentionsPluginProps } from './types';
@@ -29,5 +28,5 @@ export function MentionsPlugin({ mentions }: MentionsPluginProps): React.ReactEl
     />
   );
 
-  return createPortal(menuContent, document.body);
+  return menuContent;
 }

frontend/src/public/components/RichEditor/types.ts

@@ -20,14 +20,12 @@ export type TMentionData = {
   link?: string;
 };
 
-export interface IRichEditorProps {
+export interface IRichEditorBaseProps {
   isModal?: boolean;
   accountId?: number;
-  mentions?: TMentionData[];
   placeholder?: string;
   className?: string;
   defaultValue?: string;
-  withMentions?: boolean;
   withToolbar?: boolean;
   withChecklists?: boolean;
   multiline?: boolean;
@@ -46,6 +44,18 @@ export interface IRichEditorProps {
   onCancel?(): void;
 }
 
+type WithMentionsProps = {
+  withMentions?: true;
+  mentions: TMentionData[];
+};
+
+type WithoutMentionsProps = {
+  withMentions: false;
+  mentions?: never;
+};
+
+export type IRichEditorProps = IRichEditorBaseProps & (WithMentionsProps | WithoutMentionsProps);
+
 export interface ILexicalEditorContentProps {
   placeholder?: string;
   withChecklists?: boolean;

frontend/src/public/components/TaskCard/ReturnModal/ReturnModal.tsx

@@ -37,6 +37,7 @@ export function ReturnModal({ isOpen, onClose, onConfirm }: IReturnModalProps) {
               return message;
             }}
             isModal={isModal}
+            withMentions={false}
           />
         </div>
 

frontend/src/public/components/TemplateEdit/InputWithVariables/InputWithVariables.tsx

@@ -55,6 +55,7 @@ export const InputWithVariables: React.FC<IEditorWithVariablesProps> = ({
       defaultValue={formattedValue}
       handleChange={onChange}
       withToolbar={false}
+      withMentions={false}
       multiline={false}
       className={classnames(className, styles['input-with-variables'])}
       foregroundColor={foregroundColor}

frontend/src/public/components/TemplateEdit/TemplateSettings/TemplateSettings.tsx

@@ -79,6 +79,7 @@ export function TemplateSettings() {
           <RichEditor
             key={template.id ?? 'new'}
             withToolbar={false}
+            withMentions={false}
             placeholder={formatMessage({ id: 'template.placeholder' })}
             className={styles['description-editor']}
             defaultValue={template.description ?? ''}

frontend/src/public/components/Workflows/WorkflowLog/PopupCommentField/PopupCommentField.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useIntl } from 'react-intl';
 
 import { RichEditor, type IRichEditorHandle } from '../../../RichEditor';
+import { type TMentionData } from '../../../RichEditor/types';
 import { Avatar } from '../../../UI/Avatar';
 import { IAuthUser } from '../../../../types/redux';
 import { TUploadedFile } from '../../../../utils/uploadFiles';
@@ -13,13 +14,14 @@ import styles from './PopupCommentField.css';
 
 export interface IPopupCommentFieldProps {
   user: IAuthUser;
+  mentions: TMentionData[];
   sendComment({ text, attachments, taskId }: ISendWorkflowLogComment): void;
   taskId?: number;
 }
 
 export type TPopupCommentFieldProps = IPopupCommentFieldProps;
 
-export function PopupCommentField({ user, sendComment, taskId }: TPopupCommentFieldProps) {
+export function PopupCommentField({ user, mentions, sendComment, taskId }: TPopupCommentFieldProps) {
   const { formatMessage } = useIntl();
   const editorRef = React.useRef<IRichEditorHandle>(null);
 
@@ -56,6 +58,7 @@ export function PopupCommentField({ user, sendComment, taskId }: TPopupCommentFi
           onSubmit={handleSendComment}
           className={styles['editor']}
           accountId={user.id}
+          mentions={mentions}
         />
       </div>
     </div>

frontend/src/public/components/Workflows/WorkflowLog/WorkflowLog.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
+import { useSelector } from 'react-redux';
 import classnames from 'classnames';
 import { useIntl } from 'react-intl';
 import Switch from 'rc-switch';
@@ -41,6 +42,9 @@ import { WorkflowLogRemovedPerformerGroup } from './WorkflowLogEvents/WorkflowLo
 
 import styles from './WorkflowLog.css';
 import { IChangeWorkflowLogViewSettingsPayload, ISendWorkflowLogComment } from '../../../redux/workflows/types';
+import { getUsers } from '../../../redux/selectors/user';
+import { getNotDeletedUsers } from '../../../utils/users';
+import { getMentionData } from '../../RichEditor/utils/getMentionData';
 
 export const WorkflowLog = ({
   theme,
@@ -69,6 +73,12 @@ export const WorkflowLog = ({
 }: IWorkflowLogProps) => {
   const { formatMessage } = useIntl();
 
+  const users = useSelector(getUsers);
+  const mentions = useMemo(
+    () => getMentionData(getNotDeletedUsers(users)),
+    [users],
+  );
+
   useEffect(() => {
     return () => {
       if (onUnmount) {
@@ -213,7 +223,7 @@ export const WorkflowLog = ({
 
     return (
       <div className={styles['comment-field']}>
-        <PopupCommentFieldContainer sendComment={sendComment} taskId={taskId} />
+        <PopupCommentFieldContainer sendComment={sendComment} taskId={taskId} mentions={mentions} />
       </div>
     );
   };
@@ -270,6 +280,7 @@ export const WorkflowLog = ({
           <WorkflowLogTaskCommentContainer
             workflowStatus={workflowStatus}
             isOnlyAttachmentsShown={isOnlyAttachmentsShown}
+            mentions={mentions}
             {...event}
           />
         ),