Merge pull request #3229 from pranshuchittora/pranshuchittora/feat/ht…

…ml-md-parser

feat: HTML to Markdown parser integration

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",

src/pages/home/report/ReportActionCompose.js

@@ -304,7 +304,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);
                 }
             }
         }

src/pages/home/report/ReportActionContextMenu.js

@@ -151,13 +151,13 @@ class ReportActionContextMenu extends React.Component {
     }
 
     /**
-     * Gets the text (not HTML) portion of the message in an action.
+     * Gets the markdown version of the message in an action.
      *
      * @return {String}
      */
     getActionText() {
         const message = _.last(lodashGet(this.props.reportAction, 'message', null));
-        return lodashGet(message, 'text', '');
+        return lodashGet(message, 'html', '');
     }
 
     /**

src/pages/home/report/ReportActionItemMessageEdit.js

@@ -2,6 +2,7 @@ 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 ReportActionPropTypes from './ReportActionPropTypes';
 import styles from '../../../styles/styles';
 import TextInputFocusable from '../../../components/TextInputFocusable';
@@ -39,11 +40,14 @@ class ReportActionItemMessageEdit extends React.Component {
         this.triggerSaveOrCancel = this.triggerSaveOrCancel.bind(this);
         this.onSelectionChange = this.onSelectionChange.bind(this);
 
+        const parser = new ExpensiMark();
+        const draftMessage = parser.htmlToMarkdown(this.props.draftMessage);
+
         this.state = {
-            draft: this.props.draftMessage,
+            draft: draftMessage,
             selection: {
-                start: this.props.draftMessage.length,
-                end: this.props.draftMessage.length,
+                start: draftMessage.length,
+                end: draftMessage.length,
             },
         };
     }
@@ -119,7 +123,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={() => {