diff --git a/.github/workflows/android.yml b/.github/workflows/android.yml index e8ae56f126299..7b061a125451b 100644 --- a/.github/workflows/android.yml +++ b/.github/workflows/android.yml @@ -20,6 +20,10 @@ jobs: - name: Install gems run: bundle install + - uses: webfactory/ssh-agent@v0.4.0 + with: + ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }} + - name: Install node packages run: npm install diff --git a/.github/workflows/desktop.yml b/.github/workflows/desktop.yml index 4d810c24fd5c5..b7662115a6d12 100644 --- a/.github/workflows/desktop.yml +++ b/.github/workflows/desktop.yml @@ -17,6 +17,10 @@ jobs: with: node-version: '14.x' + - uses: webfactory/ssh-agent@v0.4.0 + with: + ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }} + - name: Install node packages run: npm install diff --git a/.github/workflows/ios.yml b/.github/workflows/ios.yml index c2495b3a50e35..361f4b744820b 100644 --- a/.github/workflows/ios.yml +++ b/.github/workflows/ios.yml @@ -20,6 +20,10 @@ jobs: - name: Install gems run: bundle install + - uses: webfactory/ssh-agent@v0.4.0 + with: + ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }} + - name: Install node packages run: npm install diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 793bd3ae72e66..9990e0cf0082d 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -27,6 +27,10 @@ jobs: with: node-version: '14.x' + - uses: webfactory/ssh-agent@v0.4.0 + with: + ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }} + - run: npm install - run: npm run lint diff --git a/.github/workflows/version.yml b/.github/workflows/version.yml index 08c69c61d445c..c6981b557c089 100644 --- a/.github/workflows/version.yml +++ b/.github/workflows/version.yml @@ -19,6 +19,10 @@ jobs: with: node-version: '14.x' + - uses: webfactory/ssh-agent@v0.4.0 + with: + ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }} + - name: Install dependenices run: npm install diff --git a/.github/workflows/web.yml b/.github/workflows/web.yml index 5eec8091f645a..430310e7e9b66 100644 --- a/.github/workflows/web.yml +++ b/.github/workflows/web.yml @@ -38,6 +38,10 @@ jobs: aws-region: us-east-1 # Install node modules + - uses: webfactory/ssh-agent@v0.4.0 + with: + ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }} + - name: Install dependenices run: npm install diff --git a/android/app/src/main/assets/fonts/GTAmericaExpMono-Rg.otf b/android/app/src/main/assets/fonts/GTAmericaExpMono-Rg.otf new file mode 100644 index 0000000000000..2786ecdc0cf55 Binary files /dev/null and b/android/app/src/main/assets/fonts/GTAmericaExpMono-Rg.otf differ diff --git a/assets/fonts/GTAmericaExpMono-Rg.otf b/assets/fonts/GTAmericaExpMono-Rg.otf new file mode 100644 index 0000000000000..2786ecdc0cf55 Binary files /dev/null and b/assets/fonts/GTAmericaExpMono-Rg.otf differ diff --git a/ios/ReactNativeChat.xcodeproj/project.pbxproj b/ios/ReactNativeChat.xcodeproj/project.pbxproj index f1aa854ba0db6..635754ba7c490 100644 --- a/ios/ReactNativeChat.xcodeproj/project.pbxproj +++ b/ios/ReactNativeChat.xcodeproj/project.pbxproj @@ -9,6 +9,7 @@ /* Begin PBXBuildFile section */ 00E356F31AD99517003FC87E /* ReactNativeChatTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* ReactNativeChatTests.m */; }; 097C76E5807C5DFC565DC655 /* libPods-ReactNativeChat-ReactNativeChatTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = C4F81DB9C6DA6418525441E5 /* libPods-ReactNativeChat-ReactNativeChatTests.a */; }; + 12DD1878FCB9487C9F031C86 /* GTAmericaExpMono-Rg.otf in Resources */ = {isa = PBXBuildFile; fileRef = 8437A5A38F2047E0BCCD7C2F /* GTAmericaExpMono-Rg.otf */; }; 13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; }; 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; }; 13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; }; @@ -49,6 +50,7 @@ 67D5C3A6A7FA417C8A853FC1 /* GTAmericaExp-Light.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "GTAmericaExp-Light.otf"; path = "../assets/fonts/GTAmericaExp-Light.otf"; sourceTree = ""; }; 6ABF95746519766B23B4E2D0 /* libPods-ReactNativeChat.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-ReactNativeChat.a"; sourceTree = BUILT_PRODUCTS_DIR; }; 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = ReactNativeChat/LaunchScreen.storyboard; sourceTree = ""; }; + 8437A5A38F2047E0BCCD7C2F /* GTAmericaExpMono-Rg.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "GTAmericaExpMono-Rg.otf"; path = "../assets/fonts/GTAmericaExpMono-Rg.otf"; sourceTree = ""; }; 8C7003903C1E4957824899BB /* GTAmericaExp-Regular.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "GTAmericaExp-Regular.otf"; path = "../assets/fonts/GTAmericaExp-Regular.otf"; sourceTree = ""; }; 9B9FEA91E46D2B2609028E69 /* Pods-ReactNativeChat.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-ReactNativeChat.debug.xcconfig"; path = "Target Support Files/Pods-ReactNativeChat/Pods-ReactNativeChat.debug.xcconfig"; sourceTree = ""; }; A292718541C841859D97DF2F /* GTAmericaExp-Thin.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "GTAmericaExp-Thin.otf"; path = "../assets/fonts/GTAmericaExp-Thin.otf"; sourceTree = ""; }; @@ -166,6 +168,7 @@ AE65058949E14DA5A2D5435D /* GTAmericaExp-Medium.otf */, 8C7003903C1E4957824899BB /* GTAmericaExp-Regular.otf */, A292718541C841859D97DF2F /* GTAmericaExp-Thin.otf */, + 8437A5A38F2047E0BCCD7C2F /* GTAmericaExpMono-Rg.otf */, A8D6F2F722FD4E66A38EBBB6 /* GTAmericaExp-BdIt.otf */, DB5A1365442D4419AF6F08E5 /* GTAmericaExp-MdIt.otf */, 918D7FEFF96242E6B5F5E14D /* GTAmericaExp-RgIt.otf */, @@ -281,6 +284,7 @@ files = ( 81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */, 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */, + 12DD1878FCB9487C9F031C86 /* GTAmericaExpMono-Rg.otf in Resources */, 1E76D5212522316A005A268F /* GTAmericaExp-Bold.otf in Resources */, 1E76D5222522316A005A268F /* GTAmericaExp-Light.otf in Resources */, 1E76D5232522316A005A268F /* GTAmericaExp-Medium.otf in Resources */, diff --git a/ios/ReactNativeChat/Info.plist b/ios/ReactNativeChat/Info.plist index 7655fdcc35f79..6c46b13f25d73 100644 --- a/ios/ReactNativeChat/Info.plist +++ b/ios/ReactNativeChat/Info.plist @@ -23,35 +23,35 @@ CFBundleVersion 99 ITSAppUsesNonExemptEncryption - + LSRequiresIPhoneOS - + NSAppTransportSecurity NSAllowsArbitraryLoads - + NSExceptionDomains localhost NSExceptionAllowsInsecureHTTPLoads - + NSIncludesSubdomains - + www.expensify.com.dev NSExceptionAllowsInsecureHTTPLoads - + NSIncludesSubdomains - + NSCameraUsageDescription Your camera is used to create chat attachments. NSLocationWhenInUseUsageDescription - + NSPhotoLibraryAddUsageDescription Your camera roll is used to store chat attachments. NSPhotoLibraryUsageDescription @@ -63,6 +63,7 @@ GTAmericaExp-Medium.otf GTAmericaExp-Regular.otf GTAmericaExp-Thin.otf + GTAmericaExpMono-Rg.otf GTAmericaExp-BdIt.otf GTAmericaExp-MdIt.otf GTAmericaExp-RgIt.otf @@ -81,6 +82,6 @@ UIInterfaceOrientationPortraitUpsideDown UIViewControllerBasedStatusBarAppearance - + diff --git a/package-lock.json b/package-lock.json index 7b3575b30b3c9..0d067d14b43da 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4277,6 +4277,11 @@ } } }, + "classnames": { + "version": "2.2.5", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.5.tgz", + "integrity": "sha1-+zgB1FNGdknvNgPH1hoCvRKb3m0=" + }, "clean-css": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz", @@ -4388,6 +4393,16 @@ "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.1.tgz", "integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==" }, + "clipboard": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.4.tgz", + "integrity": "sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==", + "requires": { + "good-listener": "^1.2.2", + "select": "^1.1.2", + "tiny-emitter": "^2.0.0" + } + }, "cliui": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz", @@ -5461,6 +5476,11 @@ "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", "dev": true }, + "delegate": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz", + "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==" + }, "denodeify": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/denodeify/-/denodeify-1.2.1.tgz", @@ -8798,6 +8818,14 @@ } } }, + "good-listener": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz", + "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=", + "requires": { + "delegate": "^3.1.2" + } + }, "got": { "version": "9.6.0", "resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz", @@ -10697,9 +10725,9 @@ "integrity": "sha512-JNAkmPeB/GS2tCRqUzRPsTOHpGDah7xP18vGJfIjZC+W2sxEHbxgJxetIjIqhjQ3yYbYNEELkM/spKLtwoOSUQ==" }, "jquery": { - "version": "3.5.1", - "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz", - "integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg==" + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz", + "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==" }, "js-beautify": { "version": "1.11.0", @@ -10722,6 +10750,65 @@ } } }, + "js-libs": { + "version": "git+ssh://git@github.com/Expensify/JS-Libs.git#c2a2bb1b0b725b9b0681e71cb99123f9e711ec20", + "from": "git+ssh://git@github.com/Expensify/JS-Libs.git#c2a2bb1b0b725b9b0681e71cb99123f9e711ec20", + "requires": { + "classnames": "2.2.5", + "clipboard": "2.0.4", + "jquery": "3.3.1", + "lodash.get": "4.4.2", + "lodash.has": "4.5.2", + "moment": "2.20.1", + "prop-types": "15.7.2", + "react": "16.12.0", + "react-dom": "16.12.0", + "simply-deferred": "3.0.0", + "underscore": "1.9.1" + }, + "dependencies": { + "moment": { + "version": "2.20.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.20.1.tgz", + "integrity": "sha512-Yh9y73JRljxW5QxN08Fner68eFLxM5ynNOAw2LbIB1YAGeQzZT8QFSUvkAz609Zf+IHhhaUxqZK8dG3W/+HEvg==" + }, + "react": { + "version": "16.12.0", + "resolved": "https://registry.npmjs.org/react/-/react-16.12.0.tgz", + "integrity": "sha512-fglqy3k5E+81pA8s+7K0/T3DBCF0ZDOher1elBFzF7O6arXJgzyu/FW+COxFvAWXJoJN9KIZbT2LXlukwphYTA==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2" + } + }, + "react-dom": { + "version": "16.12.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.12.0.tgz", + "integrity": "sha512-LMxFfAGrcS3kETtQaCkTKjMiifahaMySFDn71fZUNpPHZQEzmk/GiAeIT8JSOrHB23fnuCOMruL2a8NYlw+8Gw==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2", + "scheduler": "^0.18.0" + } + }, + "scheduler": { + "version": "0.18.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.18.0.tgz", + "integrity": "sha512-agTSHR1Nbfi6ulI0kYNK0203joW2Y5W4po4l+v03tOoiJKpTBbxpNhWDvqc/4IcOw+KLmSiQLTasZ4cab2/UWQ==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } + }, + "underscore": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.9.1.tgz", + "integrity": "sha512-5/4etnCkd9c8gwgowi5/om/mYO5ajCaOgdzj/oW+0eQV9WxKBDZw5+ycmKmeaTXjInS/W0BzpGLo2xR2aBwZdg==" + } + } + }, "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -16050,6 +16137,11 @@ "ajv-keywords": "^3.1.0" } }, + "select": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz", + "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=" + }, "select-hose": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", @@ -16302,6 +16394,11 @@ "plist": "^3.0.1" } }, + "simply-deferred": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/simply-deferred/-/simply-deferred-3.0.0.tgz", + "integrity": "sha1-bWagZMHysHERyATg7EMlp7UYYp0=" + }, "sisteransi": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz", @@ -17220,6 +17317,11 @@ "setimmediate": "^1.0.4" } }, + "tiny-emitter": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz", + "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==" + }, "tiny-invariant": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz", diff --git a/package.json b/package.json index 60b10dec7bd55..299b92b9d9acc 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "electron-updater": "^4.3.4", "file-loader": "^6.0.0", "html-entities": "^1.3.1", - "jquery": "^3.5.1", + "js-libs": "git+https://git@github.com:Expensify/JS-Libs.git#c2a2bb1b0b725b9b0681e71cb99123f9e711ec20", "lodash.get": "^4.4.2", "lodash.has": "^4.5.2", "lodash.orderby": "^4.6.0", diff --git a/src/components/InlineCodeBlock/index.android.js b/src/components/InlineCodeBlock/index.android.js new file mode 100644 index 0000000000000..d081fbd2eeee3 --- /dev/null +++ b/src/components/InlineCodeBlock/index.android.js @@ -0,0 +1,18 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import {View} from 'react-native'; +import {webViewStyles} from '../../style/StyleSheet'; + +const propTypes = { + children: PropTypes.node.isRequired, +}; + +const InlineCodeBlock = ({children}) => ( + + {children} + +); + +InlineCodeBlock.propTypes = propTypes; +InlineCodeBlock.displayName = 'InlineCodeBlock'; +export default InlineCodeBlock; diff --git a/src/components/InlineCodeBlock/index.ios.js b/src/components/InlineCodeBlock/index.ios.js new file mode 100644 index 0000000000000..3887a5e23ab4e --- /dev/null +++ b/src/components/InlineCodeBlock/index.ios.js @@ -0,0 +1,18 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import {View} from 'react-native'; +import styles, {webViewStyles} from '../../style/StyleSheet'; + +const propTypes = { + children: PropTypes.node.isRequired, +}; + +const InlineCodeBlock = ({children}) => ( + + {children} + +); + +InlineCodeBlock.propTypes = propTypes; +InlineCodeBlock.displayName = 'InlineCodeBlock'; +export default InlineCodeBlock; diff --git a/src/components/InlineCodeBlock/index.js b/src/components/InlineCodeBlock/index.js new file mode 100644 index 0000000000000..85f1208bd0a9c --- /dev/null +++ b/src/components/InlineCodeBlock/index.js @@ -0,0 +1,18 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import {Text} from 'react-native'; +import {webViewStyles} from '../../style/StyleSheet'; + +const propTypes = { + children: PropTypes.node.isRequired, +}; + +const InlineCodeBlock = ({children}) => ( + + {children} + +); + +InlineCodeBlock.propTypes = propTypes; +InlineCodeBlock.displayName = 'InlineCodeBlock'; +export default InlineCodeBlock; diff --git a/src/lib/ExpensiMark.js b/src/lib/ExpensiMark.js deleted file mode 100644 index 4ddf63a1fdeb3..0000000000000 --- a/src/lib/ExpensiMark.js +++ /dev/null @@ -1,66 +0,0 @@ -import Str from './Str'; - -export default class ExpensiMark { - constructor() { - /** - * The list of regex replacements to do on a comment. Check the link regex is first so links are processed - * before other delimiters - * - * @type {Object[]} - */ - this.rules = [ - { - name: 'link', - regex: - '([_*~]*?)(((?:https?):\\/\\/|www\\.)[^\\s<>*~_"\'´.-][^\\s<>"\'´]*?\\.[a-z\\d]+[^\\s<>*~"\']*)\\1', - replacement: '$1$2$1', - }, - { - /** - * Use \b in this case because it will match on words, letters, and _: - * https://www.rexegg.com/regex-boundaries.html#wordboundary - * The !_blank is to prevent the `target="_blank">` section of the link replacement from being captured - * Additionally, something like `\b\_([^<>]*?)\_\b` doesn't work because it won't replace - * `_https://www.test.com_` - */ - name: 'italic', - regex: '(?!_blank">)\\b\\_(.*?)\\_\\b', - replacement: '$1', - }, - { - // Use \B in this case because \b doesn't match * or ~. \B will match everything that \b doesn't, so it - // works for * and ~: https://www.rexegg.com/regex-boundaries.html#notb - name: 'bold', - regex: '\\B\\*(.*?)\\*\\B', - replacement: '$1', - }, - { - name: 'strikethrough', - regex: '\\B\\~(.*?)\\~\\B', - replacement: '$1', - }, - { - name: 'newline', - regex: '\\n', - replacement: '
', - }, - ]; - } - - /** - * Replaces markdown with html elements - * - * @param {String} text - * @returns {String} - */ - replace(text) { - // This ensures that any html the user puts into the comment field shows as raw html - let safeText = Str.safeEscape(text); - - this.rules.forEach((rule) => { - safeText = safeText.replace(new RegExp(rule.regex, 'g'), rule.replacement); - }); - - return safeText; - } -} diff --git a/src/lib/actions/Report.js b/src/lib/actions/Report.js index 08149e09e8325..6e76f609d6b12 100644 --- a/src/lib/actions/Report.js +++ b/src/lib/actions/Report.js @@ -1,13 +1,13 @@ import moment from 'moment'; import _ from 'underscore'; import lodashGet from 'lodash.get'; +import ExpensiMark from 'js-libs/lib/ExpensiMark'; import Ion from '../Ion'; import * as API from '../API'; import IONKEYS from '../../IONKEYS'; import CONFIG from '../../CONFIG'; import * as Pusher from '../Pusher/pusher'; import promiseAllSettled from '../promiseAllSettled'; -import ExpensiMark from '../ExpensiMark'; import Notification from '../Notification'; import * as PersonalDetails from './PersonalDetails'; import {redirect} from './App'; diff --git a/src/page/home/report/ReportActionItemFragment.js b/src/page/home/report/ReportActionItemFragment.js index 54954d68cc40c..a2b16d4480bde 100644 --- a/src/page/home/report/ReportActionItemFragment.js +++ b/src/page/home/report/ReportActionItemFragment.js @@ -10,6 +10,7 @@ import styles, {webViewStyles, colors} from '../../../style/StyleSheet'; import Text from '../../../components/Text'; import AnchorForCommentsOnly from '../../../components/AnchorForCommentsOnly'; import {getAuthToken} from '../../../lib/API'; +import InlineCodeBlock from '../../../components/InlineCodeBlock'; const propTypes = { // The message fragment needing to be displayed @@ -43,6 +44,19 @@ class ReportActionItemFragment extends React.PureComponent { {children} ), + pre: (htmlAttribs, children, convertedCSSStyles, passProps) => ( + + {children} + + ), + code: (htmlAttribs, children, convertedCSSStyles, passProps) => ( + + {children} + + ), }; } diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js index 40cab014fcc37..d29c55951c5ad 100644 --- a/src/style/StyleSheet.js +++ b/src/style/StyleSheet.js @@ -15,6 +15,7 @@ const colors = { heading: '#37444C', icon: '#C6C9CA', text: '#4A5960', + textBackground: '#F0F0F0', textReversed: '#FFFFFF', textSupporting: '#7D8B8F', red: '#E84A3B', @@ -58,6 +59,10 @@ const styles = { marginBottom: 16, }, + mbn5: { + marginBottom: -5, + }, + p1: { padding: 10, }, @@ -659,7 +664,28 @@ const styles = { }, }; +const baseCodeTagStyles = { + borderWidth: 1, + borderRadius: 5, + borderColor: colors.border, + backgroundColor: colors.textBackground, +}; + const webViewStyles = { + preTagStyle: { + ...baseCodeTagStyles, + paddingTop: 4, + paddingBottom: 5, + paddingRight: 8, + paddingLeft: 8, + }, + codeTagStyle: { + ...baseCodeTagStyles, + paddingLeft: 5, + paddingRight: 5, + paddingBottom: 2, + alignSelf: 'flex-start', + }, tagStyles: { em: { fontFamily: fontFamily.GTA_ITALIC, @@ -680,6 +706,14 @@ const webViewStyles = { color: colors.blue }, + pre: { + fontFamily: fontFamily.MONOSPACE, + }, + + code: { + fontFamily: fontFamily.MONOSPACE, + }, + img: { borderColor: colors.border, borderRadius: 8, @@ -690,7 +724,7 @@ const webViewStyles = { baseFontStyle: { color: colors.text, fontSize: 15, - fontFamily: fontFamily.GTA + fontFamily: fontFamily.GTA, } }; diff --git a/src/style/fontFamily/index.js b/src/style/fontFamily/index.js index 74b5cca20816b..3b7b9586dee4d 100644 --- a/src/style/fontFamily/index.js +++ b/src/style/fontFamily/index.js @@ -1,9 +1,11 @@ +import monospace from './monospace'; import bold from '../bold'; const fontFamily = { GTA_ITALIC: 'GTAmericaExp-RgIt', GTA_BOLD: bold, GTA: 'GTAmericaExp-Regular', + MONOSPACE: monospace, SYSTEM: 'System', }; diff --git a/src/style/fontFamily/monospace/index.js b/src/style/fontFamily/monospace/index.js new file mode 100644 index 0000000000000..35857bdc10f08 --- /dev/null +++ b/src/style/fontFamily/monospace/index.js @@ -0,0 +1 @@ +export default 'monospace'; diff --git a/src/style/fontFamily/monospace/index.native.js b/src/style/fontFamily/monospace/index.native.js new file mode 100644 index 0000000000000..585fc26db20ca --- /dev/null +++ b/src/style/fontFamily/monospace/index.native.js @@ -0,0 +1 @@ +export default 'GTAmericaExpMono-Rg';