Quotes: Various fixes (#3954)

src/components/common/Composer.tsx

@@ -95,6 +95,7 @@ import buildAttachment, { prepareAttachmentsToSend } from '../middle/composer/he
 import { escapeHtml } from '../middle/composer/helpers/cleanHtml';
 import { buildCustomEmojiHtml } from '../middle/composer/helpers/customEmoji';
 import { isSelectionInsideInput } from '../middle/composer/helpers/selection';
+import { getPeerColorClass } from './helpers/peerColor';
 import renderText from './helpers/renderText';
 import { getTextWithEntitiesAsHtml } from './helpers/renderTextWithEntities';
 
@@ -166,12 +167,12 @@ type OwnProps = {
   dropAreaState?: string;
   isReady: boolean;
   isMobile?: boolean;
-  onDropHide?: NoneToVoidFunction;
   inputId: string;
   editableInputCssSelector: string;
   editableInputId: string;
   className?: string;
   inputPlaceholder?: string;
+  onDropHide?: NoneToVoidFunction;
   onForward?: NoneToVoidFunction;
   onFocus?: NoneToVoidFunction;
   onBlur?: NoneToVoidFunction;
@@ -202,6 +203,7 @@ type StateProps =
     customEmojiForEmoji?: ApiSticker[];
     groupChatMembers?: ApiChatMember[];
     currentUserId?: string;
+    currentUser?: ApiUser;
     recentEmojis: string[];
     contentToBeScheduled?: TabState['contentToBeScheduled'];
     shouldSuggestStickers?: boolean;
@@ -301,6 +303,7 @@ const Composer: FC<OwnProps & StateProps> = ({
   groupChatMembers,
   topInlineBotIds,
   currentUserId,
+  currentUser,
   captionLimit,
   contentToBeScheduled,
   shouldSuggestStickers,
@@ -1593,7 +1596,7 @@ const Composer: FC<OwnProps & StateProps> = ({
             />
           </>
         )}
-        <div className="message-input-wrapper">
+        <div className={buildClassName('message-input-wrapper', getPeerColorClass(currentUser))}>
           {isInMessageList && (
             <>
               {withBotMenuButton && (
@@ -1898,6 +1901,7 @@ export default memo(withGlobal<OwnProps>(
     const botKeyboardMessageId = messageWithActualBotKeyboard ? messageWithActualBotKeyboard.id : undefined;
     const keyboardMessage = botKeyboardMessageId ? selectChatMessage(global, chatId, botKeyboardMessageId) : undefined;
     const { currentUserId } = global;
+    const currentUser = selectUser(global, currentUserId!)!;
     const defaultSendAsId = chatFullInfo ? chatFullInfo?.sendAsId || currentUserId : undefined;
     const sendAsId = chat?.sendAsPeerIds && defaultSendAsId && (
       chat.sendAsPeerIds.some((peer) => peer.id === defaultSendAsId)
@@ -1957,6 +1961,7 @@ export default memo(withGlobal<OwnProps>(
       groupChatMembers: chatFullInfo?.members,
       topInlineBotIds: global.topInlineBots?.userIds,
       currentUserId,
+      currentUser,
       contentToBeScheduled: tabState.contentToBeScheduled,
       shouldSuggestStickers,
       shouldSuggestCustomEmoji,

src/components/common/embedded/EmbeddedMessage.scss

@@ -189,8 +189,7 @@
   }
 
   &.inside-input {
-    padding-inline-start: 0.5625rem;
+    flex-grow: 1;
-    width: 100%;
 
     .embedded-thumb {
       margin-left: 0.125rem;

src/components/common/helpers/peerColor.ts

@@ -5,7 +5,7 @@ import { getPeerColorCount, getPeerColorKey } from '../../../global/helpers';
 export function getPeerColorClass(peer?: ApiPeer, noUserColors?: boolean, shouldReset?: boolean) {
   if (!peer) {
     if (!shouldReset) return undefined;
-    return noUserColors ? 'peer-color-count-0' : 'peer-color-0';
+    return noUserColors ? 'peer-color-count-1' : 'peer-color-0';
   }
   return noUserColors ? `peer-color-count-${getPeerColorCount(peer)}` : `peer-color-${getPeerColorKey(peer)}`;
 }

src/components/common/helpers/renderTextWithEntities.tsx

@@ -392,11 +392,9 @@ function processEntity({
       return <strong data-entity-type={entity.type}>{renderNestedMessagePart()}</strong>;
     case ApiMessageEntityTypes.Blockquote:
       return (
-        <div className="message-entity-blockquote-wrapper">
+        <blockquote data-entity-type={entity.type}>
-          <blockquote data-entity-type={entity.type}>
+          {renderNestedMessagePart()}
-            {renderNestedMessagePart()}
+        </blockquote>
-          </blockquote>
-        </div>
       );
     case ApiMessageEntityTypes.BotCommand:
       return (
@@ -574,6 +572,11 @@ function processEntityAsHtml(
         >${renderedContent}</span>`;
     case ApiMessageEntityTypes.CustomEmoji:
       return buildCustomEmojiHtmlFromEntity(rawEntityText, entity);
+    case ApiMessageEntityTypes.Blockquote:
+      return `<span
+        class="blockquote"
+        data-entity-type="${ApiMessageEntityTypes.Blockquote}"
+        >${renderedContent}</span>`;
     default:
       return renderedContent;
   }

src/components/middle/composer/ComposerEmbeddedMessage.tsx

@@ -347,6 +347,8 @@ export default memo(withGlobal<OwnProps>(
       if (!sender) {
         sender = selectPeer(global, fromChatId!);
       }
+    } else if (editingId) {
+      sender = selectSender(global, message!);
     }
 
     const forwardsHaveCaptions = forwardedMessages?.some((forward) => (

src/components/middle/message/_message-content.scss

@@ -935,7 +935,7 @@
   font-size: 0.875rem;
 }
 
-blockquote {
+blockquote, .blockquote {
   display: inline-block;
   position: relative;
   padding-inline: 0.5rem 1rem;
@@ -943,6 +943,7 @@ blockquote {
   border-radius: 0.25rem;
   overflow: hidden;
   background-color: var(--accent-background-color);
+  white-space: pre-wrap;
 
   &::before {
     content: "";
@@ -967,6 +968,12 @@ blockquote {
   }
 }
 
+// Input specific styles
+.blockquote {
+  display: block;
+  width: fit-content;
+}
+
 @keyframes text-loading {
   0% {
     background-position-x: 0;

src/global/actions/api/messages.ts

@@ -425,8 +425,10 @@ addActionHandler('clearDraft', (global, actions, payload): ActionReturnType => {
     return;
   }
 
-  const newDraft: ApiDraft | undefined = shouldKeepReply ? {
+  const currentReplyInfo = currentDraft.replyInfo;
-    replyInfo: currentDraft.replyInfo,
+
+  const newDraft: ApiDraft | undefined = shouldKeepReply && currentReplyInfo ? {
+    replyInfo: currentReplyInfo,
   } : undefined;
 
   if (!isLocalOnly) {

src/global/actions/apiUpdaters/messages.ts

@@ -17,7 +17,7 @@ import {
   checkIfHasUnreadReactions, getMessageContent, getMessageText, isActionMessage,
   isMessageLocal, isUserId,
 } from '../../helpers';
-import { getMessageReplyInfo } from '../../helpers/replies';
+import { getMessageReplyInfo, getStoryReplyInfo } from '../../helpers/replies';
 import { addActionHandler, getGlobal, setGlobal } from '../../index';
 import {
   addViewportId,
@@ -86,6 +86,7 @@ addActionHandler('apiUpdate', (global, actions, update): ActionReturnType => {
 
       const newMessage = selectChatMessage(global, chatId, id)!;
       const replyInfo = getMessageReplyInfo(newMessage);
+      const storyReplyInfo = getStoryReplyInfo(newMessage);
       const chat = selectChat(global, chatId);
       if (chat?.isForum
         && replyInfo?.isForumTopic
@@ -97,7 +98,7 @@ addActionHandler('apiUpdate', (global, actions, update): ActionReturnType => {
       Object.values(global.byTabId).forEach(({ id: tabId }) => {
         const isLocal = isMessageLocal(message as ApiMessage);
         if (selectIsMessageInCurrentMessageList(global, chatId, message as ApiMessage, tabId)) {
-          if (isLocal && message.isOutgoing && !(message.content?.action) && !replyInfo?.replyToMsgId
+          if (isLocal && message.isOutgoing && !(message.content?.action) && !storyReplyInfo?.storyId
             && !message.content?.storyData) {
             const currentMessageList = selectCurrentMessageList(global, tabId);
             if (currentMessageList) {

src/global/actions/ui/messages.ts

@@ -142,7 +142,7 @@ addActionHandler('replyToNextMessage', (global, actions, payload): ActionReturnT
 
   let messageId: number | undefined;
 
-  if (!isLatest || !replyInfo) {
+  if (!isLatest || !replyInfo?.replyToMsgId) {
     if (threadId === MAIN_THREAD_ID) {
       const chat = selectChat(global, chatId);
 
@@ -154,7 +154,7 @@ addActionHandler('replyToNextMessage', (global, actions, payload): ActionReturnT
     }
   } else {
     const chatMessageKeys = Object.keys(chatMessages);
-    const indexOfCurrent = chatMessageKeys.indexOf(replyInfo.toString());
+    const indexOfCurrent = chatMessageKeys.indexOf(replyInfo.replyToMsgId.toString());
     const newIndex = indexOfCurrent + targetIndexDelta;
     messageId = newIndex <= chatMessageKeys.length + 1 && newIndex >= 0
       ? Number(chatMessageKeys[newIndex])

src/styles/_common.scss

@@ -218,7 +218,9 @@
   }
 }
 
-.peer-color-count-2, .peer-color-count-3 {
+.peer-color-count-1,
+.peer-color-count-2,
+.peer-color-count-3 {
   --accent-background-color: var(--hover-color);
   --accent-background-active-color: var(--active-color);
 }