From b09ed41f6d279bc8649b82f371723885c8802625 Mon Sep 17 00:00:00 2001 From: natjms Date: Wed, 14 Jul 2021 13:05:32 -0300 Subject: [PATCH] Enable rendering HTML in captions, comments and bios. Closes #9 --- package-lock.json | 281 ++++++++++++++++++++++++++ package.json | 1 + src/components/pages/profile.js | 34 ++-- src/components/pages/view-comments.js | 21 +- src/components/posts/post.js | 17 +- src/interface/rendering.js | 6 + 6 files changed, 332 insertions(+), 28 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5fab39a..5cb63b3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "react-native-pager-view": "5.0.12", "react-native-popup-menu": "^0.15.10", "react-native-reanimated": "~2.1.0", + "react-native-render-html": "^5.1.1", "react-native-safe-area-context": "3.2.0", "react-native-screens": "~3.0.0", "react-native-tab-view": "^2.16.0", @@ -4650,6 +4651,24 @@ "node": ">=0.8.0" } }, + "node_modules/character-entities-html4": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-1.1.4.tgz", + "integrity": "sha512-HRcDxZuZqMx3/a+qrzxdBKBPUpxWEq9xw2OPZ3a/174ihfrQKVsFhqtthBInFy1zZ9GgZyFXOatNujm8M+El3g==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/character-entities-legacy": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz", + "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/chardet": { "version": "0.4.2", "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.4.2.tgz", @@ -5247,16 +5266,103 @@ "node": ">= 0.6" } }, + "node_modules/deprecated-prop-type": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/deprecated-prop-type/-/deprecated-prop-type-1.0.0.tgz", + "integrity": "sha512-Hp4VxvZN6IlbKvleZfbdrojOmnPXuRPjC9cQ82j6bdI3DRCwGR+7CEf367X59MHz/y8Ao/mxdP7YyR3KTb+EhQ==", + "dependencies": { + "warning": "4.0.1" + } + }, "node_modules/destroy": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=" }, + "node_modules/dom-serializer": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz", + "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==", + "dependencies": { + "domelementtype": "^2.0.1", + "domhandler": "^4.2.0", + "entities": "^2.0.0" + }, + "funding": { + "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" + } + }, + "node_modules/dom-serializer/node_modules/domhandler": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.0.tgz", + "integrity": "sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA==", + "dependencies": { + "domelementtype": "^2.2.0" + }, + "engines": { + "node": ">= 4" + }, + "funding": { + "url": "https://github.com/fb55/domhandler?sponsor=1" + } + }, "node_modules/dom-walk": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz", "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==" }, + "node_modules/domelementtype": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz", + "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ] + }, + "node_modules/domhandler": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-3.3.0.tgz", + "integrity": "sha512-J1C5rIANUbuYK+FuFL98650rihynUOEzRLxW+90bKZRWB6A1X1Tf82GxR1qAWLyfNPRvjqfip3Q5tdYlmAa9lA==", + "dependencies": { + "domelementtype": "^2.0.1" + }, + "engines": { + "node": ">= 4" + }, + "funding": { + "url": "https://github.com/fb55/domhandler?sponsor=1" + } + }, + "node_modules/domutils": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.7.0.tgz", + "integrity": "sha512-8eaHa17IwJUPAiB+SoTYBo5mCdeMgdcAoXJ59m6DT1vw+5iLS3gNoqYaRowaBKtGVrOF1Jz4yDTgYKLK2kvfJg==", + "dependencies": { + "dom-serializer": "^1.0.1", + "domelementtype": "^2.2.0", + "domhandler": "^4.2.0" + }, + "funding": { + "url": "https://github.com/fb55/domutils?sponsor=1" + } + }, + "node_modules/domutils/node_modules/domhandler": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.0.tgz", + "integrity": "sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA==", + "dependencies": { + "domelementtype": "^2.2.0" + }, + "engines": { + "node": ">= 4" + }, + "funding": { + "url": "https://github.com/fb55/domhandler?sponsor=1" + } + }, "node_modules/ee-first": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", @@ -5296,6 +5402,14 @@ "once": "^1.4.0" } }, + "node_modules/entities": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", + "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==", + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, "node_modules/envinfo": { "version": "7.8.1", "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz", @@ -6559,6 +6673,20 @@ "react-is": "^16.7.0" } }, + "node_modules/htmlparser2": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-5.0.1.tgz", + "integrity": "sha512-vKZZra6CSe9qsJzh0BjBGXo8dvzNsq/oGvsjfRdOrrryfeD9UOBEEQdeoqCRmKZchF5h2zOBMQ6YuQ0uRUmdbQ==", + "dependencies": { + "domelementtype": "^2.0.1", + "domhandler": "^3.3.0", + "domutils": "^2.4.2", + "entities": "^2.0.0" + }, + "funding": { + "url": "https://github.com/fb55/htmlparser2?sponsor=1" + } + }, "node_modules/http-errors": { "version": "1.7.3", "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz", @@ -9536,6 +9664,21 @@ "ua-parser-js": "^0.7.18" } }, + "node_modules/react-native-render-html": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/react-native-render-html/-/react-native-render-html-5.1.1.tgz", + "integrity": "sha512-K4vP50555eZyVTbS0jv356I+S2WX/TavSlYi3zsg/XhYzZFO4sIFW8MZBZx/IFSQXlWueCuw6poGAXguz+SO3w==", + "dependencies": { + "deprecated-prop-type": "^1.0.0", + "htmlparser2": "5.0.1", + "prop-types": "^15.7.2", + "stringify-entities": "^3.1.0" + }, + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, "node_modules/react-native-safe-area-context": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.2.0.tgz", @@ -10756,6 +10899,20 @@ "node": ">=4" } }, + "node_modules/stringify-entities": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-3.1.0.tgz", + "integrity": "sha512-3FP+jGMmMV/ffZs86MoghGqAoqXAdxLrJP4GUdrDN1aIScYih5tuIO3eF4To5AJZ79KDZ8Fpdy7QJnK8SsL1Vg==", + "dependencies": { + "character-entities-html4": "^1.0.0", + "character-entities-legacy": "^1.0.0", + "xtend": "^4.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/strip-ansi": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", @@ -11260,6 +11417,14 @@ "makeerror": "1.0.x" } }, + "node_modules/warning": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.1.tgz", + "integrity": "sha512-rAVtTNZw+cQPjvGp1ox0XC5Q2IBFyqoqh+QII4J/oguyu83Bax1apbo2eqB8bHRS+fqYUBagys6lqUoVwKSmXQ==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/wcwidth": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz", @@ -15067,6 +15232,16 @@ } } }, + "character-entities-html4": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-1.1.4.tgz", + "integrity": "sha512-HRcDxZuZqMx3/a+qrzxdBKBPUpxWEq9xw2OPZ3a/174ihfrQKVsFhqtthBInFy1zZ9GgZyFXOatNujm8M+El3g==" + }, + "character-entities-legacy": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz", + "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==" + }, "chardet": { "version": "0.4.2", "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.4.2.tgz", @@ -15555,16 +15730,77 @@ "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=" }, + "deprecated-prop-type": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/deprecated-prop-type/-/deprecated-prop-type-1.0.0.tgz", + "integrity": "sha512-Hp4VxvZN6IlbKvleZfbdrojOmnPXuRPjC9cQ82j6bdI3DRCwGR+7CEf367X59MHz/y8Ao/mxdP7YyR3KTb+EhQ==", + "requires": { + "warning": "4.0.1" + } + }, "destroy": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=" }, + "dom-serializer": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz", + "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==", + "requires": { + "domelementtype": "^2.0.1", + "domhandler": "^4.2.0", + "entities": "^2.0.0" + }, + "dependencies": { + "domhandler": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.0.tgz", + "integrity": "sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA==", + "requires": { + "domelementtype": "^2.2.0" + } + } + } + }, "dom-walk": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz", "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==" }, + "domelementtype": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz", + "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==" + }, + "domhandler": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-3.3.0.tgz", + "integrity": "sha512-J1C5rIANUbuYK+FuFL98650rihynUOEzRLxW+90bKZRWB6A1X1Tf82GxR1qAWLyfNPRvjqfip3Q5tdYlmAa9lA==", + "requires": { + "domelementtype": "^2.0.1" + } + }, + "domutils": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.7.0.tgz", + "integrity": "sha512-8eaHa17IwJUPAiB+SoTYBo5mCdeMgdcAoXJ59m6DT1vw+5iLS3gNoqYaRowaBKtGVrOF1Jz4yDTgYKLK2kvfJg==", + "requires": { + "dom-serializer": "^1.0.1", + "domelementtype": "^2.2.0", + "domhandler": "^4.2.0" + }, + "dependencies": { + "domhandler": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.0.tgz", + "integrity": "sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA==", + "requires": { + "domelementtype": "^2.2.0" + } + } + } + }, "ee-first": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", @@ -15601,6 +15837,11 @@ "once": "^1.4.0" } }, + "entities": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", + "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==" + }, "envinfo": { "version": "7.8.1", "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz", @@ -16649,6 +16890,17 @@ "react-is": "^16.7.0" } }, + "htmlparser2": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-5.0.1.tgz", + "integrity": "sha512-vKZZra6CSe9qsJzh0BjBGXo8dvzNsq/oGvsjfRdOrrryfeD9UOBEEQdeoqCRmKZchF5h2zOBMQ6YuQ0uRUmdbQ==", + "requires": { + "domelementtype": "^2.0.1", + "domhandler": "^3.3.0", + "domutils": "^2.4.2", + "entities": "^2.0.0" + } + }, "http-errors": { "version": "1.7.3", "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz", @@ -19127,6 +19379,17 @@ } } }, + "react-native-render-html": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/react-native-render-html/-/react-native-render-html-5.1.1.tgz", + "integrity": "sha512-K4vP50555eZyVTbS0jv356I+S2WX/TavSlYi3zsg/XhYzZFO4sIFW8MZBZx/IFSQXlWueCuw6poGAXguz+SO3w==", + "requires": { + "deprecated-prop-type": "^1.0.0", + "htmlparser2": "5.0.1", + "prop-types": "^15.7.2", + "stringify-entities": "^3.1.0" + } + }, "react-native-safe-area-context": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.2.0.tgz", @@ -20046,6 +20309,16 @@ } } }, + "stringify-entities": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-3.1.0.tgz", + "integrity": "sha512-3FP+jGMmMV/ffZs86MoghGqAoqXAdxLrJP4GUdrDN1aIScYih5tuIO3eF4To5AJZ79KDZ8Fpdy7QJnK8SsL1Vg==", + "requires": { + "character-entities-html4": "^1.0.0", + "character-entities-legacy": "^1.0.0", + "xtend": "^4.0.0" + } + }, "strip-ansi": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", @@ -20427,6 +20700,14 @@ "makeerror": "1.0.x" } }, + "warning": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.1.tgz", + "integrity": "sha512-rAVtTNZw+cQPjvGp1ox0XC5Q2IBFyqoqh+QII4J/oguyu83Bax1apbo2eqB8bHRS+fqYUBagys6lqUoVwKSmXQ==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "wcwidth": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz", diff --git a/package.json b/package.json index 67513e3..4f7594e 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "react-native-pager-view": "5.0.12", "react-native-popup-menu": "^0.15.10", "react-native-reanimated": "~2.1.0", + "react-native-render-html": "^5.1.1", "react-native-safe-area-context": "3.2.0", "react-native-screens": "~3.0.0", "react-native-tab-view": "^2.16.0", diff --git a/src/components/pages/profile.js b/src/components/pages/profile.js index 17a99a2..919035f 100644 --- a/src/components/pages/profile.js +++ b/src/components/pages/profile.js @@ -12,7 +12,8 @@ import * as Linking from "expo-linking"; import AsyncStorage from "@react-native-async-storage/async-storage"; import { activeOrNot } from "src/interface/interactions"; -import { withoutHTML, pluralize } from "src/interface/rendering"; +import HTML from "react-native-render-html"; +import { withLeadingAcct, withoutHTML, pluralize } from "src/interface/rendering"; import * as requests from "src/requests"; import GridViewJsx from "src/components/posts/grid-view"; @@ -348,9 +349,9 @@ const RawProfileJsx = (props) => { - - {props.profile.note} - + { props.profile.fields ? props.profile.fields.map((field, index) => ( @@ -382,35 +383,34 @@ const RawProfileJsx = (props) => { ); }; -const screen_width = Dimensions.get("screen").width; -const screen_height = Dimensions.get("screen").height; +const SCREEN_WIDTH = Dimensions.get("window").width; const styles = { jumbotron: { - padding: screen_width / 20, + padding: SCREEN_WIDTH / 20, }, profileHeader: { flexDirection: "row", alignItems: "center", - marginBottom: screen_width / 20, + marginBottom: SCREEN_WIDTH / 20, }, displayName: { fontSize: 24 }, avatar: { - width: screen_width / 5, - height: screen_width / 5, + width: SCREEN_WIDTH / 5, + height: SCREEN_WIDTH / 5, - borderRadius: screen_width / 10, - marginRight: screen_width / 20, + borderRadius: SCREEN_WIDTH / 10, + marginRight: SCREEN_WIDTH / 20, }, profileHeaderIcon: { - width: screen_width / 12, - height: screen_width / 12, + width: SCREEN_WIDTH / 12, + height: SCREEN_WIDTH / 12, }, profileContextContainer: { marginLeft: "auto", - marginRight: screen_width / 15, + marginRight: SCREEN_WIDTH / 15, }, accountStats: { fontSize: 14, @@ -428,10 +428,10 @@ const styles = { }, cell: { name: { - width: screen_width / 3, + width: SCREEN_WIDTH / 3, }, value: { - width: (screen_width / 3) * 2, + width: (SCREEN_WIDTH / 3) * 2, }, } }, diff --git a/src/components/pages/view-comments.js b/src/components/pages/view-comments.js index d42612a..aba42e1 100644 --- a/src/components/pages/view-comments.js +++ b/src/components/pages/view-comments.js @@ -11,7 +11,12 @@ import { Ionicons } from '@expo/vector-icons'; import { ScrollView } from "react-native-gesture-handler"; import AsyncStorage from "@react-native-async-storage/async-storage"; -import { timeToAge, StatusBarSpace } from "src/interface/rendering"; +import HTML from "react-native-render-html"; +import { + withLeadingAcct, + timeToAge, + StatusBarSpace +} from "src/interface/rendering"; import { activeOrNot } from "src/interface/interactions"; import TimelineViewJsx from "src/components/posts/timeline-view"; @@ -95,7 +100,7 @@ function threadify(descendants) { let sub = byReply.slice(1); // All sub-comments - // Repeate the procedure until sub is empty (i.e all comments have been + // Repeat the procedure until sub is empty (i.e all comments have been // sorted) while (sub.length > 0) { sorted.forEach((thread, threadIndex) => { @@ -150,8 +155,14 @@ const CommentJsx = (props) => { style = { styles.avatar } /> - { props.data.account.acct }  - { props.data.content } + @@ -303,7 +314,7 @@ const ViewCommentsJsx = (props) => { state.accessToken, ); - // NOTE: It appears that it takes a moment for the Context of a + // It appears that it takes a moment for the Context of a // post to register that a comment has been deleted, so instead // of waiting for it, it's more efficient to just drop the comment // on the client side. diff --git a/src/components/posts/post.js b/src/components/posts/post.js index c463fdc..0456071 100644 --- a/src/components/posts/post.js +++ b/src/components/posts/post.js @@ -14,8 +14,11 @@ import { getAutoHeight, } from "src/interface/rendering"; +import HTML from "react-native-render-html"; + import AsyncStorage from "@react-native-async-storage/async-storage"; import * as requests from "src/requests"; +import { withLeadingAcct } from "src/interface/rendering"; import PostActionBarJsx from "src/components/posts/post-action-bar"; @@ -147,12 +150,14 @@ export const RawPostJsx = (props) => { onReblog = { props.onReblog } onBookmark = { props.onBookmark } /> - - - { props.data.account.username } - -  { props.data.content } - + props.navigation.navigate("ViewComments", { diff --git a/src/interface/rendering.js b/src/interface/rendering.js index 37a40c9..6076ed7 100644 --- a/src/interface/rendering.js +++ b/src/interface/rendering.js @@ -14,6 +14,12 @@ export function withoutHTML(string) { return string.replace(/<[^>]*>/ig, ""); } +export function withLeadingAcct(acct, html) { + // Insert a bolded acct at the beginning of an HTML string so that it can + // be rendered the way Instagram renders post captions + return `${acct} ` + html; +} + export function pluralize(n, singular, plural) { if (n == 1) { return singular;