Use vue-richtext to render link preview

Signed-off-by: Carl Schwan <carl@carlschwan.eu>
pull/1469/head
Carl Schwan 2022-09-14 14:11:42 +02:00
rodzic cb07ab075e
commit 2afd3fdfaa
6 zmienionych plików z 87 dodań i 12 usunięć

Wyświetl plik

@ -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) {

61
package-lock.json wygenerowano
Wyświetl plik

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

Wyświetl plik

@ -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": [

Wyświetl plik

@ -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] {

Wyświetl plik

@ -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);

Wyświetl plik

@ -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;
}