Merge pull request #7822 from nextcloud/enh/references

Implement link previews

7 files changed, 73 insertions, 31 deletions

diff --git a/jest.config.js b/jest.config.js
index 7907ef694..9aa23e823 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -24,6 +24,7 @@
 const ignorePatterns = [
 	'vue-material-design-icons',
 	'@juliushaertl',
+	'@nextcloud/vue-richtext',
 	'tributejs',
 	'@nextcloud/vue',
 	'splitpanes',
diff --git a/package-lock.json b/package-lock.json
index 45cc82eed..b56eb91e7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,6 @@
 			"version": "15.0.0",
 			"license": "agpl",
 			"dependencies": {
-				"@juliushaertl/vue-richtext": "^0.3.3",
 				"@nextcloud/auth": "^2.0.0",
 				"@nextcloud/axios": "^2.0.0",
 				"@nextcloud/browser-storage": "^0.1.1",
@@ -23,6 +22,7 @@
 				"@nextcloud/router": "^2.0.0",
 				"@nextcloud/vue": "^6.0.0-beta.4",
 				"@nextcloud/vue-dashboard": "^2.0.1",
+				"@nextcloud/vue-richtext": "^2.0.0",
 				"attachmediastream": "^2.1.0",
 				"color.js": "^1.2.0",
 				"crypto-js": "^4.1.1",
@@ -2444,18 +2444,6 @@
 				"@jridgewell/sourcemap-codec": "^1.4.10"
 			}
 		},
-		"node_modules/@juliushaertl/vue-richtext": {
-			"version": "0.3.3",
-			"resolved": "https://registry.npmjs.org/@juliushaertl/vue-richtext/-/vue-richtext-0.3.3.tgz",
-			"integrity": "sha512-OmAtQfXY5ZkOq6CxE79RVAKTo60fS0HAX2x6MMfHUmTlZgtQQqSxlvIJUZEOo7EiJwD84OVMY0G9holV1iwgTA==",
-			"dependencies": {
-				"core-js": "^3.6.4",
-				"vue": "^2.6.12"
-			},
-			"engines": {
-				"node": ">=10.0.0"
-			}
-		},
 		"node_modules/@nextcloud/auth": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/@nextcloud/auth/-/auth-2.0.0.tgz",
@@ -2970,6 +2958,32 @@
 			"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
 			"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
 		},
+		"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/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/@nextcloud/vue/node_modules/@babel/polyfill": {
 			"version": "7.12.1",
 			"resolved": "https://registry.npmjs.org/@babel/polyfill/-/polyfill-7.12.1.tgz",
@@ -27976,15 +27990,6 @@
 				"@jridgewell/sourcemap-codec": "^1.4.10"
 			}
 		},
-		"@juliushaertl/vue-richtext": {
-			"version": "0.3.3",
-			"resolved": "https://registry.npmjs.org/@juliushaertl/vue-richtext/-/vue-richtext-0.3.3.tgz",
-			"integrity": "sha512-OmAtQfXY5ZkOq6CxE79RVAKTo60fS0HAX2x6MMfHUmTlZgtQQqSxlvIJUZEOo7EiJwD84OVMY0G9holV1iwgTA==",
-			"requires": {
-				"core-js": "^3.6.4",
-				"vue": "^2.6.12"
-			}
-		},
 		"@nextcloud/auth": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/@nextcloud/auth/-/auth-2.0.0.tgz",
@@ -28468,6 +28473,24 @@
 				}
 			}
 		},
