Attachment Modal: Fix caption length calculation (#2226)

src/components/middle/composer/AttachmentModal.tsx

@@ -1,5 +1,5 @@
 import React, {
-  memo, useCallback, useEffect, useRef,
+  memo, useCallback, useEffect, useMemo, useRef,
 } from '../../../lib/teact/teact';
 import { getActions } from '../../../global';
 
@@ -16,6 +16,7 @@ import { getFileExtension } from '../../common/helpers/documentInfo';
 import captureEscKeyListener from '../../../util/captureEscKeyListener';
 import getFilesFromDataTransferItems from './helpers/getFilesFromDataTransferItems';
 import { hasPreview } from '../../../util/files';
+import { getHtmlTextLength } from './helpers/getHtmlTextLength';
 
 import usePrevious from '../../../hooks/usePrevious';
 import useMentionTooltip from './hooks/useMentionTooltip';
@@ -63,6 +64,7 @@ export type OwnProps = {
 };
 
 const DROP_LEAVE_TIMEOUT_MS = 150;
+const CAPTION_SYMBOLS_LEFT_THRESHOLD = 100;
 
 const AttachmentModal: FC<OwnProps> = ({
   chatId,
@@ -200,6 +202,11 @@ const AttachmentModal: FC<OwnProps> = ({
     }
   }
 
+  const leftChars = useMemo(() => {
+    const captionLeftBeforeLimit = captionLimit - getHtmlTextLength(caption);
+    return captionLeftBeforeLimit <= CAPTION_SYMBOLS_LEFT_THRESHOLD ? captionLeftBeforeLimit : undefined;
+  }, [caption, captionLimit]);
+
   if (!renderingAttachments) {
     return undefined;
   }
@@ -257,8 +264,6 @@ const AttachmentModal: FC<OwnProps> = ({
     );
   }
 
-  const leftChars = (captionLimit - caption.length) <= 100 ? captionLimit - caption.length : undefined;
-
   return (
     <Modal
       isOpen={isOpen}

src/components/middle/composer/MessageInput.tsx

@@ -502,7 +502,7 @@ const MessageInput: FC<OwnProps & StateProps> = ({
           <div ref={cloneRef} className={buildClassName(className, 'clone')} dir="auto" />
         </div>
       </div>
-      {captionLimit && (
+      {captionLimit !== undefined && (
         <div className="max-length-indicator" dir="auto">
           {captionLimit}
         </div>

src/components/middle/composer/helpers/getHtmlTextLength.ts

@@ -0,0 +1,12 @@
+import { fixImageContent } from '../../../../util/parseMessageInput';
+
+const div = document.createElement('div');
+
+export function getHtmlTextLength(html: string) {
+  div.innerHTML = html;
+  fixImageContent(div);
+  div.querySelectorAll('br').forEach((br) => {
+    br.replaceWith('\n');
+  });
+  return div.textContent?.trim().length || 0;
+}

src/components/middle/message/MessageMeta.scss

@@ -40,6 +40,11 @@
     overflow: hidden;
     text-overflow: ellipsis;
     margin-right: 0.375rem;
+
+    .emoji-small {
+      width: 1rem !important;
+      height: 1rem !important;
+    }
   }
 
   .icon-channelviews {

src/components/middle/message/helpers/calculateAuthorWidth.ts

@@ -16,7 +16,7 @@ export default function calculateAuthorWidth(text: string) {
     document.body.appendChild(element);
   }
 
-  element.innerHTML = text;
+  element.textContent = text;
 
   return element.offsetWidth;
 }

src/styles/_forms.scss

@@ -3,6 +3,7 @@
   right: 0.75rem;
   bottom: -0.5625rem;
   padding: 0 0.25rem;
+  border-radius: 0.25rem;
   color: var(--color-text-secondary);
   font-size: 0.75rem;
   background: var(--color-background);

src/util/parseMessageInput.ts

@@ -63,7 +63,7 @@ export default function parseMessageInput(
   };
 }
 
-function fixImageContent(fragment: HTMLDivElement) {
+export function fixImageContent(fragment: HTMLDivElement) {
   fragment.querySelectorAll('img').forEach((node) => {
     if (node.dataset.documentId) { // Custom Emoji
       node.textContent = (node as HTMLImageElement).alt || '';