From ee3724cd1db05474954dfbd08ed437ae664adee0 Mon Sep 17 00:00:00 2001 From: Pranshu Chittora Date: Sat, 29 May 2021 11:59:06 +0530 Subject: [PATCH 1/9] feat: HTML to Markdown parser integration --- src/pages/home/report/ReportActionContextMenu.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionContextMenu.js b/src/pages/home/report/ReportActionContextMenu.js index 99c1486923c2..000dbfd9cdff 100755 --- a/src/pages/home/report/ReportActionContextMenu.js +++ b/src/pages/home/report/ReportActionContextMenu.js @@ -4,6 +4,7 @@ import {View} from 'react-native'; import PropTypes from 'prop-types'; import lodashGet from 'lodash/get'; import {withOnyx} from 'react-native-onyx'; +import ExpensiMark from 'expensify-common/lib/ExpensiMark'; import { Clipboard as ClipboardIcon, LinkCopy, Mail, Pencil, Trashcan, Checkmark, } from '../../../components/Icon/Expensicons'; @@ -145,7 +146,8 @@ class ReportActionContextMenu extends React.Component { */ getActionText() { const message = _.last(lodashGet(this.props.reportAction, 'message', null)); - return lodashGet(message, 'text', ''); + const parser = new ExpensiMark(); + return parser.htmlToMarkdown(lodashGet(message, 'html', '')); } render() { From 5c3f7a66eed2fa489808f079a5df19c8ce70fb55 Mon Sep 17 00:00:00 2001 From: Pranshu Chittora Date: Wed, 23 Jun 2021 01:05:10 +0530 Subject: [PATCH 2/9] feat: Updated package json --- package-lock.json | 35 ++++++++++++++++++++++++++++++----- package.json | 2 +- 2 files changed, 31 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9d0ac7745128..37c9f166c0f8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20574,19 +20574,18 @@ } }, "expensify-common": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/expensify-common/-/expensify-common-1.0.1.tgz", - "integrity": "sha512-QitZnBwJKSAPt+qpCMfuf8KFI3NxR0VU0r5h/92hox9p0Dv2bq1DS5dvRGNxQ9SxugtnSPk4YnKyRwKdRNcASQ==", + "version": "git://github.com/Expensify/expensify-common.git#c3465bf615390a2844087ec7f2343b0607ea484c", + "from": "git://github.com/Expensify/expensify-common.git#c3465bf615390a2844087ec7f2343b0607ea484c", "requires": { "classnames": "2.3.1", "clipboard": "2.0.4", "html-entities": "^1.3.1", - "jquery": "3.3.1", + "jquery": "3.6.0", "lodash": "4.17.21", "prop-types": "15.7.2", "react": "16.12.0", "react-dom": "16.12.0", - "semver": "^7.3.4", + "semver": "^7.3.5", "simply-deferred": "git+https://github.com/Expensify/simply-deferred.git#77a08a95754660c7bd6e0b6979fdf84e8e831bf5", "underscore": "1.13.1" }, @@ -20596,6 +20595,19 @@ "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" }, + "jquery": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz", + "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==" + }, + "lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "requires": { + "yallist": "^4.0.0" + } + }, "react": { "version": "16.12.0", "resolved": "https://registry.npmjs.org/react/-/react-16.12.0.tgz", @@ -20617,10 +20629,23 @@ "scheduler": "^0.18.0" } }, + "semver": { + "version": "7.3.5", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz", + "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==", + "requires": { + "lru-cache": "^6.0.0" + } + }, "underscore": { "version": "1.13.1", "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.1.tgz", "integrity": "sha512-hzSoAVtJF+3ZtiFX0VgfFPHEDRm7Y/QPjGyNo4TVdnDTdft3tr8hEkD25a1jC+TjTuE7tkHGKkhwCgs9dgBB2g==" + }, + "yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" } } }, diff --git a/package.json b/package.json index f3054fd10575..514073433058 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,7 @@ "electron-log": "^4.3.5", "electron-serve": "^1.0.0", "electron-updater": "^4.3.4", - "expensify-common": "^1.0.1", + "expensify-common": "git://github.com/Expensify/expensify-common.git#c3465bf615390a2844087ec7f2343b0607ea484c", "file-loader": "^6.0.0", "html-entities": "^1.3.1", "lodash": "4.17.21", From 5107f55ba8fdb73b72dbff5458def8d5932be10c Mon Sep 17 00:00:00 2001 From: Pranshu Chittora Date: Wed, 23 Jun 2021 22:40:53 +0530 Subject: [PATCH 3/9] feat: Migration to another component --- src/pages/home/report/ReportActionContextMenu.js | 4 +--- src/pages/home/report/ReportActionItem.js | 1 + .../home/report/ReportActionItemMessageEdit.js | 15 ++++++++++++--- 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/pages/home/report/ReportActionContextMenu.js b/src/pages/home/report/ReportActionContextMenu.js index 65dff87a5bc0..c38b8d7db847 100755 --- a/src/pages/home/report/ReportActionContextMenu.js +++ b/src/pages/home/report/ReportActionContextMenu.js @@ -3,7 +3,6 @@ import React from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; import lodashGet from 'lodash/get'; -import ExpensiMark from 'expensify-common/lib/ExpensiMark'; import Str from 'expensify-common/lib/str'; import { Clipboard as ClipboardIcon, LinkCopy, Mail, Pencil, Trashcan, Checkmark, @@ -154,8 +153,7 @@ class ReportActionContextMenu extends React.Component { */ getActionText() { const message = _.last(lodashGet(this.props.reportAction, 'message', null)); - const parser = new ExpensiMark(); - return parser.htmlToMarkdown(lodashGet(message, 'html', '')); + return lodashGet(message, 'text', ''); } confirmDeleteAndHideModal() { diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js index b1d983ab5cd3..099a3f58e85a 100644 --- a/src/pages/home/report/ReportActionItem.js +++ b/src/pages/home/report/ReportActionItem.js @@ -222,6 +222,7 @@ class ReportActionItem extends Component { diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index 2a7d49b5e2c8..c0018014c573 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -2,6 +2,8 @@ import React from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; import _ from 'underscore'; +import ExpensiMark from 'expensify-common/lib/ExpensiMark'; +import lodashGet from 'lodash/get'; import ReportActionPropTypes from './ReportActionPropTypes'; import styles from '../../../styles/styles'; import TextInputFocusable from '../../../components/TextInputFocusable'; @@ -19,6 +21,9 @@ const propTypes = { /** Draft message */ draftMessage: PropTypes.string.isRequired, + /** The report action this context menu is attached to. */ + reportAction: PropTypes.shape(ReportActionPropTypes).isRequired, + /** ReportID that holds the comment we're editing */ reportID: PropTypes.number.isRequired, @@ -39,11 +44,15 @@ class ReportActionItemMessageEdit extends React.Component { this.triggerSaveOrCancel = this.triggerSaveOrCancel.bind(this); this.onSelectionChange = this.onSelectionChange.bind(this); + const message = _.last(lodashGet(this.props.reportAction, 'message', this.props.draftMessage)); + const parser = new ExpensiMark(); + const draftMessage = parser.htmlToMarkdown(lodashGet(message, 'html', '')); + this.state = { - draft: this.props.draftMessage, + draft: draftMessage, selection: { start: this.props.draftMessage.length, - end: this.props.draftMessage.length, + end: this.props.deleteDraft.length, }, }; } @@ -119,7 +128,7 @@ class ReportActionItemMessageEdit extends React.Component { ref={el => this.textInput = el} onChangeText={this.updateDraft} // Debounced saveDraftComment onKeyPress={this.triggerSaveOrCancel} - defaultValue={this.props.draftMessage} + defaultValue={this.state.draft} maxLines={16} // This is the same that slack has style={[styles.textInputCompose, styles.flex4]} onFocus={() => { From e66c1a7df62f0fcbc2d7788017571de6364030cf Mon Sep 17 00:00:00 2001 From: Pranshu Chittora Date: Wed, 23 Jun 2021 22:45:22 +0530 Subject: [PATCH 4/9] fix: Minor fixes --- src/pages/home/report/ReportActionItemMessageEdit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index c0018014c573..6d64187e966b 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -52,7 +52,7 @@ class ReportActionItemMessageEdit extends React.Component { draft: draftMessage, selection: { start: this.props.draftMessage.length, - end: this.props.deleteDraft.length, + end: this.props.draftMessage.length, }, }; } From 44c75fa442e7fea52fd6c46355a750ee385cf851 Mon Sep 17 00:00:00 2001 From: Pranshu Chittora Date: Thu, 24 Jun 2021 20:31:03 +0530 Subject: [PATCH 5/9] feat: New approach --- src/libs/reportUtils.js | 2 +- src/pages/home/report/ReportActionCompose.js | 2 +- src/pages/home/report/ReportActionContextMenu.js | 2 +- src/pages/home/report/ReportActionItemMessageEdit.js | 7 +------ 4 files changed, 4 insertions(+), 9 deletions(-) diff --git a/src/libs/reportUtils.js b/src/libs/reportUtils.js index 2f59d580d3bd..0b577ba589a1 100644 --- a/src/libs/reportUtils.js +++ b/src/libs/reportUtils.js @@ -58,7 +58,7 @@ function canEditReportAction(reportAction) { return reportAction.actorEmail === sessionEmail && reportAction.reportActionID && reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT - && !isReportMessageAttachment(lodashGet(reportAction, ['message', 0, 'text'], '')); + && !isReportMessageAttachment(lodashGet(reportAction, ['message', 0, 'html'], '')); } /** diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index ad70a94168f0..b61c30187a41 100755 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -297,7 +297,7 @@ class ReportActionCompose extends React.Component { if (reportActionKey !== -1 && this.props.reportActions[reportActionKey]) { const {reportActionID, message} = this.props.reportActions[reportActionKey]; - saveReportActionDraft(this.props.reportID, reportActionID, _.last(message).text); + saveReportActionDraft(this.props.reportID, reportActionID, _.last(message).html); } } } diff --git a/src/pages/home/report/ReportActionContextMenu.js b/src/pages/home/report/ReportActionContextMenu.js index c38b8d7db847..72d489ce59da 100755 --- a/src/pages/home/report/ReportActionContextMenu.js +++ b/src/pages/home/report/ReportActionContextMenu.js @@ -153,7 +153,7 @@ class ReportActionContextMenu extends React.Component { */ getActionText() { const message = _.last(lodashGet(this.props.reportAction, 'message', null)); - return lodashGet(message, 'text', ''); + return lodashGet(message, 'html', ''); } confirmDeleteAndHideModal() { diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index 6d64187e966b..37b938cb8c7f 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -3,7 +3,6 @@ import {View} from 'react-native'; import PropTypes from 'prop-types'; import _ from 'underscore'; import ExpensiMark from 'expensify-common/lib/ExpensiMark'; -import lodashGet from 'lodash/get'; import ReportActionPropTypes from './ReportActionPropTypes'; import styles from '../../../styles/styles'; import TextInputFocusable from '../../../components/TextInputFocusable'; @@ -21,9 +20,6 @@ const propTypes = { /** Draft message */ draftMessage: PropTypes.string.isRequired, - /** The report action this context menu is attached to. */ - reportAction: PropTypes.shape(ReportActionPropTypes).isRequired, - /** ReportID that holds the comment we're editing */ reportID: PropTypes.number.isRequired, @@ -44,9 +40,8 @@ class ReportActionItemMessageEdit extends React.Component { this.triggerSaveOrCancel = this.triggerSaveOrCancel.bind(this); this.onSelectionChange = this.onSelectionChange.bind(this); - const message = _.last(lodashGet(this.props.reportAction, 'message', this.props.draftMessage)); const parser = new ExpensiMark(); - const draftMessage = parser.htmlToMarkdown(lodashGet(message, 'html', '')); + const draftMessage = parser.htmlToMarkdown(this.props.draftMessage); this.state = { draft: draftMessage, From 19062344dd536c737c6278d6777e1e597a3a1817 Mon Sep 17 00:00:00 2001 From: Pranshu Chittora Date: Thu, 24 Jun 2021 20:33:08 +0530 Subject: [PATCH 6/9] fix: Removed unwanted props --- src/pages/home/report/ReportActionItem.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js index 099a3f58e85a..b1d983ab5cd3 100644 --- a/src/pages/home/report/ReportActionItem.js +++ b/src/pages/home/report/ReportActionItem.js @@ -222,7 +222,6 @@ class ReportActionItem extends Component { From 5e610a80010c77cb8abfada2bba20730c5817815 Mon Sep 17 00:00:00 2001 From: Pranshu Chittora Date: Fri, 25 Jun 2021 21:37:31 +0530 Subject: [PATCH 7/9] fix: Minor changes to the object keys --- src/libs/reportUtils.js | 2 +- src/pages/home/report/ReportActionItemMessageEdit.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/libs/reportUtils.js b/src/libs/reportUtils.js index 0b577ba589a1..2f59d580d3bd 100644 --- a/src/libs/reportUtils.js +++ b/src/libs/reportUtils.js @@ -58,7 +58,7 @@ function canEditReportAction(reportAction) { return reportAction.actorEmail === sessionEmail && reportAction.reportActionID && reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT - && !isReportMessageAttachment(lodashGet(reportAction, ['message', 0, 'html'], '')); + && !isReportMessageAttachment(lodashGet(reportAction, ['message', 0, 'text'], '')); } /** diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index 37b938cb8c7f..9db04402951c 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -46,8 +46,8 @@ class ReportActionItemMessageEdit extends React.Component { this.state = { draft: draftMessage, selection: { - start: this.props.draftMessage.length, - end: this.props.draftMessage.length, + start: draftMessage.length, + end: draftMessage.length, }, }; } From 69f191a44e2bfa7dc6b54b59c0e22316a74f2e51 Mon Sep 17 00:00:00 2001 From: Pranshu Chittora Date: Sun, 27 Jun 2021 17:02:36 +0530 Subject: [PATCH 8/9] feat: Updated method doc --- src/pages/home/report/ReportActionContextMenu.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionContextMenu.js b/src/pages/home/report/ReportActionContextMenu.js index 72d489ce59da..b46e5c048f5d 100755 --- a/src/pages/home/report/ReportActionContextMenu.js +++ b/src/pages/home/report/ReportActionContextMenu.js @@ -147,7 +147,7 @@ class ReportActionContextMenu extends React.Component { } /** - * Gets the text (not HTML) portion of the message in an action. + * Gets the text (HTML) portion of the message in an action. * * @return {String} */ From ab6145f91e84554d9e566c4877e344c36294f883 Mon Sep 17 00:00:00 2001 From: Pranshu Chittora Date: Sun, 27 Jun 2021 17:03:55 +0530 Subject: [PATCH 9/9] feat: Updated method doc --- src/pages/home/report/ReportActionContextMenu.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionContextMenu.js b/src/pages/home/report/ReportActionContextMenu.js index b46e5c048f5d..fbaf88130cbb 100755 --- a/src/pages/home/report/ReportActionContextMenu.js +++ b/src/pages/home/report/ReportActionContextMenu.js @@ -147,7 +147,7 @@ class ReportActionContextMenu extends React.Component { } /** - * Gets the text (HTML) portion of the message in an action. + * Gets the markdown version of the message in an action. * * @return {String} */