bug: The pinned status of the message is lost after editing it. #2845
Description
Describe the bug
The pinned status of the message is lost after editing it.
I have used the code below.
To Reproduce
Step 1: Send a message
Step 2: Edit the message
Step 3: Pin the message
Step 4 :Edit the message again
Step 5: Observe the issue
import { CHANNEL_TYPE_OBJ, CLIENT_TEAM_OBJ } from '@support/modules/messenger.constant';
import { uploadFileHandler } from '@support/utils/utils';
import { useEffect } from 'react';
import type { Channel as ChannelType, MessageComposer, MessageCompositionMiddleware, TextComposerMiddleware } from 'stream-chat';
import { createMentionsMiddleware, MentionsSearchSource, StreamChat } from 'stream-chat';
const mentionAll = {
id: 'mentionsAll',
name: 'All',
image: 'https://dev.storage.fastboy.dev/crm/storage_objects/av/avatar-06864fe7-cc3e-40a0-91ea-54d50ec098cf-622bcbedce9ee346769677.avatar',
tokenizedDisplayName: {
token: '',
parts: ['All']
}
};
class CustomMentionsSearchSource extends MentionsSearchSource {
private isInCompany: boolean;
private isGroup: boolean;
constructor(channel: ChannelType) {
super(channel);
this.isInCompany = channel.data?.team === CLIENT_TEAM_OBJ.INTERNAL;
this.isGroup = channel.data?.type === CHANNEL_TYPE_OBJ.TEAM;
}
query = async (searchQuery: string) => {
const result = await super.query(searchQuery);
const items = this.isInCompany ? [...result.items, ...(this.isGroup ? [mentionAll] : [])] : [];
return {
items
};
};
}
const editingMiddleware = (composer: MessageComposer): MessageCompositionMiddleware => ({
id: 'message-composer/custom/editing-state',
handlers: {
compose: async ({ state, next, complete }) => {
if (composer?.editedMessage) {
const localMemntionedUsers = state?.localMessage?.mentioned_users?.filter((user) => user?.id !== 'mentionsAll');
const mentioned_users = composer?.editedMessage?.mentioned_users?.filter((user) => user?.id !== 'mentionsAll').map((user) => user.id);
console.log('state', state);
console.log('composer', composer);
const custom_fields = {
...composer?.editedMessage?.custom_fields,
forward: false,
message_forward: undefined
};
return next({
...state,
localMessage: {
...state.localMessage,
mentioned_users: localMemntionedUsers,
custom_fields
},
message: {
...state.message,
mentioned_users,
custom_fields
}
});
}
console.log('state', state);
return next(state);
}
}
});
export const useComposerSetupFunction = (clientChat: StreamChat | null, isInCompany: boolean) => {
useEffect(() => {
if (!clientChat) return;
clientChat.setMessageComposerSetupFunction(({ composer }) => {
composer.updateConfig({
drafts: { enabled: true },
attachments: {
maxNumberOfFilesPerMessage: 10,
doUploadRequest: uploadFileHandler
},
text: {
publishTypingEvents: true
}
});
composer.textComposer.middlewareExecutor.replace([
createMentionsMiddleware(composer.channel, {
searchSource: new CustomMentionsSearchSource(composer.channel)
}) as TextComposerMiddleware
]);
composer.compositionMiddlewareExecutor.insert({
middleware: [editingMiddleware(composer)],
position: { after: 'stream-io/message-composer-middleware/text-composition' }
});
});
}, [clientChat, isInCompany]);
};
Expected behavior
I want the pinned status of the message to remain unchanged after editing
Screenshots
https://drive.google.com/drive/folders/1NBI7m2UOUoKrzjZvlfVZqHQhGmTt8IDQ
Package version
"@stream-io/stream-chat-css": "^5.14.0",
"stream-chat-react": "^13.7.0",
"stream-chat": "^9.20.1"