+		"@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": {
+				"clone": {
+					"version": "2.1.2",
+					"resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+					"integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w=="
+				}
+			}
+		},
 		"@nextcloud/webpack-vue-config": {
 			"version": "5.3.0",
 			"resolved": "https://registry.npmjs.org/@nextcloud/webpack-vue-config/-/webpack-vue-config-5.3.0.tgz",
diff --git a/package.json b/package.json
index 7fe6ab221..9810becd2 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,6 @@
 		"stylelint:fix": "stylelint css/*.css css/*.scss src/**/*.scss src/**/*.vue --fix"
 	},
 	"dependencies": {
-		"@juliushaertl/vue-richtext": "^0.3.3",
 		"@nextcloud/auth": "^2.0.0",
 		"@nextcloud/axios": "^2.0.0",
 		"@nextcloud/browser-storage": "^0.1.1",
@@ -31,6 +30,7 @@
 		"@nextcloud/router": "^2.0.0",
 		"@nextcloud/vue": "^6.0.0-beta.4",
 		"@nextcloud/vue-dashboard": "^2.0.1",
+		"@nextcloud/vue-richtext": "^2.0.0",
 		"attachmediastream": "^2.1.0",
 		"color.js": "^1.2.0",
 		"crypto-js": "^4.1.1",
diff --git a/src/components/LobbyScreen.vue b/src/components/LobbyScreen.vue
index 7b7a9490d..ed936711d 100644
--- a/src/components/LobbyScreen.vue
+++ b/src/components/LobbyScreen.vue
@@ -49,7 +49,7 @@
 
 <script>
 import moment from '@nextcloud/moment'
-import RichText from '@juliushaertl/vue-richtext'
+import RichText from '@nextcloud/vue-richtext'
 import SetGuestUsername from './SetGuestUsername.vue'
 import Lobby from './missingMaterialDesignIcons/Lobby.vue'
 
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 1ea27ae87..9cb6b1cf9 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -52,11 +52,17 @@ the main body of the message as well as a quote.
 					</div>
 				</div>
 				<div v-else-if="showJoinCallButton" class="message-body__main__text call-started">
-					<RichText :text="message" :arguments="richParameters" :autolink="true" />
+					<RichText :text="message"
+						:arguments="richParameters"
+						:autolink="true"
+						:reference-limit="10" />
 					<CallButton />
 				</div>
 				<div v-else-if="showResultsButton" class="message-body__main__text system-message">
-					<RichText :text="message" :arguments="richParameters" :autolink="true" />
+					<RichText :text="message"
+						:arguments="richParameters"
+						:autolink="true"
+						:reference-limit="10" />
 					<!-- Displays only the "see results" button with the results modal -->
 					<Poll :id="messageParameters.poll.id"
 						:poll-name="messageParameters.poll.name"
@@ -64,11 +70,17 @@ the main body of the message as well as a quote.
 						:show-as-button="true" />
 				</div>
 				<div v-else-if="isDeletedMessage" class="message-body__main__text deleted-message">
-					<RichText :text="message" :arguments="richParameters" :autolink="true" />
+					<RichText :text="message"
+						:arguments="richParameters"
+						:autolink="true"
+						:reference-limit="10" />
 				</div>
 				<div v-else class="message-body__main__text" :class="{'system-message': isSystemMessage}">
 					<Quote v-if="parent" :parent-id="parent" v-bind="quote" />
-					<RichText :text="message" :arguments="richParameters" :autolink="true" />
+					<RichText :text="message"
+						:arguments="richParameters"
+						:autolink="true"
+						:reference-limit="10" />
 				</div>
 				<div v-if="!isDeletedMessage" class="message-body__main__right">
 					<span v-tooltip.auto="messageDate"
@@ -187,7 +199,7 @@ import DeckCard from './MessagePart/DeckCard.vue'
 import DefaultParameter from './MessagePart/DefaultParameter.vue'
 import FilePreview from './MessagePart/FilePreview.vue'
 import Mention from './MessagePart/Mention.vue'
-import RichText from '@juliushaertl/vue-richtext'
+import RichText from '@nextcloud/vue-richtext'
 import AlertCircle from 'vue-material-design-icons/AlertCircle.vue'
 import Check from 'vue-material-design-icons/Check.vue'
 import CheckAll from 'vue-material-design-icons/CheckAll.vue'
@@ -811,6 +823,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@nextcloud/vue-richtext/dist/style.css';
 @import '../../../../assets/variables';
 
 .message:hover .normal-message-body {
@@ -836,6 +849,7 @@ export default {
 		min-width: 100%;
 		&__text {
 			flex: 0 1 600px;
+			max-width: 600px;
 			color: var(--color-text-light);
 			.single-emoji {
 				font-size: 250%;
@@ -866,6 +880,10 @@ export default {
 			::v-deep .rich-text--wrapper {
 				white-space: pre-wrap;
 				word-break: break-word;
+
+				.rich-text--reference-widget {
+					width: calc(100% + 132px);
+				}
 			}
 
 			&--quote {
diff --git a/src/components/Quote.vue b/src/components/Quote.vue
index eb868f1a6..dd361b6e7 100644
--- a/src/components/Quote.vue
+++ b/src/components/Quote.vue
@@ -59,7 +59,7 @@ components.
 <script>
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import Close from 'vue-material-design-icons/Close.vue'
-import RichText from '@juliushaertl/vue-richtext'
+import RichText from '@nextcloud/vue-richtext'
 import FilePreview from './MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue'
 import DefaultParameter from './MessagesList/MessagesGroup/Message/MessagePart/DefaultParameter.vue'
 import { EventBus } from '../services/EventBus.js'
diff --git a/webpack.js b/webpack.js
index bdf24fa99..0ed882d69 100644
--- a/webpack.js
+++ b/webpack.js
@@ -23,7 +23,7 @@ webpackConfig.output.assetModuleFilename = '[name][ext]?v=[contenthash]'
 
 // Edit JS rule
 webpackRules.RULE_JS.exclude = BabelLoaderExcludeNodeModulesExcept([
-	'@juliushaertl/vue-richtext',
+	'@nextcloud/vue-richtext',
 	'@nextcloud/event-bus',
 	'@nextcloud/vue-dashboard',
 	'ansi-regex',