From 2afd3fdfaa70a2d15e6db3f9de5744c45db67eca Mon Sep 17 00:00:00 2001
From: Carl Schwan <carl@carlschwan.eu>
Date: Wed, 14 Sep 2022 14:11:42 +0200
Subject: [PATCH] Use vue-richtext to render link preview

Signed-off-by: Carl Schwan <carl@carlschwan.eu>
---
 lib/Service/PostService.php     |  3 ++
 package-lock.json               | 61 +++++++++++++++++++++++++++++++++
 package.json                    |  5 +--
 src/App.vue                     |  4 +--
 src/components/TimelinePost.vue | 24 +++++++++----
 src/views/Timeline.vue          |  2 --
 6 files changed, 87 insertions(+), 12 deletions(-)

diff --git a/lib/Service/PostService.php b/lib/Service/PostService.php
index beaa7386..225f3273 100644
--- a/lib/Service/PostService.php
+++ b/lib/Service/PostService.php
@@ -130,6 +130,9 @@ class PostService {
 	private function generateDocumentsFromAttachments(Note $note, Post $post) {
 		$documents = [];
 		\OC::$server->getLogger()->error(var_export($_FILES["attachments"], true));
+		if (!isset($_FILES['attachments'])) {
+			return [];
+		}
 		if (is_array($_FILES["attachments"]["error"])) {
 			foreach ($_FILES["attachments"]["error"] as $key => $error) {
 				if ($error == UPLOAD_ERR_OK) {
diff --git a/package-lock.json b/package-lock.json
index adc23790..a734a400 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
 				"@nextcloud/router": "^1.2.0",
 				"@nextcloud/stylelint-config": "^2.2.0",
 				"@nextcloud/vue": "^7.0.0-beta.2",
+				"@nextcloud/vue-richtext": "^2.0.0",
 				"he": "^1.2.0",
 				"linkifyjs": "^2.1.8",
 				"tributejs": "^3.7.3",
@@ -4250,6 +4251,32 @@
 				"npm": "^7.0.0 || ^8.0.0"
 			}
 		},
+		"node_modules/@nextcloud/vue-richtext": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@nextcloud/vue-richtext/-/vue-richtext-2.0.0.tgz",
+			"integrity": "sha512-Z/AbweVmIB8shWZVLI0kUPrJnkCBlU5xIkkfv+RPFepLY7eZ+ttm5HRhLGqgFyXFNf4RIM7yGt/l6K35XcEX2A==",
+			"dependencies": {
+				"@nextcloud/axios": "^2.0.0",
+				"@nextcloud/router": "^2.0.0",
+				"clone": "^2.1.2",
+				"vue": "^2.7.8"
+			},
+			"engines": {
+				"node": ">=14.0.0",
+				"npm": ">=7.0.0"
+			},
+			"peerDependencies": {
+				"vue": "^2.7.8"
+			}
+		},
+		"node_modules/@nextcloud/vue-richtext/node_modules/@nextcloud/router": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@nextcloud/router/-/router-2.0.0.tgz",
+			"integrity": "sha512-GyHYNYrYAZRBGD5VxRggcbahdJ/zCkXb8+ERVfuaosT+nHMjJSmenTD6Uyct41qGm0p3Az4xRCXGyZGJM0NEUQ==",
+			"dependencies": {
+				"core-js": "^3.6.4"
+			}
+		},
 		"node_modules/@nextcloud/vue/node_modules/@nextcloud/router": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/@nextcloud/router/-/router-2.0.0.tgz",
@@ -6965,6 +6992,14 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/clone": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+			"integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+			"engines": {
+				"node": ">=0.8"
+			}
+		},
 		"node_modules/clone-deep": {
 			"version": "4.0.1",
 			"resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
@@ -26670,6 +26705,27 @@
 				}
 			}
 		},
+		"@nextcloud/vue-richtext": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@nextcloud/vue-richtext/-/vue-richtext-2.0.0.tgz",
+			"integrity": "sha512-Z/AbweVmIB8shWZVLI0kUPrJnkCBlU5xIkkfv+RPFepLY7eZ+ttm5HRhLGqgFyXFNf4RIM7yGt/l6K35XcEX2A==",
+			"requires": {
+				"@nextcloud/axios": "^2.0.0",
+				"@nextcloud/router": "^2.0.0",
+				"clone": "^2.1.2",
+				"vue": "^2.7.8"
+			},
+			"dependencies": {
+				"@nextcloud/router": {
+					"version": "2.0.0",
+					"resolved": "https://registry.npmjs.org/@nextcloud/router/-/router-2.0.0.tgz",
+					"integrity": "sha512-GyHYNYrYAZRBGD5VxRggcbahdJ/zCkXb8+ERVfuaosT+nHMjJSmenTD6Uyct41qGm0p3Az4xRCXGyZGJM0NEUQ==",
+					"requires": {
+						"core-js": "^3.6.4"
+					}
+				}
+			}
+		},
 		"@nextcloud/webpack-vue-config": {
 			"version": "5.3.0",
 			"resolved": "https://registry.npmjs.org/@nextcloud/webpack-vue-config/-/webpack-vue-config-5.3.0.tgz",
@@ -28818,6 +28874,11 @@
 				}
 			}
 		},
