From 7f8d45e2c61aef395cc7ffc3869215e46d33c20a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?= Date: Wed, 22 Sep 2021 21:44:12 +0200 Subject: [PATCH] Unify linkify usage, move to linkify-string MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Raimund Schlüßler --- package-lock.json | 34 +++++++++++++------- package.json | 2 +- src/components/AppSidebar/AppSidebar.vue | 1 + src/directives/Linkify/index.js | 6 ++-- src/mixins/richEditor/index.js | 11 ++----- src/utils/Linkify.js | 41 ++++++++++++++++++++++++ 6 files changed, 69 insertions(+), 26 deletions(-) create mode 100644 src/utils/Linkify.js diff --git a/package-lock.json b/package-lock.json index d21ab35fe6..a2b2f56063 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,7 +23,7 @@ "emoji-mart-vue-fast": "^7.0.7", "escape-html": "^1.0.3", "hammerjs": "^2.0.8", - "linkifyjs": "~2.1.9", + "linkify-string": "^3.0.2", "md5": "^2.2.1", "splitpanes": "^2.3.6", "string-length": "^5.0.0", @@ -22473,16 +22473,20 @@ "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=", "dev": true }, - "node_modules/linkifyjs": { - "version": "2.1.9", - "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-2.1.9.tgz", - "integrity": "sha512-74ivurkK6WHvHFozVaGtQWV38FzBwSTGNmJolEgFp7QgR2bl6ArUWlvT4GcHKbPe1z3nWYi+VUdDZk16zDOVug==", + "node_modules/linkify-string": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/linkify-string/-/linkify-string-3.0.2.tgz", + "integrity": "sha512-e6sa4WYslcwuNA0ciRo7KPAb4VpTIOxsGPAXeSR8XlORtKak8WMleuvrt5iRZwulHAd6dI+BO7b94lNW8lbMUQ==", "peerDependencies": { - "jquery": ">= 1.11.0", - "react": ">= 0.14.0", - "react-dom": ">= 0.14.0" + "linkifyjs": "^3.0.0" } }, + "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==", + "peer": true + }, "node_modules/listify": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/listify/-/listify-1.0.3.tgz", @@ -52438,12 +52442,18 @@ "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=", "dev": true }, - "linkifyjs": { - "version": "2.1.9", - "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-2.1.9.tgz", - "integrity": "sha512-74ivurkK6WHvHFozVaGtQWV38FzBwSTGNmJolEgFp7QgR2bl6ArUWlvT4GcHKbPe1z3nWYi+VUdDZk16zDOVug==", + "linkify-string": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/linkify-string/-/linkify-string-3.0.2.tgz", + "integrity": "sha512-e6sa4WYslcwuNA0ciRo7KPAb4VpTIOxsGPAXeSR8XlORtKak8WMleuvrt5iRZwulHAd6dI+BO7b94lNW8lbMUQ==", "requires": {} }, + "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==", + "peer": true + }, "listify": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/listify/-/listify-1.0.3.tgz", diff --git a/package.json b/package.json index d6a69fd112..09f992d9bd 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ "emoji-mart-vue-fast": "^7.0.7", "escape-html": "^1.0.3", "hammerjs": "^2.0.8", - "linkifyjs": "~2.1.9", + "linkify-string": "^3.0.2", "md5": "^2.2.1", "splitpanes": "^2.3.6", "string-length": "^5.0.0", diff --git a/src/components/AppSidebar/AppSidebar.vue b/src/components/AppSidebar/AppSidebar.vue index 1caf483ebf..5e5ae1ae58 100644 --- a/src/components/AppSidebar/AppSidebar.vue +++ b/src/components/AppSidebar/AppSidebar.vue @@ -745,6 +745,7 @@ $top-buttons-spacing: 6px; &::v-deep .linkified { cursor: pointer; text-decoration: underline; + margin: 0; } } diff --git a/src/directives/Linkify/index.js b/src/directives/Linkify/index.js index 3c74cb6ba8..f9d7f08a5c 100644 --- a/src/directives/Linkify/index.js +++ b/src/directives/Linkify/index.js @@ -16,15 +16,13 @@ * License along with this library. If not, see . * */ -import linkifyStr from 'linkifyjs/string' +import Linkify from '../../utils/Linkify' // Use function shorthand for same behavior on bind and update // https://vuejs.org/v2/guide/custom-directive.html#Function-Shorthand export const directive = function(el, binding) { if (binding.value?.linkify === true) { - el.innerHTML = linkifyStr(binding.value.text, { - defaultProtocol: 'https', - }) + el.innerHTML = Linkify(binding.value.text) } } diff --git a/src/mixins/richEditor/index.js b/src/mixins/richEditor/index.js index cd1a0e9b20..1f03825b81 100644 --- a/src/mixins/richEditor/index.js +++ b/src/mixins/richEditor/index.js @@ -21,7 +21,7 @@ */ import escapeHtml from 'escape-html' -import linkifyStr from 'linkifyjs/string' +import Linkify from '../../utils/Linkify' import stripTags from 'striptags' import Vue from 'vue' @@ -63,14 +63,7 @@ export default { // on the the uneven indexes. We only want to generate the mentions html if (!part.startsWith('@')) { // This part doesn't contain a mention, let's make sure links are parsed - return linkifyStr(part, { - defaultProtocol: 'https', - target: '_blank', - className: 'external', - attributes: { - rel: 'nofollow noopener noreferrer', - }, - }) + return Linkify(part) } // Extracting the id, nuking the " and @ diff --git a/src/utils/Linkify.js b/src/utils/Linkify.js new file mode 100644 index 0000000000..6d72c8162a --- /dev/null +++ b/src/utils/Linkify.js @@ -0,0 +1,41 @@ +/** + * @copyright Copyright (c) 2021 Raimund Schlüßler + * + * @author Raimund Schlüßler + * + * @license GNU AGPL version 3 or any later version + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program 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 program. If not, see . + * + */ +import linkifyStr from 'linkify-string' + +/** + * Linkify text + * + * @param {string} text The text to linkify + * @returns {string} The linkified string + */ +const Linkify = (text) => { + return linkifyStr(text, { + defaultProtocol: 'https', + target: '_blank', + className: 'external linkified', + attributes: { + rel: 'nofollow noopener noreferrer', + }, + }) +} + +export default Linkify