Use linkify directive from @nextcloud/vue

Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>

package-lock.json

@@ -36,8 +36,6 @@
 				"css-color-names": "^1.0.1",
 				"debounce": "^1.2.1",
 				"jstz": "^2.1.1",
-				"linkify-string": "^3.0.2",
-				"linkifyjs": "^3.0.1",
 				"md5": "^2.3.0",
 				"p-limit": "^4.0.0",
 				"v-tooltip": "^2.1.3",
@@ -12456,7 +12454,8 @@
 		"node_modules/linkifyjs": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-3.0.1.tgz",
-			"integrity": "sha512-HwXVwdNH1wESBfo2sH7Bkl+ywzbGA3+uJEfhquCyi/bMCa49bFUvd/re1NT1Lox/5jdnpQXzI9O/jykit71idg=="
+			"integrity": "sha512-HwXVwdNH1wESBfo2sH7Bkl+ywzbGA3+uJEfhquCyi/bMCa49bFUvd/re1NT1Lox/5jdnpQXzI9O/jykit71idg==",
+			"peer": true
 		},
 		"node_modules/load-json-file": {
 			"version": "4.0.0",
@@ -29537,7 +29536,8 @@
 		"linkifyjs": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-3.0.1.tgz",
-			"integrity": "sha512-HwXVwdNH1wESBfo2sH7Bkl+ywzbGA3+uJEfhquCyi/bMCa49bFUvd/re1NT1Lox/5jdnpQXzI9O/jykit71idg=="
+			"integrity": "sha512-HwXVwdNH1wESBfo2sH7Bkl+ywzbGA3+uJEfhquCyi/bMCa49bFUvd/re1NT1Lox/5jdnpQXzI9O/jykit71idg==",
+			"peer": true
 		},
 		"load-json-file": {
 			"version": "4.0.0",

package.json

@@ -62,8 +62,6 @@
 		"css-color-names": "^1.0.1",
 		"debounce": "^1.2.1",
 		"jstz": "^2.1.1",
-		"linkify-string": "^3.0.2",
-		"linkifyjs": "^3.0.1",
 		"md5": "^2.3.0",
 		"p-limit": "^4.0.0",
 		"v-tooltip": "^2.1.3",

src/components/Editor/Properties/PropertyText.vue

@@ -42,7 +42,7 @@
 			<!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
 			<div
 				v-else
-				v-linkify="value" />
+				v-linkify="{ text: value, linkify: true }" />
 		</div>
 
 		<div
@@ -59,7 +59,7 @@
 <script>
 import autosize from '../../../directives/autosize.js'
 import PropertyMixin from '../../../mixins/PropertyMixin'
-import { linkify } from '../../../directives/linkify.js'
+import linkify from '@nextcloud/vue/dist/Directives/Linkify'
 
 import InformationVariant from 'vue-material-design-icons/InformationVariant.vue'
 

src/directives/linkify.js

@@ -1,45 +0,0 @@
-/**
- * Nextcloud - Tasks
- *
- * @author Raimund Schlüßler
- * @author Richard Steinmetz
- *
- * @copyright 2019 Raimund Schlüßler <raimund.schluessler@mailbox.org>
- *
- * @license AGPL-3.0-or-later
- *
- * This library is free software; you can redistribute it and/or
- * modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or any later version.
- *
- * This library is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU AFFERO GENERAL PUBLIC LICENSE for more details.
- *
- * You should have received a copy of the GNU Affero General Public
- * License along with this library.  If not, see <http://www.gnu.org/licenses/>.
- *
- */
-import linkifyStr from 'linkify-string'
-
-/**
- * Linkify the content of text node
- *
- * (This is the shorthand directive syntax for bind and update)
- *
- * @param {Node} el The element the directive is bound to
- * @param {object} binding  An object containing various properties
- */
-const linkify = (el, binding) => {
-	el.innerHTML = linkifyStr(binding.value, {
-		defaultProtocol: 'https',
-		className: 'linkified',
-		target: (href, type) => type === 'url' && '_blank',
-	})
-}
-
-export {
-	linkify,
-}