+		"clone": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+			"integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w=="
+		},
 		"clone-deep": {
 			"version": "4.0.1",
 			"resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
diff --git a/package.json b/package.json
index 797da6b4..1e7748fa 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
 		"@nextcloud/router": "^1.2.0",
 		"@nextcloud/stylelint-config": "^2.2.0",
 		"@nextcloud/vue": "^7.0.0-beta.2",
+		"@nextcloud/vue-richtext": "^2.0.0",
 		"he": "^1.2.0",
 		"linkifyjs": "^2.1.8",
 		"tributejs": "^3.7.3",
@@ -71,8 +72,8 @@
 		"@nextcloud/webpack-vue-config": "^5.3.0",
 		"jest": "^26.6.3",
 		"jest-serializer-vue": "^2.0.2",
-		"vue-template-compiler": "^2.7.10",
-		"prettier-eslint": "^14.0.3"
+		"prettier-eslint": "^14.0.3",
+		"vue-template-compiler": "^2.7.10"
 	},
 	"jest": {
 		"moduleFileExtensions": [
diff --git a/src/App.vue b/src/App.vue
index b9108f50..b9c46e25 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -235,14 +235,14 @@ export default {
 <style scoped>
 	#app-content-vue .social__wrapper {
 		padding: 15px;
-		max-width: 630px;
+		max-width: 800px;
 		margin: auto;
 	}
 
 	.setup {
 		margin: 0 auto !important;
 		padding: 15px;
-		max-width: 630px;
+		max-width: 800px;
 	}
 
 	.setup input[type=url] {
diff --git a/src/components/TimelinePost.vue b/src/components/TimelinePost.vue
index eac39e4d..cb3db859 100644
--- a/src/components/TimelinePost.vue
+++ b/src/components/TimelinePost.vue
@@ -25,7 +25,10 @@
 		</div>
 		<!-- eslint-disable-next-line vue/no-v-html -->
 		<div v-if="item.content" class="post-message">
-			<MessageContent :source="source" />
+			<RichText :text="source"
+				:autolink="true"
+				:reference-limit="2"
+				:arguments="richParameters" />
 		</div>
 		<!-- eslint-disable-next-line vue/no-v-html -->
 		<div v-else class="post-message" v-html="item.actor_info.summary" />
@@ -91,6 +94,7 @@ import Logger from '../logger'
 import MessageContent from './MessageContent'
 import moment from '@nextcloud/moment'
 import { generateUrl } from '@nextcloud/router'
+import RichText from '@nextcloud/vue-richtext'
 
 pluginMention(linkify)
 
@@ -106,6 +110,7 @@ export default {
 		Reply,
 		Heart,
 		HeartOutline,
+		RichText,
 	},
 	mixins: [currentUser],
 	props: {
@@ -122,11 +127,10 @@ export default {
 		source() {
 			if (!this.item.source && this.item.content) {
 				// local posts don't have a source json
-				return {
-					content: this.item.content,
-					tag: []
-				}
+				console.debug(this.item.content)
+				return this.item.content
 			}
+			console.debug(JSON.parse(this.item.source))
 			return JSON.parse(this.item.source)
 		},
 		avatarUrl() {
@@ -146,7 +150,10 @@ export default {
 				return false
 			}
 			return !!this.item.action.values.liked
-		}
+		},
+		richParameters() {
+			return {}
+		},
 	},
 	methods: {
 		/**
@@ -210,6 +217,7 @@ export default {
 }
 </script>
 <style scoped lang="scss">
+	@import '@nextcloud/vue-richtext/dist/style.css';
 	.post-content {
 		padding: 4px 4px 4px 8px;
 		font-size: 15px;
@@ -217,6 +225,10 @@ export default {
 		position: relative;
 		width: 100%;
 
+		::v-deep a.widget-default {
+			text-decoration: none !important;
+		}
+
 		&:hover {
 			border-radius: 8px;
 			background-color: var(--color-background-hover);
diff --git a/src/views/Timeline.vue b/src/views/Timeline.vue
index 95828b63..a509fc8a 100644
--- a/src/views/Timeline.vue
+++ b/src/views/Timeline.vue
@@ -32,7 +32,6 @@
 <style scoped>
 
 	.social__welcome {
-		max-width: 600px;
 		margin: 15px auto;
 		padding: 15px;
 		border-bottom: 1px solid var(--color-border);
@@ -68,7 +67,6 @@
 	}
 
 	.social__timeline {
-		max-width: 600px;
 		margin: 15px auto;
 	}