From 3bc046b425a39e3b88c18cb2d48f509ea4043a94 Mon Sep 17 00:00:00 2001 From: Sam Hariri <137707942+samh-nl@users.noreply.github.com> Date: Wed, 9 Aug 2023 12:56:31 +0200 Subject: [PATCH 1/7] fix: update length exceeded indicator --- src/components/ExceededCommentLength.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/ExceededCommentLength.js b/src/components/ExceededCommentLength.js index c403aa63c172..72cee78777d0 100644 --- a/src/components/ExceededCommentLength.js +++ b/src/components/ExceededCommentLength.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import {debounce} from 'lodash'; import CONST from '../CONST'; import * as ReportUtils from '../libs/ReportUtils'; +import useLocalize from '../hooks/useLocalize'; import Text from './Text'; import styles from '../styles/styles'; @@ -15,6 +16,7 @@ const propTypes = { }; function ExceededCommentLength(props) { + const {numberFormat} = useLocalize(); const [commentLength, setCommentLength] = useState(0); const updateCommentLength = useMemo( () => @@ -34,7 +36,7 @@ function ExceededCommentLength(props) { return null; } - return {`${commentLength}/${CONST.MAX_COMMENT_LENGTH}`}; + return {numberFormat(CONST.MAX_COMMENT_LENGTH)}+; } ExceededCommentLength.propTypes = propTypes; From 49b14a77863b86cd8d770145807d4a8fc26a255a Mon Sep 17 00:00:00 2001 From: Sam Hariri <137707942+samh-nl@users.noreply.github.com> Date: Wed, 9 Aug 2023 12:58:55 +0200 Subject: [PATCH 2/7] fix: make identical to max markup length --- src/CONST.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/CONST.js b/src/CONST.js index 56102c7641f7..b248791c2bb0 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -1272,7 +1272,7 @@ const CONST = { }, // Auth limit is 60k for the column but we store edits and other metadata along the html so let's use a lower limit to accommodate for it. - MAX_COMMENT_LENGTH: 15000, + MAX_COMMENT_LENGTH: 10000, // Furthermore, applying markup is very resource-consuming, so let's set a slightly lower limit for that MAX_MARKUP_LENGTH: 10000, From 588b04d30da5f9644f9ca2635189f1975068bd8a Mon Sep 17 00:00:00 2001 From: Sam Hariri <137707942+samh-nl@users.noreply.github.com> Date: Wed, 9 Aug 2023 13:03:06 +0200 Subject: [PATCH 3/7] docs: update comment for MAX_MARKUP_LENGTH --- src/CONST.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/CONST.js b/src/CONST.js index b248791c2bb0..f12132116914 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -1274,7 +1274,7 @@ const CONST = { // Auth limit is 60k for the column but we store edits and other metadata along the html so let's use a lower limit to accommodate for it. MAX_COMMENT_LENGTH: 10000, - // Furthermore, applying markup is very resource-consuming, so let's set a slightly lower limit for that + // Use the same value as MAX_COMMENT_LENGTH to ensure the entire comment is parsed. Note that applying markup is very resource-consuming. MAX_MARKUP_LENGTH: 10000, MAX_THREAD_REPLIES_PREVIEW: 99, From b43b1b95eac6599a7b39eea05e943a1014de403f Mon Sep 17 00:00:00 2001 From: Sam Hariri <137707942+samh-nl@users.noreply.github.com> Date: Wed, 9 Aug 2023 14:49:52 +0200 Subject: [PATCH 4/7] fix: inclusive comparison for parsing --- src/libs/ReportUtils.js | 4 ++-- src/libs/actions/Report.js | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index e46f1b39971e..603c154bea3b 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -1485,7 +1485,7 @@ function hasReportNameError(report) { } /** - * For comments shorter than 10k chars, convert the comment from MD into HTML because that's how it is stored in the database + * For comments shorter than or equal to 10k chars, convert the comment from MD into HTML because that's how it is stored in the database * For longer comments, skip parsing, but still escape the text, and display plaintext for performance reasons. It takes over 40s to parse a 100k long string!! * * @param {String} text @@ -1493,7 +1493,7 @@ function hasReportNameError(report) { */ function getParsedComment(text) { const parser = new ExpensiMark(); - return text.length < CONST.MAX_MARKUP_LENGTH ? parser.replace(text) : _.escape(text); + return text.length <= CONST.MAX_MARKUP_LENGTH ? parser.replace(text) : _.escape(text); } /** diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js index 216d71b3389e..2180bd56a959 100644 --- a/src/libs/actions/Report.js +++ b/src/libs/actions/Report.js @@ -1016,7 +1016,7 @@ const removeLinksFromHtml = (html, links) => { */ const handleUserDeletedLinksInHtml = (newCommentText, originalHtml) => { const parser = new ExpensiMark(); - if (newCommentText.length >= CONST.MAX_MARKUP_LENGTH) { + if (newCommentText.length > CONST.MAX_MARKUP_LENGTH) { return newCommentText; } const markdownOriginalComment = parser.htmlToMarkdown(originalHtml).trim(); @@ -1043,10 +1043,10 @@ function editReportComment(reportID, originalReportAction, textForNewComment) { const htmlForNewComment = handleUserDeletedLinksInHtml(textForNewComment, originalCommentHTML); const reportComment = parser.htmlToText(htmlForNewComment); - // For comments shorter than 10k chars, convert the comment from MD into HTML because that's how it is stored in the database + // For comments shorter than or equal to 10k chars, convert the comment from MD into HTML because that's how it is stored in the database // For longer comments, skip parsing and display plaintext for performance reasons. It takes over 40s to parse a 100k long string!! let parsedOriginalCommentHTML = originalCommentHTML; - if (textForNewComment.length < CONST.MAX_MARKUP_LENGTH) { + if (textForNewComment.length <= CONST.MAX_MARKUP_LENGTH) { const autolinkFilter = {filterRules: _.filter(_.pluck(parser.rules, 'name'), (name) => name !== 'autolink')}; parsedOriginalCommentHTML = parser.replace(parser.htmlToMarkdown(originalCommentHTML).trim(), autolinkFilter); } From 211e92d2704f817974dbac2f764a7ca876895d54 Mon Sep 17 00:00:00 2001 From: Sam Hariri <137707942+samh-nl@users.noreply.github.com> Date: Fri, 18 Aug 2023 16:24:14 +0200 Subject: [PATCH 5/7] feat(lang): updated limit exceeded error --- src/components/ExceededCommentLength.js | 8 ++++++-- src/languages/en.js | 1 + src/languages/es.js | 1 + 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/ExceededCommentLength.js b/src/components/ExceededCommentLength.js index 72cee78777d0..7c0024313bd1 100644 --- a/src/components/ExceededCommentLength.js +++ b/src/components/ExceededCommentLength.js @@ -16,7 +16,7 @@ const propTypes = { }; function ExceededCommentLength(props) { - const {numberFormat} = useLocalize(); + const {numberFormat, translate} = useLocalize(); const [commentLength, setCommentLength] = useState(0); const updateCommentLength = useMemo( () => @@ -36,7 +36,11 @@ function ExceededCommentLength(props) { return null; } - return {numberFormat(CONST.MAX_COMMENT_LENGTH)}+; + return ( + + {translate('composer.commentExceededMaxLength', {formattedMaxLength: numberFormat(CONST.MAX_COMMENT_LENGTH)})} + + ); } ExceededCommentLength.propTypes = propTypes; diff --git a/src/languages/en.js b/src/languages/en.js index bbf2762cc92f..fac41c6bb9e3 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -179,6 +179,7 @@ export default { composer: { noExtensionFoundForMimeType: 'No extension found for mime type', problemGettingImageYouPasted: 'There was a problem getting the image you pasted', + commentExceededMaxLength: ({formattedMaxLength}) => `The maximum comment length is ${formattedMaxLength} characters.`, }, baseUpdateAppModal: { updateApp: 'Update app', diff --git a/src/languages/es.js b/src/languages/es.js index c9ba02840238..281b75b2f161 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -178,6 +178,7 @@ export default { composer: { noExtensionFoundForMimeType: 'No se encontró una extension para este tipo de contenido', problemGettingImageYouPasted: 'Ha ocurrido un problema al obtener la imagen que has pegado', + commentExceededMaxLength: ({formattedMaxLength}) => `El comentario debe tener máximo ${formattedMaxLength} caracteres.`, }, baseUpdateAppModal: { updateApp: 'Actualizar app', From 6dca5cda990a12e7b945edf37430a4d50ead73b9 Mon Sep 17 00:00:00 2001 From: Sam Hariri <137707942+samh-nl@users.noreply.github.com> Date: Mon, 21 Aug 2023 11:31:50 +0200 Subject: [PATCH 6/7] fix: ensure single line with ellipsis on overflow --- src/components/ExceededCommentLength.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/ExceededCommentLength.js b/src/components/ExceededCommentLength.js index 7c0024313bd1..8b3f4f0adc1e 100644 --- a/src/components/ExceededCommentLength.js +++ b/src/components/ExceededCommentLength.js @@ -37,7 +37,10 @@ function ExceededCommentLength(props) { } return ( - + {translate('composer.commentExceededMaxLength', {formattedMaxLength: numberFormat(CONST.MAX_COMMENT_LENGTH)})} ); From 62de1ba8d46d23bf4c8adc84e131cec887460039 Mon Sep 17 00:00:00 2001 From: Sam Hariri <137707942+samh-nl@users.noreply.github.com> Date: Mon, 11 Sep 2023 22:56:06 +0200 Subject: [PATCH 7/7] fix: added type --- src/languages/en.ts | 3 ++- src/languages/es.ts | 3 ++- src/languages/types.ts | 3 +++ 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/languages/en.ts b/src/languages/en.ts index 0e2b19ff4dd2..b34653966c52 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -71,6 +71,7 @@ import type { SetTheRequestParams, UpdatedTheRequestParams, RemovedTheRequestParams, + FormattedMaxLengthParams, } from './types'; import * as ReportActionsUtils from '../libs/ReportActionsUtils'; @@ -270,7 +271,7 @@ export default { composer: { noExtensionFoundForMimeType: 'No extension found for mime type', problemGettingImageYouPasted: 'There was a problem getting the image you pasted', - commentExceededMaxLength: ({formattedMaxLength}) => `The maximum comment length is ${formattedMaxLength} characters.`, + commentExceededMaxLength: ({formattedMaxLength}: FormattedMaxLengthParams) => `The maximum comment length is ${formattedMaxLength} characters.`, }, baseUpdateAppModal: { updateApp: 'Update app', diff --git a/src/languages/es.ts b/src/languages/es.ts index b6a01c8d04ca..d6a1d7096ee6 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -71,6 +71,7 @@ import type { SetTheRequestParams, UpdatedTheRequestParams, RemovedTheRequestParams, + FormattedMaxLengthParams, } from './types'; /* eslint-disable max-len */ @@ -269,7 +270,7 @@ export default { composer: { noExtensionFoundForMimeType: 'No se encontró una extension para este tipo de contenido', problemGettingImageYouPasted: 'Ha ocurrido un problema al obtener la imagen que has pegado', - commentExceededMaxLength: ({formattedMaxLength}) => `El comentario debe tener máximo ${formattedMaxLength} caracteres.`, + commentExceededMaxLength: ({formattedMaxLength}: FormattedMaxLengthParams) => `El comentario debe tener máximo ${formattedMaxLength} caracteres.`, }, baseUpdateAppModal: { updateApp: 'Actualizar app', diff --git a/src/languages/types.ts b/src/languages/types.ts index 7a698f912b14..0103425dec1d 100644 --- a/src/languages/types.ts +++ b/src/languages/types.ts @@ -190,6 +190,8 @@ type RemovedTheRequestParams = {valueName: string; oldValueToDisplay: string}; type UpdatedTheRequestParams = {valueName: string; newValueToDisplay: string; oldValueToDisplay: string}; +type FormattedMaxLengthParams = {formattedMaxLength: string}; + export type { AddressLineParams, CharacterLimitParams, @@ -261,4 +263,5 @@ export type { SetTheRequestParams, UpdatedTheRequestParams, RemovedTheRequestParams, + FormattedMaxLengthParams, };